diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 5077bef..3fd3f33 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -58,6 +58,8 @@
       <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns"/>
+        <!--复选框列-->
+        <el-table-column v-if="options && options.needMultSelect" align="center" type="selection" width="55"/>
         <!--序号列-->
         <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
         <!--内容列, 若columns存在且长度大于0-->
@@ -140,7 +142,8 @@
       type: Object,
       default: function() {
         return {
-          needIndex: true // 是否需要序号列
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
         }
       }
     }, // 配置项

diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 5077bef..3fd3f33 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -58,6 +58,8 @@
       <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns"/>
+        <!--复选框列-->
+        <el-table-column v-if="options && options.needMultSelect" align="center" type="selection" width="55"/>
         <!--序号列-->
         <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
         <!--内容列, 若columns存在且长度大于0-->
@@ -140,7 +142,8 @@
       type: Object,
       default: function() {
         return {
-          needIndex: true // 是否需要序号列
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
         }
       }
     }, // 配置项
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
index 1175911..b5e8442 100644
--- a/src/components/SearchArea/SearchArea.vue
+++ b/src/components/SearchArea/SearchArea.vue
@@ -16,6 +16,7 @@
       <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
       <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
       <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns-seperate"/>
     </div>
     <!-- 弹出框式高级检索 -->
     <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>

diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 5077bef..3fd3f33 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -58,6 +58,8 @@
       <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns"/>
+        <!--复选框列-->
+        <el-table-column v-if="options && options.needMultSelect" align="center" type="selection" width="55"/>
         <!--序号列-->
         <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
         <!--内容列, 若columns存在且长度大于0-->
@@ -140,7 +142,8 @@
       type: Object,
       default: function() {
         return {
-          needIndex: true // 是否需要序号列
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
         }
       }
     }, // 配置项
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
index 1175911..b5e8442 100644
--- a/src/components/SearchArea/SearchArea.vue
+++ b/src/components/SearchArea/SearchArea.vue
@@ -16,6 +16,7 @@
       <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
       <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
       <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns-seperate"/>
     </div>
     <!-- 弹出框式高级检索 -->
     <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
index 84bdb9f..c192d79 100644
--- a/src/layout/components/AppHeader.vue
+++ b/src/layout/components/AppHeader.vue
@@ -1,6 +1,14 @@
 <template>
   <el-header class="app-header">
     <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown v-if="showChangeSys" class="systemSelect" size="medium" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
     <el-dropdown class="dropdown-container" trigger="click">
       <div class="dropdown-wrapper">
         <span style="line-height:50px;">欢迎您，{{ name }}</span>
@@ -33,6 +41,7 @@
   data() {
     return {
       title: this.baseConfig.title, // 标题
+      showChangeSys: !this.baseConfig.singleSys, // 是否显示切换系统菜单
       name: this.$store.getters.name, // 用户姓名
       showSetPwd: false // 是否显示修改密码按钮
     }
@@ -40,7 +49,9 @@
   computed: {
     ...mapGetters([
       'sidebar',
-      'avatar'
+      'avatar',
+      'currentSystem',
+      'systems'
     ])
   },
   methods: {
@@ -55,6 +66,38 @@
     resetPwd() {
       this.showSetPwd = true
       this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      const url = this.baseConfig.mainPage
+      window.location.href = url
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      const params1 = `?token=${this.$store.getters.token}`
+      const params = `?sys=${command.name}&url=${command.url}&code=${command.code}&token=${this.$store.getters.token}`
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params1
+        } else {
+          window.open(command.url + params1, '_blank')
+        }
+      } else {
+        // 取token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = this.baseConfig.mainPage + command.url + params
+        } else {
+          window.open(this.baseConfig.mainPage + command.url + params, '_blank')
+        }
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
     }
   }
 }

diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 5077bef..3fd3f33 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -58,6 +58,8 @@
       <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns"/>
+        <!--复选框列-->
+        <el-table-column v-if="options && options.needMultSelect" align="center" type="selection" width="55"/>
         <!--序号列-->
         <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
         <!--内容列, 若columns存在且长度大于0-->
@@ -140,7 +142,8 @@
       type: Object,
       default: function() {
         return {
-          needIndex: true // 是否需要序号列
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
         }
       }
     }, // 配置项
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
index 1175911..b5e8442 100644
--- a/src/components/SearchArea/SearchArea.vue
+++ b/src/components/SearchArea/SearchArea.vue
@@ -16,6 +16,7 @@
       <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
       <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
       <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns-seperate"/>
     </div>
     <!-- 弹出框式高级检索 -->
     <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
index 84bdb9f..c192d79 100644
--- a/src/layout/components/AppHeader.vue
+++ b/src/layout/components/AppHeader.vue
@@ -1,6 +1,14 @@
 <template>
   <el-header class="app-header">
     <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown v-if="showChangeSys" class="systemSelect" size="medium" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
     <el-dropdown class="dropdown-container" trigger="click">
       <div class="dropdown-wrapper">
         <span style="line-height:50px;">欢迎您，{{ name }}</span>
@@ -33,6 +41,7 @@
   data() {
     return {
       title: this.baseConfig.title, // 标题
+      showChangeSys: !this.baseConfig.singleSys, // 是否显示切换系统菜单
       name: this.$store.getters.name, // 用户姓名
       showSetPwd: false // 是否显示修改密码按钮
     }
@@ -40,7 +49,9 @@
   computed: {
     ...mapGetters([
       'sidebar',
-      'avatar'
+      'avatar',
+      'currentSystem',
+      'systems'
     ])
   },
   methods: {
@@ -55,6 +66,38 @@
     resetPwd() {
       this.showSetPwd = true
       this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      const url = this.baseConfig.mainPage
+      window.location.href = url
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      const params1 = `?token=${this.$store.getters.token}`
+      const params = `?sys=${command.name}&url=${command.url}&code=${command.code}&token=${this.$store.getters.token}`
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params1
+        } else {
+          window.open(command.url + params1, '_blank')
+        }
+      } else {
+        // 取token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = this.baseConfig.mainPage + command.url + params
+        } else {
+          window.open(this.baseConfig.mainPage + command.url + params, '_blank')
+        }
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
     }
   }
 }
diff --git a/src/permission.js b/src/permission.js
index 69e8233..637373e 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -26,20 +26,13 @@
           // 设置当前子系统为基础资源子系统
           const currentSys = {
             code: 'baseResourse',
-            id: '1189107859077373285',
-            ismenu: '0',
-            levels: 1,
-            name: '智慧照明子系统',
-            num: 0,
-            parentId: '0',
-            resourceType: '02',
-            url: '/baseResourse'
+            name: '智慧照明子系统'
           }
           // 将当前系统信息保存在localStorage中
           store.commit('SET_SYSTEM', currentSys)
           // 远程访问获取权限列表（菜单&按钮）
           store.dispatch('GetMenus', currentSys).then(() => {
-            store.commit('SET_CHANGEFLAG', '0')
+            // store.commit('SET_CHANGEFLAG', '0')
             router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
             next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
           })

diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 5077bef..3fd3f33 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -58,6 +58,8 @@
       <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns"/>
+        <!--复选框列-->
+        <el-table-column v-if="options && options.needMultSelect" align="center" type="selection" width="55"/>
         <!--序号列-->
         <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
         <!--内容列, 若columns存在且长度大于0-->
@@ -140,7 +142,8 @@
       type: Object,
       default: function() {
         return {
-          needIndex: true // 是否需要序号列
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
         }
       }
     }, // 配置项
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
index 1175911..b5e8442 100644
--- a/src/components/SearchArea/SearchArea.vue
+++ b/src/components/SearchArea/SearchArea.vue
@@ -16,6 +16,7 @@
       <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
       <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
       <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns-seperate"/>
     </div>
     <!-- 弹出框式高级检索 -->
     <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
index 84bdb9f..c192d79 100644
--- a/src/layout/components/AppHeader.vue
+++ b/src/layout/components/AppHeader.vue
@@ -1,6 +1,14 @@
 <template>
   <el-header class="app-header">
     <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown v-if="showChangeSys" class="systemSelect" size="medium" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
     <el-dropdown class="dropdown-container" trigger="click">
       <div class="dropdown-wrapper">
         <span style="line-height:50px;">欢迎您，{{ name }}</span>
@@ -33,6 +41,7 @@
   data() {
     return {
       title: this.baseConfig.title, // 标题
+      showChangeSys: !this.baseConfig.singleSys, // 是否显示切换系统菜单
       name: this.$store.getters.name, // 用户姓名
       showSetPwd: false // 是否显示修改密码按钮
     }
@@ -40,7 +49,9 @@
   computed: {
     ...mapGetters([
       'sidebar',
-      'avatar'
+      'avatar',
+      'currentSystem',
+      'systems'
     ])
   },
   methods: {
@@ -55,6 +66,38 @@
     resetPwd() {
       this.showSetPwd = true
       this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      const url = this.baseConfig.mainPage
+      window.location.href = url
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      const params1 = `?token=${this.$store.getters.token}`
+      const params = `?sys=${command.name}&url=${command.url}&code=${command.code}&token=${this.$store.getters.token}`
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params1
+        } else {
+          window.open(command.url + params1, '_blank')
+        }
+      } else {
+        // 取token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = this.baseConfig.mainPage + command.url + params
+        } else {
+          window.open(this.baseConfig.mainPage + command.url + params, '_blank')
+        }
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
     }
   }
 }
diff --git a/src/permission.js b/src/permission.js
index 69e8233..637373e 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -26,20 +26,13 @@
           // 设置当前子系统为基础资源子系统
           const currentSys = {
             code: 'baseResourse',
-            id: '1189107859077373285',
-            ismenu: '0',
-            levels: 1,
-            name: '智慧照明子系统',
-            num: 0,
-            parentId: '0',
-            resourceType: '02',
-            url: '/baseResourse'
+            name: '智慧照明子系统'
           }
           // 将当前系统信息保存在localStorage中
           store.commit('SET_SYSTEM', currentSys)
           // 远程访问获取权限列表（菜单&按钮）
           store.dispatch('GetMenus', currentSys).then(() => {
-            store.commit('SET_CHANGEFLAG', '0')
+            // store.commit('SET_CHANGEFLAG', '0')
             router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
             next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
           })
diff --git a/src/router/index.js b/src/router/index.js
index 32f93ef..b558038 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -49,21 +49,22 @@
   // 404错误页面
   { path: '/404', component: () => import('@/views/errorPage/404'), hidden: true },
   // 401 错误页面
-  { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
-  // 主页
-  {
-    path: '/',
-    component: Layout,
-    redirect: 'dashboard',
-    name: 'Dashboard',
-    // hidden: true,
-    children: [{
-      path: 'dashboard',
-      name: 'Dashboard',
-      component: () => import('@/views/dashboard/index'),
-      meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
-    }]
-  }
+  { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true }
+  // { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
+  // // 主页
+  // {
+  //   path: '/',
+  //   component: Layout,
+  //   redirect: 'dashboard',
+  //   name: 'Dashboard',
+  //   // hidden: true,
+  //   children: [{
+  //     path: 'dashboard',
+  //     name: 'Dashboard',
+  //     component: () => import('@/views/dashboard/index'),
+  //     meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
+  //   }]
+  // }
 ]
 // 实例化vue的时候直挂载constantRouter
 export default new Router({

diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 5077bef..3fd3f33 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -58,6 +58,8 @@
       <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns"/>
+        <!--复选框列-->
+        <el-table-column v-if="options && options.needMultSelect" align="center" type="selection" width="55"/>
         <!--序号列-->
         <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
         <!--内容列, 若columns存在且长度大于0-->
@@ -140,7 +142,8 @@
       type: Object,
       default: function() {
         return {
-          needIndex: true // 是否需要序号列
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
         }
       }
     }, // 配置项
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
index 1175911..b5e8442 100644
--- a/src/components/SearchArea/SearchArea.vue
+++ b/src/components/SearchArea/SearchArea.vue
@@ -16,6 +16,7 @@
       <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
       <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
       <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns-seperate"/>
     </div>
     <!-- 弹出框式高级检索 -->
     <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
index 84bdb9f..c192d79 100644
--- a/src/layout/components/AppHeader.vue
+++ b/src/layout/components/AppHeader.vue
@@ -1,6 +1,14 @@
 <template>
   <el-header class="app-header">
     <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown v-if="showChangeSys" class="systemSelect" size="medium" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
     <el-dropdown class="dropdown-container" trigger="click">
       <div class="dropdown-wrapper">
         <span style="line-height:50px;">欢迎您，{{ name }}</span>
@@ -33,6 +41,7 @@
   data() {
     return {
       title: this.baseConfig.title, // 标题
+      showChangeSys: !this.baseConfig.singleSys, // 是否显示切换系统菜单
       name: this.$store.getters.name, // 用户姓名
       showSetPwd: false // 是否显示修改密码按钮
     }
@@ -40,7 +49,9 @@
   computed: {
     ...mapGetters([
       'sidebar',
-      'avatar'
+      'avatar',
+      'currentSystem',
+      'systems'
     ])
   },
   methods: {
@@ -55,6 +66,38 @@
     resetPwd() {
       this.showSetPwd = true
       this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      const url = this.baseConfig.mainPage
+      window.location.href = url
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      const params1 = `?token=${this.$store.getters.token}`
+      const params = `?sys=${command.name}&url=${command.url}&code=${command.code}&token=${this.$store.getters.token}`
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params1
+        } else {
+          window.open(command.url + params1, '_blank')
+        }
+      } else {
+        // 取token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = this.baseConfig.mainPage + command.url + params
+        } else {
+          window.open(this.baseConfig.mainPage + command.url + params, '_blank')
+        }
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
     }
   }
 }
diff --git a/src/permission.js b/src/permission.js
index 69e8233..637373e 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -26,20 +26,13 @@
           // 设置当前子系统为基础资源子系统
           const currentSys = {
             code: 'baseResourse',
-            id: '1189107859077373285',
-            ismenu: '0',
-            levels: 1,
-            name: '智慧照明子系统',
-            num: 0,
-            parentId: '0',
-            resourceType: '02',
-            url: '/baseResourse'
+            name: '智慧照明子系统'
           }
           // 将当前系统信息保存在localStorage中
           store.commit('SET_SYSTEM', currentSys)
           // 远程访问获取权限列表（菜单&按钮）
           store.dispatch('GetMenus', currentSys).then(() => {
-            store.commit('SET_CHANGEFLAG', '0')
+            // store.commit('SET_CHANGEFLAG', '0')
             router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
             next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
           })
diff --git a/src/router/index.js b/src/router/index.js
index 32f93ef..b558038 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -49,21 +49,22 @@
   // 404错误页面
   { path: '/404', component: () => import('@/views/errorPage/404'), hidden: true },
   // 401 错误页面
-  { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
-  // 主页
-  {
-    path: '/',
-    component: Layout,
-    redirect: 'dashboard',
-    name: 'Dashboard',
-    // hidden: true,
-    children: [{
-      path: 'dashboard',
-      name: 'Dashboard',
-      component: () => import('@/views/dashboard/index'),
-      meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
-    }]
-  }
+  { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true }
+  // { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
+  // // 主页
+  // {
+  //   path: '/',
+  //   component: Layout,
+  //   redirect: 'dashboard',
+  //   name: 'Dashboard',
+  //   // hidden: true,
+  //   children: [{
+  //     path: 'dashboard',
+  //     name: 'Dashboard',
+  //     component: () => import('@/views/dashboard/index'),
+  //     meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
+  //   }]
+  // }
 ]
 // 实例化vue的时候直挂载constantRouter
 export default new Router({
diff --git a/src/views/alarmManage/alarmRule.vue b/src/views/alarmManage/alarmRule.vue
index 888a4d1..11469a2 100644
--- a/src/views/alarmManage/alarmRule.vue
+++ b/src/views/alarmManage/alarmRule.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
       <el-tab-pane label="路灯" name="lamp">
         <lamp-type-list ref="lamp"/>
@@ -8,7 +8,7 @@
         <lampbox-type-list ref="box"/>
       </el-tab-pane>
     </el-tabs>
-  </div>
+  </app-container>
 </template>
 
 <script>

diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 5077bef..3fd3f33 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -58,6 +58,8 @@
       <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns"/>
+        <!--复选框列-->
+        <el-table-column v-if="options && options.needMultSelect" align="center" type="selection" width="55"/>
         <!--序号列-->
         <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
         <!--内容列, 若columns存在且长度大于0-->
@@ -140,7 +142,8 @@
       type: Object,
       default: function() {
         return {
-          needIndex: true // 是否需要序号列
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
         }
       }
     }, // 配置项
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
index 1175911..b5e8442 100644
--- a/src/components/SearchArea/SearchArea.vue
+++ b/src/components/SearchArea/SearchArea.vue
@@ -16,6 +16,7 @@
       <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
       <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
       <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns-seperate"/>
     </div>
     <!-- 弹出框式高级检索 -->
     <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
index 84bdb9f..c192d79 100644
--- a/src/layout/components/AppHeader.vue
+++ b/src/layout/components/AppHeader.vue
@@ -1,6 +1,14 @@
 <template>
   <el-header class="app-header">
     <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown v-if="showChangeSys" class="systemSelect" size="medium" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
     <el-dropdown class="dropdown-container" trigger="click">
       <div class="dropdown-wrapper">
         <span style="line-height:50px;">欢迎您，{{ name }}</span>
@@ -33,6 +41,7 @@
   data() {
     return {
       title: this.baseConfig.title, // 标题
+      showChangeSys: !this.baseConfig.singleSys, // 是否显示切换系统菜单
       name: this.$store.getters.name, // 用户姓名
       showSetPwd: false // 是否显示修改密码按钮
     }
@@ -40,7 +49,9 @@
   computed: {
     ...mapGetters([
       'sidebar',
-      'avatar'
+      'avatar',
+      'currentSystem',
+      'systems'
     ])
   },
   methods: {
@@ -55,6 +66,38 @@
     resetPwd() {
       this.showSetPwd = true
       this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      const url = this.baseConfig.mainPage
+      window.location.href = url
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      const params1 = `?token=${this.$store.getters.token}`
+      const params = `?sys=${command.name}&url=${command.url}&code=${command.code}&token=${this.$store.getters.token}`
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params1
+        } else {
+          window.open(command.url + params1, '_blank')
+        }
+      } else {
+        // 取token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = this.baseConfig.mainPage + command.url + params
+        } else {
+          window.open(this.baseConfig.mainPage + command.url + params, '_blank')
+        }
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
     }
   }
 }
diff --git a/src/permission.js b/src/permission.js
index 69e8233..637373e 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -26,20 +26,13 @@
           // 设置当前子系统为基础资源子系统
           const currentSys = {
             code: 'baseResourse',
-            id: '1189107859077373285',
-            ismenu: '0',
-            levels: 1,
-            name: '智慧照明子系统',
-            num: 0,
-            parentId: '0',
-            resourceType: '02',
-            url: '/baseResourse'
+            name: '智慧照明子系统'
           }
           // 将当前系统信息保存在localStorage中
           store.commit('SET_SYSTEM', currentSys)
           // 远程访问获取权限列表（菜单&按钮）
           store.dispatch('GetMenus', currentSys).then(() => {
-            store.commit('SET_CHANGEFLAG', '0')
+            // store.commit('SET_CHANGEFLAG', '0')
             router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
             next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
           })
diff --git a/src/router/index.js b/src/router/index.js
index 32f93ef..b558038 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -49,21 +49,22 @@
   // 404错误页面
   { path: '/404', component: () => import('@/views/errorPage/404'), hidden: true },
   // 401 错误页面
-  { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
-  // 主页
-  {
-    path: '/',
-    component: Layout,
-    redirect: 'dashboard',
-    name: 'Dashboard',
-    // hidden: true,
-    children: [{
-      path: 'dashboard',
-      name: 'Dashboard',
-      component: () => import('@/views/dashboard/index'),
-      meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
-    }]
-  }
+  { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true }
+  // { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
+  // // 主页
+  // {
+  //   path: '/',
+  //   component: Layout,
+  //   redirect: 'dashboard',
+  //   name: 'Dashboard',
+  //   // hidden: true,
+  //   children: [{
+  //     path: 'dashboard',
+  //     name: 'Dashboard',
+  //     component: () => import('@/views/dashboard/index'),
+  //     meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
+  //   }]
+  // }
 ]
 // 实例化vue的时候直挂载constantRouter
 export default new Router({
diff --git a/src/views/alarmManage/alarmRule.vue b/src/views/alarmManage/alarmRule.vue
index 888a4d1..11469a2 100644
--- a/src/views/alarmManage/alarmRule.vue
+++ b/src/views/alarmManage/alarmRule.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
       <el-tab-pane label="路灯" name="lamp">
         <lamp-type-list ref="lamp"/>
@@ -8,7 +8,7 @@
         <lampbox-type-list ref="box"/>
       </el-tab-pane>
     </el-tabs>
-  </div>
+  </app-container>
 </template>
 
 <script>
diff --git a/src/views/alarmManage/components/alarmDetail.vue b/src/views/alarmManage/components/alarmDetail.vue
index 9c68377..d598779 100644
--- a/src/views/alarmManage/components/alarmDetail.vue
+++ b/src/views/alarmManage/components/alarmDetail.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :close-on-click-modal="false" :visible.sync="dialogFormVisible" title="报警详情" append-to-body>
-    <el-form ref="dataForm" :model="alarmForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :model="alarmForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="10">
           <el-form-item label="设备名称" prop="deviceName">

diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 5077bef..3fd3f33 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -58,6 +58,8 @@
       <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns"/>
+        <!--复选框列-->
+        <el-table-column v-if="options && options.needMultSelect" align="center" type="selection" width="55"/>
         <!--序号列-->
         <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
         <!--内容列, 若columns存在且长度大于0-->
@@ -140,7 +142,8 @@
       type: Object,
       default: function() {
         return {
-          needIndex: true // 是否需要序号列
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
         }
       }
     }, // 配置项
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
index 1175911..b5e8442 100644
--- a/src/components/SearchArea/SearchArea.vue
+++ b/src/components/SearchArea/SearchArea.vue
@@ -16,6 +16,7 @@
       <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
       <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
       <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns-seperate"/>
     </div>
     <!-- 弹出框式高级检索 -->
     <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
index 84bdb9f..c192d79 100644
--- a/src/layout/components/AppHeader.vue
+++ b/src/layout/components/AppHeader.vue
@@ -1,6 +1,14 @@
 <template>
   <el-header class="app-header">
     <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown v-if="showChangeSys" class="systemSelect" size="medium" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
     <el-dropdown class="dropdown-container" trigger="click">
       <div class="dropdown-wrapper">
         <span style="line-height:50px;">欢迎您，{{ name }}</span>
@@ -33,6 +41,7 @@
   data() {
     return {
       title: this.baseConfig.title, // 标题
+      showChangeSys: !this.baseConfig.singleSys, // 是否显示切换系统菜单
       name: this.$store.getters.name, // 用户姓名
       showSetPwd: false // 是否显示修改密码按钮
     }
@@ -40,7 +49,9 @@
   computed: {
     ...mapGetters([
       'sidebar',
-      'avatar'
+      'avatar',
+      'currentSystem',
+      'systems'
     ])
   },
   methods: {
@@ -55,6 +66,38 @@
     resetPwd() {
       this.showSetPwd = true
       this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      const url = this.baseConfig.mainPage
+      window.location.href = url
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      const params1 = `?token=${this.$store.getters.token}`
+      const params = `?sys=${command.name}&url=${command.url}&code=${command.code}&token=${this.$store.getters.token}`
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params1
+        } else {
+          window.open(command.url + params1, '_blank')
+        }
+      } else {
+        // 取token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = this.baseConfig.mainPage + command.url + params
+        } else {
+          window.open(this.baseConfig.mainPage + command.url + params, '_blank')
+        }
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
     }
   }
 }
diff --git a/src/permission.js b/src/permission.js
index 69e8233..637373e 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -26,20 +26,13 @@
           // 设置当前子系统为基础资源子系统
           const currentSys = {
             code: 'baseResourse',
-            id: '1189107859077373285',
-            ismenu: '0',
-            levels: 1,
-            name: '智慧照明子系统',
-            num: 0,
-            parentId: '0',
-            resourceType: '02',
-            url: '/baseResourse'
+            name: '智慧照明子系统'
           }
           // 将当前系统信息保存在localStorage中
           store.commit('SET_SYSTEM', currentSys)
           // 远程访问获取权限列表（菜单&按钮）
           store.dispatch('GetMenus', currentSys).then(() => {
-            store.commit('SET_CHANGEFLAG', '0')
+            // store.commit('SET_CHANGEFLAG', '0')
             router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
             next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
           })
diff --git a/src/router/index.js b/src/router/index.js
index 32f93ef..b558038 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -49,21 +49,22 @@
   // 404错误页面
   { path: '/404', component: () => import('@/views/errorPage/404'), hidden: true },
   // 401 错误页面
-  { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
-  // 主页
-  {
-    path: '/',
-    component: Layout,
-    redirect: 'dashboard',
-    name: 'Dashboard',
-    // hidden: true,
-    children: [{
-      path: 'dashboard',
-      name: 'Dashboard',
-      component: () => import('@/views/dashboard/index'),
-      meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
-    }]
-  }
+  { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true }
+  // { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
+  // // 主页
+  // {
+  //   path: '/',
+  //   component: Layout,
+  //   redirect: 'dashboard',
+  //   name: 'Dashboard',
+  //   // hidden: true,
+  //   children: [{
+  //     path: 'dashboard',
+  //     name: 'Dashboard',
+  //     component: () => import('@/views/dashboard/index'),
+  //     meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
+  //   }]
+  // }
 ]
 // 实例化vue的时候直挂载constantRouter
 export default new Router({
diff --git a/src/views/alarmManage/alarmRule.vue b/src/views/alarmManage/alarmRule.vue
index 888a4d1..11469a2 100644
--- a/src/views/alarmManage/alarmRule.vue
+++ b/src/views/alarmManage/alarmRule.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
       <el-tab-pane label="路灯" name="lamp">
         <lamp-type-list ref="lamp"/>
@@ -8,7 +8,7 @@
         <lampbox-type-list ref="box"/>
       </el-tab-pane>
     </el-tabs>
-  </div>
+  </app-container>
 </template>
 
 <script>
diff --git a/src/views/alarmManage/components/alarmDetail.vue b/src/views/alarmManage/components/alarmDetail.vue
index 9c68377..d598779 100644
--- a/src/views/alarmManage/components/alarmDetail.vue
+++ b/src/views/alarmManage/components/alarmDetail.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :close-on-click-modal="false" :visible.sync="dialogFormVisible" title="报警详情" append-to-body>
-    <el-form ref="dataForm" :model="alarmForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :model="alarmForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="10">
           <el-form-item label="设备名称" prop="deviceName">
diff --git a/src/views/alarmManage/lampType/editLampType.vue b/src/views/alarmManage/lampType/editLampType.vue
index 8c3e37a..8e5fc23 100644
--- a/src/views/alarmManage/lampType/editLampType.vue
+++ b/src/views/alarmManage/lampType/editLampType.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="typeForm" label-well-code="right" label-width="200px">
+    <el-form ref="dataForm" :rules="rules" :model="typeForm" size="small" label-well-code="right" label-width="200px">
       <el-row :gutter="20">
         <el-col :span="20">
           <el-form-item label="路灯类型" prop="typeName">

diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 5077bef..3fd3f33 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -58,6 +58,8 @@
       <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns"/>
+        <!--复选框列-->
+        <el-table-column v-if="options && options.needMultSelect" align="center" type="selection" width="55"/>
         <!--序号列-->
         <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
         <!--内容列, 若columns存在且长度大于0-->
@@ -140,7 +142,8 @@
       type: Object,
       default: function() {
         return {
-          needIndex: true // 是否需要序号列
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
         }
       }
     }, // 配置项
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
index 1175911..b5e8442 100644
--- a/src/components/SearchArea/SearchArea.vue
+++ b/src/components/SearchArea/SearchArea.vue
@@ -16,6 +16,7 @@
       <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
       <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
       <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns-seperate"/>
     </div>
     <!-- 弹出框式高级检索 -->
     <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
index 84bdb9f..c192d79 100644
--- a/src/layout/components/AppHeader.vue
+++ b/src/layout/components/AppHeader.vue
@@ -1,6 +1,14 @@
 <template>
   <el-header class="app-header">
     <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown v-if="showChangeSys" class="systemSelect" size="medium" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
     <el-dropdown class="dropdown-container" trigger="click">
       <div class="dropdown-wrapper">
         <span style="line-height:50px;">欢迎您，{{ name }}</span>
@@ -33,6 +41,7 @@
   data() {
     return {
       title: this.baseConfig.title, // 标题
+      showChangeSys: !this.baseConfig.singleSys, // 是否显示切换系统菜单
       name: this.$store.getters.name, // 用户姓名
       showSetPwd: false // 是否显示修改密码按钮
     }
@@ -40,7 +49,9 @@
   computed: {
     ...mapGetters([
       'sidebar',
-      'avatar'
+      'avatar',
+      'currentSystem',
+      'systems'
     ])
   },
   methods: {
@@ -55,6 +66,38 @@
     resetPwd() {
       this.showSetPwd = true
       this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      const url = this.baseConfig.mainPage
+      window.location.href = url
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      const params1 = `?token=${this.$store.getters.token}`
+      const params = `?sys=${command.name}&url=${command.url}&code=${command.code}&token=${this.$store.getters.token}`
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params1
+        } else {
+          window.open(command.url + params1, '_blank')
+        }
+      } else {
+        // 取token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = this.baseConfig.mainPage + command.url + params
+        } else {
+          window.open(this.baseConfig.mainPage + command.url + params, '_blank')
+        }
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
     }
   }
 }
diff --git a/src/permission.js b/src/permission.js
index 69e8233..637373e 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -26,20 +26,13 @@
           // 设置当前子系统为基础资源子系统
           const currentSys = {
             code: 'baseResourse',
-            id: '1189107859077373285',
-            ismenu: '0',
-            levels: 1,
-            name: '智慧照明子系统',
-            num: 0,
-            parentId: '0',
-            resourceType: '02',
-            url: '/baseResourse'
+            name: '智慧照明子系统'
           }
           // 将当前系统信息保存在localStorage中
           store.commit('SET_SYSTEM', currentSys)
           // 远程访问获取权限列表（菜单&按钮）
           store.dispatch('GetMenus', currentSys).then(() => {
-            store.commit('SET_CHANGEFLAG', '0')
+            // store.commit('SET_CHANGEFLAG', '0')
             router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
             next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
           })
diff --git a/src/router/index.js b/src/router/index.js
index 32f93ef..b558038 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -49,21 +49,22 @@
   // 404错误页面
   { path: '/404', component: () => import('@/views/errorPage/404'), hidden: true },
   // 401 错误页面
-  { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
-  // 主页
-  {
-    path: '/',
-    component: Layout,
-    redirect: 'dashboard',
-    name: 'Dashboard',
-    // hidden: true,
-    children: [{
-      path: 'dashboard',
-      name: 'Dashboard',
-      component: () => import('@/views/dashboard/index'),
-      meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
-    }]
-  }
+  { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true }
+  // { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
+  // // 主页
+  // {
+  //   path: '/',
+  //   component: Layout,
+  //   redirect: 'dashboard',
+  //   name: 'Dashboard',
+  //   // hidden: true,
+  //   children: [{
+  //     path: 'dashboard',
+  //     name: 'Dashboard',
+  //     component: () => import('@/views/dashboard/index'),
+  //     meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
+  //   }]
+  // }
 ]
 // 实例化vue的时候直挂载constantRouter
 export default new Router({
diff --git a/src/views/alarmManage/alarmRule.vue b/src/views/alarmManage/alarmRule.vue
index 888a4d1..11469a2 100644
--- a/src/views/alarmManage/alarmRule.vue
+++ b/src/views/alarmManage/alarmRule.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
       <el-tab-pane label="路灯" name="lamp">
         <lamp-type-list ref="lamp"/>
@@ -8,7 +8,7 @@
         <lampbox-type-list ref="box"/>
       </el-tab-pane>
     </el-tabs>
-  </div>
+  </app-container>
 </template>
 
 <script>
diff --git a/src/views/alarmManage/components/alarmDetail.vue b/src/views/alarmManage/components/alarmDetail.vue
index 9c68377..d598779 100644
--- a/src/views/alarmManage/components/alarmDetail.vue
+++ b/src/views/alarmManage/components/alarmDetail.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :close-on-click-modal="false" :visible.sync="dialogFormVisible" title="报警详情" append-to-body>
-    <el-form ref="dataForm" :model="alarmForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :model="alarmForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="10">
           <el-form-item label="设备名称" prop="deviceName">
diff --git a/src/views/alarmManage/lampType/editLampType.vue b/src/views/alarmManage/lampType/editLampType.vue
index 8c3e37a..8e5fc23 100644
--- a/src/views/alarmManage/lampType/editLampType.vue
+++ b/src/views/alarmManage/lampType/editLampType.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="typeForm" label-well-code="right" label-width="200px">
+    <el-form ref="dataForm" :rules="rules" :model="typeForm" size="small" label-well-code="right" label-width="200px">
       <el-row :gutter="20">
         <el-col :span="20">
           <el-form-item label="路灯类型" prop="typeName">
diff --git a/src/views/alarmManage/lampType/lampTypeList.vue b/src/views/alarmManage/lampType/lampTypeList.vue
index f8547ed..f10c63b 100644
--- a/src/views/alarmManage/lampType/lampTypeList.vue
+++ b/src/views/alarmManage/lampType/lampTypeList.vue
@@ -8,12 +8,11 @@
           <el-row>
             <el-col :span="4">
               <el-form-item class="selectForm-container-item">
-                <el-input v-model.trim="listQuery.typeName" placeholder="类型名称" clearable />
+                <el-input v-model.trim="listQuery.typeName" size="small" placeholder="类型名称" clearable />
               </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-button class="filter-item" type="primary" icon="el-icon-search" size="small" style="margin-top: 2px" @click="search">搜索</el-button>
             </el-col>
           </el-row>
         </el-form>
@@ -28,7 +27,7 @@
           <el-button class="edit_btn" size="small" @click="add">新增</el-button>
         </el-col>
       </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
+      <el-table v-loading="listLoading" :data="list" class="table" size="small" border @selection-change="handleSelectionChange">
         <!--拥有删除权限则显示复选框-->
         <el-table-column v-if="hasPerm('/lampType/delete')" align="center" type="selection" width="55"/>
         <!--序号列-->

diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 5077bef..3fd3f33 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -58,6 +58,8 @@
       <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns"/>
+        <!--复选框列-->
+        <el-table-column v-if="options && options.needMultSelect" align="center" type="selection" width="55"/>
         <!--序号列-->
         <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
         <!--内容列, 若columns存在且长度大于0-->
@@ -140,7 +142,8 @@
       type: Object,
       default: function() {
         return {
-          needIndex: true // 是否需要序号列
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
         }
       }
     }, // 配置项
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
index 1175911..b5e8442 100644
--- a/src/components/SearchArea/SearchArea.vue
+++ b/src/components/SearchArea/SearchArea.vue
@@ -16,6 +16,7 @@
       <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
       <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
       <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns-seperate"/>
     </div>
     <!-- 弹出框式高级检索 -->
     <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
index 84bdb9f..c192d79 100644
--- a/src/layout/components/AppHeader.vue
+++ b/src/layout/components/AppHeader.vue
@@ -1,6 +1,14 @@
 <template>
   <el-header class="app-header">
     <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown v-if="showChangeSys" class="systemSelect" size="medium" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
     <el-dropdown class="dropdown-container" trigger="click">
       <div class="dropdown-wrapper">
         <span style="line-height:50px;">欢迎您，{{ name }}</span>
@@ -33,6 +41,7 @@
   data() {
     return {
       title: this.baseConfig.title, // 标题
+      showChangeSys: !this.baseConfig.singleSys, // 是否显示切换系统菜单
       name: this.$store.getters.name, // 用户姓名
       showSetPwd: false // 是否显示修改密码按钮
     }
@@ -40,7 +49,9 @@
   computed: {
     ...mapGetters([
       'sidebar',
-      'avatar'
+      'avatar',
+      'currentSystem',
+      'systems'
     ])
   },
   methods: {
@@ -55,6 +66,38 @@
     resetPwd() {
       this.showSetPwd = true
       this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      const url = this.baseConfig.mainPage
+      window.location.href = url
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      const params1 = `?token=${this.$store.getters.token}`
+      const params = `?sys=${command.name}&url=${command.url}&code=${command.code}&token=${this.$store.getters.token}`
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params1
+        } else {
+          window.open(command.url + params1, '_blank')
+        }
+      } else {
+        // 取token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = this.baseConfig.mainPage + command.url + params
+        } else {
+          window.open(this.baseConfig.mainPage + command.url + params, '_blank')
+        }
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
     }
   }
 }
diff --git a/src/permission.js b/src/permission.js
index 69e8233..637373e 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -26,20 +26,13 @@
           // 设置当前子系统为基础资源子系统
           const currentSys = {
             code: 'baseResourse',
-            id: '1189107859077373285',
-            ismenu: '0',
-            levels: 1,
-            name: '智慧照明子系统',
-            num: 0,
-            parentId: '0',
-            resourceType: '02',
-            url: '/baseResourse'
+            name: '智慧照明子系统'
           }
           // 将当前系统信息保存在localStorage中
           store.commit('SET_SYSTEM', currentSys)
           // 远程访问获取权限列表（菜单&按钮）
           store.dispatch('GetMenus', currentSys).then(() => {
-            store.commit('SET_CHANGEFLAG', '0')
+            // store.commit('SET_CHANGEFLAG', '0')
             router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
             next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
           })
diff --git a/src/router/index.js b/src/router/index.js
index 32f93ef..b558038 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -49,21 +49,22 @@
   // 404错误页面
   { path: '/404', component: () => import('@/views/errorPage/404'), hidden: true },
   // 401 错误页面
-  { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
-  // 主页
-  {
-    path: '/',
-    component: Layout,
-    redirect: 'dashboard',
-    name: 'Dashboard',
-    // hidden: true,
-    children: [{
-      path: 'dashboard',
-      name: 'Dashboard',
-      component: () => import('@/views/dashboard/index'),
-      meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
-    }]
-  }
+  { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true }
+  // { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
+  // // 主页
+  // {
+  //   path: '/',
+  //   component: Layout,
+  //   redirect: 'dashboard',
+  //   name: 'Dashboard',
+  //   // hidden: true,
+  //   children: [{
+  //     path: 'dashboard',
+  //     name: 'Dashboard',
+  //     component: () => import('@/views/dashboard/index'),
+  //     meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
+  //   }]
+  // }
 ]
 // 实例化vue的时候直挂载constantRouter
 export default new Router({
diff --git a/src/views/alarmManage/alarmRule.vue b/src/views/alarmManage/alarmRule.vue
index 888a4d1..11469a2 100644
--- a/src/views/alarmManage/alarmRule.vue
+++ b/src/views/alarmManage/alarmRule.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
       <el-tab-pane label="路灯" name="lamp">
         <lamp-type-list ref="lamp"/>
@@ -8,7 +8,7 @@
         <lampbox-type-list ref="box"/>
       </el-tab-pane>
     </el-tabs>
-  </div>
+  </app-container>
 </template>
 
 <script>
diff --git a/src/views/alarmManage/components/alarmDetail.vue b/src/views/alarmManage/components/alarmDetail.vue
index 9c68377..d598779 100644
--- a/src/views/alarmManage/components/alarmDetail.vue
+++ b/src/views/alarmManage/components/alarmDetail.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :close-on-click-modal="false" :visible.sync="dialogFormVisible" title="报警详情" append-to-body>
-    <el-form ref="dataForm" :model="alarmForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :model="alarmForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="10">
           <el-form-item label="设备名称" prop="deviceName">
diff --git a/src/views/alarmManage/lampType/editLampType.vue b/src/views/alarmManage/lampType/editLampType.vue
index 8c3e37a..8e5fc23 100644
--- a/src/views/alarmManage/lampType/editLampType.vue
+++ b/src/views/alarmManage/lampType/editLampType.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="typeForm" label-well-code="right" label-width="200px">
+    <el-form ref="dataForm" :rules="rules" :model="typeForm" size="small" label-well-code="right" label-width="200px">
       <el-row :gutter="20">
         <el-col :span="20">
           <el-form-item label="路灯类型" prop="typeName">
diff --git a/src/views/alarmManage/lampType/lampTypeList.vue b/src/views/alarmManage/lampType/lampTypeList.vue
index f8547ed..f10c63b 100644
--- a/src/views/alarmManage/lampType/lampTypeList.vue
+++ b/src/views/alarmManage/lampType/lampTypeList.vue
@@ -8,12 +8,11 @@
           <el-row>
             <el-col :span="4">
               <el-form-item class="selectForm-container-item">
-                <el-input v-model.trim="listQuery.typeName" placeholder="类型名称" clearable />
+                <el-input v-model.trim="listQuery.typeName" size="small" placeholder="类型名称" clearable />
               </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-button class="filter-item" type="primary" icon="el-icon-search" size="small" style="margin-top: 2px" @click="search">搜索</el-button>
             </el-col>
           </el-row>
         </el-form>
@@ -28,7 +27,7 @@
           <el-button class="edit_btn" size="small" @click="add">新增</el-button>
         </el-col>
       </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
+      <el-table v-loading="listLoading" :data="list" class="table" size="small" border @selection-change="handleSelectionChange">
         <!--拥有删除权限则显示复选框-->
         <el-table-column v-if="hasPerm('/lampType/delete')" align="center" type="selection" width="55"/>
         <!--序号列-->
diff --git a/src/views/alarmManage/lampboxType/editLampboxType.vue b/src/views/alarmManage/lampboxType/editLampboxType.vue
index 1b94960..ae3a7c1 100644
--- a/src/views/alarmManage/lampboxType/editLampboxType.vue
+++ b/src/views/alarmManage/lampboxType/editLampboxType.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="typeForm" label-well-code="right" label-width="200px">
+    <el-form ref="dataForm" :rules="rules" :model="typeForm" size="small" label-well-code="right" label-width="200px">
       <el-row :gutter="20">
         <el-col :span="20">
           <el-form-item label="灯箱类型" prop="typeName">

diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 5077bef..3fd3f33 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -58,6 +58,8 @@
       <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns"/>
+        <!--复选框列-->
+        <el-table-column v-if="options && options.needMultSelect" align="center" type="selection" width="55"/>
         <!--序号列-->
         <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
         <!--内容列, 若columns存在且长度大于0-->
@@ -140,7 +142,8 @@
       type: Object,
       default: function() {
         return {
-          needIndex: true // 是否需要序号列
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
         }
       }
     }, // 配置项
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
index 1175911..b5e8442 100644
--- a/src/components/SearchArea/SearchArea.vue
+++ b/src/components/SearchArea/SearchArea.vue
@@ -16,6 +16,7 @@
       <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
       <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
       <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns-seperate"/>
     </div>
     <!-- 弹出框式高级检索 -->
     <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
index 84bdb9f..c192d79 100644
--- a/src/layout/components/AppHeader.vue
+++ b/src/layout/components/AppHeader.vue
@@ -1,6 +1,14 @@
 <template>
   <el-header class="app-header">
     <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown v-if="showChangeSys" class="systemSelect" size="medium" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
     <el-dropdown class="dropdown-container" trigger="click">
       <div class="dropdown-wrapper">
         <span style="line-height:50px;">欢迎您，{{ name }}</span>
@@ -33,6 +41,7 @@
   data() {
     return {
       title: this.baseConfig.title, // 标题
+      showChangeSys: !this.baseConfig.singleSys, // 是否显示切换系统菜单
       name: this.$store.getters.name, // 用户姓名
       showSetPwd: false // 是否显示修改密码按钮
     }
@@ -40,7 +49,9 @@
   computed: {
     ...mapGetters([
       'sidebar',
-      'avatar'
+      'avatar',
+      'currentSystem',
+      'systems'
     ])
   },
   methods: {
@@ -55,6 +66,38 @@
     resetPwd() {
       this.showSetPwd = true
       this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      const url = this.baseConfig.mainPage
+      window.location.href = url
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      const params1 = `?token=${this.$store.getters.token}`
+      const params = `?sys=${command.name}&url=${command.url}&code=${command.code}&token=${this.$store.getters.token}`
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params1
+        } else {
+          window.open(command.url + params1, '_blank')
+        }
+      } else {
+        // 取token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = this.baseConfig.mainPage + command.url + params
+        } else {
+          window.open(this.baseConfig.mainPage + command.url + params, '_blank')
+        }
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
     }
   }
 }
diff --git a/src/permission.js b/src/permission.js
index 69e8233..637373e 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -26,20 +26,13 @@
           // 设置当前子系统为基础资源子系统
           const currentSys = {
             code: 'baseResourse',
-            id: '1189107859077373285',
-            ismenu: '0',
-            levels: 1,
-            name: '智慧照明子系统',
-            num: 0,
-            parentId: '0',
-            resourceType: '02',
-            url: '/baseResourse'
+            name: '智慧照明子系统'
           }
           // 将当前系统信息保存在localStorage中
           store.commit('SET_SYSTEM', currentSys)
           // 远程访问获取权限列表（菜单&按钮）
           store.dispatch('GetMenus', currentSys).then(() => {
-            store.commit('SET_CHANGEFLAG', '0')
+            // store.commit('SET_CHANGEFLAG', '0')
             router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
             next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
           })
diff --git a/src/router/index.js b/src/router/index.js
index 32f93ef..b558038 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -49,21 +49,22 @@
   // 404错误页面
   { path: '/404', component: () => import('@/views/errorPage/404'), hidden: true },
   // 401 错误页面
-  { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
-  // 主页
-  {
-    path: '/',
-    component: Layout,
-    redirect: 'dashboard',
-    name: 'Dashboard',
-    // hidden: true,
-    children: [{
-      path: 'dashboard',
-      name: 'Dashboard',
-      component: () => import('@/views/dashboard/index'),
-      meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
-    }]
-  }
+  { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true }
+  // { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
+  // // 主页
+  // {
+  //   path: '/',
+  //   component: Layout,
+  //   redirect: 'dashboard',
+  //   name: 'Dashboard',
+  //   // hidden: true,
+  //   children: [{
+  //     path: 'dashboard',
+  //     name: 'Dashboard',
+  //     component: () => import('@/views/dashboard/index'),
+  //     meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
+  //   }]
+  // }
 ]
 // 实例化vue的时候直挂载constantRouter
 export default new Router({
diff --git a/src/views/alarmManage/alarmRule.vue b/src/views/alarmManage/alarmRule.vue
index 888a4d1..11469a2 100644
--- a/src/views/alarmManage/alarmRule.vue
+++ b/src/views/alarmManage/alarmRule.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
       <el-tab-pane label="路灯" name="lamp">
         <lamp-type-list ref="lamp"/>
@@ -8,7 +8,7 @@
         <lampbox-type-list ref="box"/>
       </el-tab-pane>
     </el-tabs>
-  </div>
+  </app-container>
 </template>
 
 <script>
diff --git a/src/views/alarmManage/components/alarmDetail.vue b/src/views/alarmManage/components/alarmDetail.vue
index 9c68377..d598779 100644
--- a/src/views/alarmManage/components/alarmDetail.vue
+++ b/src/views/alarmManage/components/alarmDetail.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :close-on-click-modal="false" :visible.sync="dialogFormVisible" title="报警详情" append-to-body>
-    <el-form ref="dataForm" :model="alarmForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :model="alarmForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="10">
           <el-form-item label="设备名称" prop="deviceName">
diff --git a/src/views/alarmManage/lampType/editLampType.vue b/src/views/alarmManage/lampType/editLampType.vue
index 8c3e37a..8e5fc23 100644
--- a/src/views/alarmManage/lampType/editLampType.vue
+++ b/src/views/alarmManage/lampType/editLampType.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="typeForm" label-well-code="right" label-width="200px">
+    <el-form ref="dataForm" :rules="rules" :model="typeForm" size="small" label-well-code="right" label-width="200px">
       <el-row :gutter="20">
         <el-col :span="20">
           <el-form-item label="路灯类型" prop="typeName">
diff --git a/src/views/alarmManage/lampType/lampTypeList.vue b/src/views/alarmManage/lampType/lampTypeList.vue
index f8547ed..f10c63b 100644
--- a/src/views/alarmManage/lampType/lampTypeList.vue
+++ b/src/views/alarmManage/lampType/lampTypeList.vue
@@ -8,12 +8,11 @@
           <el-row>
             <el-col :span="4">
               <el-form-item class="selectForm-container-item">
-                <el-input v-model.trim="listQuery.typeName" placeholder="类型名称" clearable />
+                <el-input v-model.trim="listQuery.typeName" size="small" placeholder="类型名称" clearable />
               </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-button class="filter-item" type="primary" icon="el-icon-search" size="small" style="margin-top: 2px" @click="search">搜索</el-button>
             </el-col>
           </el-row>
         </el-form>
@@ -28,7 +27,7 @@
           <el-button class="edit_btn" size="small" @click="add">新增</el-button>
         </el-col>
       </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
+      <el-table v-loading="listLoading" :data="list" class="table" size="small" border @selection-change="handleSelectionChange">
         <!--拥有删除权限则显示复选框-->
         <el-table-column v-if="hasPerm('/lampType/delete')" align="center" type="selection" width="55"/>
         <!--序号列-->
diff --git a/src/views/alarmManage/lampboxType/editLampboxType.vue b/src/views/alarmManage/lampboxType/editLampboxType.vue
index 1b94960..ae3a7c1 100644
--- a/src/views/alarmManage/lampboxType/editLampboxType.vue
+++ b/src/views/alarmManage/lampboxType/editLampboxType.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="typeForm" label-well-code="right" label-width="200px">
+    <el-form ref="dataForm" :rules="rules" :model="typeForm" size="small" label-well-code="right" label-width="200px">
       <el-row :gutter="20">
         <el-col :span="20">
           <el-form-item label="灯箱类型" prop="typeName">
diff --git a/src/views/alarmManage/lampboxType/lampboxTypeList.vue b/src/views/alarmManage/lampboxType/lampboxTypeList.vue
index 7b68f20..f33dcbf 100644
--- a/src/views/alarmManage/lampboxType/lampboxTypeList.vue
+++ b/src/views/alarmManage/lampboxType/lampboxTypeList.vue
@@ -8,7 +8,7 @@
           <el-row>
             <el-col :span="4">
               <el-form-item class="selectForm-container-item">
-                <el-input v-model.trim="listQuery.typeName" placeholder="类型名称" clearable />
+                <el-input v-model.trim="listQuery.typeName" size="small" placeholder="类型名称" clearable />
               </el-form-item>
             </el-col>
 

diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 5077bef..3fd3f33 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -58,6 +58,8 @@
       <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns"/>
+        <!--复选框列-->
+        <el-table-column v-if="options && options.needMultSelect" align="center" type="selection" width="55"/>
         <!--序号列-->
         <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
         <!--内容列, 若columns存在且长度大于0-->
@@ -140,7 +142,8 @@
       type: Object,
       default: function() {
         return {
-          needIndex: true // 是否需要序号列
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
         }
       }
     }, // 配置项
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
index 1175911..b5e8442 100644
--- a/src/components/SearchArea/SearchArea.vue
+++ b/src/components/SearchArea/SearchArea.vue
@@ -16,6 +16,7 @@
       <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
       <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
       <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns-seperate"/>
     </div>
     <!-- 弹出框式高级检索 -->
     <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
index 84bdb9f..c192d79 100644
--- a/src/layout/components/AppHeader.vue
+++ b/src/layout/components/AppHeader.vue
@@ -1,6 +1,14 @@
 <template>
   <el-header class="app-header">
     <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown v-if="showChangeSys" class="systemSelect" size="medium" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
     <el-dropdown class="dropdown-container" trigger="click">
       <div class="dropdown-wrapper">
         <span style="line-height:50px;">欢迎您，{{ name }}</span>
@@ -33,6 +41,7 @@
   data() {
     return {
       title: this.baseConfig.title, // 标题
+      showChangeSys: !this.baseConfig.singleSys, // 是否显示切换系统菜单
       name: this.$store.getters.name, // 用户姓名
       showSetPwd: false // 是否显示修改密码按钮
     }
@@ -40,7 +49,9 @@
   computed: {
     ...mapGetters([
       'sidebar',
-      'avatar'
+      'avatar',
+      'currentSystem',
+      'systems'
     ])
   },
   methods: {
@@ -55,6 +66,38 @@
     resetPwd() {
       this.showSetPwd = true
       this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      const url = this.baseConfig.mainPage
+      window.location.href = url
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      const params1 = `?token=${this.$store.getters.token}`
+      const params = `?sys=${command.name}&url=${command.url}&code=${command.code}&token=${this.$store.getters.token}`
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params1
+        } else {
+          window.open(command.url + params1, '_blank')
+        }
+      } else {
+        // 取token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = this.baseConfig.mainPage + command.url + params
+        } else {
+          window.open(this.baseConfig.mainPage + command.url + params, '_blank')
+        }
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
     }
   }
 }
diff --git a/src/permission.js b/src/permission.js
index 69e8233..637373e 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -26,20 +26,13 @@
           // 设置当前子系统为基础资源子系统
           const currentSys = {
             code: 'baseResourse',
-            id: '1189107859077373285',
-            ismenu: '0',
-            levels: 1,
-            name: '智慧照明子系统',
-            num: 0,
-            parentId: '0',
-            resourceType: '02',
-            url: '/baseResourse'
+            name: '智慧照明子系统'
           }
           // 将当前系统信息保存在localStorage中
           store.commit('SET_SYSTEM', currentSys)
           // 远程访问获取权限列表（菜单&按钮）
           store.dispatch('GetMenus', currentSys).then(() => {
-            store.commit('SET_CHANGEFLAG', '0')
+            // store.commit('SET_CHANGEFLAG', '0')
             router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
             next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
           })
diff --git a/src/router/index.js b/src/router/index.js
index 32f93ef..b558038 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -49,21 +49,22 @@
   // 404错误页面
   { path: '/404', component: () => import('@/views/errorPage/404'), hidden: true },
   // 401 错误页面
-  { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
-  // 主页
-  {
-    path: '/',
-    component: Layout,
-    redirect: 'dashboard',
-    name: 'Dashboard',
-    // hidden: true,
-    children: [{
-      path: 'dashboard',
-      name: 'Dashboard',
-      component: () => import('@/views/dashboard/index'),
-      meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
-    }]
-  }
+  { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true }
+  // { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
+  // // 主页
+  // {
+  //   path: '/',
+  //   component: Layout,
+  //   redirect: 'dashboard',
+  //   name: 'Dashboard',
+  //   // hidden: true,
+  //   children: [{
+  //     path: 'dashboard',
+  //     name: 'Dashboard',
+  //     component: () => import('@/views/dashboard/index'),
+  //     meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
+  //   }]
+  // }
 ]
 // 实例化vue的时候直挂载constantRouter
 export default new Router({
diff --git a/src/views/alarmManage/alarmRule.vue b/src/views/alarmManage/alarmRule.vue
index 888a4d1..11469a2 100644
--- a/src/views/alarmManage/alarmRule.vue
+++ b/src/views/alarmManage/alarmRule.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
       <el-tab-pane label="路灯" name="lamp">
         <lamp-type-list ref="lamp"/>
@@ -8,7 +8,7 @@
         <lampbox-type-list ref="box"/>
       </el-tab-pane>
     </el-tabs>
-  </div>
+  </app-container>
 </template>
 
 <script>
diff --git a/src/views/alarmManage/components/alarmDetail.vue b/src/views/alarmManage/components/alarmDetail.vue
index 9c68377..d598779 100644
--- a/src/views/alarmManage/components/alarmDetail.vue
+++ b/src/views/alarmManage/components/alarmDetail.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :close-on-click-modal="false" :visible.sync="dialogFormVisible" title="报警详情" append-to-body>
-    <el-form ref="dataForm" :model="alarmForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :model="alarmForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="10">
           <el-form-item label="设备名称" prop="deviceName">
diff --git a/src/views/alarmManage/lampType/editLampType.vue b/src/views/alarmManage/lampType/editLampType.vue
index 8c3e37a..8e5fc23 100644
--- a/src/views/alarmManage/lampType/editLampType.vue
+++ b/src/views/alarmManage/lampType/editLampType.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="typeForm" label-well-code="right" label-width="200px">
+    <el-form ref="dataForm" :rules="rules" :model="typeForm" size="small" label-well-code="right" label-width="200px">
       <el-row :gutter="20">
         <el-col :span="20">
           <el-form-item label="路灯类型" prop="typeName">
diff --git a/src/views/alarmManage/lampType/lampTypeList.vue b/src/views/alarmManage/lampType/lampTypeList.vue
index f8547ed..f10c63b 100644
--- a/src/views/alarmManage/lampType/lampTypeList.vue
+++ b/src/views/alarmManage/lampType/lampTypeList.vue
@@ -8,12 +8,11 @@
           <el-row>
             <el-col :span="4">
               <el-form-item class="selectForm-container-item">
-                <el-input v-model.trim="listQuery.typeName" placeholder="类型名称" clearable />
+                <el-input v-model.trim="listQuery.typeName" size="small" placeholder="类型名称" clearable />
               </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-button class="filter-item" type="primary" icon="el-icon-search" size="small" style="margin-top: 2px" @click="search">搜索</el-button>
             </el-col>
           </el-row>
         </el-form>
@@ -28,7 +27,7 @@
           <el-button class="edit_btn" size="small" @click="add">新增</el-button>
         </el-col>
       </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
+      <el-table v-loading="listLoading" :data="list" class="table" size="small" border @selection-change="handleSelectionChange">
         <!--拥有删除权限则显示复选框-->
         <el-table-column v-if="hasPerm('/lampType/delete')" align="center" type="selection" width="55"/>
         <!--序号列-->
diff --git a/src/views/alarmManage/lampboxType/editLampboxType.vue b/src/views/alarmManage/lampboxType/editLampboxType.vue
index 1b94960..ae3a7c1 100644
--- a/src/views/alarmManage/lampboxType/editLampboxType.vue
+++ b/src/views/alarmManage/lampboxType/editLampboxType.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="typeForm" label-well-code="right" label-width="200px">
+    <el-form ref="dataForm" :rules="rules" :model="typeForm" size="small" label-well-code="right" label-width="200px">
       <el-row :gutter="20">
         <el-col :span="20">
           <el-form-item label="灯箱类型" prop="typeName">
diff --git a/src/views/alarmManage/lampboxType/lampboxTypeList.vue b/src/views/alarmManage/lampboxType/lampboxTypeList.vue
index 7b68f20..f33dcbf 100644
--- a/src/views/alarmManage/lampboxType/lampboxTypeList.vue
+++ b/src/views/alarmManage/lampboxType/lampboxTypeList.vue
@@ -8,7 +8,7 @@
           <el-row>
             <el-col :span="4">
               <el-form-item class="selectForm-container-item">
-                <el-input v-model.trim="listQuery.typeName" placeholder="类型名称" clearable />
+                <el-input v-model.trim="listQuery.typeName" size="small" placeholder="类型名称" clearable />
               </el-form-item>
             </el-col>
 
diff --git a/src/views/alarmManage/listAlarm.vue b/src/views/alarmManage/listAlarm.vue
index 7571a0e..fe3e359 100644
--- a/src/views/alarmManage/listAlarm.vue
+++ b/src/views/alarmManage/listAlarm.vue
@@ -1,73 +1,52 @@
 <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-form-item>
-              <el-input v-model.trim="listQuery.keyword" placeholder="设备编号/设备名称" clearable/>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmType" placeholder="报警类型" clearable>
-                <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmStatus" placeholder="报警状态" clearable>
-                <el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item" prop="startTime">
-              <el-date-picker
-                v-model="timeRange"
-                type="datetimerange"
-                range-separator="至"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                start-placeholder="报警开始时间"
-                end-placeholder="报警结束时间"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
-        <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>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="设备编号/设备名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmType" size="small" placeholder="报警类型" clearable>
+          <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmStatus" size="small" placeholder="报警状态" clearable>
+          <el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          size="small"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="报警开始时间"
+          end-placeholder="报警结束时间"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="130">
           <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
             <el-button type="text" size="small" @click="showDetail(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>
     <alarm-detail v-show="dialogFormVisible" ref="alarmdetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -123,7 +102,21 @@
       dialogFormVisible: false,
       alarmStatusList: [{ name: '正在报警', value: '1' }, { name: '已取消', value: '2' }], // 报警状态列表
       alarmTypeList: [],
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   watch: {
@@ -171,19 +164,15 @@
     },
     clearInput() {
       this.listQuery = {
-        name: '', // 姓名
-        sex: '', // 性别
-        nation: '', // 民族
-        collReason: '', // 采集原因
-        cardType: '', // 证件类型
-        idCardNo: '', // 证件号码
-        alarmReason: '', // 报警原因
-        startTime: '', // 开始时间
-        endTime: '', // 结束时间
+        keyword: '', // 设备编号/设备名称
+        alarmType: '', // 报警类型
+        alarmStatus: '', // 报警状态
+        startTime: '', // 报警开始时间
+        endTime: '', // 报警结束时间
         offset: 1,
         limit: 20,
-        sort: '',
-        order: ''
+        sort: 'alarmTime',
+        order: 'desc'
       }
       this.timeRange = []
       this.fetchData(false)
@@ -194,18 +183,13 @@
         this.alarmTypeList = response.data
       })
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }

diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 5077bef..3fd3f33 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -58,6 +58,8 @@
       <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns"/>
+        <!--复选框列-->
+        <el-table-column v-if="options && options.needMultSelect" align="center" type="selection" width="55"/>
         <!--序号列-->
         <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
         <!--内容列, 若columns存在且长度大于0-->
@@ -140,7 +142,8 @@
       type: Object,
       default: function() {
         return {
-          needIndex: true // 是否需要序号列
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
         }
       }
     }, // 配置项
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
index 1175911..b5e8442 100644
--- a/src/components/SearchArea/SearchArea.vue
+++ b/src/components/SearchArea/SearchArea.vue
@@ -16,6 +16,7 @@
       <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
       <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
       <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns-seperate"/>
     </div>
     <!-- 弹出框式高级检索 -->
     <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
index 84bdb9f..c192d79 100644
--- a/src/layout/components/AppHeader.vue
+++ b/src/layout/components/AppHeader.vue
@@ -1,6 +1,14 @@
 <template>
   <el-header class="app-header">
     <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown v-if="showChangeSys" class="systemSelect" size="medium" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
     <el-dropdown class="dropdown-container" trigger="click">
       <div class="dropdown-wrapper">
         <span style="line-height:50px;">欢迎您，{{ name }}</span>
@@ -33,6 +41,7 @@
   data() {
     return {
       title: this.baseConfig.title, // 标题
+      showChangeSys: !this.baseConfig.singleSys, // 是否显示切换系统菜单
       name: this.$store.getters.name, // 用户姓名
       showSetPwd: false // 是否显示修改密码按钮
     }
@@ -40,7 +49,9 @@
   computed: {
     ...mapGetters([
       'sidebar',
-      'avatar'
+      'avatar',
+      'currentSystem',
+      'systems'
     ])
   },
   methods: {
@@ -55,6 +66,38 @@
     resetPwd() {
       this.showSetPwd = true
       this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      const url = this.baseConfig.mainPage
+      window.location.href = url
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      const params1 = `?token=${this.$store.getters.token}`
+      const params = `?sys=${command.name}&url=${command.url}&code=${command.code}&token=${this.$store.getters.token}`
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params1
+        } else {
+          window.open(command.url + params1, '_blank')
+        }
+      } else {
+        // 取token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = this.baseConfig.mainPage + command.url + params
+        } else {
+          window.open(this.baseConfig.mainPage + command.url + params, '_blank')
+        }
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
     }
   }
 }
diff --git a/src/permission.js b/src/permission.js
index 69e8233..637373e 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -26,20 +26,13 @@
           // 设置当前子系统为基础资源子系统
           const currentSys = {
             code: 'baseResourse',
-            id: '1189107859077373285',
-            ismenu: '0',
-            levels: 1,
-            name: '智慧照明子系统',
-            num: 0,
-            parentId: '0',
-            resourceType: '02',
-            url: '/baseResourse'
+            name: '智慧照明子系统'
           }
           // 将当前系统信息保存在localStorage中
           store.commit('SET_SYSTEM', currentSys)
           // 远程访问获取权限列表（菜单&按钮）
           store.dispatch('GetMenus', currentSys).then(() => {
-            store.commit('SET_CHANGEFLAG', '0')
+            // store.commit('SET_CHANGEFLAG', '0')
             router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
             next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
           })
diff --git a/src/router/index.js b/src/router/index.js
index 32f93ef..b558038 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -49,21 +49,22 @@
   // 404错误页面
   { path: '/404', component: () => import('@/views/errorPage/404'), hidden: true },
   // 401 错误页面
-  { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
-  // 主页
-  {
-    path: '/',
-    component: Layout,
-    redirect: 'dashboard',
-    name: 'Dashboard',
-    // hidden: true,
-    children: [{
-      path: 'dashboard',
-      name: 'Dashboard',
-      component: () => import('@/views/dashboard/index'),
-      meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
-    }]
-  }
+  { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true }
+  // { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
+  // // 主页
+  // {
+  //   path: '/',
+  //   component: Layout,
+  //   redirect: 'dashboard',
+  //   name: 'Dashboard',
+  //   // hidden: true,
+  //   children: [{
+  //     path: 'dashboard',
+  //     name: 'Dashboard',
+  //     component: () => import('@/views/dashboard/index'),
+  //     meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
+  //   }]
+  // }
 ]
 // 实例化vue的时候直挂载constantRouter
 export default new Router({
diff --git a/src/views/alarmManage/alarmRule.vue b/src/views/alarmManage/alarmRule.vue
index 888a4d1..11469a2 100644
--- a/src/views/alarmManage/alarmRule.vue
+++ b/src/views/alarmManage/alarmRule.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
       <el-tab-pane label="路灯" name="lamp">
         <lamp-type-list ref="lamp"/>
@@ -8,7 +8,7 @@
         <lampbox-type-list ref="box"/>
       </el-tab-pane>
     </el-tabs>
-  </div>
+  </app-container>
 </template>
 
 <script>
diff --git a/src/views/alarmManage/components/alarmDetail.vue b/src/views/alarmManage/components/alarmDetail.vue
index 9c68377..d598779 100644
--- a/src/views/alarmManage/components/alarmDetail.vue
+++ b/src/views/alarmManage/components/alarmDetail.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :close-on-click-modal="false" :visible.sync="dialogFormVisible" title="报警详情" append-to-body>
-    <el-form ref="dataForm" :model="alarmForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :model="alarmForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="10">
           <el-form-item label="设备名称" prop="deviceName">
diff --git a/src/views/alarmManage/lampType/editLampType.vue b/src/views/alarmManage/lampType/editLampType.vue
index 8c3e37a..8e5fc23 100644
--- a/src/views/alarmManage/lampType/editLampType.vue
+++ b/src/views/alarmManage/lampType/editLampType.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="typeForm" label-well-code="right" label-width="200px">
+    <el-form ref="dataForm" :rules="rules" :model="typeForm" size="small" label-well-code="right" label-width="200px">
       <el-row :gutter="20">
         <el-col :span="20">
           <el-form-item label="路灯类型" prop="typeName">
diff --git a/src/views/alarmManage/lampType/lampTypeList.vue b/src/views/alarmManage/lampType/lampTypeList.vue
index f8547ed..f10c63b 100644
--- a/src/views/alarmManage/lampType/lampTypeList.vue
+++ b/src/views/alarmManage/lampType/lampTypeList.vue
@@ -8,12 +8,11 @@
           <el-row>
             <el-col :span="4">
               <el-form-item class="selectForm-container-item">
-                <el-input v-model.trim="listQuery.typeName" placeholder="类型名称" clearable />
+                <el-input v-model.trim="listQuery.typeName" size="small" placeholder="类型名称" clearable />
               </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-button class="filter-item" type="primary" icon="el-icon-search" size="small" style="margin-top: 2px" @click="search">搜索</el-button>
             </el-col>
           </el-row>
         </el-form>
@@ -28,7 +27,7 @@
           <el-button class="edit_btn" size="small" @click="add">新增</el-button>
         </el-col>
       </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
+      <el-table v-loading="listLoading" :data="list" class="table" size="small" border @selection-change="handleSelectionChange">
         <!--拥有删除权限则显示复选框-->
         <el-table-column v-if="hasPerm('/lampType/delete')" align="center" type="selection" width="55"/>
         <!--序号列-->
diff --git a/src/views/alarmManage/lampboxType/editLampboxType.vue b/src/views/alarmManage/lampboxType/editLampboxType.vue
index 1b94960..ae3a7c1 100644
--- a/src/views/alarmManage/lampboxType/editLampboxType.vue
+++ b/src/views/alarmManage/lampboxType/editLampboxType.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="typeForm" label-well-code="right" label-width="200px">
+    <el-form ref="dataForm" :rules="rules" :model="typeForm" size="small" label-well-code="right" label-width="200px">
       <el-row :gutter="20">
         <el-col :span="20">
           <el-form-item label="灯箱类型" prop="typeName">
diff --git a/src/views/alarmManage/lampboxType/lampboxTypeList.vue b/src/views/alarmManage/lampboxType/lampboxTypeList.vue
index 7b68f20..f33dcbf 100644
--- a/src/views/alarmManage/lampboxType/lampboxTypeList.vue
+++ b/src/views/alarmManage/lampboxType/lampboxTypeList.vue
@@ -8,7 +8,7 @@
           <el-row>
             <el-col :span="4">
               <el-form-item class="selectForm-container-item">
-                <el-input v-model.trim="listQuery.typeName" placeholder="类型名称" clearable />
+                <el-input v-model.trim="listQuery.typeName" size="small" placeholder="类型名称" clearable />
               </el-form-item>
             </el-col>
 
diff --git a/src/views/alarmManage/listAlarm.vue b/src/views/alarmManage/listAlarm.vue
index 7571a0e..fe3e359 100644
--- a/src/views/alarmManage/listAlarm.vue
+++ b/src/views/alarmManage/listAlarm.vue
@@ -1,73 +1,52 @@
 <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-form-item>
-              <el-input v-model.trim="listQuery.keyword" placeholder="设备编号/设备名称" clearable/>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmType" placeholder="报警类型" clearable>
-                <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmStatus" placeholder="报警状态" clearable>
-                <el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item" prop="startTime">
-              <el-date-picker
-                v-model="timeRange"
-                type="datetimerange"
-                range-separator="至"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                start-placeholder="报警开始时间"
-                end-placeholder="报警结束时间"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
-        <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>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="设备编号/设备名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmType" size="small" placeholder="报警类型" clearable>
+          <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmStatus" size="small" placeholder="报警状态" clearable>
+          <el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          size="small"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="报警开始时间"
+          end-placeholder="报警结束时间"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="130">
           <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
             <el-button type="text" size="small" @click="showDetail(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>
     <alarm-detail v-show="dialogFormVisible" ref="alarmdetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -123,7 +102,21 @@
       dialogFormVisible: false,
       alarmStatusList: [{ name: '正在报警', value: '1' }, { name: '已取消', value: '2' }], // 报警状态列表
       alarmTypeList: [],
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   watch: {
@@ -171,19 +164,15 @@
     },
     clearInput() {
       this.listQuery = {
-        name: '', // 姓名
-        sex: '', // 性别
-        nation: '', // 民族
-        collReason: '', // 采集原因
-        cardType: '', // 证件类型
-        idCardNo: '', // 证件号码
-        alarmReason: '', // 报警原因
-        startTime: '', // 开始时间
-        endTime: '', // 结束时间
+        keyword: '', // 设备编号/设备名称
+        alarmType: '', // 报警类型
+        alarmStatus: '', // 报警状态
+        startTime: '', // 报警开始时间
+        endTime: '', // 报警结束时间
         offset: 1,
         limit: 20,
-        sort: '',
-        order: ''
+        sort: 'alarmTime',
+        order: 'desc'
       }
       this.timeRange = []
       this.fetchData(false)
@@ -194,18 +183,13 @@
         this.alarmTypeList = response.data
       })
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }
diff --git a/src/views/alarmManage/listAlarmNow.vue b/src/views/alarmManage/listAlarmNow.vue
index c48b60a..d98b641 100644
--- a/src/views/alarmManage/listAlarmNow.vue
+++ b/src/views/alarmManage/listAlarmNow.vue
@@ -1,73 +1,47 @@
 <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-form-item>
-              <el-input v-model.trim="listQuery.keyword" placeholder="设备编号/设备名称" clearable/>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmType" placeholder="报警类型" clearable>
-                <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <!--<el-form-item>-->
-            <!--<el-select v-model="listQuery.alarmStatus" placeholder="报警状态" clearable>-->
-            <!--<el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>-->
-            <!--</el-select>-->
-            <!--</el-form-item>-->
-            <el-form-item class="selectForm-container-item" prop="startTime">
-              <el-date-picker
-                v-model="timeRange"
-                type="datetimerange"
-                range-separator="至"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                start-placeholder="报警开始时间"
-                end-placeholder="报警结束时间"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
-        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="设备编号/设备名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmType" size="small" placeholder="报警类型" clearable>
+          <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          size="small"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="报警开始时间"
+          end-placeholder="报警结束时间"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
-            <span>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" align="center" width="130">
-          <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
             <el-button type="text" size="small" @click="showDetail(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>
     <alarm-detail v-show="dialogFormVisible" ref="alarmdetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -123,7 +97,21 @@
       dialogFormVisible: false,
       alarmStatusList: [{ name: '正在报警', value: '1' }, { name: '已取消', value: '2' }], // 报警状态列表
       alarmTypeList: [],
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   watch: {
@@ -171,15 +159,11 @@
     },
     clearInput() {
       this.listQuery = {
-        name: '', // 姓名
-        sex: '', // 性别
-        nation: '', // 民族
-        collReason: '', // 采集原因
-        cardType: '', // 证件类型
-        idCardNo: '', // 证件号码
-        alarmReason: '', // 报警原因
-        startTime: '', // 开始时间
-        endTime: '', // 结束时间
+        keyword: '', // 设备编号/设备名称
+        alarmType: '', // 报警类型
+        alarmStatus: '1', // 报警状态
+        startTime: '', // 报警开始时间
+        endTime: '', // 报警结束时间
         offset: 1,
         limit: 20,
         sort: '',
@@ -194,18 +178,13 @@
         this.alarmTypeList = response.data
       })
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }

diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 5077bef..3fd3f33 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -58,6 +58,8 @@
       <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns"/>
+        <!--复选框列-->
+        <el-table-column v-if="options && options.needMultSelect" align="center" type="selection" width="55"/>
         <!--序号列-->
         <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
         <!--内容列, 若columns存在且长度大于0-->
@@ -140,7 +142,8 @@
       type: Object,
       default: function() {
         return {
-          needIndex: true // 是否需要序号列
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
         }
       }
     }, // 配置项
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
index 1175911..b5e8442 100644
--- a/src/components/SearchArea/SearchArea.vue
+++ b/src/components/SearchArea/SearchArea.vue
@@ -16,6 +16,7 @@
       <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
       <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
       <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns-seperate"/>
     </div>
     <!-- 弹出框式高级检索 -->
     <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
index 84bdb9f..c192d79 100644
--- a/src/layout/components/AppHeader.vue
+++ b/src/layout/components/AppHeader.vue
@@ -1,6 +1,14 @@
 <template>
   <el-header class="app-header">
     <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown v-if="showChangeSys" class="systemSelect" size="medium" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
     <el-dropdown class="dropdown-container" trigger="click">
       <div class="dropdown-wrapper">
         <span style="line-height:50px;">欢迎您，{{ name }}</span>
@@ -33,6 +41,7 @@
   data() {
     return {
       title: this.baseConfig.title, // 标题
+      showChangeSys: !this.baseConfig.singleSys, // 是否显示切换系统菜单
       name: this.$store.getters.name, // 用户姓名
       showSetPwd: false // 是否显示修改密码按钮
     }
@@ -40,7 +49,9 @@
   computed: {
     ...mapGetters([
       'sidebar',
-      'avatar'
+      'avatar',
+      'currentSystem',
+      'systems'
     ])
   },
   methods: {
@@ -55,6 +66,38 @@
     resetPwd() {
       this.showSetPwd = true
       this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      const url = this.baseConfig.mainPage
+      window.location.href = url
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      const params1 = `?token=${this.$store.getters.token}`
+      const params = `?sys=${command.name}&url=${command.url}&code=${command.code}&token=${this.$store.getters.token}`
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params1
+        } else {
+          window.open(command.url + params1, '_blank')
+        }
+      } else {
+        // 取token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = this.baseConfig.mainPage + command.url + params
+        } else {
+          window.open(this.baseConfig.mainPage + command.url + params, '_blank')
+        }
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
     }
   }
 }
diff --git a/src/permission.js b/src/permission.js
index 69e8233..637373e 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -26,20 +26,13 @@
           // 设置当前子系统为基础资源子系统
           const currentSys = {
             code: 'baseResourse',
-            id: '1189107859077373285',
-            ismenu: '0',
-            levels: 1,
-            name: '智慧照明子系统',
-            num: 0,
-            parentId: '0',
-            resourceType: '02',
-            url: '/baseResourse'
+            name: '智慧照明子系统'
           }
           // 将当前系统信息保存在localStorage中
           store.commit('SET_SYSTEM', currentSys)
           // 远程访问获取权限列表（菜单&按钮）
           store.dispatch('GetMenus', currentSys).then(() => {
-            store.commit('SET_CHANGEFLAG', '0')
+            // store.commit('SET_CHANGEFLAG', '0')
             router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
             next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
           })
diff --git a/src/router/index.js b/src/router/index.js
index 32f93ef..b558038 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -49,21 +49,22 @@
   // 404错误页面
   { path: '/404', component: () => import('@/views/errorPage/404'), hidden: true },
   // 401 错误页面
-  { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
-  // 主页
-  {
-    path: '/',
-    component: Layout,
-    redirect: 'dashboard',
-    name: 'Dashboard',
-    // hidden: true,
-    children: [{
-      path: 'dashboard',
-      name: 'Dashboard',
-      component: () => import('@/views/dashboard/index'),
-      meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
-    }]
-  }
+  { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true }
+  // { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
+  // // 主页
+  // {
+  //   path: '/',
+  //   component: Layout,
+  //   redirect: 'dashboard',
+  //   name: 'Dashboard',
+  //   // hidden: true,
+  //   children: [{
+  //     path: 'dashboard',
+  //     name: 'Dashboard',
+  //     component: () => import('@/views/dashboard/index'),
+  //     meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
+  //   }]
+  // }
 ]
 // 实例化vue的时候直挂载constantRouter
 export default new Router({
diff --git a/src/views/alarmManage/alarmRule.vue b/src/views/alarmManage/alarmRule.vue
index 888a4d1..11469a2 100644
--- a/src/views/alarmManage/alarmRule.vue
+++ b/src/views/alarmManage/alarmRule.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
       <el-tab-pane label="路灯" name="lamp">
         <lamp-type-list ref="lamp"/>
@@ -8,7 +8,7 @@
         <lampbox-type-list ref="box"/>
       </el-tab-pane>
     </el-tabs>
-  </div>
+  </app-container>
 </template>
 
 <script>
diff --git a/src/views/alarmManage/components/alarmDetail.vue b/src/views/alarmManage/components/alarmDetail.vue
index 9c68377..d598779 100644
--- a/src/views/alarmManage/components/alarmDetail.vue
+++ b/src/views/alarmManage/components/alarmDetail.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :close-on-click-modal="false" :visible.sync="dialogFormVisible" title="报警详情" append-to-body>
-    <el-form ref="dataForm" :model="alarmForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :model="alarmForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="10">
           <el-form-item label="设备名称" prop="deviceName">
diff --git a/src/views/alarmManage/lampType/editLampType.vue b/src/views/alarmManage/lampType/editLampType.vue
index 8c3e37a..8e5fc23 100644
--- a/src/views/alarmManage/lampType/editLampType.vue
+++ b/src/views/alarmManage/lampType/editLampType.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="typeForm" label-well-code="right" label-width="200px">
+    <el-form ref="dataForm" :rules="rules" :model="typeForm" size="small" label-well-code="right" label-width="200px">
       <el-row :gutter="20">
         <el-col :span="20">
           <el-form-item label="路灯类型" prop="typeName">
diff --git a/src/views/alarmManage/lampType/lampTypeList.vue b/src/views/alarmManage/lampType/lampTypeList.vue
index f8547ed..f10c63b 100644
--- a/src/views/alarmManage/lampType/lampTypeList.vue
+++ b/src/views/alarmManage/lampType/lampTypeList.vue
@@ -8,12 +8,11 @@
           <el-row>
             <el-col :span="4">
               <el-form-item class="selectForm-container-item">
-                <el-input v-model.trim="listQuery.typeName" placeholder="类型名称" clearable />
+                <el-input v-model.trim="listQuery.typeName" size="small" placeholder="类型名称" clearable />
               </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-button class="filter-item" type="primary" icon="el-icon-search" size="small" style="margin-top: 2px" @click="search">搜索</el-button>
             </el-col>
           </el-row>
         </el-form>
@@ -28,7 +27,7 @@
           <el-button class="edit_btn" size="small" @click="add">新增</el-button>
         </el-col>
       </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
+      <el-table v-loading="listLoading" :data="list" class="table" size="small" border @selection-change="handleSelectionChange">
         <!--拥有删除权限则显示复选框-->
         <el-table-column v-if="hasPerm('/lampType/delete')" align="center" type="selection" width="55"/>
         <!--序号列-->
diff --git a/src/views/alarmManage/lampboxType/editLampboxType.vue b/src/views/alarmManage/lampboxType/editLampboxType.vue
index 1b94960..ae3a7c1 100644
--- a/src/views/alarmManage/lampboxType/editLampboxType.vue
+++ b/src/views/alarmManage/lampboxType/editLampboxType.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="typeForm" label-well-code="right" label-width="200px">
+    <el-form ref="dataForm" :rules="rules" :model="typeForm" size="small" label-well-code="right" label-width="200px">
       <el-row :gutter="20">
         <el-col :span="20">
           <el-form-item label="灯箱类型" prop="typeName">
diff --git a/src/views/alarmManage/lampboxType/lampboxTypeList.vue b/src/views/alarmManage/lampboxType/lampboxTypeList.vue
index 7b68f20..f33dcbf 100644
--- a/src/views/alarmManage/lampboxType/lampboxTypeList.vue
+++ b/src/views/alarmManage/lampboxType/lampboxTypeList.vue
@@ -8,7 +8,7 @@
           <el-row>
             <el-col :span="4">
               <el-form-item class="selectForm-container-item">
-                <el-input v-model.trim="listQuery.typeName" placeholder="类型名称" clearable />
+                <el-input v-model.trim="listQuery.typeName" size="small" placeholder="类型名称" clearable />
               </el-form-item>
             </el-col>
 
diff --git a/src/views/alarmManage/listAlarm.vue b/src/views/alarmManage/listAlarm.vue
index 7571a0e..fe3e359 100644
--- a/src/views/alarmManage/listAlarm.vue
+++ b/src/views/alarmManage/listAlarm.vue
@@ -1,73 +1,52 @@
 <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-form-item>
-              <el-input v-model.trim="listQuery.keyword" placeholder="设备编号/设备名称" clearable/>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmType" placeholder="报警类型" clearable>
-                <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmStatus" placeholder="报警状态" clearable>
-                <el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item" prop="startTime">
-              <el-date-picker
-                v-model="timeRange"
-                type="datetimerange"
-                range-separator="至"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                start-placeholder="报警开始时间"
-                end-placeholder="报警结束时间"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
-        <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>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="设备编号/设备名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmType" size="small" placeholder="报警类型" clearable>
+          <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmStatus" size="small" placeholder="报警状态" clearable>
+          <el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          size="small"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="报警开始时间"
+          end-placeholder="报警结束时间"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="130">
           <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
             <el-button type="text" size="small" @click="showDetail(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>
     <alarm-detail v-show="dialogFormVisible" ref="alarmdetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -123,7 +102,21 @@
       dialogFormVisible: false,
       alarmStatusList: [{ name: '正在报警', value: '1' }, { name: '已取消', value: '2' }], // 报警状态列表
       alarmTypeList: [],
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   watch: {
@@ -171,19 +164,15 @@
     },
     clearInput() {
       this.listQuery = {
-        name: '', // 姓名
-        sex: '', // 性别
-        nation: '', // 民族
-        collReason: '', // 采集原因
-        cardType: '', // 证件类型
-        idCardNo: '', // 证件号码
-        alarmReason: '', // 报警原因
-        startTime: '', // 开始时间
-        endTime: '', // 结束时间
+        keyword: '', // 设备编号/设备名称
+        alarmType: '', // 报警类型
+        alarmStatus: '', // 报警状态
+        startTime: '', // 报警开始时间
+        endTime: '', // 报警结束时间
         offset: 1,
         limit: 20,
-        sort: '',
-        order: ''
+        sort: 'alarmTime',
+        order: 'desc'
       }
       this.timeRange = []
       this.fetchData(false)
@@ -194,18 +183,13 @@
         this.alarmTypeList = response.data
       })
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }
diff --git a/src/views/alarmManage/listAlarmNow.vue b/src/views/alarmManage/listAlarmNow.vue
index c48b60a..d98b641 100644
--- a/src/views/alarmManage/listAlarmNow.vue
+++ b/src/views/alarmManage/listAlarmNow.vue
@@ -1,73 +1,47 @@
 <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-form-item>
-              <el-input v-model.trim="listQuery.keyword" placeholder="设备编号/设备名称" clearable/>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmType" placeholder="报警类型" clearable>
-                <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <!--<el-form-item>-->
-            <!--<el-select v-model="listQuery.alarmStatus" placeholder="报警状态" clearable>-->
-            <!--<el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>-->
-            <!--</el-select>-->
-            <!--</el-form-item>-->
-            <el-form-item class="selectForm-container-item" prop="startTime">
-              <el-date-picker
-                v-model="timeRange"
-                type="datetimerange"
-                range-separator="至"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                start-placeholder="报警开始时间"
-                end-placeholder="报警结束时间"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
-        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="设备编号/设备名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmType" size="small" placeholder="报警类型" clearable>
+          <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          size="small"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="报警开始时间"
+          end-placeholder="报警结束时间"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
-            <span>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" align="center" width="130">
-          <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
             <el-button type="text" size="small" @click="showDetail(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>
     <alarm-detail v-show="dialogFormVisible" ref="alarmdetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -123,7 +97,21 @@
       dialogFormVisible: false,
       alarmStatusList: [{ name: '正在报警', value: '1' }, { name: '已取消', value: '2' }], // 报警状态列表
       alarmTypeList: [],
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   watch: {
@@ -171,15 +159,11 @@
     },
     clearInput() {
       this.listQuery = {
-        name: '', // 姓名
-        sex: '', // 性别
-        nation: '', // 民族
-        collReason: '', // 采集原因
-        cardType: '', // 证件类型
-        idCardNo: '', // 证件号码
-        alarmReason: '', // 报警原因
-        startTime: '', // 开始时间
-        endTime: '', // 结束时间
+        keyword: '', // 设备编号/设备名称
+        alarmType: '', // 报警类型
+        alarmStatus: '1', // 报警状态
+        startTime: '', // 报警开始时间
+        endTime: '', // 报警结束时间
         offset: 1,
         limit: 20,
         sort: '',
@@ -194,18 +178,13 @@
         this.alarmTypeList = response.data
       })
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }
diff --git a/src/views/deviceManage/busCircuit.vue b/src/views/deviceManage/busCircuit.vue
index 2e1f872..7c9c804 100644
--- a/src/views/deviceManage/busCircuit.vue
+++ b/src/views/deviceManage/busCircuit.vue
@@ -1,77 +1,48 @@
 <!--回路列表-->
 <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-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.lampboxId" placeholder="所属灯箱" filterable clearable>
-                  <el-option v-for="item in boxList" :key="item.id" :label="item.lampboxName" :value="item.id"/>
-                </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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/circuit/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-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/circuit/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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.lampboxId" size="small" placeholder="所属灯箱" filterable clearable>
+          <el-option v-for="item in boxList" :key="item.id" :label="item.lampboxName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <!--<template slot="preColumns">-->
+      <!--<el-table-column align="center" type="selection" width="55"/>-->
+      <!--</template>-->
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <el-table-column label="操作" align="center" width="160">
-          <template slot-scope="scope">
-            <el-button v-if="hasPerm('/circuit/edit')" type="text" size="small" @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-circuit ref="editCircuit" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -128,7 +99,21 @@
       multipleSelection: [], // 多选选中项
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -253,17 +238,13 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法

diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 5077bef..3fd3f33 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -58,6 +58,8 @@
       <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns"/>
+        <!--复选框列-->
+        <el-table-column v-if="options && options.needMultSelect" align="center" type="selection" width="55"/>
         <!--序号列-->
         <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
         <!--内容列, 若columns存在且长度大于0-->
@@ -140,7 +142,8 @@
       type: Object,
       default: function() {
         return {
-          needIndex: true // 是否需要序号列
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
         }
       }
     }, // 配置项
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
index 1175911..b5e8442 100644
--- a/src/components/SearchArea/SearchArea.vue
+++ b/src/components/SearchArea/SearchArea.vue
@@ -16,6 +16,7 @@
       <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
       <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
       <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns-seperate"/>
     </div>
     <!-- 弹出框式高级检索 -->
     <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
index 84bdb9f..c192d79 100644
--- a/src/layout/components/AppHeader.vue
+++ b/src/layout/components/AppHeader.vue
@@ -1,6 +1,14 @@
 <template>
   <el-header class="app-header">
     <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown v-if="showChangeSys" class="systemSelect" size="medium" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
     <el-dropdown class="dropdown-container" trigger="click">
       <div class="dropdown-wrapper">
         <span style="line-height:50px;">欢迎您，{{ name }}</span>
@@ -33,6 +41,7 @@
   data() {
     return {
       title: this.baseConfig.title, // 标题
+      showChangeSys: !this.baseConfig.singleSys, // 是否显示切换系统菜单
       name: this.$store.getters.name, // 用户姓名
       showSetPwd: false // 是否显示修改密码按钮
     }
@@ -40,7 +49,9 @@
   computed: {
     ...mapGetters([
       'sidebar',
-      'avatar'
+      'avatar',
+      'currentSystem',
+      'systems'
     ])
   },
   methods: {
@@ -55,6 +66,38 @@
     resetPwd() {
       this.showSetPwd = true
       this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      const url = this.baseConfig.mainPage
+      window.location.href = url
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      const params1 = `?token=${this.$store.getters.token}`
+      const params = `?sys=${command.name}&url=${command.url}&code=${command.code}&token=${this.$store.getters.token}`
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params1
+        } else {
+          window.open(command.url + params1, '_blank')
+        }
+      } else {
+        // 取token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = this.baseConfig.mainPage + command.url + params
+        } else {
+          window.open(this.baseConfig.mainPage + command.url + params, '_blank')
+        }
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
     }
   }
 }
diff --git a/src/permission.js b/src/permission.js
index 69e8233..637373e 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -26,20 +26,13 @@
           // 设置当前子系统为基础资源子系统
           const currentSys = {
             code: 'baseResourse',
-            id: '1189107859077373285',
-            ismenu: '0',
-            levels: 1,
-            name: '智慧照明子系统',
-            num: 0,
-            parentId: '0',
-            resourceType: '02',
-            url: '/baseResourse'
+            name: '智慧照明子系统'
           }
           // 将当前系统信息保存在localStorage中
           store.commit('SET_SYSTEM', currentSys)
           // 远程访问获取权限列表（菜单&按钮）
           store.dispatch('GetMenus', currentSys).then(() => {
-            store.commit('SET_CHANGEFLAG', '0')
+            // store.commit('SET_CHANGEFLAG', '0')
             router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
             next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
           })
diff --git a/src/router/index.js b/src/router/index.js
index 32f93ef..b558038 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -49,21 +49,22 @@
   // 404错误页面
   { path: '/404', component: () => import('@/views/errorPage/404'), hidden: true },
   // 401 错误页面
-  { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
-  // 主页
-  {
-    path: '/',
-    component: Layout,
-    redirect: 'dashboard',
-    name: 'Dashboard',
-    // hidden: true,
-    children: [{
-      path: 'dashboard',
-      name: 'Dashboard',
-      component: () => import('@/views/dashboard/index'),
-      meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
-    }]
-  }
+  { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true }
+  // { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
+  // // 主页
+  // {
+  //   path: '/',
+  //   component: Layout,
+  //   redirect: 'dashboard',
+  //   name: 'Dashboard',
+  //   // hidden: true,
+  //   children: [{
+  //     path: 'dashboard',
+  //     name: 'Dashboard',
+  //     component: () => import('@/views/dashboard/index'),
+  //     meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
+  //   }]
+  // }
 ]
 // 实例化vue的时候直挂载constantRouter
 export default new Router({
diff --git a/src/views/alarmManage/alarmRule.vue b/src/views/alarmManage/alarmRule.vue
index 888a4d1..11469a2 100644
--- a/src/views/alarmManage/alarmRule.vue
+++ b/src/views/alarmManage/alarmRule.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
       <el-tab-pane label="路灯" name="lamp">
         <lamp-type-list ref="lamp"/>
@@ -8,7 +8,7 @@
         <lampbox-type-list ref="box"/>
       </el-tab-pane>
     </el-tabs>
-  </div>
+  </app-container>
 </template>
 
 <script>
diff --git a/src/views/alarmManage/components/alarmDetail.vue b/src/views/alarmManage/components/alarmDetail.vue
index 9c68377..d598779 100644
--- a/src/views/alarmManage/components/alarmDetail.vue
+++ b/src/views/alarmManage/components/alarmDetail.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :close-on-click-modal="false" :visible.sync="dialogFormVisible" title="报警详情" append-to-body>
-    <el-form ref="dataForm" :model="alarmForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :model="alarmForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="10">
           <el-form-item label="设备名称" prop="deviceName">
diff --git a/src/views/alarmManage/lampType/editLampType.vue b/src/views/alarmManage/lampType/editLampType.vue
index 8c3e37a..8e5fc23 100644
--- a/src/views/alarmManage/lampType/editLampType.vue
+++ b/src/views/alarmManage/lampType/editLampType.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="typeForm" label-well-code="right" label-width="200px">
+    <el-form ref="dataForm" :rules="rules" :model="typeForm" size="small" label-well-code="right" label-width="200px">
       <el-row :gutter="20">
         <el-col :span="20">
           <el-form-item label="路灯类型" prop="typeName">
diff --git a/src/views/alarmManage/lampType/lampTypeList.vue b/src/views/alarmManage/lampType/lampTypeList.vue
index f8547ed..f10c63b 100644
--- a/src/views/alarmManage/lampType/lampTypeList.vue
+++ b/src/views/alarmManage/lampType/lampTypeList.vue
@@ -8,12 +8,11 @@
           <el-row>
             <el-col :span="4">
               <el-form-item class="selectForm-container-item">
-                <el-input v-model.trim="listQuery.typeName" placeholder="类型名称" clearable />
+                <el-input v-model.trim="listQuery.typeName" size="small" placeholder="类型名称" clearable />
               </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-button class="filter-item" type="primary" icon="el-icon-search" size="small" style="margin-top: 2px" @click="search">搜索</el-button>
             </el-col>
           </el-row>
         </el-form>
@@ -28,7 +27,7 @@
           <el-button class="edit_btn" size="small" @click="add">新增</el-button>
         </el-col>
       </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
+      <el-table v-loading="listLoading" :data="list" class="table" size="small" border @selection-change="handleSelectionChange">
         <!--拥有删除权限则显示复选框-->
         <el-table-column v-if="hasPerm('/lampType/delete')" align="center" type="selection" width="55"/>
         <!--序号列-->
diff --git a/src/views/alarmManage/lampboxType/editLampboxType.vue b/src/views/alarmManage/lampboxType/editLampboxType.vue
index 1b94960..ae3a7c1 100644
--- a/src/views/alarmManage/lampboxType/editLampboxType.vue
+++ b/src/views/alarmManage/lampboxType/editLampboxType.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="typeForm" label-well-code="right" label-width="200px">
+    <el-form ref="dataForm" :rules="rules" :model="typeForm" size="small" label-well-code="right" label-width="200px">
       <el-row :gutter="20">
         <el-col :span="20">
           <el-form-item label="灯箱类型" prop="typeName">
diff --git a/src/views/alarmManage/lampboxType/lampboxTypeList.vue b/src/views/alarmManage/lampboxType/lampboxTypeList.vue
index 7b68f20..f33dcbf 100644
--- a/src/views/alarmManage/lampboxType/lampboxTypeList.vue
+++ b/src/views/alarmManage/lampboxType/lampboxTypeList.vue
@@ -8,7 +8,7 @@
           <el-row>
             <el-col :span="4">
               <el-form-item class="selectForm-container-item">
-                <el-input v-model.trim="listQuery.typeName" placeholder="类型名称" clearable />
+                <el-input v-model.trim="listQuery.typeName" size="small" placeholder="类型名称" clearable />
               </el-form-item>
             </el-col>
 
diff --git a/src/views/alarmManage/listAlarm.vue b/src/views/alarmManage/listAlarm.vue
index 7571a0e..fe3e359 100644
--- a/src/views/alarmManage/listAlarm.vue
+++ b/src/views/alarmManage/listAlarm.vue
@@ -1,73 +1,52 @@
 <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-form-item>
-              <el-input v-model.trim="listQuery.keyword" placeholder="设备编号/设备名称" clearable/>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmType" placeholder="报警类型" clearable>
-                <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmStatus" placeholder="报警状态" clearable>
-                <el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item" prop="startTime">
-              <el-date-picker
-                v-model="timeRange"
-                type="datetimerange"
-                range-separator="至"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                start-placeholder="报警开始时间"
-                end-placeholder="报警结束时间"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
-        <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>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="设备编号/设备名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmType" size="small" placeholder="报警类型" clearable>
+          <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmStatus" size="small" placeholder="报警状态" clearable>
+          <el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          size="small"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="报警开始时间"
+          end-placeholder="报警结束时间"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="130">
           <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
             <el-button type="text" size="small" @click="showDetail(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>
     <alarm-detail v-show="dialogFormVisible" ref="alarmdetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -123,7 +102,21 @@
       dialogFormVisible: false,
       alarmStatusList: [{ name: '正在报警', value: '1' }, { name: '已取消', value: '2' }], // 报警状态列表
       alarmTypeList: [],
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   watch: {
@@ -171,19 +164,15 @@
     },
     clearInput() {
       this.listQuery = {
-        name: '', // 姓名
-        sex: '', // 性别
-        nation: '', // 民族
-        collReason: '', // 采集原因
-        cardType: '', // 证件类型
-        idCardNo: '', // 证件号码
-        alarmReason: '', // 报警原因
-        startTime: '', // 开始时间
-        endTime: '', // 结束时间
+        keyword: '', // 设备编号/设备名称
+        alarmType: '', // 报警类型
+        alarmStatus: '', // 报警状态
+        startTime: '', // 报警开始时间
+        endTime: '', // 报警结束时间
         offset: 1,
         limit: 20,
-        sort: '',
-        order: ''
+        sort: 'alarmTime',
+        order: 'desc'
       }
       this.timeRange = []
       this.fetchData(false)
@@ -194,18 +183,13 @@
         this.alarmTypeList = response.data
       })
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }
diff --git a/src/views/alarmManage/listAlarmNow.vue b/src/views/alarmManage/listAlarmNow.vue
index c48b60a..d98b641 100644
--- a/src/views/alarmManage/listAlarmNow.vue
+++ b/src/views/alarmManage/listAlarmNow.vue
@@ -1,73 +1,47 @@
 <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-form-item>
-              <el-input v-model.trim="listQuery.keyword" placeholder="设备编号/设备名称" clearable/>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmType" placeholder="报警类型" clearable>
-                <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <!--<el-form-item>-->
-            <!--<el-select v-model="listQuery.alarmStatus" placeholder="报警状态" clearable>-->
-            <!--<el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>-->
-            <!--</el-select>-->
-            <!--</el-form-item>-->
-            <el-form-item class="selectForm-container-item" prop="startTime">
-              <el-date-picker
-                v-model="timeRange"
-                type="datetimerange"
-                range-separator="至"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                start-placeholder="报警开始时间"
-                end-placeholder="报警结束时间"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
-        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="设备编号/设备名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmType" size="small" placeholder="报警类型" clearable>
+          <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          size="small"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="报警开始时间"
+          end-placeholder="报警结束时间"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
-            <span>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" align="center" width="130">
-          <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
             <el-button type="text" size="small" @click="showDetail(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>
     <alarm-detail v-show="dialogFormVisible" ref="alarmdetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -123,7 +97,21 @@
       dialogFormVisible: false,
       alarmStatusList: [{ name: '正在报警', value: '1' }, { name: '已取消', value: '2' }], // 报警状态列表
       alarmTypeList: [],
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   watch: {
@@ -171,15 +159,11 @@
     },
     clearInput() {
       this.listQuery = {
-        name: '', // 姓名
-        sex: '', // 性别
-        nation: '', // 民族
-        collReason: '', // 采集原因
-        cardType: '', // 证件类型
-        idCardNo: '', // 证件号码
-        alarmReason: '', // 报警原因
-        startTime: '', // 开始时间
-        endTime: '', // 结束时间
+        keyword: '', // 设备编号/设备名称
+        alarmType: '', // 报警类型
+        alarmStatus: '1', // 报警状态
+        startTime: '', // 报警开始时间
+        endTime: '', // 报警结束时间
         offset: 1,
         limit: 20,
         sort: '',
@@ -194,18 +178,13 @@
         this.alarmTypeList = response.data
       })
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }
diff --git a/src/views/deviceManage/busCircuit.vue b/src/views/deviceManage/busCircuit.vue
index 2e1f872..7c9c804 100644
--- a/src/views/deviceManage/busCircuit.vue
+++ b/src/views/deviceManage/busCircuit.vue
@@ -1,77 +1,48 @@
 <!--回路列表-->
 <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-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.lampboxId" placeholder="所属灯箱" filterable clearable>
-                  <el-option v-for="item in boxList" :key="item.id" :label="item.lampboxName" :value="item.id"/>
-                </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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/circuit/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-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/circuit/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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.lampboxId" size="small" placeholder="所属灯箱" filterable clearable>
+          <el-option v-for="item in boxList" :key="item.id" :label="item.lampboxName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <!--<template slot="preColumns">-->
+      <!--<el-table-column align="center" type="selection" width="55"/>-->
+      <!--</template>-->
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <el-table-column label="操作" align="center" width="160">
-          <template slot-scope="scope">
-            <el-button v-if="hasPerm('/circuit/edit')" type="text" size="small" @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-circuit ref="editCircuit" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -128,7 +99,21 @@
       multipleSelection: [], // 多选选中项
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -253,17 +238,13 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/busController.vue b/src/views/deviceManage/busController.vue
index 49789c4..4646bf2 100644
--- a/src/views/deviceManage/busController.vue
+++ b/src/views/deviceManage/busController.vue
@@ -1,98 +1,67 @@
 <!--设备列表-->
 <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>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.controllerCode" size="small" placeholder="控制器编号" clearable />
+      </search-item>
+      <search-item/>
+      <search-item>
+        <el-select v-model="listQuery.controllerType" size="small" 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" size="small" placeholder="所属组织"/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" 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
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="selectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <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>
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <!--<template slot="preColumns">-->
+      <!--<el-table-column align="center" type="selection" width="55"/>-->
+      <!--</template>-->
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <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>
@@ -152,7 +121,21 @@
       statusList: [{ value: '1', name: '在线' }, { value: '0', name: '离线' }],
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -303,21 +286,17 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
-    handleSelectionChange(val) {
+    selectionChange(val) {
       this.multipleSelection = val
     }
   }

diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 5077bef..3fd3f33 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -58,6 +58,8 @@
       <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns"/>
+        <!--复选框列-->
+        <el-table-column v-if="options && options.needMultSelect" align="center" type="selection" width="55"/>
         <!--序号列-->
         <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
         <!--内容列, 若columns存在且长度大于0-->
@@ -140,7 +142,8 @@
       type: Object,
       default: function() {
         return {
-          needIndex: true // 是否需要序号列
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
         }
       }
     }, // 配置项
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
index 1175911..b5e8442 100644
--- a/src/components/SearchArea/SearchArea.vue
+++ b/src/components/SearchArea/SearchArea.vue
@@ -16,6 +16,7 @@
       <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
       <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
       <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns-seperate"/>
     </div>
     <!-- 弹出框式高级检索 -->
     <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
index 84bdb9f..c192d79 100644
--- a/src/layout/components/AppHeader.vue
+++ b/src/layout/components/AppHeader.vue
@@ -1,6 +1,14 @@
 <template>
   <el-header class="app-header">
     <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown v-if="showChangeSys" class="systemSelect" size="medium" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
     <el-dropdown class="dropdown-container" trigger="click">
       <div class="dropdown-wrapper">
         <span style="line-height:50px;">欢迎您，{{ name }}</span>
@@ -33,6 +41,7 @@
   data() {
     return {
       title: this.baseConfig.title, // 标题
+      showChangeSys: !this.baseConfig.singleSys, // 是否显示切换系统菜单
       name: this.$store.getters.name, // 用户姓名
       showSetPwd: false // 是否显示修改密码按钮
     }
@@ -40,7 +49,9 @@
   computed: {
     ...mapGetters([
       'sidebar',
-      'avatar'
+      'avatar',
+      'currentSystem',
+      'systems'
     ])
   },
   methods: {
@@ -55,6 +66,38 @@
     resetPwd() {
       this.showSetPwd = true
       this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      const url = this.baseConfig.mainPage
+      window.location.href = url
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      const params1 = `?token=${this.$store.getters.token}`
+      const params = `?sys=${command.name}&url=${command.url}&code=${command.code}&token=${this.$store.getters.token}`
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params1
+        } else {
+          window.open(command.url + params1, '_blank')
+        }
+      } else {
+        // 取token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = this.baseConfig.mainPage + command.url + params
+        } else {
+          window.open(this.baseConfig.mainPage + command.url + params, '_blank')
+        }
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
     }
   }
 }
diff --git a/src/permission.js b/src/permission.js
index 69e8233..637373e 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -26,20 +26,13 @@
           // 设置当前子系统为基础资源子系统
           const currentSys = {
             code: 'baseResourse',
-            id: '1189107859077373285',
-            ismenu: '0',
-            levels: 1,
-            name: '智慧照明子系统',
-            num: 0,
-            parentId: '0',
-            resourceType: '02',
-            url: '/baseResourse'
+            name: '智慧照明子系统'
           }
           // 将当前系统信息保存在localStorage中
           store.commit('SET_SYSTEM', currentSys)
           // 远程访问获取权限列表（菜单&按钮）
           store.dispatch('GetMenus', currentSys).then(() => {
-            store.commit('SET_CHANGEFLAG', '0')
+            // store.commit('SET_CHANGEFLAG', '0')
             router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
             next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
           })
diff --git a/src/router/index.js b/src/router/index.js
index 32f93ef..b558038 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -49,21 +49,22 @@
   // 404错误页面
   { path: '/404', component: () => import('@/views/errorPage/404'), hidden: true },
   // 401 错误页面
-  { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
-  // 主页
-  {
-    path: '/',
-    component: Layout,
-    redirect: 'dashboard',
-    name: 'Dashboard',
-    // hidden: true,
-    children: [{
-      path: 'dashboard',
-      name: 'Dashboard',
-      component: () => import('@/views/dashboard/index'),
-      meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
-    }]
-  }
+  { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true }
+  // { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
+  // // 主页
+  // {
+  //   path: '/',
+  //   component: Layout,
+  //   redirect: 'dashboard',
+  //   name: 'Dashboard',
+  //   // hidden: true,
+  //   children: [{
+  //     path: 'dashboard',
+  //     name: 'Dashboard',
+  //     component: () => import('@/views/dashboard/index'),
+  //     meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
+  //   }]
+  // }
 ]
 // 实例化vue的时候直挂载constantRouter
 export default new Router({
diff --git a/src/views/alarmManage/alarmRule.vue b/src/views/alarmManage/alarmRule.vue
index 888a4d1..11469a2 100644
--- a/src/views/alarmManage/alarmRule.vue
+++ b/src/views/alarmManage/alarmRule.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
       <el-tab-pane label="路灯" name="lamp">
         <lamp-type-list ref="lamp"/>
@@ -8,7 +8,7 @@
         <lampbox-type-list ref="box"/>
       </el-tab-pane>
     </el-tabs>
-  </div>
+  </app-container>
 </template>
 
 <script>
diff --git a/src/views/alarmManage/components/alarmDetail.vue b/src/views/alarmManage/components/alarmDetail.vue
index 9c68377..d598779 100644
--- a/src/views/alarmManage/components/alarmDetail.vue
+++ b/src/views/alarmManage/components/alarmDetail.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :close-on-click-modal="false" :visible.sync="dialogFormVisible" title="报警详情" append-to-body>
-    <el-form ref="dataForm" :model="alarmForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :model="alarmForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="10">
           <el-form-item label="设备名称" prop="deviceName">
diff --git a/src/views/alarmManage/lampType/editLampType.vue b/src/views/alarmManage/lampType/editLampType.vue
index 8c3e37a..8e5fc23 100644
--- a/src/views/alarmManage/lampType/editLampType.vue
+++ b/src/views/alarmManage/lampType/editLampType.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="typeForm" label-well-code="right" label-width="200px">
+    <el-form ref="dataForm" :rules="rules" :model="typeForm" size="small" label-well-code="right" label-width="200px">
       <el-row :gutter="20">
         <el-col :span="20">
           <el-form-item label="路灯类型" prop="typeName">
diff --git a/src/views/alarmManage/lampType/lampTypeList.vue b/src/views/alarmManage/lampType/lampTypeList.vue
index f8547ed..f10c63b 100644
--- a/src/views/alarmManage/lampType/lampTypeList.vue
+++ b/src/views/alarmManage/lampType/lampTypeList.vue
@@ -8,12 +8,11 @@
           <el-row>
             <el-col :span="4">
               <el-form-item class="selectForm-container-item">
-                <el-input v-model.trim="listQuery.typeName" placeholder="类型名称" clearable />
+                <el-input v-model.trim="listQuery.typeName" size="small" placeholder="类型名称" clearable />
               </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-button class="filter-item" type="primary" icon="el-icon-search" size="small" style="margin-top: 2px" @click="search">搜索</el-button>
             </el-col>
           </el-row>
         </el-form>
@@ -28,7 +27,7 @@
           <el-button class="edit_btn" size="small" @click="add">新增</el-button>
         </el-col>
       </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
+      <el-table v-loading="listLoading" :data="list" class="table" size="small" border @selection-change="handleSelectionChange">
         <!--拥有删除权限则显示复选框-->
         <el-table-column v-if="hasPerm('/lampType/delete')" align="center" type="selection" width="55"/>
         <!--序号列-->
diff --git a/src/views/alarmManage/lampboxType/editLampboxType.vue b/src/views/alarmManage/lampboxType/editLampboxType.vue
index 1b94960..ae3a7c1 100644
--- a/src/views/alarmManage/lampboxType/editLampboxType.vue
+++ b/src/views/alarmManage/lampboxType/editLampboxType.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="typeForm" label-well-code="right" label-width="200px">
+    <el-form ref="dataForm" :rules="rules" :model="typeForm" size="small" label-well-code="right" label-width="200px">
       <el-row :gutter="20">
         <el-col :span="20">
           <el-form-item label="灯箱类型" prop="typeName">
diff --git a/src/views/alarmManage/lampboxType/lampboxTypeList.vue b/src/views/alarmManage/lampboxType/lampboxTypeList.vue
index 7b68f20..f33dcbf 100644
--- a/src/views/alarmManage/lampboxType/lampboxTypeList.vue
+++ b/src/views/alarmManage/lampboxType/lampboxTypeList.vue
@@ -8,7 +8,7 @@
           <el-row>
             <el-col :span="4">
               <el-form-item class="selectForm-container-item">
-                <el-input v-model.trim="listQuery.typeName" placeholder="类型名称" clearable />
+                <el-input v-model.trim="listQuery.typeName" size="small" placeholder="类型名称" clearable />
               </el-form-item>
             </el-col>
 
diff --git a/src/views/alarmManage/listAlarm.vue b/src/views/alarmManage/listAlarm.vue
index 7571a0e..fe3e359 100644
--- a/src/views/alarmManage/listAlarm.vue
+++ b/src/views/alarmManage/listAlarm.vue
@@ -1,73 +1,52 @@
 <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-form-item>
-              <el-input v-model.trim="listQuery.keyword" placeholder="设备编号/设备名称" clearable/>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmType" placeholder="报警类型" clearable>
-                <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmStatus" placeholder="报警状态" clearable>
-                <el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item" prop="startTime">
-              <el-date-picker
-                v-model="timeRange"
-                type="datetimerange"
-                range-separator="至"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                start-placeholder="报警开始时间"
-                end-placeholder="报警结束时间"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
-        <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>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="设备编号/设备名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmType" size="small" placeholder="报警类型" clearable>
+          <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmStatus" size="small" placeholder="报警状态" clearable>
+          <el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          size="small"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="报警开始时间"
+          end-placeholder="报警结束时间"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="130">
           <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
             <el-button type="text" size="small" @click="showDetail(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>
     <alarm-detail v-show="dialogFormVisible" ref="alarmdetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -123,7 +102,21 @@
       dialogFormVisible: false,
       alarmStatusList: [{ name: '正在报警', value: '1' }, { name: '已取消', value: '2' }], // 报警状态列表
       alarmTypeList: [],
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   watch: {
@@ -171,19 +164,15 @@
     },
     clearInput() {
       this.listQuery = {
-        name: '', // 姓名
-        sex: '', // 性别
-        nation: '', // 民族
-        collReason: '', // 采集原因
-        cardType: '', // 证件类型
-        idCardNo: '', // 证件号码
-        alarmReason: '', // 报警原因
-        startTime: '', // 开始时间
-        endTime: '', // 结束时间
+        keyword: '', // 设备编号/设备名称
+        alarmType: '', // 报警类型
+        alarmStatus: '', // 报警状态
+        startTime: '', // 报警开始时间
+        endTime: '', // 报警结束时间
         offset: 1,
         limit: 20,
-        sort: '',
-        order: ''
+        sort: 'alarmTime',
+        order: 'desc'
       }
       this.timeRange = []
       this.fetchData(false)
@@ -194,18 +183,13 @@
         this.alarmTypeList = response.data
       })
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }
diff --git a/src/views/alarmManage/listAlarmNow.vue b/src/views/alarmManage/listAlarmNow.vue
index c48b60a..d98b641 100644
--- a/src/views/alarmManage/listAlarmNow.vue
+++ b/src/views/alarmManage/listAlarmNow.vue
@@ -1,73 +1,47 @@
 <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-form-item>
-              <el-input v-model.trim="listQuery.keyword" placeholder="设备编号/设备名称" clearable/>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmType" placeholder="报警类型" clearable>
-                <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <!--<el-form-item>-->
-            <!--<el-select v-model="listQuery.alarmStatus" placeholder="报警状态" clearable>-->
-            <!--<el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>-->
-            <!--</el-select>-->
-            <!--</el-form-item>-->
-            <el-form-item class="selectForm-container-item" prop="startTime">
-              <el-date-picker
-                v-model="timeRange"
-                type="datetimerange"
-                range-separator="至"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                start-placeholder="报警开始时间"
-                end-placeholder="报警结束时间"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
-        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="设备编号/设备名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmType" size="small" placeholder="报警类型" clearable>
+          <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          size="small"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="报警开始时间"
+          end-placeholder="报警结束时间"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
-            <span>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" align="center" width="130">
-          <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
             <el-button type="text" size="small" @click="showDetail(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>
     <alarm-detail v-show="dialogFormVisible" ref="alarmdetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -123,7 +97,21 @@
       dialogFormVisible: false,
       alarmStatusList: [{ name: '正在报警', value: '1' }, { name: '已取消', value: '2' }], // 报警状态列表
       alarmTypeList: [],
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   watch: {
@@ -171,15 +159,11 @@
     },
     clearInput() {
       this.listQuery = {
-        name: '', // 姓名
-        sex: '', // 性别
-        nation: '', // 民族
-        collReason: '', // 采集原因
-        cardType: '', // 证件类型
-        idCardNo: '', // 证件号码
-        alarmReason: '', // 报警原因
-        startTime: '', // 开始时间
-        endTime: '', // 结束时间
+        keyword: '', // 设备编号/设备名称
+        alarmType: '', // 报警类型
+        alarmStatus: '1', // 报警状态
+        startTime: '', // 报警开始时间
+        endTime: '', // 报警结束时间
         offset: 1,
         limit: 20,
         sort: '',
@@ -194,18 +178,13 @@
         this.alarmTypeList = response.data
       })
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }
diff --git a/src/views/deviceManage/busCircuit.vue b/src/views/deviceManage/busCircuit.vue
index 2e1f872..7c9c804 100644
--- a/src/views/deviceManage/busCircuit.vue
+++ b/src/views/deviceManage/busCircuit.vue
@@ -1,77 +1,48 @@
 <!--回路列表-->
 <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-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.lampboxId" placeholder="所属灯箱" filterable clearable>
-                  <el-option v-for="item in boxList" :key="item.id" :label="item.lampboxName" :value="item.id"/>
-                </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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/circuit/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-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/circuit/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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.lampboxId" size="small" placeholder="所属灯箱" filterable clearable>
+          <el-option v-for="item in boxList" :key="item.id" :label="item.lampboxName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <!--<template slot="preColumns">-->
+      <!--<el-table-column align="center" type="selection" width="55"/>-->
+      <!--</template>-->
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <el-table-column label="操作" align="center" width="160">
-          <template slot-scope="scope">
-            <el-button v-if="hasPerm('/circuit/edit')" type="text" size="small" @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-circuit ref="editCircuit" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -128,7 +99,21 @@
       multipleSelection: [], // 多选选中项
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -253,17 +238,13 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/busController.vue b/src/views/deviceManage/busController.vue
index 49789c4..4646bf2 100644
--- a/src/views/deviceManage/busController.vue
+++ b/src/views/deviceManage/busController.vue
@@ -1,98 +1,67 @@
 <!--设备列表-->
 <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>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.controllerCode" size="small" placeholder="控制器编号" clearable />
+      </search-item>
+      <search-item/>
+      <search-item>
+        <el-select v-model="listQuery.controllerType" size="small" 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" size="small" placeholder="所属组织"/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" 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
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="selectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <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>
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <!--<template slot="preColumns">-->
+      <!--<el-table-column align="center" type="selection" width="55"/>-->
+      <!--</template>-->
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <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>
@@ -152,7 +121,21 @@
       statusList: [{ value: '1', name: '在线' }, { value: '0', name: '离线' }],
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -303,21 +286,17 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
-    handleSelectionChange(val) {
+    selectionChange(val) {
       this.multipleSelection = val
     }
   }
diff --git a/src/views/deviceManage/busGroup.vue b/src/views/deviceManage/busGroup.vue
index 9f85789..a35646b 100644
--- a/src/views/deviceManage/busGroup.vue
+++ b/src/views/deviceManage/busGroup.vue
@@ -1,80 +1,48 @@
 <!--灯箱列表-->
 <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.keyword" placeholder="分组名称" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.deviceType" placeholder="设备类型" clearable @change="fetchData">
-                  <el-option v-for="item in groupList" :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="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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/lampbox/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-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column 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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="分组名称" clearable />
+      </search-item>
+      <search-item/>
+      <search-item>
+        <el-select v-model="listQuery.deviceType" size="small" placeholder="设备类型" clearable @change="fetchData">
+          <el-option v-for="item in groupList" :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" size="small" placeholder="所属组织"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <el-table-column label="操作" align="center" width="160">
-          <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>-->
-            <el-button type="text" size="small" @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-Group ref="editGroup" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -132,7 +100,21 @@
       multipleSelection: [], // 多选选中项
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -249,17 +231,13 @@
         this.listLoading = false
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法

diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 5077bef..3fd3f33 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -58,6 +58,8 @@
       <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns"/>
+        <!--复选框列-->
+        <el-table-column v-if="options && options.needMultSelect" align="center" type="selection" width="55"/>
         <!--序号列-->
         <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
         <!--内容列, 若columns存在且长度大于0-->
@@ -140,7 +142,8 @@
       type: Object,
       default: function() {
         return {
-          needIndex: true // 是否需要序号列
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
         }
       }
     }, // 配置项
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
index 1175911..b5e8442 100644
--- a/src/components/SearchArea/SearchArea.vue
+++ b/src/components/SearchArea/SearchArea.vue
@@ -16,6 +16,7 @@
       <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
       <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
       <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns-seperate"/>
     </div>
     <!-- 弹出框式高级检索 -->
     <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
index 84bdb9f..c192d79 100644
--- a/src/layout/components/AppHeader.vue
+++ b/src/layout/components/AppHeader.vue
@@ -1,6 +1,14 @@
 <template>
   <el-header class="app-header">
     <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown v-if="showChangeSys" class="systemSelect" size="medium" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
     <el-dropdown class="dropdown-container" trigger="click">
       <div class="dropdown-wrapper">
         <span style="line-height:50px;">欢迎您，{{ name }}</span>
@@ -33,6 +41,7 @@
   data() {
     return {
       title: this.baseConfig.title, // 标题
+      showChangeSys: !this.baseConfig.singleSys, // 是否显示切换系统菜单
       name: this.$store.getters.name, // 用户姓名
       showSetPwd: false // 是否显示修改密码按钮
     }
@@ -40,7 +49,9 @@
   computed: {
     ...mapGetters([
       'sidebar',
-      'avatar'
+      'avatar',
+      'currentSystem',
+      'systems'
     ])
   },
   methods: {
@@ -55,6 +66,38 @@
     resetPwd() {
       this.showSetPwd = true
       this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      const url = this.baseConfig.mainPage
+      window.location.href = url
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      const params1 = `?token=${this.$store.getters.token}`
+      const params = `?sys=${command.name}&url=${command.url}&code=${command.code}&token=${this.$store.getters.token}`
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params1
+        } else {
+          window.open(command.url + params1, '_blank')
+        }
+      } else {
+        // 取token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = this.baseConfig.mainPage + command.url + params
+        } else {
+          window.open(this.baseConfig.mainPage + command.url + params, '_blank')
+        }
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
     }
   }
 }
diff --git a/src/permission.js b/src/permission.js
index 69e8233..637373e 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -26,20 +26,13 @@
           // 设置当前子系统为基础资源子系统
           const currentSys = {
             code: 'baseResourse',
-            id: '1189107859077373285',
-            ismenu: '0',
-            levels: 1,
-            name: '智慧照明子系统',
-            num: 0,
-            parentId: '0',
-            resourceType: '02',
-            url: '/baseResourse'
+            name: '智慧照明子系统'
           }
           // 将当前系统信息保存在localStorage中
           store.commit('SET_SYSTEM', currentSys)
           // 远程访问获取权限列表（菜单&按钮）
           store.dispatch('GetMenus', currentSys).then(() => {
-            store.commit('SET_CHANGEFLAG', '0')
+            // store.commit('SET_CHANGEFLAG', '0')
             router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
             next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
           })
diff --git a/src/router/index.js b/src/router/index.js
index 32f93ef..b558038 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -49,21 +49,22 @@
   // 404错误页面
   { path: '/404', component: () => import('@/views/errorPage/404'), hidden: true },
   // 401 错误页面
-  { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
-  // 主页
-  {
-    path: '/',
-    component: Layout,
-    redirect: 'dashboard',
-    name: 'Dashboard',
-    // hidden: true,
-    children: [{
-      path: 'dashboard',
-      name: 'Dashboard',
-      component: () => import('@/views/dashboard/index'),
-      meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
-    }]
-  }
+  { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true }
+  // { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
+  // // 主页
+  // {
+  //   path: '/',
+  //   component: Layout,
+  //   redirect: 'dashboard',
+  //   name: 'Dashboard',
+  //   // hidden: true,
+  //   children: [{
+  //     path: 'dashboard',
+  //     name: 'Dashboard',
+  //     component: () => import('@/views/dashboard/index'),
+  //     meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
+  //   }]
+  // }
 ]
 // 实例化vue的时候直挂载constantRouter
 export default new Router({
diff --git a/src/views/alarmManage/alarmRule.vue b/src/views/alarmManage/alarmRule.vue
index 888a4d1..11469a2 100644
--- a/src/views/alarmManage/alarmRule.vue
+++ b/src/views/alarmManage/alarmRule.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
       <el-tab-pane label="路灯" name="lamp">
         <lamp-type-list ref="lamp"/>
@@ -8,7 +8,7 @@
         <lampbox-type-list ref="box"/>
       </el-tab-pane>
     </el-tabs>
-  </div>
+  </app-container>
 </template>
 
 <script>
diff --git a/src/views/alarmManage/components/alarmDetail.vue b/src/views/alarmManage/components/alarmDetail.vue
index 9c68377..d598779 100644
--- a/src/views/alarmManage/components/alarmDetail.vue
+++ b/src/views/alarmManage/components/alarmDetail.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :close-on-click-modal="false" :visible.sync="dialogFormVisible" title="报警详情" append-to-body>
-    <el-form ref="dataForm" :model="alarmForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :model="alarmForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="10">
           <el-form-item label="设备名称" prop="deviceName">
diff --git a/src/views/alarmManage/lampType/editLampType.vue b/src/views/alarmManage/lampType/editLampType.vue
index 8c3e37a..8e5fc23 100644
--- a/src/views/alarmManage/lampType/editLampType.vue
+++ b/src/views/alarmManage/lampType/editLampType.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="typeForm" label-well-code="right" label-width="200px">
+    <el-form ref="dataForm" :rules="rules" :model="typeForm" size="small" label-well-code="right" label-width="200px">
       <el-row :gutter="20">
         <el-col :span="20">
           <el-form-item label="路灯类型" prop="typeName">
diff --git a/src/views/alarmManage/lampType/lampTypeList.vue b/src/views/alarmManage/lampType/lampTypeList.vue
index f8547ed..f10c63b 100644
--- a/src/views/alarmManage/lampType/lampTypeList.vue
+++ b/src/views/alarmManage/lampType/lampTypeList.vue
@@ -8,12 +8,11 @@
           <el-row>
             <el-col :span="4">
               <el-form-item class="selectForm-container-item">
-                <el-input v-model.trim="listQuery.typeName" placeholder="类型名称" clearable />
+                <el-input v-model.trim="listQuery.typeName" size="small" placeholder="类型名称" clearable />
               </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-button class="filter-item" type="primary" icon="el-icon-search" size="small" style="margin-top: 2px" @click="search">搜索</el-button>
             </el-col>
           </el-row>
         </el-form>
@@ -28,7 +27,7 @@
           <el-button class="edit_btn" size="small" @click="add">新增</el-button>
         </el-col>
       </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
+      <el-table v-loading="listLoading" :data="list" class="table" size="small" border @selection-change="handleSelectionChange">
         <!--拥有删除权限则显示复选框-->
         <el-table-column v-if="hasPerm('/lampType/delete')" align="center" type="selection" width="55"/>
         <!--序号列-->
diff --git a/src/views/alarmManage/lampboxType/editLampboxType.vue b/src/views/alarmManage/lampboxType/editLampboxType.vue
index 1b94960..ae3a7c1 100644
--- a/src/views/alarmManage/lampboxType/editLampboxType.vue
+++ b/src/views/alarmManage/lampboxType/editLampboxType.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="typeForm" label-well-code="right" label-width="200px">
+    <el-form ref="dataForm" :rules="rules" :model="typeForm" size="small" label-well-code="right" label-width="200px">
       <el-row :gutter="20">
         <el-col :span="20">
           <el-form-item label="灯箱类型" prop="typeName">
diff --git a/src/views/alarmManage/lampboxType/lampboxTypeList.vue b/src/views/alarmManage/lampboxType/lampboxTypeList.vue
index 7b68f20..f33dcbf 100644
--- a/src/views/alarmManage/lampboxType/lampboxTypeList.vue
+++ b/src/views/alarmManage/lampboxType/lampboxTypeList.vue
@@ -8,7 +8,7 @@
           <el-row>
             <el-col :span="4">
               <el-form-item class="selectForm-container-item">
-                <el-input v-model.trim="listQuery.typeName" placeholder="类型名称" clearable />
+                <el-input v-model.trim="listQuery.typeName" size="small" placeholder="类型名称" clearable />
               </el-form-item>
             </el-col>
 
diff --git a/src/views/alarmManage/listAlarm.vue b/src/views/alarmManage/listAlarm.vue
index 7571a0e..fe3e359 100644
--- a/src/views/alarmManage/listAlarm.vue
+++ b/src/views/alarmManage/listAlarm.vue
@@ -1,73 +1,52 @@
 <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-form-item>
-              <el-input v-model.trim="listQuery.keyword" placeholder="设备编号/设备名称" clearable/>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmType" placeholder="报警类型" clearable>
-                <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmStatus" placeholder="报警状态" clearable>
-                <el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item" prop="startTime">
-              <el-date-picker
-                v-model="timeRange"
-                type="datetimerange"
-                range-separator="至"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                start-placeholder="报警开始时间"
-                end-placeholder="报警结束时间"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
-        <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>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="设备编号/设备名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmType" size="small" placeholder="报警类型" clearable>
+          <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmStatus" size="small" placeholder="报警状态" clearable>
+          <el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          size="small"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="报警开始时间"
+          end-placeholder="报警结束时间"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="130">
           <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
             <el-button type="text" size="small" @click="showDetail(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>
     <alarm-detail v-show="dialogFormVisible" ref="alarmdetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -123,7 +102,21 @@
       dialogFormVisible: false,
       alarmStatusList: [{ name: '正在报警', value: '1' }, { name: '已取消', value: '2' }], // 报警状态列表
       alarmTypeList: [],
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   watch: {
@@ -171,19 +164,15 @@
     },
     clearInput() {
       this.listQuery = {
-        name: '', // 姓名
-        sex: '', // 性别
-        nation: '', // 民族
-        collReason: '', // 采集原因
-        cardType: '', // 证件类型
-        idCardNo: '', // 证件号码
-        alarmReason: '', // 报警原因
-        startTime: '', // 开始时间
-        endTime: '', // 结束时间
+        keyword: '', // 设备编号/设备名称
+        alarmType: '', // 报警类型
+        alarmStatus: '', // 报警状态
+        startTime: '', // 报警开始时间
+        endTime: '', // 报警结束时间
         offset: 1,
         limit: 20,
-        sort: '',
-        order: ''
+        sort: 'alarmTime',
+        order: 'desc'
       }
       this.timeRange = []
       this.fetchData(false)
@@ -194,18 +183,13 @@
         this.alarmTypeList = response.data
       })
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }
diff --git a/src/views/alarmManage/listAlarmNow.vue b/src/views/alarmManage/listAlarmNow.vue
index c48b60a..d98b641 100644
--- a/src/views/alarmManage/listAlarmNow.vue
+++ b/src/views/alarmManage/listAlarmNow.vue
@@ -1,73 +1,47 @@
 <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-form-item>
-              <el-input v-model.trim="listQuery.keyword" placeholder="设备编号/设备名称" clearable/>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmType" placeholder="报警类型" clearable>
-                <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <!--<el-form-item>-->
-            <!--<el-select v-model="listQuery.alarmStatus" placeholder="报警状态" clearable>-->
-            <!--<el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>-->
-            <!--</el-select>-->
-            <!--</el-form-item>-->
-            <el-form-item class="selectForm-container-item" prop="startTime">
-              <el-date-picker
-                v-model="timeRange"
-                type="datetimerange"
-                range-separator="至"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                start-placeholder="报警开始时间"
-                end-placeholder="报警结束时间"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
-        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="设备编号/设备名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmType" size="small" placeholder="报警类型" clearable>
+          <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          size="small"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="报警开始时间"
+          end-placeholder="报警结束时间"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
-            <span>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" align="center" width="130">
-          <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
             <el-button type="text" size="small" @click="showDetail(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>
     <alarm-detail v-show="dialogFormVisible" ref="alarmdetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -123,7 +97,21 @@
       dialogFormVisible: false,
       alarmStatusList: [{ name: '正在报警', value: '1' }, { name: '已取消', value: '2' }], // 报警状态列表
       alarmTypeList: [],
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   watch: {
@@ -171,15 +159,11 @@
     },
     clearInput() {
       this.listQuery = {
-        name: '', // 姓名
-        sex: '', // 性别
-        nation: '', // 民族
-        collReason: '', // 采集原因
-        cardType: '', // 证件类型
-        idCardNo: '', // 证件号码
-        alarmReason: '', // 报警原因
-        startTime: '', // 开始时间
-        endTime: '', // 结束时间
+        keyword: '', // 设备编号/设备名称
+        alarmType: '', // 报警类型
+        alarmStatus: '1', // 报警状态
+        startTime: '', // 报警开始时间
+        endTime: '', // 报警结束时间
         offset: 1,
         limit: 20,
         sort: '',
@@ -194,18 +178,13 @@
         this.alarmTypeList = response.data
       })
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }
diff --git a/src/views/deviceManage/busCircuit.vue b/src/views/deviceManage/busCircuit.vue
index 2e1f872..7c9c804 100644
--- a/src/views/deviceManage/busCircuit.vue
+++ b/src/views/deviceManage/busCircuit.vue
@@ -1,77 +1,48 @@
 <!--回路列表-->
 <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-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.lampboxId" placeholder="所属灯箱" filterable clearable>
-                  <el-option v-for="item in boxList" :key="item.id" :label="item.lampboxName" :value="item.id"/>
-                </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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/circuit/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-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/circuit/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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.lampboxId" size="small" placeholder="所属灯箱" filterable clearable>
+          <el-option v-for="item in boxList" :key="item.id" :label="item.lampboxName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <!--<template slot="preColumns">-->
+      <!--<el-table-column align="center" type="selection" width="55"/>-->
+      <!--</template>-->
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <el-table-column label="操作" align="center" width="160">
-          <template slot-scope="scope">
-            <el-button v-if="hasPerm('/circuit/edit')" type="text" size="small" @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-circuit ref="editCircuit" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -128,7 +99,21 @@
       multipleSelection: [], // 多选选中项
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -253,17 +238,13 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/busController.vue b/src/views/deviceManage/busController.vue
index 49789c4..4646bf2 100644
--- a/src/views/deviceManage/busController.vue
+++ b/src/views/deviceManage/busController.vue
@@ -1,98 +1,67 @@
 <!--设备列表-->
 <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>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.controllerCode" size="small" placeholder="控制器编号" clearable />
+      </search-item>
+      <search-item/>
+      <search-item>
+        <el-select v-model="listQuery.controllerType" size="small" 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" size="small" placeholder="所属组织"/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" 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
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="selectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <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>
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <!--<template slot="preColumns">-->
+      <!--<el-table-column align="center" type="selection" width="55"/>-->
+      <!--</template>-->
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <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>
@@ -152,7 +121,21 @@
       statusList: [{ value: '1', name: '在线' }, { value: '0', name: '离线' }],
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -303,21 +286,17 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
-    handleSelectionChange(val) {
+    selectionChange(val) {
       this.multipleSelection = val
     }
   }
diff --git a/src/views/deviceManage/busGroup.vue b/src/views/deviceManage/busGroup.vue
index 9f85789..a35646b 100644
--- a/src/views/deviceManage/busGroup.vue
+++ b/src/views/deviceManage/busGroup.vue
@@ -1,80 +1,48 @@
 <!--灯箱列表-->
 <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.keyword" placeholder="分组名称" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.deviceType" placeholder="设备类型" clearable @change="fetchData">
-                  <el-option v-for="item in groupList" :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="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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/lampbox/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-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column 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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="分组名称" clearable />
+      </search-item>
+      <search-item/>
+      <search-item>
+        <el-select v-model="listQuery.deviceType" size="small" placeholder="设备类型" clearable @change="fetchData">
+          <el-option v-for="item in groupList" :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" size="small" placeholder="所属组织"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <el-table-column label="操作" align="center" width="160">
-          <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>-->
-            <el-button type="text" size="small" @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-Group ref="editGroup" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -132,7 +100,21 @@
       multipleSelection: [], // 多选选中项
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -249,17 +231,13 @@
         this.listLoading = false
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/busLamp.vue b/src/views/deviceManage/busLamp.vue
index 3450479..c480b30 100644
--- a/src/views/deviceManage/busLamp.vue
+++ b/src/views/deviceManage/busLamp.vue
@@ -1,104 +1,68 @@
 <!--路灯列表-->
 <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.keyword" placeholder="关键词" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.lampType" placeholder="路灯类型" clearable>
-                  <el-option v-for="item in typeList" :key="item.id" :label="item.typeName" :value="item.id"/>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </el-select>
-              </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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/lamp/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>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/lamp/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>
-        <!--操作列-->
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="关键词" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.lampType" size="small" placeholder="路灯类型" clearable>
+          <el-option v-for="item in typeList" :key="item.id" :label="item.typeName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" 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
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <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>
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
             <el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>
-            <el-button v-if="hasPerm('/lamp/edit')" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
-
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
             <el-button v-if="hasPerm('/lamp/remoteOn')" type="text" size="small">开灯</el-button>
             <el-button v-if="hasPerm('/lamp/remoteOff')" type="text" size="small">关灯</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-Lamp ref="editLamp" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -175,7 +139,21 @@
       statusList: [{ value: '1', name: '开灯' }, { value: '2', name: '关灯' }, { value: '3', name: '报警' }, { value: '4', name: '离线' }],
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -338,17 +316,13 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法

diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 5077bef..3fd3f33 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -58,6 +58,8 @@
       <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns"/>
+        <!--复选框列-->
+        <el-table-column v-if="options && options.needMultSelect" align="center" type="selection" width="55"/>
         <!--序号列-->
         <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
         <!--内容列, 若columns存在且长度大于0-->
@@ -140,7 +142,8 @@
       type: Object,
       default: function() {
         return {
-          needIndex: true // 是否需要序号列
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
         }
       }
     }, // 配置项
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
index 1175911..b5e8442 100644
--- a/src/components/SearchArea/SearchArea.vue
+++ b/src/components/SearchArea/SearchArea.vue
@@ -16,6 +16,7 @@
       <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
       <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
       <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns-seperate"/>
     </div>
     <!-- 弹出框式高级检索 -->
     <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
index 84bdb9f..c192d79 100644
--- a/src/layout/components/AppHeader.vue
+++ b/src/layout/components/AppHeader.vue
@@ -1,6 +1,14 @@
 <template>
   <el-header class="app-header">
     <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown v-if="showChangeSys" class="systemSelect" size="medium" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
     <el-dropdown class="dropdown-container" trigger="click">
       <div class="dropdown-wrapper">
         <span style="line-height:50px;">欢迎您，{{ name }}</span>
@@ -33,6 +41,7 @@
   data() {
     return {
       title: this.baseConfig.title, // 标题
+      showChangeSys: !this.baseConfig.singleSys, // 是否显示切换系统菜单
       name: this.$store.getters.name, // 用户姓名
       showSetPwd: false // 是否显示修改密码按钮
     }
@@ -40,7 +49,9 @@
   computed: {
     ...mapGetters([
       'sidebar',
-      'avatar'
+      'avatar',
+      'currentSystem',
+      'systems'
     ])
   },
   methods: {
@@ -55,6 +66,38 @@
     resetPwd() {
       this.showSetPwd = true
       this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      const url = this.baseConfig.mainPage
+      window.location.href = url
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      const params1 = `?token=${this.$store.getters.token}`
+      const params = `?sys=${command.name}&url=${command.url}&code=${command.code}&token=${this.$store.getters.token}`
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params1
+        } else {
+          window.open(command.url + params1, '_blank')
+        }
+      } else {
+        // 取token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = this.baseConfig.mainPage + command.url + params
+        } else {
+          window.open(this.baseConfig.mainPage + command.url + params, '_blank')
+        }
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
     }
   }
 }
diff --git a/src/permission.js b/src/permission.js
index 69e8233..637373e 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -26,20 +26,13 @@
           // 设置当前子系统为基础资源子系统
           const currentSys = {
             code: 'baseResourse',
-            id: '1189107859077373285',
-            ismenu: '0',
-            levels: 1,
-            name: '智慧照明子系统',
-            num: 0,
-            parentId: '0',
-            resourceType: '02',
-            url: '/baseResourse'
+            name: '智慧照明子系统'
           }
           // 将当前系统信息保存在localStorage中
           store.commit('SET_SYSTEM', currentSys)
           // 远程访问获取权限列表（菜单&按钮）
           store.dispatch('GetMenus', currentSys).then(() => {
-            store.commit('SET_CHANGEFLAG', '0')
+            // store.commit('SET_CHANGEFLAG', '0')
             router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
             next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
           })
diff --git a/src/router/index.js b/src/router/index.js
index 32f93ef..b558038 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -49,21 +49,22 @@
   // 404错误页面
   { path: '/404', component: () => import('@/views/errorPage/404'), hidden: true },
   // 401 错误页面
-  { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
-  // 主页
-  {
-    path: '/',
-    component: Layout,
-    redirect: 'dashboard',
-    name: 'Dashboard',
-    // hidden: true,
-    children: [{
-      path: 'dashboard',
-      name: 'Dashboard',
-      component: () => import('@/views/dashboard/index'),
-      meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
-    }]
-  }
+  { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true }
+  // { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
+  // // 主页
+  // {
+  //   path: '/',
+  //   component: Layout,
+  //   redirect: 'dashboard',
+  //   name: 'Dashboard',
+  //   // hidden: true,
+  //   children: [{
+  //     path: 'dashboard',
+  //     name: 'Dashboard',
+  //     component: () => import('@/views/dashboard/index'),
+  //     meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
+  //   }]
+  // }
 ]
 // 实例化vue的时候直挂载constantRouter
 export default new Router({
diff --git a/src/views/alarmManage/alarmRule.vue b/src/views/alarmManage/alarmRule.vue
index 888a4d1..11469a2 100644
--- a/src/views/alarmManage/alarmRule.vue
+++ b/src/views/alarmManage/alarmRule.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
       <el-tab-pane label="路灯" name="lamp">
         <lamp-type-list ref="lamp"/>
@@ -8,7 +8,7 @@
         <lampbox-type-list ref="box"/>
       </el-tab-pane>
     </el-tabs>
-  </div>
+  </app-container>
 </template>
 
 <script>
diff --git a/src/views/alarmManage/components/alarmDetail.vue b/src/views/alarmManage/components/alarmDetail.vue
index 9c68377..d598779 100644
--- a/src/views/alarmManage/components/alarmDetail.vue
+++ b/src/views/alarmManage/components/alarmDetail.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :close-on-click-modal="false" :visible.sync="dialogFormVisible" title="报警详情" append-to-body>
-    <el-form ref="dataForm" :model="alarmForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :model="alarmForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="10">
           <el-form-item label="设备名称" prop="deviceName">
diff --git a/src/views/alarmManage/lampType/editLampType.vue b/src/views/alarmManage/lampType/editLampType.vue
index 8c3e37a..8e5fc23 100644
--- a/src/views/alarmManage/lampType/editLampType.vue
+++ b/src/views/alarmManage/lampType/editLampType.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="typeForm" label-well-code="right" label-width="200px">
+    <el-form ref="dataForm" :rules="rules" :model="typeForm" size="small" label-well-code="right" label-width="200px">
       <el-row :gutter="20">
         <el-col :span="20">
           <el-form-item label="路灯类型" prop="typeName">
diff --git a/src/views/alarmManage/lampType/lampTypeList.vue b/src/views/alarmManage/lampType/lampTypeList.vue
index f8547ed..f10c63b 100644
--- a/src/views/alarmManage/lampType/lampTypeList.vue
+++ b/src/views/alarmManage/lampType/lampTypeList.vue
@@ -8,12 +8,11 @@
           <el-row>
             <el-col :span="4">
               <el-form-item class="selectForm-container-item">
-                <el-input v-model.trim="listQuery.typeName" placeholder="类型名称" clearable />
+                <el-input v-model.trim="listQuery.typeName" size="small" placeholder="类型名称" clearable />
               </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-button class="filter-item" type="primary" icon="el-icon-search" size="small" style="margin-top: 2px" @click="search">搜索</el-button>
             </el-col>
           </el-row>
         </el-form>
@@ -28,7 +27,7 @@
           <el-button class="edit_btn" size="small" @click="add">新增</el-button>
         </el-col>
       </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
+      <el-table v-loading="listLoading" :data="list" class="table" size="small" border @selection-change="handleSelectionChange">
         <!--拥有删除权限则显示复选框-->
         <el-table-column v-if="hasPerm('/lampType/delete')" align="center" type="selection" width="55"/>
         <!--序号列-->
diff --git a/src/views/alarmManage/lampboxType/editLampboxType.vue b/src/views/alarmManage/lampboxType/editLampboxType.vue
index 1b94960..ae3a7c1 100644
--- a/src/views/alarmManage/lampboxType/editLampboxType.vue
+++ b/src/views/alarmManage/lampboxType/editLampboxType.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="typeForm" label-well-code="right" label-width="200px">
+    <el-form ref="dataForm" :rules="rules" :model="typeForm" size="small" label-well-code="right" label-width="200px">
       <el-row :gutter="20">
         <el-col :span="20">
           <el-form-item label="灯箱类型" prop="typeName">
diff --git a/src/views/alarmManage/lampboxType/lampboxTypeList.vue b/src/views/alarmManage/lampboxType/lampboxTypeList.vue
index 7b68f20..f33dcbf 100644
--- a/src/views/alarmManage/lampboxType/lampboxTypeList.vue
+++ b/src/views/alarmManage/lampboxType/lampboxTypeList.vue
@@ -8,7 +8,7 @@
           <el-row>
             <el-col :span="4">
               <el-form-item class="selectForm-container-item">
-                <el-input v-model.trim="listQuery.typeName" placeholder="类型名称" clearable />
+                <el-input v-model.trim="listQuery.typeName" size="small" placeholder="类型名称" clearable />
               </el-form-item>
             </el-col>
 
diff --git a/src/views/alarmManage/listAlarm.vue b/src/views/alarmManage/listAlarm.vue
index 7571a0e..fe3e359 100644
--- a/src/views/alarmManage/listAlarm.vue
+++ b/src/views/alarmManage/listAlarm.vue
@@ -1,73 +1,52 @@
 <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-form-item>
-              <el-input v-model.trim="listQuery.keyword" placeholder="设备编号/设备名称" clearable/>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmType" placeholder="报警类型" clearable>
-                <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmStatus" placeholder="报警状态" clearable>
-                <el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item" prop="startTime">
-              <el-date-picker
-                v-model="timeRange"
-                type="datetimerange"
-                range-separator="至"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                start-placeholder="报警开始时间"
-                end-placeholder="报警结束时间"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
-        <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>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="设备编号/设备名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmType" size="small" placeholder="报警类型" clearable>
+          <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmStatus" size="small" placeholder="报警状态" clearable>
+          <el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          size="small"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="报警开始时间"
+          end-placeholder="报警结束时间"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="130">
           <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
             <el-button type="text" size="small" @click="showDetail(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>
     <alarm-detail v-show="dialogFormVisible" ref="alarmdetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -123,7 +102,21 @@
       dialogFormVisible: false,
       alarmStatusList: [{ name: '正在报警', value: '1' }, { name: '已取消', value: '2' }], // 报警状态列表
       alarmTypeList: [],
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   watch: {
@@ -171,19 +164,15 @@
     },
     clearInput() {
       this.listQuery = {
-        name: '', // 姓名
-        sex: '', // 性别
-        nation: '', // 民族
-        collReason: '', // 采集原因
-        cardType: '', // 证件类型
-        idCardNo: '', // 证件号码
-        alarmReason: '', // 报警原因
-        startTime: '', // 开始时间
-        endTime: '', // 结束时间
+        keyword: '', // 设备编号/设备名称
+        alarmType: '', // 报警类型
+        alarmStatus: '', // 报警状态
+        startTime: '', // 报警开始时间
+        endTime: '', // 报警结束时间
         offset: 1,
         limit: 20,
-        sort: '',
-        order: ''
+        sort: 'alarmTime',
+        order: 'desc'
       }
       this.timeRange = []
       this.fetchData(false)
@@ -194,18 +183,13 @@
         this.alarmTypeList = response.data
       })
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }
diff --git a/src/views/alarmManage/listAlarmNow.vue b/src/views/alarmManage/listAlarmNow.vue
index c48b60a..d98b641 100644
--- a/src/views/alarmManage/listAlarmNow.vue
+++ b/src/views/alarmManage/listAlarmNow.vue
@@ -1,73 +1,47 @@
 <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-form-item>
-              <el-input v-model.trim="listQuery.keyword" placeholder="设备编号/设备名称" clearable/>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmType" placeholder="报警类型" clearable>
-                <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <!--<el-form-item>-->
-            <!--<el-select v-model="listQuery.alarmStatus" placeholder="报警状态" clearable>-->
-            <!--<el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>-->
-            <!--</el-select>-->
-            <!--</el-form-item>-->
-            <el-form-item class="selectForm-container-item" prop="startTime">
-              <el-date-picker
-                v-model="timeRange"
-                type="datetimerange"
-                range-separator="至"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                start-placeholder="报警开始时间"
-                end-placeholder="报警结束时间"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
-        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="设备编号/设备名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmType" size="small" placeholder="报警类型" clearable>
+          <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          size="small"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="报警开始时间"
+          end-placeholder="报警结束时间"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
-            <span>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" align="center" width="130">
-          <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
             <el-button type="text" size="small" @click="showDetail(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>
     <alarm-detail v-show="dialogFormVisible" ref="alarmdetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -123,7 +97,21 @@
       dialogFormVisible: false,
       alarmStatusList: [{ name: '正在报警', value: '1' }, { name: '已取消', value: '2' }], // 报警状态列表
       alarmTypeList: [],
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   watch: {
@@ -171,15 +159,11 @@
     },
     clearInput() {
       this.listQuery = {
-        name: '', // 姓名
-        sex: '', // 性别
-        nation: '', // 民族
-        collReason: '', // 采集原因
-        cardType: '', // 证件类型
-        idCardNo: '', // 证件号码
-        alarmReason: '', // 报警原因
-        startTime: '', // 开始时间
-        endTime: '', // 结束时间
+        keyword: '', // 设备编号/设备名称
+        alarmType: '', // 报警类型
+        alarmStatus: '1', // 报警状态
+        startTime: '', // 报警开始时间
+        endTime: '', // 报警结束时间
         offset: 1,
         limit: 20,
         sort: '',
@@ -194,18 +178,13 @@
         this.alarmTypeList = response.data
       })
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }
diff --git a/src/views/deviceManage/busCircuit.vue b/src/views/deviceManage/busCircuit.vue
index 2e1f872..7c9c804 100644
--- a/src/views/deviceManage/busCircuit.vue
+++ b/src/views/deviceManage/busCircuit.vue
@@ -1,77 +1,48 @@
 <!--回路列表-->
 <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-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.lampboxId" placeholder="所属灯箱" filterable clearable>
-                  <el-option v-for="item in boxList" :key="item.id" :label="item.lampboxName" :value="item.id"/>
-                </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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/circuit/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-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/circuit/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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.lampboxId" size="small" placeholder="所属灯箱" filterable clearable>
+          <el-option v-for="item in boxList" :key="item.id" :label="item.lampboxName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <!--<template slot="preColumns">-->
+      <!--<el-table-column align="center" type="selection" width="55"/>-->
+      <!--</template>-->
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <el-table-column label="操作" align="center" width="160">
-          <template slot-scope="scope">
-            <el-button v-if="hasPerm('/circuit/edit')" type="text" size="small" @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-circuit ref="editCircuit" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -128,7 +99,21 @@
       multipleSelection: [], // 多选选中项
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -253,17 +238,13 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/busController.vue b/src/views/deviceManage/busController.vue
index 49789c4..4646bf2 100644
--- a/src/views/deviceManage/busController.vue
+++ b/src/views/deviceManage/busController.vue
@@ -1,98 +1,67 @@
 <!--设备列表-->
 <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>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.controllerCode" size="small" placeholder="控制器编号" clearable />
+      </search-item>
+      <search-item/>
+      <search-item>
+        <el-select v-model="listQuery.controllerType" size="small" 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" size="small" placeholder="所属组织"/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" 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
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="selectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <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>
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <!--<template slot="preColumns">-->
+      <!--<el-table-column align="center" type="selection" width="55"/>-->
+      <!--</template>-->
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <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>
@@ -152,7 +121,21 @@
       statusList: [{ value: '1', name: '在线' }, { value: '0', name: '离线' }],
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -303,21 +286,17 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
-    handleSelectionChange(val) {
+    selectionChange(val) {
       this.multipleSelection = val
     }
   }
diff --git a/src/views/deviceManage/busGroup.vue b/src/views/deviceManage/busGroup.vue
index 9f85789..a35646b 100644
--- a/src/views/deviceManage/busGroup.vue
+++ b/src/views/deviceManage/busGroup.vue
@@ -1,80 +1,48 @@
 <!--灯箱列表-->
 <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.keyword" placeholder="分组名称" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.deviceType" placeholder="设备类型" clearable @change="fetchData">
-                  <el-option v-for="item in groupList" :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="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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/lampbox/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-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column 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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="分组名称" clearable />
+      </search-item>
+      <search-item/>
+      <search-item>
+        <el-select v-model="listQuery.deviceType" size="small" placeholder="设备类型" clearable @change="fetchData">
+          <el-option v-for="item in groupList" :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" size="small" placeholder="所属组织"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <el-table-column label="操作" align="center" width="160">
-          <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>-->
-            <el-button type="text" size="small" @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-Group ref="editGroup" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -132,7 +100,21 @@
       multipleSelection: [], // 多选选中项
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -249,17 +231,13 @@
         this.listLoading = false
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/busLamp.vue b/src/views/deviceManage/busLamp.vue
index 3450479..c480b30 100644
--- a/src/views/deviceManage/busLamp.vue
+++ b/src/views/deviceManage/busLamp.vue
@@ -1,104 +1,68 @@
 <!--路灯列表-->
 <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.keyword" placeholder="关键词" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.lampType" placeholder="路灯类型" clearable>
-                  <el-option v-for="item in typeList" :key="item.id" :label="item.typeName" :value="item.id"/>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </el-select>
-              </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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/lamp/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>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/lamp/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>
-        <!--操作列-->
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="关键词" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.lampType" size="small" placeholder="路灯类型" clearable>
+          <el-option v-for="item in typeList" :key="item.id" :label="item.typeName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" 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
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <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>
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
             <el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>
-            <el-button v-if="hasPerm('/lamp/edit')" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
-
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
             <el-button v-if="hasPerm('/lamp/remoteOn')" type="text" size="small">开灯</el-button>
             <el-button v-if="hasPerm('/lamp/remoteOff')" type="text" size="small">关灯</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-Lamp ref="editLamp" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -175,7 +139,21 @@
       statusList: [{ value: '1', name: '开灯' }, { value: '2', name: '关灯' }, { value: '3', name: '报警' }, { value: '4', name: '离线' }],
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -338,17 +316,13 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/busLampbox.vue b/src/views/deviceManage/busLampbox.vue
index 292c3a5..7763fac 100644
--- a/src/views/deviceManage/busLampbox.vue
+++ b/src/views/deviceManage/busLampbox.vue
@@ -1,46 +1,34 @@
 <!--灯箱列表-->
 <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.boxName" placeholder="灯箱名称" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/lampbox/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-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/lampbox/delete')" align="center" type="selection" width="55"/>
-        <!--序号列-->
-        <el-table-column :index="indexMethod" align="center" type="index" label="#" width="55"/>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.boxName" size="small" placeholder="灯箱名称" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
         <!--内容列-->
         <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">
@@ -55,30 +43,18 @@
             </div>
           </template>
         </el-table-column>
-        <!--操作列-->
+      </template>
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
             <el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>
-            <el-button v-if="hasPerm('/lampbox/edit')" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
+            <el-button type="text" size="small" @click.stop="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-Lampbox ref="editLampbox" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -144,7 +120,21 @@
       multipleSelection: [], // 多选选中项
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -277,6 +267,15 @@
       this.listQuery.limit = val
       this.fetchData()
     },
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
+    },
     // 改变当前页
     handleCurrentChange(val) {
       this.listQuery.offset = val

diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 5077bef..3fd3f33 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -58,6 +58,8 @@
       <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns"/>
+        <!--复选框列-->
+        <el-table-column v-if="options && options.needMultSelect" align="center" type="selection" width="55"/>
         <!--序号列-->
         <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
         <!--内容列, 若columns存在且长度大于0-->
@@ -140,7 +142,8 @@
       type: Object,
       default: function() {
         return {
-          needIndex: true // 是否需要序号列
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
         }
       }
     }, // 配置项
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
index 1175911..b5e8442 100644
--- a/src/components/SearchArea/SearchArea.vue
+++ b/src/components/SearchArea/SearchArea.vue
@@ -16,6 +16,7 @@
       <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
       <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
       <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns-seperate"/>
     </div>
     <!-- 弹出框式高级检索 -->
     <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
index 84bdb9f..c192d79 100644
--- a/src/layout/components/AppHeader.vue
+++ b/src/layout/components/AppHeader.vue
@@ -1,6 +1,14 @@
 <template>
   <el-header class="app-header">
     <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown v-if="showChangeSys" class="systemSelect" size="medium" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
     <el-dropdown class="dropdown-container" trigger="click">
       <div class="dropdown-wrapper">
         <span style="line-height:50px;">欢迎您，{{ name }}</span>
@@ -33,6 +41,7 @@
   data() {
     return {
       title: this.baseConfig.title, // 标题
+      showChangeSys: !this.baseConfig.singleSys, // 是否显示切换系统菜单
       name: this.$store.getters.name, // 用户姓名
       showSetPwd: false // 是否显示修改密码按钮
     }
@@ -40,7 +49,9 @@
   computed: {
     ...mapGetters([
       'sidebar',
-      'avatar'
+      'avatar',
+      'currentSystem',
+      'systems'
     ])
   },
   methods: {
@@ -55,6 +66,38 @@
     resetPwd() {
       this.showSetPwd = true
       this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      const url = this.baseConfig.mainPage
+      window.location.href = url
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      const params1 = `?token=${this.$store.getters.token}`
+      const params = `?sys=${command.name}&url=${command.url}&code=${command.code}&token=${this.$store.getters.token}`
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params1
+        } else {
+          window.open(command.url + params1, '_blank')
+        }
+      } else {
+        // 取token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = this.baseConfig.mainPage + command.url + params
+        } else {
+          window.open(this.baseConfig.mainPage + command.url + params, '_blank')
+        }
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
     }
   }
 }
diff --git a/src/permission.js b/src/permission.js
index 69e8233..637373e 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -26,20 +26,13 @@
           // 设置当前子系统为基础资源子系统
           const currentSys = {
             code: 'baseResourse',
-            id: '1189107859077373285',
-            ismenu: '0',
-            levels: 1,
-            name: '智慧照明子系统',
-            num: 0,
-            parentId: '0',
-            resourceType: '02',
-            url: '/baseResourse'
+            name: '智慧照明子系统'
           }
           // 将当前系统信息保存在localStorage中
           store.commit('SET_SYSTEM', currentSys)
           // 远程访问获取权限列表（菜单&按钮）
           store.dispatch('GetMenus', currentSys).then(() => {
-            store.commit('SET_CHANGEFLAG', '0')
+            // store.commit('SET_CHANGEFLAG', '0')
             router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
             next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
           })
diff --git a/src/router/index.js b/src/router/index.js
index 32f93ef..b558038 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -49,21 +49,22 @@
   // 404错误页面
   { path: '/404', component: () => import('@/views/errorPage/404'), hidden: true },
   // 401 错误页面
-  { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
-  // 主页
-  {
-    path: '/',
-    component: Layout,
-    redirect: 'dashboard',
-    name: 'Dashboard',
-    // hidden: true,
-    children: [{
-      path: 'dashboard',
-      name: 'Dashboard',
-      component: () => import('@/views/dashboard/index'),
-      meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
-    }]
-  }
+  { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true }
+  // { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
+  // // 主页
+  // {
+  //   path: '/',
+  //   component: Layout,
+  //   redirect: 'dashboard',
+  //   name: 'Dashboard',
+  //   // hidden: true,
+  //   children: [{
+  //     path: 'dashboard',
+  //     name: 'Dashboard',
+  //     component: () => import('@/views/dashboard/index'),
+  //     meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
+  //   }]
+  // }
 ]
 // 实例化vue的时候直挂载constantRouter
 export default new Router({
diff --git a/src/views/alarmManage/alarmRule.vue b/src/views/alarmManage/alarmRule.vue
index 888a4d1..11469a2 100644
--- a/src/views/alarmManage/alarmRule.vue
+++ b/src/views/alarmManage/alarmRule.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
       <el-tab-pane label="路灯" name="lamp">
         <lamp-type-list ref="lamp"/>
@@ -8,7 +8,7 @@
         <lampbox-type-list ref="box"/>
       </el-tab-pane>
     </el-tabs>
-  </div>
+  </app-container>
 </template>
 
 <script>
diff --git a/src/views/alarmManage/components/alarmDetail.vue b/src/views/alarmManage/components/alarmDetail.vue
index 9c68377..d598779 100644
--- a/src/views/alarmManage/components/alarmDetail.vue
+++ b/src/views/alarmManage/components/alarmDetail.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :close-on-click-modal="false" :visible.sync="dialogFormVisible" title="报警详情" append-to-body>
-    <el-form ref="dataForm" :model="alarmForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :model="alarmForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="10">
           <el-form-item label="设备名称" prop="deviceName">
diff --git a/src/views/alarmManage/lampType/editLampType.vue b/src/views/alarmManage/lampType/editLampType.vue
index 8c3e37a..8e5fc23 100644
--- a/src/views/alarmManage/lampType/editLampType.vue
+++ b/src/views/alarmManage/lampType/editLampType.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="typeForm" label-well-code="right" label-width="200px">
+    <el-form ref="dataForm" :rules="rules" :model="typeForm" size="small" label-well-code="right" label-width="200px">
       <el-row :gutter="20">
         <el-col :span="20">
           <el-form-item label="路灯类型" prop="typeName">
diff --git a/src/views/alarmManage/lampType/lampTypeList.vue b/src/views/alarmManage/lampType/lampTypeList.vue
index f8547ed..f10c63b 100644
--- a/src/views/alarmManage/lampType/lampTypeList.vue
+++ b/src/views/alarmManage/lampType/lampTypeList.vue
@@ -8,12 +8,11 @@
           <el-row>
             <el-col :span="4">
               <el-form-item class="selectForm-container-item">
-                <el-input v-model.trim="listQuery.typeName" placeholder="类型名称" clearable />
+                <el-input v-model.trim="listQuery.typeName" size="small" placeholder="类型名称" clearable />
               </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-button class="filter-item" type="primary" icon="el-icon-search" size="small" style="margin-top: 2px" @click="search">搜索</el-button>
             </el-col>
           </el-row>
         </el-form>
@@ -28,7 +27,7 @@
           <el-button class="edit_btn" size="small" @click="add">新增</el-button>
         </el-col>
       </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
+      <el-table v-loading="listLoading" :data="list" class="table" size="small" border @selection-change="handleSelectionChange">
         <!--拥有删除权限则显示复选框-->
         <el-table-column v-if="hasPerm('/lampType/delete')" align="center" type="selection" width="55"/>
         <!--序号列-->
diff --git a/src/views/alarmManage/lampboxType/editLampboxType.vue b/src/views/alarmManage/lampboxType/editLampboxType.vue
index 1b94960..ae3a7c1 100644
--- a/src/views/alarmManage/lampboxType/editLampboxType.vue
+++ b/src/views/alarmManage/lampboxType/editLampboxType.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="typeForm" label-well-code="right" label-width="200px">
+    <el-form ref="dataForm" :rules="rules" :model="typeForm" size="small" label-well-code="right" label-width="200px">
       <el-row :gutter="20">
         <el-col :span="20">
           <el-form-item label="灯箱类型" prop="typeName">
diff --git a/src/views/alarmManage/lampboxType/lampboxTypeList.vue b/src/views/alarmManage/lampboxType/lampboxTypeList.vue
index 7b68f20..f33dcbf 100644
--- a/src/views/alarmManage/lampboxType/lampboxTypeList.vue
+++ b/src/views/alarmManage/lampboxType/lampboxTypeList.vue
@@ -8,7 +8,7 @@
           <el-row>
             <el-col :span="4">
               <el-form-item class="selectForm-container-item">
-                <el-input v-model.trim="listQuery.typeName" placeholder="类型名称" clearable />
+                <el-input v-model.trim="listQuery.typeName" size="small" placeholder="类型名称" clearable />
               </el-form-item>
             </el-col>
 
diff --git a/src/views/alarmManage/listAlarm.vue b/src/views/alarmManage/listAlarm.vue
index 7571a0e..fe3e359 100644
--- a/src/views/alarmManage/listAlarm.vue
+++ b/src/views/alarmManage/listAlarm.vue
@@ -1,73 +1,52 @@
 <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-form-item>
-              <el-input v-model.trim="listQuery.keyword" placeholder="设备编号/设备名称" clearable/>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmType" placeholder="报警类型" clearable>
-                <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmStatus" placeholder="报警状态" clearable>
-                <el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item" prop="startTime">
-              <el-date-picker
-                v-model="timeRange"
-                type="datetimerange"
-                range-separator="至"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                start-placeholder="报警开始时间"
-                end-placeholder="报警结束时间"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
-        <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>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="设备编号/设备名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmType" size="small" placeholder="报警类型" clearable>
+          <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmStatus" size="small" placeholder="报警状态" clearable>
+          <el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          size="small"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="报警开始时间"
+          end-placeholder="报警结束时间"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="130">
           <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
             <el-button type="text" size="small" @click="showDetail(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>
     <alarm-detail v-show="dialogFormVisible" ref="alarmdetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -123,7 +102,21 @@
       dialogFormVisible: false,
       alarmStatusList: [{ name: '正在报警', value: '1' }, { name: '已取消', value: '2' }], // 报警状态列表
       alarmTypeList: [],
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   watch: {
@@ -171,19 +164,15 @@
     },
     clearInput() {
       this.listQuery = {
-        name: '', // 姓名
-        sex: '', // 性别
-        nation: '', // 民族
-        collReason: '', // 采集原因
-        cardType: '', // 证件类型
-        idCardNo: '', // 证件号码
-        alarmReason: '', // 报警原因
-        startTime: '', // 开始时间
-        endTime: '', // 结束时间
+        keyword: '', // 设备编号/设备名称
+        alarmType: '', // 报警类型
+        alarmStatus: '', // 报警状态
+        startTime: '', // 报警开始时间
+        endTime: '', // 报警结束时间
         offset: 1,
         limit: 20,
-        sort: '',
-        order: ''
+        sort: 'alarmTime',
+        order: 'desc'
       }
       this.timeRange = []
       this.fetchData(false)
@@ -194,18 +183,13 @@
         this.alarmTypeList = response.data
       })
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }
diff --git a/src/views/alarmManage/listAlarmNow.vue b/src/views/alarmManage/listAlarmNow.vue
index c48b60a..d98b641 100644
--- a/src/views/alarmManage/listAlarmNow.vue
+++ b/src/views/alarmManage/listAlarmNow.vue
@@ -1,73 +1,47 @@
 <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-form-item>
-              <el-input v-model.trim="listQuery.keyword" placeholder="设备编号/设备名称" clearable/>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmType" placeholder="报警类型" clearable>
-                <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <!--<el-form-item>-->
-            <!--<el-select v-model="listQuery.alarmStatus" placeholder="报警状态" clearable>-->
-            <!--<el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>-->
-            <!--</el-select>-->
-            <!--</el-form-item>-->
-            <el-form-item class="selectForm-container-item" prop="startTime">
-              <el-date-picker
-                v-model="timeRange"
-                type="datetimerange"
-                range-separator="至"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                start-placeholder="报警开始时间"
-                end-placeholder="报警结束时间"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
-        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="设备编号/设备名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmType" size="small" placeholder="报警类型" clearable>
+          <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          size="small"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="报警开始时间"
+          end-placeholder="报警结束时间"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
-            <span>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" align="center" width="130">
-          <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
             <el-button type="text" size="small" @click="showDetail(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>
     <alarm-detail v-show="dialogFormVisible" ref="alarmdetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -123,7 +97,21 @@
       dialogFormVisible: false,
       alarmStatusList: [{ name: '正在报警', value: '1' }, { name: '已取消', value: '2' }], // 报警状态列表
       alarmTypeList: [],
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   watch: {
@@ -171,15 +159,11 @@
     },
     clearInput() {
       this.listQuery = {
-        name: '', // 姓名
-        sex: '', // 性别
-        nation: '', // 民族
-        collReason: '', // 采集原因
-        cardType: '', // 证件类型
-        idCardNo: '', // 证件号码
-        alarmReason: '', // 报警原因
-        startTime: '', // 开始时间
-        endTime: '', // 结束时间
+        keyword: '', // 设备编号/设备名称
+        alarmType: '', // 报警类型
+        alarmStatus: '1', // 报警状态
+        startTime: '', // 报警开始时间
+        endTime: '', // 报警结束时间
         offset: 1,
         limit: 20,
         sort: '',
@@ -194,18 +178,13 @@
         this.alarmTypeList = response.data
       })
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }
diff --git a/src/views/deviceManage/busCircuit.vue b/src/views/deviceManage/busCircuit.vue
index 2e1f872..7c9c804 100644
--- a/src/views/deviceManage/busCircuit.vue
+++ b/src/views/deviceManage/busCircuit.vue
@@ -1,77 +1,48 @@
 <!--回路列表-->
 <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-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.lampboxId" placeholder="所属灯箱" filterable clearable>
-                  <el-option v-for="item in boxList" :key="item.id" :label="item.lampboxName" :value="item.id"/>
-                </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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/circuit/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-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/circuit/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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.lampboxId" size="small" placeholder="所属灯箱" filterable clearable>
+          <el-option v-for="item in boxList" :key="item.id" :label="item.lampboxName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <!--<template slot="preColumns">-->
+      <!--<el-table-column align="center" type="selection" width="55"/>-->
+      <!--</template>-->
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <el-table-column label="操作" align="center" width="160">
-          <template slot-scope="scope">
-            <el-button v-if="hasPerm('/circuit/edit')" type="text" size="small" @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-circuit ref="editCircuit" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -128,7 +99,21 @@
       multipleSelection: [], // 多选选中项
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -253,17 +238,13 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/busController.vue b/src/views/deviceManage/busController.vue
index 49789c4..4646bf2 100644
--- a/src/views/deviceManage/busController.vue
+++ b/src/views/deviceManage/busController.vue
@@ -1,98 +1,67 @@
 <!--设备列表-->
 <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>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.controllerCode" size="small" placeholder="控制器编号" clearable />
+      </search-item>
+      <search-item/>
+      <search-item>
+        <el-select v-model="listQuery.controllerType" size="small" 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" size="small" placeholder="所属组织"/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" 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
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="selectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <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>
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <!--<template slot="preColumns">-->
+      <!--<el-table-column align="center" type="selection" width="55"/>-->
+      <!--</template>-->
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <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>
@@ -152,7 +121,21 @@
       statusList: [{ value: '1', name: '在线' }, { value: '0', name: '离线' }],
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -303,21 +286,17 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
-    handleSelectionChange(val) {
+    selectionChange(val) {
       this.multipleSelection = val
     }
   }
diff --git a/src/views/deviceManage/busGroup.vue b/src/views/deviceManage/busGroup.vue
index 9f85789..a35646b 100644
--- a/src/views/deviceManage/busGroup.vue
+++ b/src/views/deviceManage/busGroup.vue
@@ -1,80 +1,48 @@
 <!--灯箱列表-->
 <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.keyword" placeholder="分组名称" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.deviceType" placeholder="设备类型" clearable @change="fetchData">
-                  <el-option v-for="item in groupList" :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="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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/lampbox/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-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column 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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="分组名称" clearable />
+      </search-item>
+      <search-item/>
+      <search-item>
+        <el-select v-model="listQuery.deviceType" size="small" placeholder="设备类型" clearable @change="fetchData">
+          <el-option v-for="item in groupList" :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" size="small" placeholder="所属组织"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <el-table-column label="操作" align="center" width="160">
-          <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>-->
-            <el-button type="text" size="small" @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-Group ref="editGroup" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -132,7 +100,21 @@
       multipleSelection: [], // 多选选中项
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -249,17 +231,13 @@
         this.listLoading = false
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/busLamp.vue b/src/views/deviceManage/busLamp.vue
index 3450479..c480b30 100644
--- a/src/views/deviceManage/busLamp.vue
+++ b/src/views/deviceManage/busLamp.vue
@@ -1,104 +1,68 @@
 <!--路灯列表-->
 <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.keyword" placeholder="关键词" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.lampType" placeholder="路灯类型" clearable>
-                  <el-option v-for="item in typeList" :key="item.id" :label="item.typeName" :value="item.id"/>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </el-select>
-              </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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/lamp/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>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/lamp/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>
-        <!--操作列-->
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="关键词" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.lampType" size="small" placeholder="路灯类型" clearable>
+          <el-option v-for="item in typeList" :key="item.id" :label="item.typeName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" 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
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <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>
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
             <el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>
-            <el-button v-if="hasPerm('/lamp/edit')" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
-
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
             <el-button v-if="hasPerm('/lamp/remoteOn')" type="text" size="small">开灯</el-button>
             <el-button v-if="hasPerm('/lamp/remoteOff')" type="text" size="small">关灯</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-Lamp ref="editLamp" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -175,7 +139,21 @@
       statusList: [{ value: '1', name: '开灯' }, { value: '2', name: '关灯' }, { value: '3', name: '报警' }, { value: '4', name: '离线' }],
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -338,17 +316,13 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/busLampbox.vue b/src/views/deviceManage/busLampbox.vue
index 292c3a5..7763fac 100644
--- a/src/views/deviceManage/busLampbox.vue
+++ b/src/views/deviceManage/busLampbox.vue
@@ -1,46 +1,34 @@
 <!--灯箱列表-->
 <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.boxName" placeholder="灯箱名称" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/lampbox/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-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/lampbox/delete')" align="center" type="selection" width="55"/>
-        <!--序号列-->
-        <el-table-column :index="indexMethod" align="center" type="index" label="#" width="55"/>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.boxName" size="small" placeholder="灯箱名称" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
         <!--内容列-->
         <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">
@@ -55,30 +43,18 @@
             </div>
           </template>
         </el-table-column>
-        <!--操作列-->
+      </template>
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
             <el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>
-            <el-button v-if="hasPerm('/lampbox/edit')" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
+            <el-button type="text" size="small" @click.stop="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-Lampbox ref="editLampbox" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -144,7 +120,21 @@
       multipleSelection: [], // 多选选中项
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -277,6 +267,15 @@
       this.listQuery.limit = val
       this.fetchData()
     },
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
+    },
     // 改变当前页
     handleCurrentChange(val) {
       this.listQuery.offset = val
diff --git a/src/views/deviceManage/busLamppost.vue b/src/views/deviceManage/busLamppost.vue
index 92833a0..c193813 100644
--- a/src/views/deviceManage/busLamppost.vue
+++ b/src/views/deviceManage/busLamppost.vue
@@ -1,100 +1,65 @@
 <!--灯杆列表-->
 <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.keyword" placeholder="关键词" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.lamppostType" placeholder="路灯杆类型" clearable>
-                  <el-option v-for="item in typeList" :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">
-                <el-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </el-select>
-              </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('/lamppost/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>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/lamppost/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>
-        <!--操作列-->
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="关键词" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.lamppostType" size="small" placeholder="路灯杆类型" clearable>
+          <el-option v-for="item in typeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" 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
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <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>
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
-            <el-button v-if="hasPerm('/lamppost/edit')" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
+            <el-button type="text" size="small" @click.stop="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-Lamppost ref="editLamppost" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -161,7 +126,21 @@
       statusList: [{ value: '1', name: '开灯' }, { value: '2', name: '关灯' }, { value: '3', name: '报警' }, { value: '4', name: '离线' }],
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -320,17 +299,13 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法

diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 5077bef..3fd3f33 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -58,6 +58,8 @@
       <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns"/>
+        <!--复选框列-->
+        <el-table-column v-if="options && options.needMultSelect" align="center" type="selection" width="55"/>
         <!--序号列-->
         <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
         <!--内容列, 若columns存在且长度大于0-->
@@ -140,7 +142,8 @@
       type: Object,
       default: function() {
         return {
-          needIndex: true // 是否需要序号列
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
         }
       }
     }, // 配置项
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
index 1175911..b5e8442 100644
--- a/src/components/SearchArea/SearchArea.vue
+++ b/src/components/SearchArea/SearchArea.vue
@@ -16,6 +16,7 @@
       <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
       <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
       <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns-seperate"/>
     </div>
     <!-- 弹出框式高级检索 -->
     <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
index 84bdb9f..c192d79 100644
--- a/src/layout/components/AppHeader.vue
+++ b/src/layout/components/AppHeader.vue
@@ -1,6 +1,14 @@
 <template>
   <el-header class="app-header">
     <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown v-if="showChangeSys" class="systemSelect" size="medium" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
     <el-dropdown class="dropdown-container" trigger="click">
       <div class="dropdown-wrapper">
         <span style="line-height:50px;">欢迎您，{{ name }}</span>
@@ -33,6 +41,7 @@
   data() {
     return {
       title: this.baseConfig.title, // 标题
+      showChangeSys: !this.baseConfig.singleSys, // 是否显示切换系统菜单
       name: this.$store.getters.name, // 用户姓名
       showSetPwd: false // 是否显示修改密码按钮
     }
@@ -40,7 +49,9 @@
   computed: {
     ...mapGetters([
       'sidebar',
-      'avatar'
+      'avatar',
+      'currentSystem',
+      'systems'
     ])
   },
   methods: {
@@ -55,6 +66,38 @@
     resetPwd() {
       this.showSetPwd = true
       this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      const url = this.baseConfig.mainPage
+      window.location.href = url
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      const params1 = `?token=${this.$store.getters.token}`
+      const params = `?sys=${command.name}&url=${command.url}&code=${command.code}&token=${this.$store.getters.token}`
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params1
+        } else {
+          window.open(command.url + params1, '_blank')
+        }
+      } else {
+        // 取token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = this.baseConfig.mainPage + command.url + params
+        } else {
+          window.open(this.baseConfig.mainPage + command.url + params, '_blank')
+        }
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
     }
   }
 }
diff --git a/src/permission.js b/src/permission.js
index 69e8233..637373e 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -26,20 +26,13 @@
           // 设置当前子系统为基础资源子系统
           const currentSys = {
             code: 'baseResourse',
-            id: '1189107859077373285',
-            ismenu: '0',
-            levels: 1,
-            name: '智慧照明子系统',
-            num: 0,
-            parentId: '0',
-            resourceType: '02',
-            url: '/baseResourse'
+            name: '智慧照明子系统'
           }
           // 将当前系统信息保存在localStorage中
           store.commit('SET_SYSTEM', currentSys)
           // 远程访问获取权限列表（菜单&按钮）
           store.dispatch('GetMenus', currentSys).then(() => {
-            store.commit('SET_CHANGEFLAG', '0')
+            // store.commit('SET_CHANGEFLAG', '0')
             router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
             next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
           })
diff --git a/src/router/index.js b/src/router/index.js
index 32f93ef..b558038 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -49,21 +49,22 @@
   // 404错误页面
   { path: '/404', component: () => import('@/views/errorPage/404'), hidden: true },
   // 401 错误页面
-  { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
-  // 主页
-  {
-    path: '/',
-    component: Layout,
-    redirect: 'dashboard',
-    name: 'Dashboard',
-    // hidden: true,
-    children: [{
-      path: 'dashboard',
-      name: 'Dashboard',
-      component: () => import('@/views/dashboard/index'),
-      meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
-    }]
-  }
+  { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true }
+  // { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
+  // // 主页
+  // {
+  //   path: '/',
+  //   component: Layout,
+  //   redirect: 'dashboard',
+  //   name: 'Dashboard',
+  //   // hidden: true,
+  //   children: [{
+  //     path: 'dashboard',
+  //     name: 'Dashboard',
+  //     component: () => import('@/views/dashboard/index'),
+  //     meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
+  //   }]
+  // }
 ]
 // 实例化vue的时候直挂载constantRouter
 export default new Router({
diff --git a/src/views/alarmManage/alarmRule.vue b/src/views/alarmManage/alarmRule.vue
index 888a4d1..11469a2 100644
--- a/src/views/alarmManage/alarmRule.vue
+++ b/src/views/alarmManage/alarmRule.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
       <el-tab-pane label="路灯" name="lamp">
         <lamp-type-list ref="lamp"/>
@@ -8,7 +8,7 @@
         <lampbox-type-list ref="box"/>
       </el-tab-pane>
     </el-tabs>
-  </div>
+  </app-container>
 </template>
 
 <script>
diff --git a/src/views/alarmManage/components/alarmDetail.vue b/src/views/alarmManage/components/alarmDetail.vue
index 9c68377..d598779 100644
--- a/src/views/alarmManage/components/alarmDetail.vue
+++ b/src/views/alarmManage/components/alarmDetail.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :close-on-click-modal="false" :visible.sync="dialogFormVisible" title="报警详情" append-to-body>
-    <el-form ref="dataForm" :model="alarmForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :model="alarmForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="10">
           <el-form-item label="设备名称" prop="deviceName">
diff --git a/src/views/alarmManage/lampType/editLampType.vue b/src/views/alarmManage/lampType/editLampType.vue
index 8c3e37a..8e5fc23 100644
--- a/src/views/alarmManage/lampType/editLampType.vue
+++ b/src/views/alarmManage/lampType/editLampType.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="typeForm" label-well-code="right" label-width="200px">
+    <el-form ref="dataForm" :rules="rules" :model="typeForm" size="small" label-well-code="right" label-width="200px">
       <el-row :gutter="20">
         <el-col :span="20">
           <el-form-item label="路灯类型" prop="typeName">
diff --git a/src/views/alarmManage/lampType/lampTypeList.vue b/src/views/alarmManage/lampType/lampTypeList.vue
index f8547ed..f10c63b 100644
--- a/src/views/alarmManage/lampType/lampTypeList.vue
+++ b/src/views/alarmManage/lampType/lampTypeList.vue
@@ -8,12 +8,11 @@
           <el-row>
             <el-col :span="4">
               <el-form-item class="selectForm-container-item">
-                <el-input v-model.trim="listQuery.typeName" placeholder="类型名称" clearable />
+                <el-input v-model.trim="listQuery.typeName" size="small" placeholder="类型名称" clearable />
               </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-button class="filter-item" type="primary" icon="el-icon-search" size="small" style="margin-top: 2px" @click="search">搜索</el-button>
             </el-col>
           </el-row>
         </el-form>
@@ -28,7 +27,7 @@
           <el-button class="edit_btn" size="small" @click="add">新增</el-button>
         </el-col>
       </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
+      <el-table v-loading="listLoading" :data="list" class="table" size="small" border @selection-change="handleSelectionChange">
         <!--拥有删除权限则显示复选框-->
         <el-table-column v-if="hasPerm('/lampType/delete')" align="center" type="selection" width="55"/>
         <!--序号列-->
diff --git a/src/views/alarmManage/lampboxType/editLampboxType.vue b/src/views/alarmManage/lampboxType/editLampboxType.vue
index 1b94960..ae3a7c1 100644
--- a/src/views/alarmManage/lampboxType/editLampboxType.vue
+++ b/src/views/alarmManage/lampboxType/editLampboxType.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="typeForm" label-well-code="right" label-width="200px">
+    <el-form ref="dataForm" :rules="rules" :model="typeForm" size="small" label-well-code="right" label-width="200px">
       <el-row :gutter="20">
         <el-col :span="20">
           <el-form-item label="灯箱类型" prop="typeName">
diff --git a/src/views/alarmManage/lampboxType/lampboxTypeList.vue b/src/views/alarmManage/lampboxType/lampboxTypeList.vue
index 7b68f20..f33dcbf 100644
--- a/src/views/alarmManage/lampboxType/lampboxTypeList.vue
+++ b/src/views/alarmManage/lampboxType/lampboxTypeList.vue
@@ -8,7 +8,7 @@
           <el-row>
             <el-col :span="4">
               <el-form-item class="selectForm-container-item">
-                <el-input v-model.trim="listQuery.typeName" placeholder="类型名称" clearable />
+                <el-input v-model.trim="listQuery.typeName" size="small" placeholder="类型名称" clearable />
               </el-form-item>
             </el-col>
 
diff --git a/src/views/alarmManage/listAlarm.vue b/src/views/alarmManage/listAlarm.vue
index 7571a0e..fe3e359 100644
--- a/src/views/alarmManage/listAlarm.vue
+++ b/src/views/alarmManage/listAlarm.vue
@@ -1,73 +1,52 @@
 <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-form-item>
-              <el-input v-model.trim="listQuery.keyword" placeholder="设备编号/设备名称" clearable/>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmType" placeholder="报警类型" clearable>
-                <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmStatus" placeholder="报警状态" clearable>
-                <el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item" prop="startTime">
-              <el-date-picker
-                v-model="timeRange"
-                type="datetimerange"
-                range-separator="至"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                start-placeholder="报警开始时间"
-                end-placeholder="报警结束时间"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
-        <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>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="设备编号/设备名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmType" size="small" placeholder="报警类型" clearable>
+          <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmStatus" size="small" placeholder="报警状态" clearable>
+          <el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          size="small"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="报警开始时间"
+          end-placeholder="报警结束时间"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="130">
           <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
             <el-button type="text" size="small" @click="showDetail(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>
     <alarm-detail v-show="dialogFormVisible" ref="alarmdetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -123,7 +102,21 @@
       dialogFormVisible: false,
       alarmStatusList: [{ name: '正在报警', value: '1' }, { name: '已取消', value: '2' }], // 报警状态列表
       alarmTypeList: [],
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   watch: {
@@ -171,19 +164,15 @@
     },
     clearInput() {
       this.listQuery = {
-        name: '', // 姓名
-        sex: '', // 性别
-        nation: '', // 民族
-        collReason: '', // 采集原因
-        cardType: '', // 证件类型
-        idCardNo: '', // 证件号码
-        alarmReason: '', // 报警原因
-        startTime: '', // 开始时间
-        endTime: '', // 结束时间
+        keyword: '', // 设备编号/设备名称
+        alarmType: '', // 报警类型
+        alarmStatus: '', // 报警状态
+        startTime: '', // 报警开始时间
+        endTime: '', // 报警结束时间
         offset: 1,
         limit: 20,
-        sort: '',
-        order: ''
+        sort: 'alarmTime',
+        order: 'desc'
       }
       this.timeRange = []
       this.fetchData(false)
@@ -194,18 +183,13 @@
         this.alarmTypeList = response.data
       })
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }
diff --git a/src/views/alarmManage/listAlarmNow.vue b/src/views/alarmManage/listAlarmNow.vue
index c48b60a..d98b641 100644
--- a/src/views/alarmManage/listAlarmNow.vue
+++ b/src/views/alarmManage/listAlarmNow.vue
@@ -1,73 +1,47 @@
 <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-form-item>
-              <el-input v-model.trim="listQuery.keyword" placeholder="设备编号/设备名称" clearable/>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmType" placeholder="报警类型" clearable>
-                <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <!--<el-form-item>-->
-            <!--<el-select v-model="listQuery.alarmStatus" placeholder="报警状态" clearable>-->
-            <!--<el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>-->
-            <!--</el-select>-->
-            <!--</el-form-item>-->
-            <el-form-item class="selectForm-container-item" prop="startTime">
-              <el-date-picker
-                v-model="timeRange"
-                type="datetimerange"
-                range-separator="至"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                start-placeholder="报警开始时间"
-                end-placeholder="报警结束时间"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
-        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="设备编号/设备名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmType" size="small" placeholder="报警类型" clearable>
+          <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          size="small"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="报警开始时间"
+          end-placeholder="报警结束时间"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
-            <span>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" align="center" width="130">
-          <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
             <el-button type="text" size="small" @click="showDetail(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>
     <alarm-detail v-show="dialogFormVisible" ref="alarmdetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -123,7 +97,21 @@
       dialogFormVisible: false,
       alarmStatusList: [{ name: '正在报警', value: '1' }, { name: '已取消', value: '2' }], // 报警状态列表
       alarmTypeList: [],
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   watch: {
@@ -171,15 +159,11 @@
     },
     clearInput() {
       this.listQuery = {
-        name: '', // 姓名
-        sex: '', // 性别
-        nation: '', // 民族
-        collReason: '', // 采集原因
-        cardType: '', // 证件类型
-        idCardNo: '', // 证件号码
-        alarmReason: '', // 报警原因
-        startTime: '', // 开始时间
-        endTime: '', // 结束时间
+        keyword: '', // 设备编号/设备名称
+        alarmType: '', // 报警类型
+        alarmStatus: '1', // 报警状态
+        startTime: '', // 报警开始时间
+        endTime: '', // 报警结束时间
         offset: 1,
         limit: 20,
         sort: '',
@@ -194,18 +178,13 @@
         this.alarmTypeList = response.data
       })
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }
diff --git a/src/views/deviceManage/busCircuit.vue b/src/views/deviceManage/busCircuit.vue
index 2e1f872..7c9c804 100644
--- a/src/views/deviceManage/busCircuit.vue
+++ b/src/views/deviceManage/busCircuit.vue
@@ -1,77 +1,48 @@
 <!--回路列表-->
 <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-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.lampboxId" placeholder="所属灯箱" filterable clearable>
-                  <el-option v-for="item in boxList" :key="item.id" :label="item.lampboxName" :value="item.id"/>
-                </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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/circuit/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-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/circuit/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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.lampboxId" size="small" placeholder="所属灯箱" filterable clearable>
+          <el-option v-for="item in boxList" :key="item.id" :label="item.lampboxName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <!--<template slot="preColumns">-->
+      <!--<el-table-column align="center" type="selection" width="55"/>-->
+      <!--</template>-->
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <el-table-column label="操作" align="center" width="160">
-          <template slot-scope="scope">
-            <el-button v-if="hasPerm('/circuit/edit')" type="text" size="small" @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-circuit ref="editCircuit" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -128,7 +99,21 @@
       multipleSelection: [], // 多选选中项
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -253,17 +238,13 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/busController.vue b/src/views/deviceManage/busController.vue
index 49789c4..4646bf2 100644
--- a/src/views/deviceManage/busController.vue
+++ b/src/views/deviceManage/busController.vue
@@ -1,98 +1,67 @@
 <!--设备列表-->
 <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>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.controllerCode" size="small" placeholder="控制器编号" clearable />
+      </search-item>
+      <search-item/>
+      <search-item>
+        <el-select v-model="listQuery.controllerType" size="small" 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" size="small" placeholder="所属组织"/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" 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
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="selectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <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>
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <!--<template slot="preColumns">-->
+      <!--<el-table-column align="center" type="selection" width="55"/>-->
+      <!--</template>-->
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <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>
@@ -152,7 +121,21 @@
       statusList: [{ value: '1', name: '在线' }, { value: '0', name: '离线' }],
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -303,21 +286,17 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
-    handleSelectionChange(val) {
+    selectionChange(val) {
       this.multipleSelection = val
     }
   }
diff --git a/src/views/deviceManage/busGroup.vue b/src/views/deviceManage/busGroup.vue
index 9f85789..a35646b 100644
--- a/src/views/deviceManage/busGroup.vue
+++ b/src/views/deviceManage/busGroup.vue
@@ -1,80 +1,48 @@
 <!--灯箱列表-->
 <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.keyword" placeholder="分组名称" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.deviceType" placeholder="设备类型" clearable @change="fetchData">
-                  <el-option v-for="item in groupList" :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="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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/lampbox/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-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column 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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="分组名称" clearable />
+      </search-item>
+      <search-item/>
+      <search-item>
+        <el-select v-model="listQuery.deviceType" size="small" placeholder="设备类型" clearable @change="fetchData">
+          <el-option v-for="item in groupList" :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" size="small" placeholder="所属组织"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <el-table-column label="操作" align="center" width="160">
-          <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>-->
-            <el-button type="text" size="small" @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-Group ref="editGroup" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -132,7 +100,21 @@
       multipleSelection: [], // 多选选中项
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -249,17 +231,13 @@
         this.listLoading = false
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/busLamp.vue b/src/views/deviceManage/busLamp.vue
index 3450479..c480b30 100644
--- a/src/views/deviceManage/busLamp.vue
+++ b/src/views/deviceManage/busLamp.vue
@@ -1,104 +1,68 @@
 <!--路灯列表-->
 <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.keyword" placeholder="关键词" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.lampType" placeholder="路灯类型" clearable>
-                  <el-option v-for="item in typeList" :key="item.id" :label="item.typeName" :value="item.id"/>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </el-select>
-              </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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/lamp/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>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/lamp/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>
-        <!--操作列-->
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="关键词" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.lampType" size="small" placeholder="路灯类型" clearable>
+          <el-option v-for="item in typeList" :key="item.id" :label="item.typeName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" 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
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <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>
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
             <el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>
-            <el-button v-if="hasPerm('/lamp/edit')" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
-
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
             <el-button v-if="hasPerm('/lamp/remoteOn')" type="text" size="small">开灯</el-button>
             <el-button v-if="hasPerm('/lamp/remoteOff')" type="text" size="small">关灯</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-Lamp ref="editLamp" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -175,7 +139,21 @@
       statusList: [{ value: '1', name: '开灯' }, { value: '2', name: '关灯' }, { value: '3', name: '报警' }, { value: '4', name: '离线' }],
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -338,17 +316,13 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/busLampbox.vue b/src/views/deviceManage/busLampbox.vue
index 292c3a5..7763fac 100644
--- a/src/views/deviceManage/busLampbox.vue
+++ b/src/views/deviceManage/busLampbox.vue
@@ -1,46 +1,34 @@
 <!--灯箱列表-->
 <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.boxName" placeholder="灯箱名称" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/lampbox/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-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/lampbox/delete')" align="center" type="selection" width="55"/>
-        <!--序号列-->
-        <el-table-column :index="indexMethod" align="center" type="index" label="#" width="55"/>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.boxName" size="small" placeholder="灯箱名称" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
         <!--内容列-->
         <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">
@@ -55,30 +43,18 @@
             </div>
           </template>
         </el-table-column>
-        <!--操作列-->
+      </template>
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
             <el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>
-            <el-button v-if="hasPerm('/lampbox/edit')" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
+            <el-button type="text" size="small" @click.stop="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-Lampbox ref="editLampbox" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -144,7 +120,21 @@
       multipleSelection: [], // 多选选中项
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -277,6 +267,15 @@
       this.listQuery.limit = val
       this.fetchData()
     },
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
+    },
     // 改变当前页
     handleCurrentChange(val) {
       this.listQuery.offset = val
diff --git a/src/views/deviceManage/busLamppost.vue b/src/views/deviceManage/busLamppost.vue
index 92833a0..c193813 100644
--- a/src/views/deviceManage/busLamppost.vue
+++ b/src/views/deviceManage/busLamppost.vue
@@ -1,100 +1,65 @@
 <!--灯杆列表-->
 <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.keyword" placeholder="关键词" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.lamppostType" placeholder="路灯杆类型" clearable>
-                  <el-option v-for="item in typeList" :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">
-                <el-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </el-select>
-              </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('/lamppost/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>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/lamppost/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>
-        <!--操作列-->
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="关键词" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.lamppostType" size="small" placeholder="路灯杆类型" clearable>
+          <el-option v-for="item in typeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" 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
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <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>
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
-            <el-button v-if="hasPerm('/lamppost/edit')" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
+            <el-button type="text" size="small" @click.stop="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-Lamppost ref="editLamppost" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -161,7 +126,21 @@
       statusList: [{ value: '1', name: '开灯' }, { value: '2', name: '关灯' }, { value: '3', name: '报警' }, { value: '4', name: '离线' }],
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -320,17 +299,13 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/editCircuit.vue b/src/views/deviceManage/editCircuit.vue
index 9e9dd03..a362483 100644
--- a/src/views/deviceManage/editCircuit.vue
+++ b/src/views/deviceManage/editCircuit.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="cirForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="cirForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="回路编号" prop="circuitCode">

diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 5077bef..3fd3f33 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -58,6 +58,8 @@
       <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns"/>
+        <!--复选框列-->
+        <el-table-column v-if="options && options.needMultSelect" align="center" type="selection" width="55"/>
         <!--序号列-->
         <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
         <!--内容列, 若columns存在且长度大于0-->
@@ -140,7 +142,8 @@
       type: Object,
       default: function() {
         return {
-          needIndex: true // 是否需要序号列
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
         }
       }
     }, // 配置项
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
index 1175911..b5e8442 100644
--- a/src/components/SearchArea/SearchArea.vue
+++ b/src/components/SearchArea/SearchArea.vue
@@ -16,6 +16,7 @@
       <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
       <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
       <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns-seperate"/>
     </div>
     <!-- 弹出框式高级检索 -->
     <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
index 84bdb9f..c192d79 100644
--- a/src/layout/components/AppHeader.vue
+++ b/src/layout/components/AppHeader.vue
@@ -1,6 +1,14 @@
 <template>
   <el-header class="app-header">
     <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown v-if="showChangeSys" class="systemSelect" size="medium" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
     <el-dropdown class="dropdown-container" trigger="click">
       <div class="dropdown-wrapper">
         <span style="line-height:50px;">欢迎您，{{ name }}</span>
@@ -33,6 +41,7 @@
   data() {
     return {
       title: this.baseConfig.title, // 标题
+      showChangeSys: !this.baseConfig.singleSys, // 是否显示切换系统菜单
       name: this.$store.getters.name, // 用户姓名
       showSetPwd: false // 是否显示修改密码按钮
     }
@@ -40,7 +49,9 @@
   computed: {
     ...mapGetters([
       'sidebar',
-      'avatar'
+      'avatar',
+      'currentSystem',
+      'systems'
     ])
   },
   methods: {
@@ -55,6 +66,38 @@
     resetPwd() {
       this.showSetPwd = true
       this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      const url = this.baseConfig.mainPage
+      window.location.href = url
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      const params1 = `?token=${this.$store.getters.token}`
+      const params = `?sys=${command.name}&url=${command.url}&code=${command.code}&token=${this.$store.getters.token}`
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params1
+        } else {
+          window.open(command.url + params1, '_blank')
+        }
+      } else {
+        // 取token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = this.baseConfig.mainPage + command.url + params
+        } else {
+          window.open(this.baseConfig.mainPage + command.url + params, '_blank')
+        }
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
     }
   }
 }
diff --git a/src/permission.js b/src/permission.js
index 69e8233..637373e 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -26,20 +26,13 @@
           // 设置当前子系统为基础资源子系统
           const currentSys = {
             code: 'baseResourse',
-            id: '1189107859077373285',
-            ismenu: '0',
-            levels: 1,
-            name: '智慧照明子系统',
-            num: 0,
-            parentId: '0',
-            resourceType: '02',
-            url: '/baseResourse'
+            name: '智慧照明子系统'
           }
           // 将当前系统信息保存在localStorage中
           store.commit('SET_SYSTEM', currentSys)
           // 远程访问获取权限列表（菜单&按钮）
           store.dispatch('GetMenus', currentSys).then(() => {
-            store.commit('SET_CHANGEFLAG', '0')
+            // store.commit('SET_CHANGEFLAG', '0')
             router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
             next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
           })
diff --git a/src/router/index.js b/src/router/index.js
index 32f93ef..b558038 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -49,21 +49,22 @@
   // 404错误页面
   { path: '/404', component: () => import('@/views/errorPage/404'), hidden: true },
   // 401 错误页面
-  { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
-  // 主页
-  {
-    path: '/',
-    component: Layout,
-    redirect: 'dashboard',
-    name: 'Dashboard',
-    // hidden: true,
-    children: [{
-      path: 'dashboard',
-      name: 'Dashboard',
-      component: () => import('@/views/dashboard/index'),
-      meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
-    }]
-  }
+  { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true }
+  // { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
+  // // 主页
+  // {
+  //   path: '/',
+  //   component: Layout,
+  //   redirect: 'dashboard',
+  //   name: 'Dashboard',
+  //   // hidden: true,
+  //   children: [{
+  //     path: 'dashboard',
+  //     name: 'Dashboard',
+  //     component: () => import('@/views/dashboard/index'),
+  //     meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
+  //   }]
+  // }
 ]
 // 实例化vue的时候直挂载constantRouter
 export default new Router({
diff --git a/src/views/alarmManage/alarmRule.vue b/src/views/alarmManage/alarmRule.vue
index 888a4d1..11469a2 100644
--- a/src/views/alarmManage/alarmRule.vue
+++ b/src/views/alarmManage/alarmRule.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
       <el-tab-pane label="路灯" name="lamp">
         <lamp-type-list ref="lamp"/>
@@ -8,7 +8,7 @@
         <lampbox-type-list ref="box"/>
       </el-tab-pane>
     </el-tabs>
-  </div>
+  </app-container>
 </template>
 
 <script>
diff --git a/src/views/alarmManage/components/alarmDetail.vue b/src/views/alarmManage/components/alarmDetail.vue
index 9c68377..d598779 100644
--- a/src/views/alarmManage/components/alarmDetail.vue
+++ b/src/views/alarmManage/components/alarmDetail.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :close-on-click-modal="false" :visible.sync="dialogFormVisible" title="报警详情" append-to-body>
-    <el-form ref="dataForm" :model="alarmForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :model="alarmForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="10">
           <el-form-item label="设备名称" prop="deviceName">
diff --git a/src/views/alarmManage/lampType/editLampType.vue b/src/views/alarmManage/lampType/editLampType.vue
index 8c3e37a..8e5fc23 100644
--- a/src/views/alarmManage/lampType/editLampType.vue
+++ b/src/views/alarmManage/lampType/editLampType.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="typeForm" label-well-code="right" label-width="200px">
+    <el-form ref="dataForm" :rules="rules" :model="typeForm" size="small" label-well-code="right" label-width="200px">
       <el-row :gutter="20">
         <el-col :span="20">
           <el-form-item label="路灯类型" prop="typeName">
diff --git a/src/views/alarmManage/lampType/lampTypeList.vue b/src/views/alarmManage/lampType/lampTypeList.vue
index f8547ed..f10c63b 100644
--- a/src/views/alarmManage/lampType/lampTypeList.vue
+++ b/src/views/alarmManage/lampType/lampTypeList.vue
@@ -8,12 +8,11 @@
           <el-row>
             <el-col :span="4">
               <el-form-item class="selectForm-container-item">
-                <el-input v-model.trim="listQuery.typeName" placeholder="类型名称" clearable />
+                <el-input v-model.trim="listQuery.typeName" size="small" placeholder="类型名称" clearable />
               </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-button class="filter-item" type="primary" icon="el-icon-search" size="small" style="margin-top: 2px" @click="search">搜索</el-button>
             </el-col>
           </el-row>
         </el-form>
@@ -28,7 +27,7 @@
           <el-button class="edit_btn" size="small" @click="add">新增</el-button>
         </el-col>
       </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
+      <el-table v-loading="listLoading" :data="list" class="table" size="small" border @selection-change="handleSelectionChange">
         <!--拥有删除权限则显示复选框-->
         <el-table-column v-if="hasPerm('/lampType/delete')" align="center" type="selection" width="55"/>
         <!--序号列-->
diff --git a/src/views/alarmManage/lampboxType/editLampboxType.vue b/src/views/alarmManage/lampboxType/editLampboxType.vue
index 1b94960..ae3a7c1 100644
--- a/src/views/alarmManage/lampboxType/editLampboxType.vue
+++ b/src/views/alarmManage/lampboxType/editLampboxType.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="typeForm" label-well-code="right" label-width="200px">
+    <el-form ref="dataForm" :rules="rules" :model="typeForm" size="small" label-well-code="right" label-width="200px">
       <el-row :gutter="20">
         <el-col :span="20">
           <el-form-item label="灯箱类型" prop="typeName">
diff --git a/src/views/alarmManage/lampboxType/lampboxTypeList.vue b/src/views/alarmManage/lampboxType/lampboxTypeList.vue
index 7b68f20..f33dcbf 100644
--- a/src/views/alarmManage/lampboxType/lampboxTypeList.vue
+++ b/src/views/alarmManage/lampboxType/lampboxTypeList.vue
@@ -8,7 +8,7 @@
           <el-row>
             <el-col :span="4">
               <el-form-item class="selectForm-container-item">
-                <el-input v-model.trim="listQuery.typeName" placeholder="类型名称" clearable />
+                <el-input v-model.trim="listQuery.typeName" size="small" placeholder="类型名称" clearable />
               </el-form-item>
             </el-col>
 
diff --git a/src/views/alarmManage/listAlarm.vue b/src/views/alarmManage/listAlarm.vue
index 7571a0e..fe3e359 100644
--- a/src/views/alarmManage/listAlarm.vue
+++ b/src/views/alarmManage/listAlarm.vue
@@ -1,73 +1,52 @@
 <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-form-item>
-              <el-input v-model.trim="listQuery.keyword" placeholder="设备编号/设备名称" clearable/>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmType" placeholder="报警类型" clearable>
-                <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmStatus" placeholder="报警状态" clearable>
-                <el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item" prop="startTime">
-              <el-date-picker
-                v-model="timeRange"
-                type="datetimerange"
-                range-separator="至"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                start-placeholder="报警开始时间"
-                end-placeholder="报警结束时间"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
-        <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>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="设备编号/设备名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmType" size="small" placeholder="报警类型" clearable>
+          <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmStatus" size="small" placeholder="报警状态" clearable>
+          <el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          size="small"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="报警开始时间"
+          end-placeholder="报警结束时间"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="130">
           <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
             <el-button type="text" size="small" @click="showDetail(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>
     <alarm-detail v-show="dialogFormVisible" ref="alarmdetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -123,7 +102,21 @@
       dialogFormVisible: false,
       alarmStatusList: [{ name: '正在报警', value: '1' }, { name: '已取消', value: '2' }], // 报警状态列表
       alarmTypeList: [],
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   watch: {
@@ -171,19 +164,15 @@
     },
     clearInput() {
       this.listQuery = {
-        name: '', // 姓名
-        sex: '', // 性别
-        nation: '', // 民族
-        collReason: '', // 采集原因
-        cardType: '', // 证件类型
-        idCardNo: '', // 证件号码
-        alarmReason: '', // 报警原因
-        startTime: '', // 开始时间
-        endTime: '', // 结束时间
+        keyword: '', // 设备编号/设备名称
+        alarmType: '', // 报警类型
+        alarmStatus: '', // 报警状态
+        startTime: '', // 报警开始时间
+        endTime: '', // 报警结束时间
         offset: 1,
         limit: 20,
-        sort: '',
-        order: ''
+        sort: 'alarmTime',
+        order: 'desc'
       }
       this.timeRange = []
       this.fetchData(false)
@@ -194,18 +183,13 @@
         this.alarmTypeList = response.data
       })
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }
diff --git a/src/views/alarmManage/listAlarmNow.vue b/src/views/alarmManage/listAlarmNow.vue
index c48b60a..d98b641 100644
--- a/src/views/alarmManage/listAlarmNow.vue
+++ b/src/views/alarmManage/listAlarmNow.vue
@@ -1,73 +1,47 @@
 <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-form-item>
-              <el-input v-model.trim="listQuery.keyword" placeholder="设备编号/设备名称" clearable/>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmType" placeholder="报警类型" clearable>
-                <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <!--<el-form-item>-->
-            <!--<el-select v-model="listQuery.alarmStatus" placeholder="报警状态" clearable>-->
-            <!--<el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>-->
-            <!--</el-select>-->
-            <!--</el-form-item>-->
-            <el-form-item class="selectForm-container-item" prop="startTime">
-              <el-date-picker
-                v-model="timeRange"
-                type="datetimerange"
-                range-separator="至"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                start-placeholder="报警开始时间"
-                end-placeholder="报警结束时间"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
-        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="设备编号/设备名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmType" size="small" placeholder="报警类型" clearable>
+          <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          size="small"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="报警开始时间"
+          end-placeholder="报警结束时间"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
-            <span>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" align="center" width="130">
-          <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
             <el-button type="text" size="small" @click="showDetail(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>
     <alarm-detail v-show="dialogFormVisible" ref="alarmdetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -123,7 +97,21 @@
       dialogFormVisible: false,
       alarmStatusList: [{ name: '正在报警', value: '1' }, { name: '已取消', value: '2' }], // 报警状态列表
       alarmTypeList: [],
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   watch: {
@@ -171,15 +159,11 @@
     },
     clearInput() {
       this.listQuery = {
-        name: '', // 姓名
-        sex: '', // 性别
-        nation: '', // 民族
-        collReason: '', // 采集原因
-        cardType: '', // 证件类型
-        idCardNo: '', // 证件号码
-        alarmReason: '', // 报警原因
-        startTime: '', // 开始时间
-        endTime: '', // 结束时间
+        keyword: '', // 设备编号/设备名称
+        alarmType: '', // 报警类型
+        alarmStatus: '1', // 报警状态
+        startTime: '', // 报警开始时间
+        endTime: '', // 报警结束时间
         offset: 1,
         limit: 20,
         sort: '',
@@ -194,18 +178,13 @@
         this.alarmTypeList = response.data
       })
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }
diff --git a/src/views/deviceManage/busCircuit.vue b/src/views/deviceManage/busCircuit.vue
index 2e1f872..7c9c804 100644
--- a/src/views/deviceManage/busCircuit.vue
+++ b/src/views/deviceManage/busCircuit.vue
@@ -1,77 +1,48 @@
 <!--回路列表-->
 <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-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.lampboxId" placeholder="所属灯箱" filterable clearable>
-                  <el-option v-for="item in boxList" :key="item.id" :label="item.lampboxName" :value="item.id"/>
-                </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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/circuit/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-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/circuit/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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.lampboxId" size="small" placeholder="所属灯箱" filterable clearable>
+          <el-option v-for="item in boxList" :key="item.id" :label="item.lampboxName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <!--<template slot="preColumns">-->
+      <!--<el-table-column align="center" type="selection" width="55"/>-->
+      <!--</template>-->
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <el-table-column label="操作" align="center" width="160">
-          <template slot-scope="scope">
-            <el-button v-if="hasPerm('/circuit/edit')" type="text" size="small" @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-circuit ref="editCircuit" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -128,7 +99,21 @@
       multipleSelection: [], // 多选选中项
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -253,17 +238,13 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/busController.vue b/src/views/deviceManage/busController.vue
index 49789c4..4646bf2 100644
--- a/src/views/deviceManage/busController.vue
+++ b/src/views/deviceManage/busController.vue
@@ -1,98 +1,67 @@
 <!--设备列表-->
 <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>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.controllerCode" size="small" placeholder="控制器编号" clearable />
+      </search-item>
+      <search-item/>
+      <search-item>
+        <el-select v-model="listQuery.controllerType" size="small" 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" size="small" placeholder="所属组织"/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" 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
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="selectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <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>
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <!--<template slot="preColumns">-->
+      <!--<el-table-column align="center" type="selection" width="55"/>-->
+      <!--</template>-->
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <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>
@@ -152,7 +121,21 @@
       statusList: [{ value: '1', name: '在线' }, { value: '0', name: '离线' }],
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -303,21 +286,17 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
-    handleSelectionChange(val) {
+    selectionChange(val) {
       this.multipleSelection = val
     }
   }
diff --git a/src/views/deviceManage/busGroup.vue b/src/views/deviceManage/busGroup.vue
index 9f85789..a35646b 100644
--- a/src/views/deviceManage/busGroup.vue
+++ b/src/views/deviceManage/busGroup.vue
@@ -1,80 +1,48 @@
 <!--灯箱列表-->
 <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.keyword" placeholder="分组名称" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.deviceType" placeholder="设备类型" clearable @change="fetchData">
-                  <el-option v-for="item in groupList" :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="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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/lampbox/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-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column 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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="分组名称" clearable />
+      </search-item>
+      <search-item/>
+      <search-item>
+        <el-select v-model="listQuery.deviceType" size="small" placeholder="设备类型" clearable @change="fetchData">
+          <el-option v-for="item in groupList" :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" size="small" placeholder="所属组织"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <el-table-column label="操作" align="center" width="160">
-          <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>-->
-            <el-button type="text" size="small" @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-Group ref="editGroup" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -132,7 +100,21 @@
       multipleSelection: [], // 多选选中项
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -249,17 +231,13 @@
         this.listLoading = false
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/busLamp.vue b/src/views/deviceManage/busLamp.vue
index 3450479..c480b30 100644
--- a/src/views/deviceManage/busLamp.vue
+++ b/src/views/deviceManage/busLamp.vue
@@ -1,104 +1,68 @@
 <!--路灯列表-->
 <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.keyword" placeholder="关键词" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.lampType" placeholder="路灯类型" clearable>
-                  <el-option v-for="item in typeList" :key="item.id" :label="item.typeName" :value="item.id"/>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </el-select>
-              </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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/lamp/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>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/lamp/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>
-        <!--操作列-->
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="关键词" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.lampType" size="small" placeholder="路灯类型" clearable>
+          <el-option v-for="item in typeList" :key="item.id" :label="item.typeName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" 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
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <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>
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
             <el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>
-            <el-button v-if="hasPerm('/lamp/edit')" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
-
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
             <el-button v-if="hasPerm('/lamp/remoteOn')" type="text" size="small">开灯</el-button>
             <el-button v-if="hasPerm('/lamp/remoteOff')" type="text" size="small">关灯</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-Lamp ref="editLamp" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -175,7 +139,21 @@
       statusList: [{ value: '1', name: '开灯' }, { value: '2', name: '关灯' }, { value: '3', name: '报警' }, { value: '4', name: '离线' }],
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -338,17 +316,13 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/busLampbox.vue b/src/views/deviceManage/busLampbox.vue
index 292c3a5..7763fac 100644
--- a/src/views/deviceManage/busLampbox.vue
+++ b/src/views/deviceManage/busLampbox.vue
@@ -1,46 +1,34 @@
 <!--灯箱列表-->
 <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.boxName" placeholder="灯箱名称" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/lampbox/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-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/lampbox/delete')" align="center" type="selection" width="55"/>
-        <!--序号列-->
-        <el-table-column :index="indexMethod" align="center" type="index" label="#" width="55"/>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.boxName" size="small" placeholder="灯箱名称" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
         <!--内容列-->
         <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">
@@ -55,30 +43,18 @@
             </div>
           </template>
         </el-table-column>
-        <!--操作列-->
+      </template>
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
             <el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>
-            <el-button v-if="hasPerm('/lampbox/edit')" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
+            <el-button type="text" size="small" @click.stop="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-Lampbox ref="editLampbox" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -144,7 +120,21 @@
       multipleSelection: [], // 多选选中项
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -277,6 +267,15 @@
       this.listQuery.limit = val
       this.fetchData()
     },
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
+    },
     // 改变当前页
     handleCurrentChange(val) {
       this.listQuery.offset = val
diff --git a/src/views/deviceManage/busLamppost.vue b/src/views/deviceManage/busLamppost.vue
index 92833a0..c193813 100644
--- a/src/views/deviceManage/busLamppost.vue
+++ b/src/views/deviceManage/busLamppost.vue
@@ -1,100 +1,65 @@
 <!--灯杆列表-->
 <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.keyword" placeholder="关键词" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.lamppostType" placeholder="路灯杆类型" clearable>
-                  <el-option v-for="item in typeList" :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">
-                <el-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </el-select>
-              </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('/lamppost/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>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/lamppost/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>
-        <!--操作列-->
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="关键词" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.lamppostType" size="small" placeholder="路灯杆类型" clearable>
+          <el-option v-for="item in typeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" 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
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <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>
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
-            <el-button v-if="hasPerm('/lamppost/edit')" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
+            <el-button type="text" size="small" @click.stop="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-Lamppost ref="editLamppost" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -161,7 +126,21 @@
       statusList: [{ value: '1', name: '开灯' }, { value: '2', name: '关灯' }, { value: '3', name: '报警' }, { value: '4', name: '离线' }],
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -320,17 +299,13 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/editCircuit.vue b/src/views/deviceManage/editCircuit.vue
index 9e9dd03..a362483 100644
--- a/src/views/deviceManage/editCircuit.vue
+++ b/src/views/deviceManage/editCircuit.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="cirForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="cirForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="回路编号" prop="circuitCode">
diff --git a/src/views/deviceManage/editController.vue b/src/views/deviceManage/editController.vue
index 7bc786f..444c835 100644
--- a/src/views/deviceManage/editController.vue
+++ b/src/views/deviceManage/editController.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="controllerForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="controllerForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="控制器编号" prop="controllerCode">

diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 5077bef..3fd3f33 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -58,6 +58,8 @@
       <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns"/>
+        <!--复选框列-->
+        <el-table-column v-if="options && options.needMultSelect" align="center" type="selection" width="55"/>
         <!--序号列-->
         <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
         <!--内容列, 若columns存在且长度大于0-->
@@ -140,7 +142,8 @@
       type: Object,
       default: function() {
         return {
-          needIndex: true // 是否需要序号列
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
         }
       }
     }, // 配置项
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
index 1175911..b5e8442 100644
--- a/src/components/SearchArea/SearchArea.vue
+++ b/src/components/SearchArea/SearchArea.vue
@@ -16,6 +16,7 @@
       <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
       <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
       <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns-seperate"/>
     </div>
     <!-- 弹出框式高级检索 -->
     <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
index 84bdb9f..c192d79 100644
--- a/src/layout/components/AppHeader.vue
+++ b/src/layout/components/AppHeader.vue
@@ -1,6 +1,14 @@
 <template>
   <el-header class="app-header">
     <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown v-if="showChangeSys" class="systemSelect" size="medium" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
     <el-dropdown class="dropdown-container" trigger="click">
       <div class="dropdown-wrapper">
         <span style="line-height:50px;">欢迎您，{{ name }}</span>
@@ -33,6 +41,7 @@
   data() {
     return {
       title: this.baseConfig.title, // 标题
+      showChangeSys: !this.baseConfig.singleSys, // 是否显示切换系统菜单
       name: this.$store.getters.name, // 用户姓名
       showSetPwd: false // 是否显示修改密码按钮
     }
@@ -40,7 +49,9 @@
   computed: {
     ...mapGetters([
       'sidebar',
-      'avatar'
+      'avatar',
+      'currentSystem',
+      'systems'
     ])
   },
   methods: {
@@ -55,6 +66,38 @@
     resetPwd() {
       this.showSetPwd = true
       this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      const url = this.baseConfig.mainPage
+      window.location.href = url
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      const params1 = `?token=${this.$store.getters.token}`
+      const params = `?sys=${command.name}&url=${command.url}&code=${command.code}&token=${this.$store.getters.token}`
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params1
+        } else {
+          window.open(command.url + params1, '_blank')
+        }
+      } else {
+        // 取token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = this.baseConfig.mainPage + command.url + params
+        } else {
+          window.open(this.baseConfig.mainPage + command.url + params, '_blank')
+        }
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
     }
   }
 }
diff --git a/src/permission.js b/src/permission.js
index 69e8233..637373e 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -26,20 +26,13 @@
           // 设置当前子系统为基础资源子系统
           const currentSys = {
             code: 'baseResourse',
-            id: '1189107859077373285',
-            ismenu: '0',
-            levels: 1,
-            name: '智慧照明子系统',
-            num: 0,
-            parentId: '0',
-            resourceType: '02',
-            url: '/baseResourse'
+            name: '智慧照明子系统'
           }
           // 将当前系统信息保存在localStorage中
           store.commit('SET_SYSTEM', currentSys)
           // 远程访问获取权限列表（菜单&按钮）
           store.dispatch('GetMenus', currentSys).then(() => {
-            store.commit('SET_CHANGEFLAG', '0')
+            // store.commit('SET_CHANGEFLAG', '0')
             router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
             next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
           })
diff --git a/src/router/index.js b/src/router/index.js
index 32f93ef..b558038 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -49,21 +49,22 @@
   // 404错误页面
   { path: '/404', component: () => import('@/views/errorPage/404'), hidden: true },
   // 401 错误页面
-  { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
-  // 主页
-  {
-    path: '/',
-    component: Layout,
-    redirect: 'dashboard',
-    name: 'Dashboard',
-    // hidden: true,
-    children: [{
-      path: 'dashboard',
-      name: 'Dashboard',
-      component: () => import('@/views/dashboard/index'),
-      meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
-    }]
-  }
+  { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true }
+  // { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
+  // // 主页
+  // {
+  //   path: '/',
+  //   component: Layout,
+  //   redirect: 'dashboard',
+  //   name: 'Dashboard',
+  //   // hidden: true,
+  //   children: [{
+  //     path: 'dashboard',
+  //     name: 'Dashboard',
+  //     component: () => import('@/views/dashboard/index'),
+  //     meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
+  //   }]
+  // }
 ]
 // 实例化vue的时候直挂载constantRouter
 export default new Router({
diff --git a/src/views/alarmManage/alarmRule.vue b/src/views/alarmManage/alarmRule.vue
index 888a4d1..11469a2 100644
--- a/src/views/alarmManage/alarmRule.vue
+++ b/src/views/alarmManage/alarmRule.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
       <el-tab-pane label="路灯" name="lamp">
         <lamp-type-list ref="lamp"/>
@@ -8,7 +8,7 @@
         <lampbox-type-list ref="box"/>
       </el-tab-pane>
     </el-tabs>
-  </div>
+  </app-container>
 </template>
 
 <script>
diff --git a/src/views/alarmManage/components/alarmDetail.vue b/src/views/alarmManage/components/alarmDetail.vue
index 9c68377..d598779 100644
--- a/src/views/alarmManage/components/alarmDetail.vue
+++ b/src/views/alarmManage/components/alarmDetail.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :close-on-click-modal="false" :visible.sync="dialogFormVisible" title="报警详情" append-to-body>
-    <el-form ref="dataForm" :model="alarmForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :model="alarmForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="10">
           <el-form-item label="设备名称" prop="deviceName">
diff --git a/src/views/alarmManage/lampType/editLampType.vue b/src/views/alarmManage/lampType/editLampType.vue
index 8c3e37a..8e5fc23 100644
--- a/src/views/alarmManage/lampType/editLampType.vue
+++ b/src/views/alarmManage/lampType/editLampType.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="typeForm" label-well-code="right" label-width="200px">
+    <el-form ref="dataForm" :rules="rules" :model="typeForm" size="small" label-well-code="right" label-width="200px">
       <el-row :gutter="20">
         <el-col :span="20">
           <el-form-item label="路灯类型" prop="typeName">
diff --git a/src/views/alarmManage/lampType/lampTypeList.vue b/src/views/alarmManage/lampType/lampTypeList.vue
index f8547ed..f10c63b 100644
--- a/src/views/alarmManage/lampType/lampTypeList.vue
+++ b/src/views/alarmManage/lampType/lampTypeList.vue
@@ -8,12 +8,11 @@
           <el-row>
             <el-col :span="4">
               <el-form-item class="selectForm-container-item">
-                <el-input v-model.trim="listQuery.typeName" placeholder="类型名称" clearable />
+                <el-input v-model.trim="listQuery.typeName" size="small" placeholder="类型名称" clearable />
               </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-button class="filter-item" type="primary" icon="el-icon-search" size="small" style="margin-top: 2px" @click="search">搜索</el-button>
             </el-col>
           </el-row>
         </el-form>
@@ -28,7 +27,7 @@
           <el-button class="edit_btn" size="small" @click="add">新增</el-button>
         </el-col>
       </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
+      <el-table v-loading="listLoading" :data="list" class="table" size="small" border @selection-change="handleSelectionChange">
         <!--拥有删除权限则显示复选框-->
         <el-table-column v-if="hasPerm('/lampType/delete')" align="center" type="selection" width="55"/>
         <!--序号列-->
diff --git a/src/views/alarmManage/lampboxType/editLampboxType.vue b/src/views/alarmManage/lampboxType/editLampboxType.vue
index 1b94960..ae3a7c1 100644
--- a/src/views/alarmManage/lampboxType/editLampboxType.vue
+++ b/src/views/alarmManage/lampboxType/editLampboxType.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="typeForm" label-well-code="right" label-width="200px">
+    <el-form ref="dataForm" :rules="rules" :model="typeForm" size="small" label-well-code="right" label-width="200px">
       <el-row :gutter="20">
         <el-col :span="20">
           <el-form-item label="灯箱类型" prop="typeName">
diff --git a/src/views/alarmManage/lampboxType/lampboxTypeList.vue b/src/views/alarmManage/lampboxType/lampboxTypeList.vue
index 7b68f20..f33dcbf 100644
--- a/src/views/alarmManage/lampboxType/lampboxTypeList.vue
+++ b/src/views/alarmManage/lampboxType/lampboxTypeList.vue
@@ -8,7 +8,7 @@
           <el-row>
             <el-col :span="4">
               <el-form-item class="selectForm-container-item">
-                <el-input v-model.trim="listQuery.typeName" placeholder="类型名称" clearable />
+                <el-input v-model.trim="listQuery.typeName" size="small" placeholder="类型名称" clearable />
               </el-form-item>
             </el-col>
 
diff --git a/src/views/alarmManage/listAlarm.vue b/src/views/alarmManage/listAlarm.vue
index 7571a0e..fe3e359 100644
--- a/src/views/alarmManage/listAlarm.vue
+++ b/src/views/alarmManage/listAlarm.vue
@@ -1,73 +1,52 @@
 <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-form-item>
-              <el-input v-model.trim="listQuery.keyword" placeholder="设备编号/设备名称" clearable/>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmType" placeholder="报警类型" clearable>
-                <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmStatus" placeholder="报警状态" clearable>
-                <el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item" prop="startTime">
-              <el-date-picker
-                v-model="timeRange"
-                type="datetimerange"
-                range-separator="至"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                start-placeholder="报警开始时间"
-                end-placeholder="报警结束时间"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
-        <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>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="设备编号/设备名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmType" size="small" placeholder="报警类型" clearable>
+          <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmStatus" size="small" placeholder="报警状态" clearable>
+          <el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          size="small"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="报警开始时间"
+          end-placeholder="报警结束时间"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="130">
           <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
             <el-button type="text" size="small" @click="showDetail(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>
     <alarm-detail v-show="dialogFormVisible" ref="alarmdetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -123,7 +102,21 @@
       dialogFormVisible: false,
       alarmStatusList: [{ name: '正在报警', value: '1' }, { name: '已取消', value: '2' }], // 报警状态列表
       alarmTypeList: [],
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   watch: {
@@ -171,19 +164,15 @@
     },
     clearInput() {
       this.listQuery = {
-        name: '', // 姓名
-        sex: '', // 性别
-        nation: '', // 民族
-        collReason: '', // 采集原因
-        cardType: '', // 证件类型
-        idCardNo: '', // 证件号码
-        alarmReason: '', // 报警原因
-        startTime: '', // 开始时间
-        endTime: '', // 结束时间
+        keyword: '', // 设备编号/设备名称
+        alarmType: '', // 报警类型
+        alarmStatus: '', // 报警状态
+        startTime: '', // 报警开始时间
+        endTime: '', // 报警结束时间
         offset: 1,
         limit: 20,
-        sort: '',
-        order: ''
+        sort: 'alarmTime',
+        order: 'desc'
       }
       this.timeRange = []
       this.fetchData(false)
@@ -194,18 +183,13 @@
         this.alarmTypeList = response.data
       })
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }
diff --git a/src/views/alarmManage/listAlarmNow.vue b/src/views/alarmManage/listAlarmNow.vue
index c48b60a..d98b641 100644
--- a/src/views/alarmManage/listAlarmNow.vue
+++ b/src/views/alarmManage/listAlarmNow.vue
@@ -1,73 +1,47 @@
 <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-form-item>
-              <el-input v-model.trim="listQuery.keyword" placeholder="设备编号/设备名称" clearable/>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmType" placeholder="报警类型" clearable>
-                <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <!--<el-form-item>-->
-            <!--<el-select v-model="listQuery.alarmStatus" placeholder="报警状态" clearable>-->
-            <!--<el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>-->
-            <!--</el-select>-->
-            <!--</el-form-item>-->
-            <el-form-item class="selectForm-container-item" prop="startTime">
-              <el-date-picker
-                v-model="timeRange"
-                type="datetimerange"
-                range-separator="至"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                start-placeholder="报警开始时间"
-                end-placeholder="报警结束时间"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
-        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="设备编号/设备名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmType" size="small" placeholder="报警类型" clearable>
+          <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          size="small"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="报警开始时间"
+          end-placeholder="报警结束时间"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
-            <span>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" align="center" width="130">
-          <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
             <el-button type="text" size="small" @click="showDetail(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>
     <alarm-detail v-show="dialogFormVisible" ref="alarmdetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -123,7 +97,21 @@
       dialogFormVisible: false,
       alarmStatusList: [{ name: '正在报警', value: '1' }, { name: '已取消', value: '2' }], // 报警状态列表
       alarmTypeList: [],
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   watch: {
@@ -171,15 +159,11 @@
     },
     clearInput() {
       this.listQuery = {
-        name: '', // 姓名
-        sex: '', // 性别
-        nation: '', // 民族
-        collReason: '', // 采集原因
-        cardType: '', // 证件类型
-        idCardNo: '', // 证件号码
-        alarmReason: '', // 报警原因
-        startTime: '', // 开始时间
-        endTime: '', // 结束时间
+        keyword: '', // 设备编号/设备名称
+        alarmType: '', // 报警类型
+        alarmStatus: '1', // 报警状态
+        startTime: '', // 报警开始时间
+        endTime: '', // 报警结束时间
         offset: 1,
         limit: 20,
         sort: '',
@@ -194,18 +178,13 @@
         this.alarmTypeList = response.data
       })
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }
diff --git a/src/views/deviceManage/busCircuit.vue b/src/views/deviceManage/busCircuit.vue
index 2e1f872..7c9c804 100644
--- a/src/views/deviceManage/busCircuit.vue
+++ b/src/views/deviceManage/busCircuit.vue
@@ -1,77 +1,48 @@
 <!--回路列表-->
 <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-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.lampboxId" placeholder="所属灯箱" filterable clearable>
-                  <el-option v-for="item in boxList" :key="item.id" :label="item.lampboxName" :value="item.id"/>
-                </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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/circuit/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-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/circuit/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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.lampboxId" size="small" placeholder="所属灯箱" filterable clearable>
+          <el-option v-for="item in boxList" :key="item.id" :label="item.lampboxName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <!--<template slot="preColumns">-->
+      <!--<el-table-column align="center" type="selection" width="55"/>-->
+      <!--</template>-->
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <el-table-column label="操作" align="center" width="160">
-          <template slot-scope="scope">
-            <el-button v-if="hasPerm('/circuit/edit')" type="text" size="small" @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-circuit ref="editCircuit" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -128,7 +99,21 @@
       multipleSelection: [], // 多选选中项
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -253,17 +238,13 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/busController.vue b/src/views/deviceManage/busController.vue
index 49789c4..4646bf2 100644
--- a/src/views/deviceManage/busController.vue
+++ b/src/views/deviceManage/busController.vue
@@ -1,98 +1,67 @@
 <!--设备列表-->
 <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>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.controllerCode" size="small" placeholder="控制器编号" clearable />
+      </search-item>
+      <search-item/>
+      <search-item>
+        <el-select v-model="listQuery.controllerType" size="small" 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" size="small" placeholder="所属组织"/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" 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
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="selectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <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>
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <!--<template slot="preColumns">-->
+      <!--<el-table-column align="center" type="selection" width="55"/>-->
+      <!--</template>-->
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <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>
@@ -152,7 +121,21 @@
       statusList: [{ value: '1', name: '在线' }, { value: '0', name: '离线' }],
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -303,21 +286,17 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
-    handleSelectionChange(val) {
+    selectionChange(val) {
       this.multipleSelection = val
     }
   }
diff --git a/src/views/deviceManage/busGroup.vue b/src/views/deviceManage/busGroup.vue
index 9f85789..a35646b 100644
--- a/src/views/deviceManage/busGroup.vue
+++ b/src/views/deviceManage/busGroup.vue
@@ -1,80 +1,48 @@
 <!--灯箱列表-->
 <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.keyword" placeholder="分组名称" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.deviceType" placeholder="设备类型" clearable @change="fetchData">
-                  <el-option v-for="item in groupList" :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="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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/lampbox/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-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column 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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="分组名称" clearable />
+      </search-item>
+      <search-item/>
+      <search-item>
+        <el-select v-model="listQuery.deviceType" size="small" placeholder="设备类型" clearable @change="fetchData">
+          <el-option v-for="item in groupList" :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" size="small" placeholder="所属组织"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <el-table-column label="操作" align="center" width="160">
-          <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>-->
-            <el-button type="text" size="small" @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-Group ref="editGroup" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -132,7 +100,21 @@
       multipleSelection: [], // 多选选中项
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -249,17 +231,13 @@
         this.listLoading = false
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/busLamp.vue b/src/views/deviceManage/busLamp.vue
index 3450479..c480b30 100644
--- a/src/views/deviceManage/busLamp.vue
+++ b/src/views/deviceManage/busLamp.vue
@@ -1,104 +1,68 @@
 <!--路灯列表-->
 <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.keyword" placeholder="关键词" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.lampType" placeholder="路灯类型" clearable>
-                  <el-option v-for="item in typeList" :key="item.id" :label="item.typeName" :value="item.id"/>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </el-select>
-              </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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/lamp/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>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/lamp/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>
-        <!--操作列-->
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="关键词" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.lampType" size="small" placeholder="路灯类型" clearable>
+          <el-option v-for="item in typeList" :key="item.id" :label="item.typeName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" 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
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <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>
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
             <el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>
-            <el-button v-if="hasPerm('/lamp/edit')" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
-
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
             <el-button v-if="hasPerm('/lamp/remoteOn')" type="text" size="small">开灯</el-button>
             <el-button v-if="hasPerm('/lamp/remoteOff')" type="text" size="small">关灯</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-Lamp ref="editLamp" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -175,7 +139,21 @@
       statusList: [{ value: '1', name: '开灯' }, { value: '2', name: '关灯' }, { value: '3', name: '报警' }, { value: '4', name: '离线' }],
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -338,17 +316,13 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/busLampbox.vue b/src/views/deviceManage/busLampbox.vue
index 292c3a5..7763fac 100644
--- a/src/views/deviceManage/busLampbox.vue
+++ b/src/views/deviceManage/busLampbox.vue
@@ -1,46 +1,34 @@
 <!--灯箱列表-->
 <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.boxName" placeholder="灯箱名称" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/lampbox/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-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/lampbox/delete')" align="center" type="selection" width="55"/>
-        <!--序号列-->
-        <el-table-column :index="indexMethod" align="center" type="index" label="#" width="55"/>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.boxName" size="small" placeholder="灯箱名称" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
         <!--内容列-->
         <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">
@@ -55,30 +43,18 @@
             </div>
           </template>
         </el-table-column>
-        <!--操作列-->
+      </template>
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
             <el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>
-            <el-button v-if="hasPerm('/lampbox/edit')" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
+            <el-button type="text" size="small" @click.stop="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-Lampbox ref="editLampbox" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -144,7 +120,21 @@
       multipleSelection: [], // 多选选中项
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -277,6 +267,15 @@
       this.listQuery.limit = val
       this.fetchData()
     },
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
+    },
     // 改变当前页
     handleCurrentChange(val) {
       this.listQuery.offset = val
diff --git a/src/views/deviceManage/busLamppost.vue b/src/views/deviceManage/busLamppost.vue
index 92833a0..c193813 100644
--- a/src/views/deviceManage/busLamppost.vue
+++ b/src/views/deviceManage/busLamppost.vue
@@ -1,100 +1,65 @@
 <!--灯杆列表-->
 <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.keyword" placeholder="关键词" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.lamppostType" placeholder="路灯杆类型" clearable>
-                  <el-option v-for="item in typeList" :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">
-                <el-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </el-select>
-              </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('/lamppost/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>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/lamppost/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>
-        <!--操作列-->
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="关键词" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.lamppostType" size="small" placeholder="路灯杆类型" clearable>
+          <el-option v-for="item in typeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" 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
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <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>
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
-            <el-button v-if="hasPerm('/lamppost/edit')" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
+            <el-button type="text" size="small" @click.stop="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-Lamppost ref="editLamppost" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -161,7 +126,21 @@
       statusList: [{ value: '1', name: '开灯' }, { value: '2', name: '关灯' }, { value: '3', name: '报警' }, { value: '4', name: '离线' }],
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -320,17 +299,13 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/editCircuit.vue b/src/views/deviceManage/editCircuit.vue
index 9e9dd03..a362483 100644
--- a/src/views/deviceManage/editCircuit.vue
+++ b/src/views/deviceManage/editCircuit.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="cirForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="cirForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="回路编号" prop="circuitCode">
diff --git a/src/views/deviceManage/editController.vue b/src/views/deviceManage/editController.vue
index 7bc786f..444c835 100644
--- a/src/views/deviceManage/editController.vue
+++ b/src/views/deviceManage/editController.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="controllerForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="controllerForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="控制器编号" prop="controllerCode">
diff --git a/src/views/deviceManage/editGroup.vue b/src/views/deviceManage/editGroup.vue
index de9b88b..403d605 100644
--- a/src/views/deviceManage/editGroup.vue
+++ b/src/views/deviceManage/editGroup.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="groupForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="groupForm" size="small" label-well-code="right" label-width="110px">
       <el-row :span="24">
         <el-form-item label="分组名称" prop="groupName">
           <el-input v-model.trim="groupForm.groupName" :readonly="!isEditMode" clearable type="text" />

diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 5077bef..3fd3f33 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -58,6 +58,8 @@
       <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns"/>
+        <!--复选框列-->
+        <el-table-column v-if="options && options.needMultSelect" align="center" type="selection" width="55"/>
         <!--序号列-->
         <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
         <!--内容列, 若columns存在且长度大于0-->
@@ -140,7 +142,8 @@
       type: Object,
       default: function() {
         return {
-          needIndex: true // 是否需要序号列
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
         }
       }
     }, // 配置项
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
index 1175911..b5e8442 100644
--- a/src/components/SearchArea/SearchArea.vue
+++ b/src/components/SearchArea/SearchArea.vue
@@ -16,6 +16,7 @@
       <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
       <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
       <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns-seperate"/>
     </div>
     <!-- 弹出框式高级检索 -->
     <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
index 84bdb9f..c192d79 100644
--- a/src/layout/components/AppHeader.vue
+++ b/src/layout/components/AppHeader.vue
@@ -1,6 +1,14 @@
 <template>
   <el-header class="app-header">
     <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown v-if="showChangeSys" class="systemSelect" size="medium" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
     <el-dropdown class="dropdown-container" trigger="click">
       <div class="dropdown-wrapper">
         <span style="line-height:50px;">欢迎您，{{ name }}</span>
@@ -33,6 +41,7 @@
   data() {
     return {
       title: this.baseConfig.title, // 标题
+      showChangeSys: !this.baseConfig.singleSys, // 是否显示切换系统菜单
       name: this.$store.getters.name, // 用户姓名
       showSetPwd: false // 是否显示修改密码按钮
     }
@@ -40,7 +49,9 @@
   computed: {
     ...mapGetters([
       'sidebar',
-      'avatar'
+      'avatar',
+      'currentSystem',
+      'systems'
     ])
   },
   methods: {
@@ -55,6 +66,38 @@
     resetPwd() {
       this.showSetPwd = true
       this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      const url = this.baseConfig.mainPage
+      window.location.href = url
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      const params1 = `?token=${this.$store.getters.token}`
+      const params = `?sys=${command.name}&url=${command.url}&code=${command.code}&token=${this.$store.getters.token}`
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params1
+        } else {
+          window.open(command.url + params1, '_blank')
+        }
+      } else {
+        // 取token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = this.baseConfig.mainPage + command.url + params
+        } else {
+          window.open(this.baseConfig.mainPage + command.url + params, '_blank')
+        }
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
     }
   }
 }
diff --git a/src/permission.js b/src/permission.js
index 69e8233..637373e 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -26,20 +26,13 @@
           // 设置当前子系统为基础资源子系统
           const currentSys = {
             code: 'baseResourse',
-            id: '1189107859077373285',
-            ismenu: '0',
-            levels: 1,
-            name: '智慧照明子系统',
-            num: 0,
-            parentId: '0',
-            resourceType: '02',
-            url: '/baseResourse'
+            name: '智慧照明子系统'
           }
           // 将当前系统信息保存在localStorage中
           store.commit('SET_SYSTEM', currentSys)
           // 远程访问获取权限列表（菜单&按钮）
           store.dispatch('GetMenus', currentSys).then(() => {
-            store.commit('SET_CHANGEFLAG', '0')
+            // store.commit('SET_CHANGEFLAG', '0')
             router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
             next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
           })
diff --git a/src/router/index.js b/src/router/index.js
index 32f93ef..b558038 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -49,21 +49,22 @@
   // 404错误页面
   { path: '/404', component: () => import('@/views/errorPage/404'), hidden: true },
   // 401 错误页面
-  { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
-  // 主页
-  {
-    path: '/',
-    component: Layout,
-    redirect: 'dashboard',
-    name: 'Dashboard',
-    // hidden: true,
-    children: [{
-      path: 'dashboard',
-      name: 'Dashboard',
-      component: () => import('@/views/dashboard/index'),
-      meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
-    }]
-  }
+  { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true }
+  // { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
+  // // 主页
+  // {
+  //   path: '/',
+  //   component: Layout,
+  //   redirect: 'dashboard',
+  //   name: 'Dashboard',
+  //   // hidden: true,
+  //   children: [{
+  //     path: 'dashboard',
+  //     name: 'Dashboard',
+  //     component: () => import('@/views/dashboard/index'),
+  //     meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
+  //   }]
+  // }
 ]
 // 实例化vue的时候直挂载constantRouter
 export default new Router({
diff --git a/src/views/alarmManage/alarmRule.vue b/src/views/alarmManage/alarmRule.vue
index 888a4d1..11469a2 100644
--- a/src/views/alarmManage/alarmRule.vue
+++ b/src/views/alarmManage/alarmRule.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
       <el-tab-pane label="路灯" name="lamp">
         <lamp-type-list ref="lamp"/>
@@ -8,7 +8,7 @@
         <lampbox-type-list ref="box"/>
       </el-tab-pane>
     </el-tabs>
-  </div>
+  </app-container>
 </template>
 
 <script>
diff --git a/src/views/alarmManage/components/alarmDetail.vue b/src/views/alarmManage/components/alarmDetail.vue
index 9c68377..d598779 100644
--- a/src/views/alarmManage/components/alarmDetail.vue
+++ b/src/views/alarmManage/components/alarmDetail.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :close-on-click-modal="false" :visible.sync="dialogFormVisible" title="报警详情" append-to-body>
-    <el-form ref="dataForm" :model="alarmForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :model="alarmForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="10">
           <el-form-item label="设备名称" prop="deviceName">
diff --git a/src/views/alarmManage/lampType/editLampType.vue b/src/views/alarmManage/lampType/editLampType.vue
index 8c3e37a..8e5fc23 100644
--- a/src/views/alarmManage/lampType/editLampType.vue
+++ b/src/views/alarmManage/lampType/editLampType.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="typeForm" label-well-code="right" label-width="200px">
+    <el-form ref="dataForm" :rules="rules" :model="typeForm" size="small" label-well-code="right" label-width="200px">
       <el-row :gutter="20">
         <el-col :span="20">
           <el-form-item label="路灯类型" prop="typeName">
diff --git a/src/views/alarmManage/lampType/lampTypeList.vue b/src/views/alarmManage/lampType/lampTypeList.vue
index f8547ed..f10c63b 100644
--- a/src/views/alarmManage/lampType/lampTypeList.vue
+++ b/src/views/alarmManage/lampType/lampTypeList.vue
@@ -8,12 +8,11 @@
           <el-row>
             <el-col :span="4">
               <el-form-item class="selectForm-container-item">
-                <el-input v-model.trim="listQuery.typeName" placeholder="类型名称" clearable />
+                <el-input v-model.trim="listQuery.typeName" size="small" placeholder="类型名称" clearable />
               </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-button class="filter-item" type="primary" icon="el-icon-search" size="small" style="margin-top: 2px" @click="search">搜索</el-button>
             </el-col>
           </el-row>
         </el-form>
@@ -28,7 +27,7 @@
           <el-button class="edit_btn" size="small" @click="add">新增</el-button>
         </el-col>
       </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
+      <el-table v-loading="listLoading" :data="list" class="table" size="small" border @selection-change="handleSelectionChange">
         <!--拥有删除权限则显示复选框-->
         <el-table-column v-if="hasPerm('/lampType/delete')" align="center" type="selection" width="55"/>
         <!--序号列-->
diff --git a/src/views/alarmManage/lampboxType/editLampboxType.vue b/src/views/alarmManage/lampboxType/editLampboxType.vue
index 1b94960..ae3a7c1 100644
--- a/src/views/alarmManage/lampboxType/editLampboxType.vue
+++ b/src/views/alarmManage/lampboxType/editLampboxType.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="typeForm" label-well-code="right" label-width="200px">
+    <el-form ref="dataForm" :rules="rules" :model="typeForm" size="small" label-well-code="right" label-width="200px">
       <el-row :gutter="20">
         <el-col :span="20">
           <el-form-item label="灯箱类型" prop="typeName">
diff --git a/src/views/alarmManage/lampboxType/lampboxTypeList.vue b/src/views/alarmManage/lampboxType/lampboxTypeList.vue
index 7b68f20..f33dcbf 100644
--- a/src/views/alarmManage/lampboxType/lampboxTypeList.vue
+++ b/src/views/alarmManage/lampboxType/lampboxTypeList.vue
@@ -8,7 +8,7 @@
           <el-row>
             <el-col :span="4">
               <el-form-item class="selectForm-container-item">
-                <el-input v-model.trim="listQuery.typeName" placeholder="类型名称" clearable />
+                <el-input v-model.trim="listQuery.typeName" size="small" placeholder="类型名称" clearable />
               </el-form-item>
             </el-col>
 
diff --git a/src/views/alarmManage/listAlarm.vue b/src/views/alarmManage/listAlarm.vue
index 7571a0e..fe3e359 100644
--- a/src/views/alarmManage/listAlarm.vue
+++ b/src/views/alarmManage/listAlarm.vue
@@ -1,73 +1,52 @@
 <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-form-item>
-              <el-input v-model.trim="listQuery.keyword" placeholder="设备编号/设备名称" clearable/>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmType" placeholder="报警类型" clearable>
-                <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmStatus" placeholder="报警状态" clearable>
-                <el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item" prop="startTime">
-              <el-date-picker
-                v-model="timeRange"
-                type="datetimerange"
-                range-separator="至"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                start-placeholder="报警开始时间"
-                end-placeholder="报警结束时间"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
-        <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>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="设备编号/设备名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmType" size="small" placeholder="报警类型" clearable>
+          <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmStatus" size="small" placeholder="报警状态" clearable>
+          <el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          size="small"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="报警开始时间"
+          end-placeholder="报警结束时间"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="130">
           <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
             <el-button type="text" size="small" @click="showDetail(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>
     <alarm-detail v-show="dialogFormVisible" ref="alarmdetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -123,7 +102,21 @@
       dialogFormVisible: false,
       alarmStatusList: [{ name: '正在报警', value: '1' }, { name: '已取消', value: '2' }], // 报警状态列表
       alarmTypeList: [],
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   watch: {
@@ -171,19 +164,15 @@
     },
     clearInput() {
       this.listQuery = {
-        name: '', // 姓名
-        sex: '', // 性别
-        nation: '', // 民族
-        collReason: '', // 采集原因
-        cardType: '', // 证件类型
-        idCardNo: '', // 证件号码
-        alarmReason: '', // 报警原因
-        startTime: '', // 开始时间
-        endTime: '', // 结束时间
+        keyword: '', // 设备编号/设备名称
+        alarmType: '', // 报警类型
+        alarmStatus: '', // 报警状态
+        startTime: '', // 报警开始时间
+        endTime: '', // 报警结束时间
         offset: 1,
         limit: 20,
-        sort: '',
-        order: ''
+        sort: 'alarmTime',
+        order: 'desc'
       }
       this.timeRange = []
       this.fetchData(false)
@@ -194,18 +183,13 @@
         this.alarmTypeList = response.data
       })
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }
diff --git a/src/views/alarmManage/listAlarmNow.vue b/src/views/alarmManage/listAlarmNow.vue
index c48b60a..d98b641 100644
--- a/src/views/alarmManage/listAlarmNow.vue
+++ b/src/views/alarmManage/listAlarmNow.vue
@@ -1,73 +1,47 @@
 <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-form-item>
-              <el-input v-model.trim="listQuery.keyword" placeholder="设备编号/设备名称" clearable/>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmType" placeholder="报警类型" clearable>
-                <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <!--<el-form-item>-->
-            <!--<el-select v-model="listQuery.alarmStatus" placeholder="报警状态" clearable>-->
-            <!--<el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>-->
-            <!--</el-select>-->
-            <!--</el-form-item>-->
-            <el-form-item class="selectForm-container-item" prop="startTime">
-              <el-date-picker
-                v-model="timeRange"
-                type="datetimerange"
-                range-separator="至"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                start-placeholder="报警开始时间"
-                end-placeholder="报警结束时间"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
-        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="设备编号/设备名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmType" size="small" placeholder="报警类型" clearable>
+          <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          size="small"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="报警开始时间"
+          end-placeholder="报警结束时间"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
-            <span>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" align="center" width="130">
-          <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
             <el-button type="text" size="small" @click="showDetail(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>
     <alarm-detail v-show="dialogFormVisible" ref="alarmdetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -123,7 +97,21 @@
       dialogFormVisible: false,
       alarmStatusList: [{ name: '正在报警', value: '1' }, { name: '已取消', value: '2' }], // 报警状态列表
       alarmTypeList: [],
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   watch: {
@@ -171,15 +159,11 @@
     },
     clearInput() {
       this.listQuery = {
-        name: '', // 姓名
-        sex: '', // 性别
-        nation: '', // 民族
-        collReason: '', // 采集原因
-        cardType: '', // 证件类型
-        idCardNo: '', // 证件号码
-        alarmReason: '', // 报警原因
-        startTime: '', // 开始时间
-        endTime: '', // 结束时间
+        keyword: '', // 设备编号/设备名称
+        alarmType: '', // 报警类型
+        alarmStatus: '1', // 报警状态
+        startTime: '', // 报警开始时间
+        endTime: '', // 报警结束时间
         offset: 1,
         limit: 20,
         sort: '',
@@ -194,18 +178,13 @@
         this.alarmTypeList = response.data
       })
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }
diff --git a/src/views/deviceManage/busCircuit.vue b/src/views/deviceManage/busCircuit.vue
index 2e1f872..7c9c804 100644
--- a/src/views/deviceManage/busCircuit.vue
+++ b/src/views/deviceManage/busCircuit.vue
@@ -1,77 +1,48 @@
 <!--回路列表-->
 <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-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.lampboxId" placeholder="所属灯箱" filterable clearable>
-                  <el-option v-for="item in boxList" :key="item.id" :label="item.lampboxName" :value="item.id"/>
-                </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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/circuit/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-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/circuit/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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.lampboxId" size="small" placeholder="所属灯箱" filterable clearable>
+          <el-option v-for="item in boxList" :key="item.id" :label="item.lampboxName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <!--<template slot="preColumns">-->
+      <!--<el-table-column align="center" type="selection" width="55"/>-->
+      <!--</template>-->
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <el-table-column label="操作" align="center" width="160">
-          <template slot-scope="scope">
-            <el-button v-if="hasPerm('/circuit/edit')" type="text" size="small" @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-circuit ref="editCircuit" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -128,7 +99,21 @@
       multipleSelection: [], // 多选选中项
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -253,17 +238,13 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/busController.vue b/src/views/deviceManage/busController.vue
index 49789c4..4646bf2 100644
--- a/src/views/deviceManage/busController.vue
+++ b/src/views/deviceManage/busController.vue
@@ -1,98 +1,67 @@
 <!--设备列表-->
 <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>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.controllerCode" size="small" placeholder="控制器编号" clearable />
+      </search-item>
+      <search-item/>
+      <search-item>
+        <el-select v-model="listQuery.controllerType" size="small" 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" size="small" placeholder="所属组织"/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" 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
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="selectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <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>
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <!--<template slot="preColumns">-->
+      <!--<el-table-column align="center" type="selection" width="55"/>-->
+      <!--</template>-->
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <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>
@@ -152,7 +121,21 @@
       statusList: [{ value: '1', name: '在线' }, { value: '0', name: '离线' }],
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -303,21 +286,17 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
-    handleSelectionChange(val) {
+    selectionChange(val) {
       this.multipleSelection = val
     }
   }
diff --git a/src/views/deviceManage/busGroup.vue b/src/views/deviceManage/busGroup.vue
index 9f85789..a35646b 100644
--- a/src/views/deviceManage/busGroup.vue
+++ b/src/views/deviceManage/busGroup.vue
@@ -1,80 +1,48 @@
 <!--灯箱列表-->
 <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.keyword" placeholder="分组名称" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.deviceType" placeholder="设备类型" clearable @change="fetchData">
-                  <el-option v-for="item in groupList" :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="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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/lampbox/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-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column 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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="分组名称" clearable />
+      </search-item>
+      <search-item/>
+      <search-item>
+        <el-select v-model="listQuery.deviceType" size="small" placeholder="设备类型" clearable @change="fetchData">
+          <el-option v-for="item in groupList" :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" size="small" placeholder="所属组织"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <el-table-column label="操作" align="center" width="160">
-          <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>-->
-            <el-button type="text" size="small" @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-Group ref="editGroup" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -132,7 +100,21 @@
       multipleSelection: [], // 多选选中项
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -249,17 +231,13 @@
         this.listLoading = false
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/busLamp.vue b/src/views/deviceManage/busLamp.vue
index 3450479..c480b30 100644
--- a/src/views/deviceManage/busLamp.vue
+++ b/src/views/deviceManage/busLamp.vue
@@ -1,104 +1,68 @@
 <!--路灯列表-->
 <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.keyword" placeholder="关键词" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.lampType" placeholder="路灯类型" clearable>
-                  <el-option v-for="item in typeList" :key="item.id" :label="item.typeName" :value="item.id"/>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </el-select>
-              </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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/lamp/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>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/lamp/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>
-        <!--操作列-->
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="关键词" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.lampType" size="small" placeholder="路灯类型" clearable>
+          <el-option v-for="item in typeList" :key="item.id" :label="item.typeName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" 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
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <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>
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
             <el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>
-            <el-button v-if="hasPerm('/lamp/edit')" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
-
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
             <el-button v-if="hasPerm('/lamp/remoteOn')" type="text" size="small">开灯</el-button>
             <el-button v-if="hasPerm('/lamp/remoteOff')" type="text" size="small">关灯</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-Lamp ref="editLamp" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -175,7 +139,21 @@
       statusList: [{ value: '1', name: '开灯' }, { value: '2', name: '关灯' }, { value: '3', name: '报警' }, { value: '4', name: '离线' }],
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -338,17 +316,13 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/busLampbox.vue b/src/views/deviceManage/busLampbox.vue
index 292c3a5..7763fac 100644
--- a/src/views/deviceManage/busLampbox.vue
+++ b/src/views/deviceManage/busLampbox.vue
@@ -1,46 +1,34 @@
 <!--灯箱列表-->
 <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.boxName" placeholder="灯箱名称" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/lampbox/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-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/lampbox/delete')" align="center" type="selection" width="55"/>
-        <!--序号列-->
-        <el-table-column :index="indexMethod" align="center" type="index" label="#" width="55"/>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.boxName" size="small" placeholder="灯箱名称" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
         <!--内容列-->
         <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">
@@ -55,30 +43,18 @@
             </div>
           </template>
         </el-table-column>
-        <!--操作列-->
+      </template>
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
             <el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>
-            <el-button v-if="hasPerm('/lampbox/edit')" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
+            <el-button type="text" size="small" @click.stop="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-Lampbox ref="editLampbox" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -144,7 +120,21 @@
       multipleSelection: [], // 多选选中项
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -277,6 +267,15 @@
       this.listQuery.limit = val
       this.fetchData()
     },
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
+    },
     // 改变当前页
     handleCurrentChange(val) {
       this.listQuery.offset = val
diff --git a/src/views/deviceManage/busLamppost.vue b/src/views/deviceManage/busLamppost.vue
index 92833a0..c193813 100644
--- a/src/views/deviceManage/busLamppost.vue
+++ b/src/views/deviceManage/busLamppost.vue
@@ -1,100 +1,65 @@
 <!--灯杆列表-->
 <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.keyword" placeholder="关键词" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.lamppostType" placeholder="路灯杆类型" clearable>
-                  <el-option v-for="item in typeList" :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">
-                <el-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </el-select>
-              </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('/lamppost/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>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/lamppost/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>
-        <!--操作列-->
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="关键词" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.lamppostType" size="small" placeholder="路灯杆类型" clearable>
+          <el-option v-for="item in typeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" 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
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <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>
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
-            <el-button v-if="hasPerm('/lamppost/edit')" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
+            <el-button type="text" size="small" @click.stop="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-Lamppost ref="editLamppost" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -161,7 +126,21 @@
       statusList: [{ value: '1', name: '开灯' }, { value: '2', name: '关灯' }, { value: '3', name: '报警' }, { value: '4', name: '离线' }],
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -320,17 +299,13 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/editCircuit.vue b/src/views/deviceManage/editCircuit.vue
index 9e9dd03..a362483 100644
--- a/src/views/deviceManage/editCircuit.vue
+++ b/src/views/deviceManage/editCircuit.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="cirForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="cirForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="回路编号" prop="circuitCode">
diff --git a/src/views/deviceManage/editController.vue b/src/views/deviceManage/editController.vue
index 7bc786f..444c835 100644
--- a/src/views/deviceManage/editController.vue
+++ b/src/views/deviceManage/editController.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="controllerForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="controllerForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="控制器编号" prop="controllerCode">
diff --git a/src/views/deviceManage/editGroup.vue b/src/views/deviceManage/editGroup.vue
index de9b88b..403d605 100644
--- a/src/views/deviceManage/editGroup.vue
+++ b/src/views/deviceManage/editGroup.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="groupForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="groupForm" size="small" label-well-code="right" label-width="110px">
       <el-row :span="24">
         <el-form-item label="分组名称" prop="groupName">
           <el-input v-model.trim="groupForm.groupName" :readonly="!isEditMode" clearable type="text" />
diff --git a/src/views/deviceManage/editLamp.vue b/src/views/deviceManage/editLamp.vue
index 3d45138..faf37d5 100644
--- a/src/views/deviceManage/editLamp.vue
+++ b/src/views/deviceManage/editLamp.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="lampForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="lampForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="路灯编号" prop="lampCode">

diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 5077bef..3fd3f33 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -58,6 +58,8 @@
       <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns"/>
+        <!--复选框列-->
+        <el-table-column v-if="options && options.needMultSelect" align="center" type="selection" width="55"/>
         <!--序号列-->
         <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
         <!--内容列, 若columns存在且长度大于0-->
@@ -140,7 +142,8 @@
       type: Object,
       default: function() {
         return {
-          needIndex: true // 是否需要序号列
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
         }
       }
     }, // 配置项
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
index 1175911..b5e8442 100644
--- a/src/components/SearchArea/SearchArea.vue
+++ b/src/components/SearchArea/SearchArea.vue
@@ -16,6 +16,7 @@
       <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
       <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
       <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns-seperate"/>
     </div>
     <!-- 弹出框式高级检索 -->
     <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
index 84bdb9f..c192d79 100644
--- a/src/layout/components/AppHeader.vue
+++ b/src/layout/components/AppHeader.vue
@@ -1,6 +1,14 @@
 <template>
   <el-header class="app-header">
     <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown v-if="showChangeSys" class="systemSelect" size="medium" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
     <el-dropdown class="dropdown-container" trigger="click">
       <div class="dropdown-wrapper">
         <span style="line-height:50px;">欢迎您，{{ name }}</span>
@@ -33,6 +41,7 @@
   data() {
     return {
       title: this.baseConfig.title, // 标题
+      showChangeSys: !this.baseConfig.singleSys, // 是否显示切换系统菜单
       name: this.$store.getters.name, // 用户姓名
       showSetPwd: false // 是否显示修改密码按钮
     }
@@ -40,7 +49,9 @@
   computed: {
     ...mapGetters([
       'sidebar',
-      'avatar'
+      'avatar',
+      'currentSystem',
+      'systems'
     ])
   },
   methods: {
@@ -55,6 +66,38 @@
     resetPwd() {
       this.showSetPwd = true
       this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      const url = this.baseConfig.mainPage
+      window.location.href = url
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      const params1 = `?token=${this.$store.getters.token}`
+      const params = `?sys=${command.name}&url=${command.url}&code=${command.code}&token=${this.$store.getters.token}`
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params1
+        } else {
+          window.open(command.url + params1, '_blank')
+        }
+      } else {
+        // 取token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = this.baseConfig.mainPage + command.url + params
+        } else {
+          window.open(this.baseConfig.mainPage + command.url + params, '_blank')
+        }
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
     }
   }
 }
diff --git a/src/permission.js b/src/permission.js
index 69e8233..637373e 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -26,20 +26,13 @@
           // 设置当前子系统为基础资源子系统
           const currentSys = {
             code: 'baseResourse',
-            id: '1189107859077373285',
-            ismenu: '0',
-            levels: 1,
-            name: '智慧照明子系统',
-            num: 0,
-            parentId: '0',
-            resourceType: '02',
-            url: '/baseResourse'
+            name: '智慧照明子系统'
           }
           // 将当前系统信息保存在localStorage中
           store.commit('SET_SYSTEM', currentSys)
           // 远程访问获取权限列表（菜单&按钮）
           store.dispatch('GetMenus', currentSys).then(() => {
-            store.commit('SET_CHANGEFLAG', '0')
+            // store.commit('SET_CHANGEFLAG', '0')
             router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
             next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
           })
diff --git a/src/router/index.js b/src/router/index.js
index 32f93ef..b558038 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -49,21 +49,22 @@
   // 404错误页面
   { path: '/404', component: () => import('@/views/errorPage/404'), hidden: true },
   // 401 错误页面
-  { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
-  // 主页
-  {
-    path: '/',
-    component: Layout,
-    redirect: 'dashboard',
-    name: 'Dashboard',
-    // hidden: true,
-    children: [{
-      path: 'dashboard',
-      name: 'Dashboard',
-      component: () => import('@/views/dashboard/index'),
-      meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
-    }]
-  }
+  { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true }
+  // { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
+  // // 主页
+  // {
+  //   path: '/',
+  //   component: Layout,
+  //   redirect: 'dashboard',
+  //   name: 'Dashboard',
+  //   // hidden: true,
+  //   children: [{
+  //     path: 'dashboard',
+  //     name: 'Dashboard',
+  //     component: () => import('@/views/dashboard/index'),
+  //     meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
+  //   }]
+  // }
 ]
 // 实例化vue的时候直挂载constantRouter
 export default new Router({
diff --git a/src/views/alarmManage/alarmRule.vue b/src/views/alarmManage/alarmRule.vue
index 888a4d1..11469a2 100644
--- a/src/views/alarmManage/alarmRule.vue
+++ b/src/views/alarmManage/alarmRule.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
       <el-tab-pane label="路灯" name="lamp">
         <lamp-type-list ref="lamp"/>
@@ -8,7 +8,7 @@
         <lampbox-type-list ref="box"/>
       </el-tab-pane>
     </el-tabs>
-  </div>
+  </app-container>
 </template>
 
 <script>
diff --git a/src/views/alarmManage/components/alarmDetail.vue b/src/views/alarmManage/components/alarmDetail.vue
index 9c68377..d598779 100644
--- a/src/views/alarmManage/components/alarmDetail.vue
+++ b/src/views/alarmManage/components/alarmDetail.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :close-on-click-modal="false" :visible.sync="dialogFormVisible" title="报警详情" append-to-body>
-    <el-form ref="dataForm" :model="alarmForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :model="alarmForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="10">
           <el-form-item label="设备名称" prop="deviceName">
diff --git a/src/views/alarmManage/lampType/editLampType.vue b/src/views/alarmManage/lampType/editLampType.vue
index 8c3e37a..8e5fc23 100644
--- a/src/views/alarmManage/lampType/editLampType.vue
+++ b/src/views/alarmManage/lampType/editLampType.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="typeForm" label-well-code="right" label-width="200px">
+    <el-form ref="dataForm" :rules="rules" :model="typeForm" size="small" label-well-code="right" label-width="200px">
       <el-row :gutter="20">
         <el-col :span="20">
           <el-form-item label="路灯类型" prop="typeName">
diff --git a/src/views/alarmManage/lampType/lampTypeList.vue b/src/views/alarmManage/lampType/lampTypeList.vue
index f8547ed..f10c63b 100644
--- a/src/views/alarmManage/lampType/lampTypeList.vue
+++ b/src/views/alarmManage/lampType/lampTypeList.vue
@@ -8,12 +8,11 @@
           <el-row>
             <el-col :span="4">
               <el-form-item class="selectForm-container-item">
-                <el-input v-model.trim="listQuery.typeName" placeholder="类型名称" clearable />
+                <el-input v-model.trim="listQuery.typeName" size="small" placeholder="类型名称" clearable />
               </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-button class="filter-item" type="primary" icon="el-icon-search" size="small" style="margin-top: 2px" @click="search">搜索</el-button>
             </el-col>
           </el-row>
         </el-form>
@@ -28,7 +27,7 @@
           <el-button class="edit_btn" size="small" @click="add">新增</el-button>
         </el-col>
       </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
+      <el-table v-loading="listLoading" :data="list" class="table" size="small" border @selection-change="handleSelectionChange">
         <!--拥有删除权限则显示复选框-->
         <el-table-column v-if="hasPerm('/lampType/delete')" align="center" type="selection" width="55"/>
         <!--序号列-->
diff --git a/src/views/alarmManage/lampboxType/editLampboxType.vue b/src/views/alarmManage/lampboxType/editLampboxType.vue
index 1b94960..ae3a7c1 100644
--- a/src/views/alarmManage/lampboxType/editLampboxType.vue
+++ b/src/views/alarmManage/lampboxType/editLampboxType.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="typeForm" label-well-code="right" label-width="200px">
+    <el-form ref="dataForm" :rules="rules" :model="typeForm" size="small" label-well-code="right" label-width="200px">
       <el-row :gutter="20">
         <el-col :span="20">
           <el-form-item label="灯箱类型" prop="typeName">
diff --git a/src/views/alarmManage/lampboxType/lampboxTypeList.vue b/src/views/alarmManage/lampboxType/lampboxTypeList.vue
index 7b68f20..f33dcbf 100644
--- a/src/views/alarmManage/lampboxType/lampboxTypeList.vue
+++ b/src/views/alarmManage/lampboxType/lampboxTypeList.vue
@@ -8,7 +8,7 @@
           <el-row>
             <el-col :span="4">
               <el-form-item class="selectForm-container-item">
-                <el-input v-model.trim="listQuery.typeName" placeholder="类型名称" clearable />
+                <el-input v-model.trim="listQuery.typeName" size="small" placeholder="类型名称" clearable />
               </el-form-item>
             </el-col>
 
diff --git a/src/views/alarmManage/listAlarm.vue b/src/views/alarmManage/listAlarm.vue
index 7571a0e..fe3e359 100644
--- a/src/views/alarmManage/listAlarm.vue
+++ b/src/views/alarmManage/listAlarm.vue
@@ -1,73 +1,52 @@
 <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-form-item>
-              <el-input v-model.trim="listQuery.keyword" placeholder="设备编号/设备名称" clearable/>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmType" placeholder="报警类型" clearable>
-                <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmStatus" placeholder="报警状态" clearable>
-                <el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item" prop="startTime">
-              <el-date-picker
-                v-model="timeRange"
-                type="datetimerange"
-                range-separator="至"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                start-placeholder="报警开始时间"
-                end-placeholder="报警结束时间"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
-        <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>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="设备编号/设备名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmType" size="small" placeholder="报警类型" clearable>
+          <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmStatus" size="small" placeholder="报警状态" clearable>
+          <el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          size="small"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="报警开始时间"
+          end-placeholder="报警结束时间"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="130">
           <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
             <el-button type="text" size="small" @click="showDetail(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>
     <alarm-detail v-show="dialogFormVisible" ref="alarmdetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -123,7 +102,21 @@
       dialogFormVisible: false,
       alarmStatusList: [{ name: '正在报警', value: '1' }, { name: '已取消', value: '2' }], // 报警状态列表
       alarmTypeList: [],
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   watch: {
@@ -171,19 +164,15 @@
     },
     clearInput() {
       this.listQuery = {
-        name: '', // 姓名
-        sex: '', // 性别
-        nation: '', // 民族
-        collReason: '', // 采集原因
-        cardType: '', // 证件类型
-        idCardNo: '', // 证件号码
-        alarmReason: '', // 报警原因
-        startTime: '', // 开始时间
-        endTime: '', // 结束时间
+        keyword: '', // 设备编号/设备名称
+        alarmType: '', // 报警类型
+        alarmStatus: '', // 报警状态
+        startTime: '', // 报警开始时间
+        endTime: '', // 报警结束时间
         offset: 1,
         limit: 20,
-        sort: '',
-        order: ''
+        sort: 'alarmTime',
+        order: 'desc'
       }
       this.timeRange = []
       this.fetchData(false)
@@ -194,18 +183,13 @@
         this.alarmTypeList = response.data
       })
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }
diff --git a/src/views/alarmManage/listAlarmNow.vue b/src/views/alarmManage/listAlarmNow.vue
index c48b60a..d98b641 100644
--- a/src/views/alarmManage/listAlarmNow.vue
+++ b/src/views/alarmManage/listAlarmNow.vue
@@ -1,73 +1,47 @@
 <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-form-item>
-              <el-input v-model.trim="listQuery.keyword" placeholder="设备编号/设备名称" clearable/>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmType" placeholder="报警类型" clearable>
-                <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <!--<el-form-item>-->
-            <!--<el-select v-model="listQuery.alarmStatus" placeholder="报警状态" clearable>-->
-            <!--<el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>-->
-            <!--</el-select>-->
-            <!--</el-form-item>-->
-            <el-form-item class="selectForm-container-item" prop="startTime">
-              <el-date-picker
-                v-model="timeRange"
-                type="datetimerange"
-                range-separator="至"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                start-placeholder="报警开始时间"
-                end-placeholder="报警结束时间"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
-        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="设备编号/设备名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmType" size="small" placeholder="报警类型" clearable>
+          <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          size="small"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="报警开始时间"
+          end-placeholder="报警结束时间"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
-            <span>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" align="center" width="130">
-          <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
             <el-button type="text" size="small" @click="showDetail(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>
     <alarm-detail v-show="dialogFormVisible" ref="alarmdetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -123,7 +97,21 @@
       dialogFormVisible: false,
       alarmStatusList: [{ name: '正在报警', value: '1' }, { name: '已取消', value: '2' }], // 报警状态列表
       alarmTypeList: [],
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   watch: {
@@ -171,15 +159,11 @@
     },
     clearInput() {
       this.listQuery = {
-        name: '', // 姓名
-        sex: '', // 性别
-        nation: '', // 民族
-        collReason: '', // 采集原因
-        cardType: '', // 证件类型
-        idCardNo: '', // 证件号码
-        alarmReason: '', // 报警原因
-        startTime: '', // 开始时间
-        endTime: '', // 结束时间
+        keyword: '', // 设备编号/设备名称
+        alarmType: '', // 报警类型
+        alarmStatus: '1', // 报警状态
+        startTime: '', // 报警开始时间
+        endTime: '', // 报警结束时间
         offset: 1,
         limit: 20,
         sort: '',
@@ -194,18 +178,13 @@
         this.alarmTypeList = response.data
       })
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }
diff --git a/src/views/deviceManage/busCircuit.vue b/src/views/deviceManage/busCircuit.vue
index 2e1f872..7c9c804 100644
--- a/src/views/deviceManage/busCircuit.vue
+++ b/src/views/deviceManage/busCircuit.vue
@@ -1,77 +1,48 @@
 <!--回路列表-->
 <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-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.lampboxId" placeholder="所属灯箱" filterable clearable>
-                  <el-option v-for="item in boxList" :key="item.id" :label="item.lampboxName" :value="item.id"/>
-                </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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/circuit/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-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/circuit/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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.lampboxId" size="small" placeholder="所属灯箱" filterable clearable>
+          <el-option v-for="item in boxList" :key="item.id" :label="item.lampboxName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <!--<template slot="preColumns">-->
+      <!--<el-table-column align="center" type="selection" width="55"/>-->
+      <!--</template>-->
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <el-table-column label="操作" align="center" width="160">
-          <template slot-scope="scope">
-            <el-button v-if="hasPerm('/circuit/edit')" type="text" size="small" @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-circuit ref="editCircuit" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -128,7 +99,21 @@
       multipleSelection: [], // 多选选中项
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -253,17 +238,13 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/busController.vue b/src/views/deviceManage/busController.vue
index 49789c4..4646bf2 100644
--- a/src/views/deviceManage/busController.vue
+++ b/src/views/deviceManage/busController.vue
@@ -1,98 +1,67 @@
 <!--设备列表-->
 <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>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.controllerCode" size="small" placeholder="控制器编号" clearable />
+      </search-item>
+      <search-item/>
+      <search-item>
+        <el-select v-model="listQuery.controllerType" size="small" 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" size="small" placeholder="所属组织"/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" 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
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="selectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <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>
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <!--<template slot="preColumns">-->
+      <!--<el-table-column align="center" type="selection" width="55"/>-->
+      <!--</template>-->
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <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>
@@ -152,7 +121,21 @@
       statusList: [{ value: '1', name: '在线' }, { value: '0', name: '离线' }],
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -303,21 +286,17 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
-    handleSelectionChange(val) {
+    selectionChange(val) {
       this.multipleSelection = val
     }
   }
diff --git a/src/views/deviceManage/busGroup.vue b/src/views/deviceManage/busGroup.vue
index 9f85789..a35646b 100644
--- a/src/views/deviceManage/busGroup.vue
+++ b/src/views/deviceManage/busGroup.vue
@@ -1,80 +1,48 @@
 <!--灯箱列表-->
 <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.keyword" placeholder="分组名称" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.deviceType" placeholder="设备类型" clearable @change="fetchData">
-                  <el-option v-for="item in groupList" :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="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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/lampbox/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-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column 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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="分组名称" clearable />
+      </search-item>
+      <search-item/>
+      <search-item>
+        <el-select v-model="listQuery.deviceType" size="small" placeholder="设备类型" clearable @change="fetchData">
+          <el-option v-for="item in groupList" :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" size="small" placeholder="所属组织"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <el-table-column label="操作" align="center" width="160">
-          <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>-->
-            <el-button type="text" size="small" @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-Group ref="editGroup" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -132,7 +100,21 @@
       multipleSelection: [], // 多选选中项
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -249,17 +231,13 @@
         this.listLoading = false
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/busLamp.vue b/src/views/deviceManage/busLamp.vue
index 3450479..c480b30 100644
--- a/src/views/deviceManage/busLamp.vue
+++ b/src/views/deviceManage/busLamp.vue
@@ -1,104 +1,68 @@
 <!--路灯列表-->
 <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.keyword" placeholder="关键词" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.lampType" placeholder="路灯类型" clearable>
-                  <el-option v-for="item in typeList" :key="item.id" :label="item.typeName" :value="item.id"/>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </el-select>
-              </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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/lamp/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>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/lamp/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>
-        <!--操作列-->
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="关键词" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.lampType" size="small" placeholder="路灯类型" clearable>
+          <el-option v-for="item in typeList" :key="item.id" :label="item.typeName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" 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
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <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>
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
             <el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>
-            <el-button v-if="hasPerm('/lamp/edit')" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
-
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
             <el-button v-if="hasPerm('/lamp/remoteOn')" type="text" size="small">开灯</el-button>
             <el-button v-if="hasPerm('/lamp/remoteOff')" type="text" size="small">关灯</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-Lamp ref="editLamp" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -175,7 +139,21 @@
       statusList: [{ value: '1', name: '开灯' }, { value: '2', name: '关灯' }, { value: '3', name: '报警' }, { value: '4', name: '离线' }],
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -338,17 +316,13 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/busLampbox.vue b/src/views/deviceManage/busLampbox.vue
index 292c3a5..7763fac 100644
--- a/src/views/deviceManage/busLampbox.vue
+++ b/src/views/deviceManage/busLampbox.vue
@@ -1,46 +1,34 @@
 <!--灯箱列表-->
 <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.boxName" placeholder="灯箱名称" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/lampbox/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-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/lampbox/delete')" align="center" type="selection" width="55"/>
-        <!--序号列-->
-        <el-table-column :index="indexMethod" align="center" type="index" label="#" width="55"/>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.boxName" size="small" placeholder="灯箱名称" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
         <!--内容列-->
         <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">
@@ -55,30 +43,18 @@
             </div>
           </template>
         </el-table-column>
-        <!--操作列-->
+      </template>
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
             <el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>
-            <el-button v-if="hasPerm('/lampbox/edit')" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
+            <el-button type="text" size="small" @click.stop="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-Lampbox ref="editLampbox" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -144,7 +120,21 @@
       multipleSelection: [], // 多选选中项
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -277,6 +267,15 @@
       this.listQuery.limit = val
       this.fetchData()
     },
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
+    },
     // 改变当前页
     handleCurrentChange(val) {
       this.listQuery.offset = val
diff --git a/src/views/deviceManage/busLamppost.vue b/src/views/deviceManage/busLamppost.vue
index 92833a0..c193813 100644
--- a/src/views/deviceManage/busLamppost.vue
+++ b/src/views/deviceManage/busLamppost.vue
@@ -1,100 +1,65 @@
 <!--灯杆列表-->
 <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.keyword" placeholder="关键词" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.lamppostType" placeholder="路灯杆类型" clearable>
-                  <el-option v-for="item in typeList" :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">
-                <el-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </el-select>
-              </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('/lamppost/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>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/lamppost/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>
-        <!--操作列-->
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="关键词" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.lamppostType" size="small" placeholder="路灯杆类型" clearable>
+          <el-option v-for="item in typeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" 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
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <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>
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
-            <el-button v-if="hasPerm('/lamppost/edit')" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
+            <el-button type="text" size="small" @click.stop="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-Lamppost ref="editLamppost" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -161,7 +126,21 @@
       statusList: [{ value: '1', name: '开灯' }, { value: '2', name: '关灯' }, { value: '3', name: '报警' }, { value: '4', name: '离线' }],
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -320,17 +299,13 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/editCircuit.vue b/src/views/deviceManage/editCircuit.vue
index 9e9dd03..a362483 100644
--- a/src/views/deviceManage/editCircuit.vue
+++ b/src/views/deviceManage/editCircuit.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="cirForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="cirForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="回路编号" prop="circuitCode">
diff --git a/src/views/deviceManage/editController.vue b/src/views/deviceManage/editController.vue
index 7bc786f..444c835 100644
--- a/src/views/deviceManage/editController.vue
+++ b/src/views/deviceManage/editController.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="controllerForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="controllerForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="控制器编号" prop="controllerCode">
diff --git a/src/views/deviceManage/editGroup.vue b/src/views/deviceManage/editGroup.vue
index de9b88b..403d605 100644
--- a/src/views/deviceManage/editGroup.vue
+++ b/src/views/deviceManage/editGroup.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="groupForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="groupForm" size="small" label-well-code="right" label-width="110px">
       <el-row :span="24">
         <el-form-item label="分组名称" prop="groupName">
           <el-input v-model.trim="groupForm.groupName" :readonly="!isEditMode" clearable type="text" />
diff --git a/src/views/deviceManage/editLamp.vue b/src/views/deviceManage/editLamp.vue
index 3d45138..faf37d5 100644
--- a/src/views/deviceManage/editLamp.vue
+++ b/src/views/deviceManage/editLamp.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="lampForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="lampForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="路灯编号" prop="lampCode">
diff --git a/src/views/deviceManage/editLampbox.vue b/src/views/deviceManage/editLampbox.vue
index bd3a537..a4a8ea7 100644
--- a/src/views/deviceManage/editLampbox.vue
+++ b/src/views/deviceManage/editLampbox.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="boxForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="boxForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="灯箱编号" prop="lampboxCode">

diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 5077bef..3fd3f33 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -58,6 +58,8 @@
       <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns"/>
+        <!--复选框列-->
+        <el-table-column v-if="options && options.needMultSelect" align="center" type="selection" width="55"/>
         <!--序号列-->
         <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
         <!--内容列, 若columns存在且长度大于0-->
@@ -140,7 +142,8 @@
       type: Object,
       default: function() {
         return {
-          needIndex: true // 是否需要序号列
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
         }
       }
     }, // 配置项
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
index 1175911..b5e8442 100644
--- a/src/components/SearchArea/SearchArea.vue
+++ b/src/components/SearchArea/SearchArea.vue
@@ -16,6 +16,7 @@
       <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
       <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
       <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns-seperate"/>
     </div>
     <!-- 弹出框式高级检索 -->
     <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
index 84bdb9f..c192d79 100644
--- a/src/layout/components/AppHeader.vue
+++ b/src/layout/components/AppHeader.vue
@@ -1,6 +1,14 @@
 <template>
   <el-header class="app-header">
     <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown v-if="showChangeSys" class="systemSelect" size="medium" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
     <el-dropdown class="dropdown-container" trigger="click">
       <div class="dropdown-wrapper">
         <span style="line-height:50px;">欢迎您，{{ name }}</span>
@@ -33,6 +41,7 @@
   data() {
     return {
       title: this.baseConfig.title, // 标题
+      showChangeSys: !this.baseConfig.singleSys, // 是否显示切换系统菜单
       name: this.$store.getters.name, // 用户姓名
       showSetPwd: false // 是否显示修改密码按钮
     }
@@ -40,7 +49,9 @@
   computed: {
     ...mapGetters([
       'sidebar',
-      'avatar'
+      'avatar',
+      'currentSystem',
+      'systems'
     ])
   },
   methods: {
@@ -55,6 +66,38 @@
     resetPwd() {
       this.showSetPwd = true
       this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      const url = this.baseConfig.mainPage
+      window.location.href = url
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      const params1 = `?token=${this.$store.getters.token}`
+      const params = `?sys=${command.name}&url=${command.url}&code=${command.code}&token=${this.$store.getters.token}`
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params1
+        } else {
+          window.open(command.url + params1, '_blank')
+        }
+      } else {
+        // 取token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = this.baseConfig.mainPage + command.url + params
+        } else {
+          window.open(this.baseConfig.mainPage + command.url + params, '_blank')
+        }
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
     }
   }
 }
diff --git a/src/permission.js b/src/permission.js
index 69e8233..637373e 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -26,20 +26,13 @@
           // 设置当前子系统为基础资源子系统
           const currentSys = {
             code: 'baseResourse',
-            id: '1189107859077373285',
-            ismenu: '0',
-            levels: 1,
-            name: '智慧照明子系统',
-            num: 0,
-            parentId: '0',
-            resourceType: '02',
-            url: '/baseResourse'
+            name: '智慧照明子系统'
           }
           // 将当前系统信息保存在localStorage中
           store.commit('SET_SYSTEM', currentSys)
           // 远程访问获取权限列表（菜单&按钮）
           store.dispatch('GetMenus', currentSys).then(() => {
-            store.commit('SET_CHANGEFLAG', '0')
+            // store.commit('SET_CHANGEFLAG', '0')
             router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
             next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
           })
diff --git a/src/router/index.js b/src/router/index.js
index 32f93ef..b558038 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -49,21 +49,22 @@
   // 404错误页面
   { path: '/404', component: () => import('@/views/errorPage/404'), hidden: true },
   // 401 错误页面
-  { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
-  // 主页
-  {
-    path: '/',
-    component: Layout,
-    redirect: 'dashboard',
-    name: 'Dashboard',
-    // hidden: true,
-    children: [{
-      path: 'dashboard',
-      name: 'Dashboard',
-      component: () => import('@/views/dashboard/index'),
-      meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
-    }]
-  }
+  { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true }
+  // { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
+  // // 主页
+  // {
+  //   path: '/',
+  //   component: Layout,
+  //   redirect: 'dashboard',
+  //   name: 'Dashboard',
+  //   // hidden: true,
+  //   children: [{
+  //     path: 'dashboard',
+  //     name: 'Dashboard',
+  //     component: () => import('@/views/dashboard/index'),
+  //     meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
+  //   }]
+  // }
 ]
 // 实例化vue的时候直挂载constantRouter
 export default new Router({
diff --git a/src/views/alarmManage/alarmRule.vue b/src/views/alarmManage/alarmRule.vue
index 888a4d1..11469a2 100644
--- a/src/views/alarmManage/alarmRule.vue
+++ b/src/views/alarmManage/alarmRule.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
       <el-tab-pane label="路灯" name="lamp">
         <lamp-type-list ref="lamp"/>
@@ -8,7 +8,7 @@
         <lampbox-type-list ref="box"/>
       </el-tab-pane>
     </el-tabs>
-  </div>
+  </app-container>
 </template>
 
 <script>
diff --git a/src/views/alarmManage/components/alarmDetail.vue b/src/views/alarmManage/components/alarmDetail.vue
index 9c68377..d598779 100644
--- a/src/views/alarmManage/components/alarmDetail.vue
+++ b/src/views/alarmManage/components/alarmDetail.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :close-on-click-modal="false" :visible.sync="dialogFormVisible" title="报警详情" append-to-body>
-    <el-form ref="dataForm" :model="alarmForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :model="alarmForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="10">
           <el-form-item label="设备名称" prop="deviceName">
diff --git a/src/views/alarmManage/lampType/editLampType.vue b/src/views/alarmManage/lampType/editLampType.vue
index 8c3e37a..8e5fc23 100644
--- a/src/views/alarmManage/lampType/editLampType.vue
+++ b/src/views/alarmManage/lampType/editLampType.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="typeForm" label-well-code="right" label-width="200px">
+    <el-form ref="dataForm" :rules="rules" :model="typeForm" size="small" label-well-code="right" label-width="200px">
       <el-row :gutter="20">
         <el-col :span="20">
           <el-form-item label="路灯类型" prop="typeName">
diff --git a/src/views/alarmManage/lampType/lampTypeList.vue b/src/views/alarmManage/lampType/lampTypeList.vue
index f8547ed..f10c63b 100644
--- a/src/views/alarmManage/lampType/lampTypeList.vue
+++ b/src/views/alarmManage/lampType/lampTypeList.vue
@@ -8,12 +8,11 @@
           <el-row>
             <el-col :span="4">
               <el-form-item class="selectForm-container-item">
-                <el-input v-model.trim="listQuery.typeName" placeholder="类型名称" clearable />
+                <el-input v-model.trim="listQuery.typeName" size="small" placeholder="类型名称" clearable />
               </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-button class="filter-item" type="primary" icon="el-icon-search" size="small" style="margin-top: 2px" @click="search">搜索</el-button>
             </el-col>
           </el-row>
         </el-form>
@@ -28,7 +27,7 @@
           <el-button class="edit_btn" size="small" @click="add">新增</el-button>
         </el-col>
       </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
+      <el-table v-loading="listLoading" :data="list" class="table" size="small" border @selection-change="handleSelectionChange">
         <!--拥有删除权限则显示复选框-->
         <el-table-column v-if="hasPerm('/lampType/delete')" align="center" type="selection" width="55"/>
         <!--序号列-->
diff --git a/src/views/alarmManage/lampboxType/editLampboxType.vue b/src/views/alarmManage/lampboxType/editLampboxType.vue
index 1b94960..ae3a7c1 100644
--- a/src/views/alarmManage/lampboxType/editLampboxType.vue
+++ b/src/views/alarmManage/lampboxType/editLampboxType.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="typeForm" label-well-code="right" label-width="200px">
+    <el-form ref="dataForm" :rules="rules" :model="typeForm" size="small" label-well-code="right" label-width="200px">
       <el-row :gutter="20">
         <el-col :span="20">
           <el-form-item label="灯箱类型" prop="typeName">
diff --git a/src/views/alarmManage/lampboxType/lampboxTypeList.vue b/src/views/alarmManage/lampboxType/lampboxTypeList.vue
index 7b68f20..f33dcbf 100644
--- a/src/views/alarmManage/lampboxType/lampboxTypeList.vue
+++ b/src/views/alarmManage/lampboxType/lampboxTypeList.vue
@@ -8,7 +8,7 @@
           <el-row>
             <el-col :span="4">
               <el-form-item class="selectForm-container-item">
-                <el-input v-model.trim="listQuery.typeName" placeholder="类型名称" clearable />
+                <el-input v-model.trim="listQuery.typeName" size="small" placeholder="类型名称" clearable />
               </el-form-item>
             </el-col>
 
diff --git a/src/views/alarmManage/listAlarm.vue b/src/views/alarmManage/listAlarm.vue
index 7571a0e..fe3e359 100644
--- a/src/views/alarmManage/listAlarm.vue
+++ b/src/views/alarmManage/listAlarm.vue
@@ -1,73 +1,52 @@
 <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-form-item>
-              <el-input v-model.trim="listQuery.keyword" placeholder="设备编号/设备名称" clearable/>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmType" placeholder="报警类型" clearable>
-                <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmStatus" placeholder="报警状态" clearable>
-                <el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item" prop="startTime">
-              <el-date-picker
-                v-model="timeRange"
-                type="datetimerange"
-                range-separator="至"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                start-placeholder="报警开始时间"
-                end-placeholder="报警结束时间"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
-        <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>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="设备编号/设备名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmType" size="small" placeholder="报警类型" clearable>
+          <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmStatus" size="small" placeholder="报警状态" clearable>
+          <el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          size="small"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="报警开始时间"
+          end-placeholder="报警结束时间"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="130">
           <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
             <el-button type="text" size="small" @click="showDetail(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>
     <alarm-detail v-show="dialogFormVisible" ref="alarmdetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -123,7 +102,21 @@
       dialogFormVisible: false,
       alarmStatusList: [{ name: '正在报警', value: '1' }, { name: '已取消', value: '2' }], // 报警状态列表
       alarmTypeList: [],
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   watch: {
@@ -171,19 +164,15 @@
     },
     clearInput() {
       this.listQuery = {
-        name: '', // 姓名
-        sex: '', // 性别
-        nation: '', // 民族
-        collReason: '', // 采集原因
-        cardType: '', // 证件类型
-        idCardNo: '', // 证件号码
-        alarmReason: '', // 报警原因
-        startTime: '', // 开始时间
-        endTime: '', // 结束时间
+        keyword: '', // 设备编号/设备名称
+        alarmType: '', // 报警类型
+        alarmStatus: '', // 报警状态
+        startTime: '', // 报警开始时间
+        endTime: '', // 报警结束时间
         offset: 1,
         limit: 20,
-        sort: '',
-        order: ''
+        sort: 'alarmTime',
+        order: 'desc'
       }
       this.timeRange = []
       this.fetchData(false)
@@ -194,18 +183,13 @@
         this.alarmTypeList = response.data
       })
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }
diff --git a/src/views/alarmManage/listAlarmNow.vue b/src/views/alarmManage/listAlarmNow.vue
index c48b60a..d98b641 100644
--- a/src/views/alarmManage/listAlarmNow.vue
+++ b/src/views/alarmManage/listAlarmNow.vue
@@ -1,73 +1,47 @@
 <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-form-item>
-              <el-input v-model.trim="listQuery.keyword" placeholder="设备编号/设备名称" clearable/>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmType" placeholder="报警类型" clearable>
-                <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <!--<el-form-item>-->
-            <!--<el-select v-model="listQuery.alarmStatus" placeholder="报警状态" clearable>-->
-            <!--<el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>-->
-            <!--</el-select>-->
-            <!--</el-form-item>-->
-            <el-form-item class="selectForm-container-item" prop="startTime">
-              <el-date-picker
-                v-model="timeRange"
-                type="datetimerange"
-                range-separator="至"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                start-placeholder="报警开始时间"
-                end-placeholder="报警结束时间"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
-        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="设备编号/设备名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmType" size="small" placeholder="报警类型" clearable>
+          <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          size="small"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="报警开始时间"
+          end-placeholder="报警结束时间"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
-            <span>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" align="center" width="130">
-          <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
             <el-button type="text" size="small" @click="showDetail(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>
     <alarm-detail v-show="dialogFormVisible" ref="alarmdetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -123,7 +97,21 @@
       dialogFormVisible: false,
       alarmStatusList: [{ name: '正在报警', value: '1' }, { name: '已取消', value: '2' }], // 报警状态列表
       alarmTypeList: [],
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   watch: {
@@ -171,15 +159,11 @@
     },
     clearInput() {
       this.listQuery = {
-        name: '', // 姓名
-        sex: '', // 性别
-        nation: '', // 民族
-        collReason: '', // 采集原因
-        cardType: '', // 证件类型
-        idCardNo: '', // 证件号码
-        alarmReason: '', // 报警原因
-        startTime: '', // 开始时间
-        endTime: '', // 结束时间
+        keyword: '', // 设备编号/设备名称
+        alarmType: '', // 报警类型
+        alarmStatus: '1', // 报警状态
+        startTime: '', // 报警开始时间
+        endTime: '', // 报警结束时间
         offset: 1,
         limit: 20,
         sort: '',
@@ -194,18 +178,13 @@
         this.alarmTypeList = response.data
       })
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }
diff --git a/src/views/deviceManage/busCircuit.vue b/src/views/deviceManage/busCircuit.vue
index 2e1f872..7c9c804 100644
--- a/src/views/deviceManage/busCircuit.vue
+++ b/src/views/deviceManage/busCircuit.vue
@@ -1,77 +1,48 @@
 <!--回路列表-->
 <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-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.lampboxId" placeholder="所属灯箱" filterable clearable>
-                  <el-option v-for="item in boxList" :key="item.id" :label="item.lampboxName" :value="item.id"/>
-                </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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/circuit/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-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/circuit/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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.lampboxId" size="small" placeholder="所属灯箱" filterable clearable>
+          <el-option v-for="item in boxList" :key="item.id" :label="item.lampboxName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <!--<template slot="preColumns">-->
+      <!--<el-table-column align="center" type="selection" width="55"/>-->
+      <!--</template>-->
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <el-table-column label="操作" align="center" width="160">
-          <template slot-scope="scope">
-            <el-button v-if="hasPerm('/circuit/edit')" type="text" size="small" @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-circuit ref="editCircuit" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -128,7 +99,21 @@
       multipleSelection: [], // 多选选中项
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -253,17 +238,13 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/busController.vue b/src/views/deviceManage/busController.vue
index 49789c4..4646bf2 100644
--- a/src/views/deviceManage/busController.vue
+++ b/src/views/deviceManage/busController.vue
@@ -1,98 +1,67 @@
 <!--设备列表-->
 <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>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.controllerCode" size="small" placeholder="控制器编号" clearable />
+      </search-item>
+      <search-item/>
+      <search-item>
+        <el-select v-model="listQuery.controllerType" size="small" 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" size="small" placeholder="所属组织"/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" 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
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="selectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <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>
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <!--<template slot="preColumns">-->
+      <!--<el-table-column align="center" type="selection" width="55"/>-->
+      <!--</template>-->
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <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>
@@ -152,7 +121,21 @@
       statusList: [{ value: '1', name: '在线' }, { value: '0', name: '离线' }],
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -303,21 +286,17 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
-    handleSelectionChange(val) {
+    selectionChange(val) {
       this.multipleSelection = val
     }
   }
diff --git a/src/views/deviceManage/busGroup.vue b/src/views/deviceManage/busGroup.vue
index 9f85789..a35646b 100644
--- a/src/views/deviceManage/busGroup.vue
+++ b/src/views/deviceManage/busGroup.vue
@@ -1,80 +1,48 @@
 <!--灯箱列表-->
 <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.keyword" placeholder="分组名称" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.deviceType" placeholder="设备类型" clearable @change="fetchData">
-                  <el-option v-for="item in groupList" :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="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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/lampbox/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-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column 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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="分组名称" clearable />
+      </search-item>
+      <search-item/>
+      <search-item>
+        <el-select v-model="listQuery.deviceType" size="small" placeholder="设备类型" clearable @change="fetchData">
+          <el-option v-for="item in groupList" :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" size="small" placeholder="所属组织"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <el-table-column label="操作" align="center" width="160">
-          <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>-->
-            <el-button type="text" size="small" @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-Group ref="editGroup" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -132,7 +100,21 @@
       multipleSelection: [], // 多选选中项
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -249,17 +231,13 @@
         this.listLoading = false
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/busLamp.vue b/src/views/deviceManage/busLamp.vue
index 3450479..c480b30 100644
--- a/src/views/deviceManage/busLamp.vue
+++ b/src/views/deviceManage/busLamp.vue
@@ -1,104 +1,68 @@
 <!--路灯列表-->
 <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.keyword" placeholder="关键词" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.lampType" placeholder="路灯类型" clearable>
-                  <el-option v-for="item in typeList" :key="item.id" :label="item.typeName" :value="item.id"/>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </el-select>
-              </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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/lamp/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>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/lamp/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>
-        <!--操作列-->
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="关键词" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.lampType" size="small" placeholder="路灯类型" clearable>
+          <el-option v-for="item in typeList" :key="item.id" :label="item.typeName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" 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
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <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>
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
             <el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>
-            <el-button v-if="hasPerm('/lamp/edit')" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
-
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
             <el-button v-if="hasPerm('/lamp/remoteOn')" type="text" size="small">开灯</el-button>
             <el-button v-if="hasPerm('/lamp/remoteOff')" type="text" size="small">关灯</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-Lamp ref="editLamp" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -175,7 +139,21 @@
       statusList: [{ value: '1', name: '开灯' }, { value: '2', name: '关灯' }, { value: '3', name: '报警' }, { value: '4', name: '离线' }],
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -338,17 +316,13 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/busLampbox.vue b/src/views/deviceManage/busLampbox.vue
index 292c3a5..7763fac 100644
--- a/src/views/deviceManage/busLampbox.vue
+++ b/src/views/deviceManage/busLampbox.vue
@@ -1,46 +1,34 @@
 <!--灯箱列表-->
 <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.boxName" placeholder="灯箱名称" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/lampbox/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-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/lampbox/delete')" align="center" type="selection" width="55"/>
-        <!--序号列-->
-        <el-table-column :index="indexMethod" align="center" type="index" label="#" width="55"/>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.boxName" size="small" placeholder="灯箱名称" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
         <!--内容列-->
         <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">
@@ -55,30 +43,18 @@
             </div>
           </template>
         </el-table-column>
-        <!--操作列-->
+      </template>
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
             <el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>
-            <el-button v-if="hasPerm('/lampbox/edit')" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
+            <el-button type="text" size="small" @click.stop="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-Lampbox ref="editLampbox" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -144,7 +120,21 @@
       multipleSelection: [], // 多选选中项
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -277,6 +267,15 @@
       this.listQuery.limit = val
       this.fetchData()
     },
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
+    },
     // 改变当前页
     handleCurrentChange(val) {
       this.listQuery.offset = val
diff --git a/src/views/deviceManage/busLamppost.vue b/src/views/deviceManage/busLamppost.vue
index 92833a0..c193813 100644
--- a/src/views/deviceManage/busLamppost.vue
+++ b/src/views/deviceManage/busLamppost.vue
@@ -1,100 +1,65 @@
 <!--灯杆列表-->
 <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.keyword" placeholder="关键词" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.lamppostType" placeholder="路灯杆类型" clearable>
-                  <el-option v-for="item in typeList" :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">
-                <el-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </el-select>
-              </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('/lamppost/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>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/lamppost/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>
-        <!--操作列-->
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="关键词" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.lamppostType" size="small" placeholder="路灯杆类型" clearable>
+          <el-option v-for="item in typeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" 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
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <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>
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
-            <el-button v-if="hasPerm('/lamppost/edit')" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
+            <el-button type="text" size="small" @click.stop="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-Lamppost ref="editLamppost" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -161,7 +126,21 @@
       statusList: [{ value: '1', name: '开灯' }, { value: '2', name: '关灯' }, { value: '3', name: '报警' }, { value: '4', name: '离线' }],
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -320,17 +299,13 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/editCircuit.vue b/src/views/deviceManage/editCircuit.vue
index 9e9dd03..a362483 100644
--- a/src/views/deviceManage/editCircuit.vue
+++ b/src/views/deviceManage/editCircuit.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="cirForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="cirForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="回路编号" prop="circuitCode">
diff --git a/src/views/deviceManage/editController.vue b/src/views/deviceManage/editController.vue
index 7bc786f..444c835 100644
--- a/src/views/deviceManage/editController.vue
+++ b/src/views/deviceManage/editController.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="controllerForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="controllerForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="控制器编号" prop="controllerCode">
diff --git a/src/views/deviceManage/editGroup.vue b/src/views/deviceManage/editGroup.vue
index de9b88b..403d605 100644
--- a/src/views/deviceManage/editGroup.vue
+++ b/src/views/deviceManage/editGroup.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="groupForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="groupForm" size="small" label-well-code="right" label-width="110px">
       <el-row :span="24">
         <el-form-item label="分组名称" prop="groupName">
           <el-input v-model.trim="groupForm.groupName" :readonly="!isEditMode" clearable type="text" />
diff --git a/src/views/deviceManage/editLamp.vue b/src/views/deviceManage/editLamp.vue
index 3d45138..faf37d5 100644
--- a/src/views/deviceManage/editLamp.vue
+++ b/src/views/deviceManage/editLamp.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="lampForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="lampForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="路灯编号" prop="lampCode">
diff --git a/src/views/deviceManage/editLampbox.vue b/src/views/deviceManage/editLampbox.vue
index bd3a537..a4a8ea7 100644
--- a/src/views/deviceManage/editLampbox.vue
+++ b/src/views/deviceManage/editLampbox.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="boxForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="boxForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="灯箱编号" prop="lampboxCode">
diff --git a/src/views/deviceManage/editLamppost.vue b/src/views/deviceManage/editLamppost.vue
index 67a3a6f..a384319 100644
--- a/src/views/deviceManage/editLamppost.vue
+++ b/src/views/deviceManage/editLamppost.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="postForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="postForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="路灯杆编号" prop="lamppostCode">

diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 5077bef..3fd3f33 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -58,6 +58,8 @@
       <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns"/>
+        <!--复选框列-->
+        <el-table-column v-if="options && options.needMultSelect" align="center" type="selection" width="55"/>
         <!--序号列-->
         <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
         <!--内容列, 若columns存在且长度大于0-->
@@ -140,7 +142,8 @@
       type: Object,
       default: function() {
         return {
-          needIndex: true // 是否需要序号列
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
         }
       }
     }, // 配置项
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
index 1175911..b5e8442 100644
--- a/src/components/SearchArea/SearchArea.vue
+++ b/src/components/SearchArea/SearchArea.vue
@@ -16,6 +16,7 @@
       <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
       <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
       <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns-seperate"/>
     </div>
     <!-- 弹出框式高级检索 -->
     <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
index 84bdb9f..c192d79 100644
--- a/src/layout/components/AppHeader.vue
+++ b/src/layout/components/AppHeader.vue
@@ -1,6 +1,14 @@
 <template>
   <el-header class="app-header">
     <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown v-if="showChangeSys" class="systemSelect" size="medium" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
     <el-dropdown class="dropdown-container" trigger="click">
       <div class="dropdown-wrapper">
         <span style="line-height:50px;">欢迎您，{{ name }}</span>
@@ -33,6 +41,7 @@
   data() {
     return {
       title: this.baseConfig.title, // 标题
+      showChangeSys: !this.baseConfig.singleSys, // 是否显示切换系统菜单
       name: this.$store.getters.name, // 用户姓名
       showSetPwd: false // 是否显示修改密码按钮
     }
@@ -40,7 +49,9 @@
   computed: {
     ...mapGetters([
       'sidebar',
-      'avatar'
+      'avatar',
+      'currentSystem',
+      'systems'
     ])
   },
   methods: {
@@ -55,6 +66,38 @@
     resetPwd() {
       this.showSetPwd = true
       this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      const url = this.baseConfig.mainPage
+      window.location.href = url
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      const params1 = `?token=${this.$store.getters.token}`
+      const params = `?sys=${command.name}&url=${command.url}&code=${command.code}&token=${this.$store.getters.token}`
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params1
+        } else {
+          window.open(command.url + params1, '_blank')
+        }
+      } else {
+        // 取token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = this.baseConfig.mainPage + command.url + params
+        } else {
+          window.open(this.baseConfig.mainPage + command.url + params, '_blank')
+        }
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
     }
   }
 }
diff --git a/src/permission.js b/src/permission.js
index 69e8233..637373e 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -26,20 +26,13 @@
           // 设置当前子系统为基础资源子系统
           const currentSys = {
             code: 'baseResourse',
-            id: '1189107859077373285',
-            ismenu: '0',
-            levels: 1,
-            name: '智慧照明子系统',
-            num: 0,
-            parentId: '0',
-            resourceType: '02',
-            url: '/baseResourse'
+            name: '智慧照明子系统'
           }
           // 将当前系统信息保存在localStorage中
           store.commit('SET_SYSTEM', currentSys)
           // 远程访问获取权限列表（菜单&按钮）
           store.dispatch('GetMenus', currentSys).then(() => {
-            store.commit('SET_CHANGEFLAG', '0')
+            // store.commit('SET_CHANGEFLAG', '0')
             router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
             next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
           })
diff --git a/src/router/index.js b/src/router/index.js
index 32f93ef..b558038 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -49,21 +49,22 @@
   // 404错误页面
   { path: '/404', component: () => import('@/views/errorPage/404'), hidden: true },
   // 401 错误页面
-  { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
-  // 主页
-  {
-    path: '/',
-    component: Layout,
-    redirect: 'dashboard',
-    name: 'Dashboard',
-    // hidden: true,
-    children: [{
-      path: 'dashboard',
-      name: 'Dashboard',
-      component: () => import('@/views/dashboard/index'),
-      meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
-    }]
-  }
+  { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true }
+  // { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
+  // // 主页
+  // {
+  //   path: '/',
+  //   component: Layout,
+  //   redirect: 'dashboard',
+  //   name: 'Dashboard',
+  //   // hidden: true,
+  //   children: [{
+  //     path: 'dashboard',
+  //     name: 'Dashboard',
+  //     component: () => import('@/views/dashboard/index'),
+  //     meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
+  //   }]
+  // }
 ]
 // 实例化vue的时候直挂载constantRouter
 export default new Router({
diff --git a/src/views/alarmManage/alarmRule.vue b/src/views/alarmManage/alarmRule.vue
index 888a4d1..11469a2 100644
--- a/src/views/alarmManage/alarmRule.vue
+++ b/src/views/alarmManage/alarmRule.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
       <el-tab-pane label="路灯" name="lamp">
         <lamp-type-list ref="lamp"/>
@@ -8,7 +8,7 @@
         <lampbox-type-list ref="box"/>
       </el-tab-pane>
     </el-tabs>
-  </div>
+  </app-container>
 </template>
 
 <script>
diff --git a/src/views/alarmManage/components/alarmDetail.vue b/src/views/alarmManage/components/alarmDetail.vue
index 9c68377..d598779 100644
--- a/src/views/alarmManage/components/alarmDetail.vue
+++ b/src/views/alarmManage/components/alarmDetail.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :close-on-click-modal="false" :visible.sync="dialogFormVisible" title="报警详情" append-to-body>
-    <el-form ref="dataForm" :model="alarmForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :model="alarmForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="10">
           <el-form-item label="设备名称" prop="deviceName">
diff --git a/src/views/alarmManage/lampType/editLampType.vue b/src/views/alarmManage/lampType/editLampType.vue
index 8c3e37a..8e5fc23 100644
--- a/src/views/alarmManage/lampType/editLampType.vue
+++ b/src/views/alarmManage/lampType/editLampType.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="typeForm" label-well-code="right" label-width="200px">
+    <el-form ref="dataForm" :rules="rules" :model="typeForm" size="small" label-well-code="right" label-width="200px">
       <el-row :gutter="20">
         <el-col :span="20">
           <el-form-item label="路灯类型" prop="typeName">
diff --git a/src/views/alarmManage/lampType/lampTypeList.vue b/src/views/alarmManage/lampType/lampTypeList.vue
index f8547ed..f10c63b 100644
--- a/src/views/alarmManage/lampType/lampTypeList.vue
+++ b/src/views/alarmManage/lampType/lampTypeList.vue
@@ -8,12 +8,11 @@
           <el-row>
             <el-col :span="4">
               <el-form-item class="selectForm-container-item">
-                <el-input v-model.trim="listQuery.typeName" placeholder="类型名称" clearable />
+                <el-input v-model.trim="listQuery.typeName" size="small" placeholder="类型名称" clearable />
               </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-button class="filter-item" type="primary" icon="el-icon-search" size="small" style="margin-top: 2px" @click="search">搜索</el-button>
             </el-col>
           </el-row>
         </el-form>
@@ -28,7 +27,7 @@
           <el-button class="edit_btn" size="small" @click="add">新增</el-button>
         </el-col>
       </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
+      <el-table v-loading="listLoading" :data="list" class="table" size="small" border @selection-change="handleSelectionChange">
         <!--拥有删除权限则显示复选框-->
         <el-table-column v-if="hasPerm('/lampType/delete')" align="center" type="selection" width="55"/>
         <!--序号列-->
diff --git a/src/views/alarmManage/lampboxType/editLampboxType.vue b/src/views/alarmManage/lampboxType/editLampboxType.vue
index 1b94960..ae3a7c1 100644
--- a/src/views/alarmManage/lampboxType/editLampboxType.vue
+++ b/src/views/alarmManage/lampboxType/editLampboxType.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="typeForm" label-well-code="right" label-width="200px">
+    <el-form ref="dataForm" :rules="rules" :model="typeForm" size="small" label-well-code="right" label-width="200px">
       <el-row :gutter="20">
         <el-col :span="20">
           <el-form-item label="灯箱类型" prop="typeName">
diff --git a/src/views/alarmManage/lampboxType/lampboxTypeList.vue b/src/views/alarmManage/lampboxType/lampboxTypeList.vue
index 7b68f20..f33dcbf 100644
--- a/src/views/alarmManage/lampboxType/lampboxTypeList.vue
+++ b/src/views/alarmManage/lampboxType/lampboxTypeList.vue
@@ -8,7 +8,7 @@
           <el-row>
             <el-col :span="4">
               <el-form-item class="selectForm-container-item">
-                <el-input v-model.trim="listQuery.typeName" placeholder="类型名称" clearable />
+                <el-input v-model.trim="listQuery.typeName" size="small" placeholder="类型名称" clearable />
               </el-form-item>
             </el-col>
 
diff --git a/src/views/alarmManage/listAlarm.vue b/src/views/alarmManage/listAlarm.vue
index 7571a0e..fe3e359 100644
--- a/src/views/alarmManage/listAlarm.vue
+++ b/src/views/alarmManage/listAlarm.vue
@@ -1,73 +1,52 @@
 <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-form-item>
-              <el-input v-model.trim="listQuery.keyword" placeholder="设备编号/设备名称" clearable/>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmType" placeholder="报警类型" clearable>
-                <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmStatus" placeholder="报警状态" clearable>
-                <el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item" prop="startTime">
-              <el-date-picker
-                v-model="timeRange"
-                type="datetimerange"
-                range-separator="至"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                start-placeholder="报警开始时间"
-                end-placeholder="报警结束时间"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
-        <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>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="设备编号/设备名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmType" size="small" placeholder="报警类型" clearable>
+          <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmStatus" size="small" placeholder="报警状态" clearable>
+          <el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          size="small"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="报警开始时间"
+          end-placeholder="报警结束时间"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="130">
           <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
             <el-button type="text" size="small" @click="showDetail(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>
     <alarm-detail v-show="dialogFormVisible" ref="alarmdetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -123,7 +102,21 @@
       dialogFormVisible: false,
       alarmStatusList: [{ name: '正在报警', value: '1' }, { name: '已取消', value: '2' }], // 报警状态列表
       alarmTypeList: [],
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   watch: {
@@ -171,19 +164,15 @@
     },
     clearInput() {
       this.listQuery = {
-        name: '', // 姓名
-        sex: '', // 性别
-        nation: '', // 民族
-        collReason: '', // 采集原因
-        cardType: '', // 证件类型
-        idCardNo: '', // 证件号码
-        alarmReason: '', // 报警原因
-        startTime: '', // 开始时间
-        endTime: '', // 结束时间
+        keyword: '', // 设备编号/设备名称
+        alarmType: '', // 报警类型
+        alarmStatus: '', // 报警状态
+        startTime: '', // 报警开始时间
+        endTime: '', // 报警结束时间
         offset: 1,
         limit: 20,
-        sort: '',
-        order: ''
+        sort: 'alarmTime',
+        order: 'desc'
       }
       this.timeRange = []
       this.fetchData(false)
@@ -194,18 +183,13 @@
         this.alarmTypeList = response.data
       })
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }
diff --git a/src/views/alarmManage/listAlarmNow.vue b/src/views/alarmManage/listAlarmNow.vue
index c48b60a..d98b641 100644
--- a/src/views/alarmManage/listAlarmNow.vue
+++ b/src/views/alarmManage/listAlarmNow.vue
@@ -1,73 +1,47 @@
 <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-form-item>
-              <el-input v-model.trim="listQuery.keyword" placeholder="设备编号/设备名称" clearable/>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmType" placeholder="报警类型" clearable>
-                <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <!--<el-form-item>-->
-            <!--<el-select v-model="listQuery.alarmStatus" placeholder="报警状态" clearable>-->
-            <!--<el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>-->
-            <!--</el-select>-->
-            <!--</el-form-item>-->
-            <el-form-item class="selectForm-container-item" prop="startTime">
-              <el-date-picker
-                v-model="timeRange"
-                type="datetimerange"
-                range-separator="至"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                start-placeholder="报警开始时间"
-                end-placeholder="报警结束时间"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
-        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="设备编号/设备名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmType" size="small" placeholder="报警类型" clearable>
+          <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          size="small"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="报警开始时间"
+          end-placeholder="报警结束时间"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
-            <span>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" align="center" width="130">
-          <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
             <el-button type="text" size="small" @click="showDetail(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>
     <alarm-detail v-show="dialogFormVisible" ref="alarmdetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -123,7 +97,21 @@
       dialogFormVisible: false,
       alarmStatusList: [{ name: '正在报警', value: '1' }, { name: '已取消', value: '2' }], // 报警状态列表
       alarmTypeList: [],
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   watch: {
@@ -171,15 +159,11 @@
     },
     clearInput() {
       this.listQuery = {
-        name: '', // 姓名
-        sex: '', // 性别
-        nation: '', // 民族
-        collReason: '', // 采集原因
-        cardType: '', // 证件类型
-        idCardNo: '', // 证件号码
-        alarmReason: '', // 报警原因
-        startTime: '', // 开始时间
-        endTime: '', // 结束时间
+        keyword: '', // 设备编号/设备名称
+        alarmType: '', // 报警类型
+        alarmStatus: '1', // 报警状态
+        startTime: '', // 报警开始时间
+        endTime: '', // 报警结束时间
         offset: 1,
         limit: 20,
         sort: '',
@@ -194,18 +178,13 @@
         this.alarmTypeList = response.data
       })
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }
diff --git a/src/views/deviceManage/busCircuit.vue b/src/views/deviceManage/busCircuit.vue
index 2e1f872..7c9c804 100644
--- a/src/views/deviceManage/busCircuit.vue
+++ b/src/views/deviceManage/busCircuit.vue
@@ -1,77 +1,48 @@
 <!--回路列表-->
 <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-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.lampboxId" placeholder="所属灯箱" filterable clearable>
-                  <el-option v-for="item in boxList" :key="item.id" :label="item.lampboxName" :value="item.id"/>
-                </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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/circuit/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-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/circuit/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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.lampboxId" size="small" placeholder="所属灯箱" filterable clearable>
+          <el-option v-for="item in boxList" :key="item.id" :label="item.lampboxName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <!--<template slot="preColumns">-->
+      <!--<el-table-column align="center" type="selection" width="55"/>-->
+      <!--</template>-->
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <el-table-column label="操作" align="center" width="160">
-          <template slot-scope="scope">
-            <el-button v-if="hasPerm('/circuit/edit')" type="text" size="small" @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-circuit ref="editCircuit" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -128,7 +99,21 @@
       multipleSelection: [], // 多选选中项
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -253,17 +238,13 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/busController.vue b/src/views/deviceManage/busController.vue
index 49789c4..4646bf2 100644
--- a/src/views/deviceManage/busController.vue
+++ b/src/views/deviceManage/busController.vue
@@ -1,98 +1,67 @@
 <!--设备列表-->
 <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>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.controllerCode" size="small" placeholder="控制器编号" clearable />
+      </search-item>
+      <search-item/>
+      <search-item>
+        <el-select v-model="listQuery.controllerType" size="small" 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" size="small" placeholder="所属组织"/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" 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
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="selectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <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>
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <!--<template slot="preColumns">-->
+      <!--<el-table-column align="center" type="selection" width="55"/>-->
+      <!--</template>-->
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <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>
@@ -152,7 +121,21 @@
       statusList: [{ value: '1', name: '在线' }, { value: '0', name: '离线' }],
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -303,21 +286,17 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
-    handleSelectionChange(val) {
+    selectionChange(val) {
       this.multipleSelection = val
     }
   }
diff --git a/src/views/deviceManage/busGroup.vue b/src/views/deviceManage/busGroup.vue
index 9f85789..a35646b 100644
--- a/src/views/deviceManage/busGroup.vue
+++ b/src/views/deviceManage/busGroup.vue
@@ -1,80 +1,48 @@
 <!--灯箱列表-->
 <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.keyword" placeholder="分组名称" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.deviceType" placeholder="设备类型" clearable @change="fetchData">
-                  <el-option v-for="item in groupList" :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="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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/lampbox/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-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column 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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="分组名称" clearable />
+      </search-item>
+      <search-item/>
+      <search-item>
+        <el-select v-model="listQuery.deviceType" size="small" placeholder="设备类型" clearable @change="fetchData">
+          <el-option v-for="item in groupList" :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" size="small" placeholder="所属组织"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <el-table-column label="操作" align="center" width="160">
-          <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>-->
-            <el-button type="text" size="small" @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-Group ref="editGroup" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -132,7 +100,21 @@
       multipleSelection: [], // 多选选中项
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -249,17 +231,13 @@
         this.listLoading = false
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/busLamp.vue b/src/views/deviceManage/busLamp.vue
index 3450479..c480b30 100644
--- a/src/views/deviceManage/busLamp.vue
+++ b/src/views/deviceManage/busLamp.vue
@@ -1,104 +1,68 @@
 <!--路灯列表-->
 <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.keyword" placeholder="关键词" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.lampType" placeholder="路灯类型" clearable>
-                  <el-option v-for="item in typeList" :key="item.id" :label="item.typeName" :value="item.id"/>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </el-select>
-              </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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/lamp/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>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/lamp/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>
-        <!--操作列-->
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="关键词" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.lampType" size="small" placeholder="路灯类型" clearable>
+          <el-option v-for="item in typeList" :key="item.id" :label="item.typeName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" 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
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <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>
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
             <el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>
-            <el-button v-if="hasPerm('/lamp/edit')" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
-
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
             <el-button v-if="hasPerm('/lamp/remoteOn')" type="text" size="small">开灯</el-button>
             <el-button v-if="hasPerm('/lamp/remoteOff')" type="text" size="small">关灯</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-Lamp ref="editLamp" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -175,7 +139,21 @@
       statusList: [{ value: '1', name: '开灯' }, { value: '2', name: '关灯' }, { value: '3', name: '报警' }, { value: '4', name: '离线' }],
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -338,17 +316,13 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/busLampbox.vue b/src/views/deviceManage/busLampbox.vue
index 292c3a5..7763fac 100644
--- a/src/views/deviceManage/busLampbox.vue
+++ b/src/views/deviceManage/busLampbox.vue
@@ -1,46 +1,34 @@
 <!--灯箱列表-->
 <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.boxName" placeholder="灯箱名称" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/lampbox/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-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/lampbox/delete')" align="center" type="selection" width="55"/>
-        <!--序号列-->
-        <el-table-column :index="indexMethod" align="center" type="index" label="#" width="55"/>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.boxName" size="small" placeholder="灯箱名称" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
         <!--内容列-->
         <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">
@@ -55,30 +43,18 @@
             </div>
           </template>
         </el-table-column>
-        <!--操作列-->
+      </template>
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
             <el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>
-            <el-button v-if="hasPerm('/lampbox/edit')" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
+            <el-button type="text" size="small" @click.stop="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-Lampbox ref="editLampbox" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -144,7 +120,21 @@
       multipleSelection: [], // 多选选中项
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -277,6 +267,15 @@
       this.listQuery.limit = val
       this.fetchData()
     },
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
+    },
     // 改变当前页
     handleCurrentChange(val) {
       this.listQuery.offset = val
diff --git a/src/views/deviceManage/busLamppost.vue b/src/views/deviceManage/busLamppost.vue
index 92833a0..c193813 100644
--- a/src/views/deviceManage/busLamppost.vue
+++ b/src/views/deviceManage/busLamppost.vue
@@ -1,100 +1,65 @@
 <!--灯杆列表-->
 <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.keyword" placeholder="关键词" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.lamppostType" placeholder="路灯杆类型" clearable>
-                  <el-option v-for="item in typeList" :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">
-                <el-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </el-select>
-              </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('/lamppost/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>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/lamppost/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>
-        <!--操作列-->
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="关键词" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.lamppostType" size="small" placeholder="路灯杆类型" clearable>
+          <el-option v-for="item in typeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" 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
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <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>
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
-            <el-button v-if="hasPerm('/lamppost/edit')" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
+            <el-button type="text" size="small" @click.stop="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-Lamppost ref="editLamppost" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -161,7 +126,21 @@
       statusList: [{ value: '1', name: '开灯' }, { value: '2', name: '关灯' }, { value: '3', name: '报警' }, { value: '4', name: '离线' }],
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -320,17 +299,13 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/editCircuit.vue b/src/views/deviceManage/editCircuit.vue
index 9e9dd03..a362483 100644
--- a/src/views/deviceManage/editCircuit.vue
+++ b/src/views/deviceManage/editCircuit.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="cirForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="cirForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="回路编号" prop="circuitCode">
diff --git a/src/views/deviceManage/editController.vue b/src/views/deviceManage/editController.vue
index 7bc786f..444c835 100644
--- a/src/views/deviceManage/editController.vue
+++ b/src/views/deviceManage/editController.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="controllerForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="controllerForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="控制器编号" prop="controllerCode">
diff --git a/src/views/deviceManage/editGroup.vue b/src/views/deviceManage/editGroup.vue
index de9b88b..403d605 100644
--- a/src/views/deviceManage/editGroup.vue
+++ b/src/views/deviceManage/editGroup.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="groupForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="groupForm" size="small" label-well-code="right" label-width="110px">
       <el-row :span="24">
         <el-form-item label="分组名称" prop="groupName">
           <el-input v-model.trim="groupForm.groupName" :readonly="!isEditMode" clearable type="text" />
diff --git a/src/views/deviceManage/editLamp.vue b/src/views/deviceManage/editLamp.vue
index 3d45138..faf37d5 100644
--- a/src/views/deviceManage/editLamp.vue
+++ b/src/views/deviceManage/editLamp.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="lampForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="lampForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="路灯编号" prop="lampCode">
diff --git a/src/views/deviceManage/editLampbox.vue b/src/views/deviceManage/editLampbox.vue
index bd3a537..a4a8ea7 100644
--- a/src/views/deviceManage/editLampbox.vue
+++ b/src/views/deviceManage/editLampbox.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="boxForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="boxForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="灯箱编号" prop="lampboxCode">
diff --git a/src/views/deviceManage/editLamppost.vue b/src/views/deviceManage/editLamppost.vue
index 67a3a6f..a384319 100644
--- a/src/views/deviceManage/editLamppost.vue
+++ b/src/views/deviceManage/editLamppost.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="postForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="postForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="路灯杆编号" prop="lamppostCode">
diff --git a/src/views/deviceManage/listLog.vue b/src/views/deviceManage/listLog.vue
index 1d00e1c..5ab9a95 100644
--- a/src/views/deviceManage/listLog.vue
+++ b/src/views/deviceManage/listLog.vue
@@ -1,36 +1,32 @@
 <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-form-item>
-              <el-input v-model.trim="listQuery.devcode" placeholder="设备编号" clearable/>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.status" placeholder="下发状态" filterable clearable>
-                <el-option v-for="item in statusList" :key="item.name" :label="item.name" :value="item.name"/>
-              </el-select>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button class="edit_btn" size="small" @click="sendAll">全部设备下发</el-button>
-          <el-button class="edit_btn" size="small" @click="send">设备下发</el-button>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" :row-style="{height: '47px'}" class="table" border @selection-change="handleSelectionChange">
-        <el-table-column align="center" type="selection" width="55"/>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.devcode" size="small" placeholder="设备编号" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" placeholder="下发状态" filterable clearable>
+          <el-option v-for="item in statusList" :key="item.name" :label="item.name" :value="item.name"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button class="edit_btn" size="small" @click="sendAll">全部设备下发</el-button>
+        <el-button class="edit_btn" size="small" @click="send">设备下发</el-button>
+      </template>
+      <template slot="columns">
         <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">
             <div v-if="column.value === 'channel1'">
@@ -50,22 +46,9 @@
             </div>
           </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>
-  </div>
+      </template>
+    </normal-table>
+  </app-container>
 </template>
 
 <script>
@@ -151,7 +134,21 @@
       alarmStatusList: [{ name: '正在报警', value: '1' }, { name: '已取消', value: '2' }], // 报警状态列表
       statusList: [{ name: '未下发' }, { name: '已下发' }],
       alarmTypeList: [],
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -262,18 +259,13 @@
       this.timeRange = []
       this.fetchData(false)
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法

diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 5077bef..3fd3f33 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -58,6 +58,8 @@
       <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns"/>
+        <!--复选框列-->
+        <el-table-column v-if="options && options.needMultSelect" align="center" type="selection" width="55"/>
         <!--序号列-->
         <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
         <!--内容列, 若columns存在且长度大于0-->
@@ -140,7 +142,8 @@
       type: Object,
       default: function() {
         return {
-          needIndex: true // 是否需要序号列
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
         }
       }
     }, // 配置项
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
index 1175911..b5e8442 100644
--- a/src/components/SearchArea/SearchArea.vue
+++ b/src/components/SearchArea/SearchArea.vue
@@ -16,6 +16,7 @@
       <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
       <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
       <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns-seperate"/>
     </div>
     <!-- 弹出框式高级检索 -->
     <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
index 84bdb9f..c192d79 100644
--- a/src/layout/components/AppHeader.vue
+++ b/src/layout/components/AppHeader.vue
@@ -1,6 +1,14 @@
 <template>
   <el-header class="app-header">
     <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown v-if="showChangeSys" class="systemSelect" size="medium" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
     <el-dropdown class="dropdown-container" trigger="click">
       <div class="dropdown-wrapper">
         <span style="line-height:50px;">欢迎您，{{ name }}</span>
@@ -33,6 +41,7 @@
   data() {
     return {
       title: this.baseConfig.title, // 标题
+      showChangeSys: !this.baseConfig.singleSys, // 是否显示切换系统菜单
       name: this.$store.getters.name, // 用户姓名
       showSetPwd: false // 是否显示修改密码按钮
     }
@@ -40,7 +49,9 @@
   computed: {
     ...mapGetters([
       'sidebar',
-      'avatar'
+      'avatar',
+      'currentSystem',
+      'systems'
     ])
   },
   methods: {
@@ -55,6 +66,38 @@
     resetPwd() {
       this.showSetPwd = true
       this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      const url = this.baseConfig.mainPage
+      window.location.href = url
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      const params1 = `?token=${this.$store.getters.token}`
+      const params = `?sys=${command.name}&url=${command.url}&code=${command.code}&token=${this.$store.getters.token}`
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params1
+        } else {
+          window.open(command.url + params1, '_blank')
+        }
+      } else {
+        // 取token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = this.baseConfig.mainPage + command.url + params
+        } else {
+          window.open(this.baseConfig.mainPage + command.url + params, '_blank')
+        }
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
     }
   }
 }
diff --git a/src/permission.js b/src/permission.js
index 69e8233..637373e 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -26,20 +26,13 @@
           // 设置当前子系统为基础资源子系统
           const currentSys = {
             code: 'baseResourse',
-            id: '1189107859077373285',
-            ismenu: '0',
-            levels: 1,
-            name: '智慧照明子系统',
-            num: 0,
-            parentId: '0',
-            resourceType: '02',
-            url: '/baseResourse'
+            name: '智慧照明子系统'
           }
           // 将当前系统信息保存在localStorage中
           store.commit('SET_SYSTEM', currentSys)
           // 远程访问获取权限列表（菜单&按钮）
           store.dispatch('GetMenus', currentSys).then(() => {
-            store.commit('SET_CHANGEFLAG', '0')
+            // store.commit('SET_CHANGEFLAG', '0')
             router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
             next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
           })
diff --git a/src/router/index.js b/src/router/index.js
index 32f93ef..b558038 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -49,21 +49,22 @@
   // 404错误页面
   { path: '/404', component: () => import('@/views/errorPage/404'), hidden: true },
   // 401 错误页面
-  { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
-  // 主页
-  {
-    path: '/',
-    component: Layout,
-    redirect: 'dashboard',
-    name: 'Dashboard',
-    // hidden: true,
-    children: [{
-      path: 'dashboard',
-      name: 'Dashboard',
-      component: () => import('@/views/dashboard/index'),
-      meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
-    }]
-  }
+  { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true }
+  // { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
+  // // 主页
+  // {
+  //   path: '/',
+  //   component: Layout,
+  //   redirect: 'dashboard',
+  //   name: 'Dashboard',
+  //   // hidden: true,
+  //   children: [{
+  //     path: 'dashboard',
+  //     name: 'Dashboard',
+  //     component: () => import('@/views/dashboard/index'),
+  //     meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
+  //   }]
+  // }
 ]
 // 实例化vue的时候直挂载constantRouter
 export default new Router({
diff --git a/src/views/alarmManage/alarmRule.vue b/src/views/alarmManage/alarmRule.vue
index 888a4d1..11469a2 100644
--- a/src/views/alarmManage/alarmRule.vue
+++ b/src/views/alarmManage/alarmRule.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
       <el-tab-pane label="路灯" name="lamp">
         <lamp-type-list ref="lamp"/>
@@ -8,7 +8,7 @@
         <lampbox-type-list ref="box"/>
       </el-tab-pane>
     </el-tabs>
-  </div>
+  </app-container>
 </template>
 
 <script>
diff --git a/src/views/alarmManage/components/alarmDetail.vue b/src/views/alarmManage/components/alarmDetail.vue
index 9c68377..d598779 100644
--- a/src/views/alarmManage/components/alarmDetail.vue
+++ b/src/views/alarmManage/components/alarmDetail.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :close-on-click-modal="false" :visible.sync="dialogFormVisible" title="报警详情" append-to-body>
-    <el-form ref="dataForm" :model="alarmForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :model="alarmForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="10">
           <el-form-item label="设备名称" prop="deviceName">
diff --git a/src/views/alarmManage/lampType/editLampType.vue b/src/views/alarmManage/lampType/editLampType.vue
index 8c3e37a..8e5fc23 100644
--- a/src/views/alarmManage/lampType/editLampType.vue
+++ b/src/views/alarmManage/lampType/editLampType.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="typeForm" label-well-code="right" label-width="200px">
+    <el-form ref="dataForm" :rules="rules" :model="typeForm" size="small" label-well-code="right" label-width="200px">
       <el-row :gutter="20">
         <el-col :span="20">
           <el-form-item label="路灯类型" prop="typeName">
diff --git a/src/views/alarmManage/lampType/lampTypeList.vue b/src/views/alarmManage/lampType/lampTypeList.vue
index f8547ed..f10c63b 100644
--- a/src/views/alarmManage/lampType/lampTypeList.vue
+++ b/src/views/alarmManage/lampType/lampTypeList.vue
@@ -8,12 +8,11 @@
           <el-row>
             <el-col :span="4">
               <el-form-item class="selectForm-container-item">
-                <el-input v-model.trim="listQuery.typeName" placeholder="类型名称" clearable />
+                <el-input v-model.trim="listQuery.typeName" size="small" placeholder="类型名称" clearable />
               </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-button class="filter-item" type="primary" icon="el-icon-search" size="small" style="margin-top: 2px" @click="search">搜索</el-button>
             </el-col>
           </el-row>
         </el-form>
@@ -28,7 +27,7 @@
           <el-button class="edit_btn" size="small" @click="add">新增</el-button>
         </el-col>
       </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
+      <el-table v-loading="listLoading" :data="list" class="table" size="small" border @selection-change="handleSelectionChange">
         <!--拥有删除权限则显示复选框-->
         <el-table-column v-if="hasPerm('/lampType/delete')" align="center" type="selection" width="55"/>
         <!--序号列-->
diff --git a/src/views/alarmManage/lampboxType/editLampboxType.vue b/src/views/alarmManage/lampboxType/editLampboxType.vue
index 1b94960..ae3a7c1 100644
--- a/src/views/alarmManage/lampboxType/editLampboxType.vue
+++ b/src/views/alarmManage/lampboxType/editLampboxType.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="typeForm" label-well-code="right" label-width="200px">
+    <el-form ref="dataForm" :rules="rules" :model="typeForm" size="small" label-well-code="right" label-width="200px">
       <el-row :gutter="20">
         <el-col :span="20">
           <el-form-item label="灯箱类型" prop="typeName">
diff --git a/src/views/alarmManage/lampboxType/lampboxTypeList.vue b/src/views/alarmManage/lampboxType/lampboxTypeList.vue
index 7b68f20..f33dcbf 100644
--- a/src/views/alarmManage/lampboxType/lampboxTypeList.vue
+++ b/src/views/alarmManage/lampboxType/lampboxTypeList.vue
@@ -8,7 +8,7 @@
           <el-row>
             <el-col :span="4">
               <el-form-item class="selectForm-container-item">
-                <el-input v-model.trim="listQuery.typeName" placeholder="类型名称" clearable />
+                <el-input v-model.trim="listQuery.typeName" size="small" placeholder="类型名称" clearable />
               </el-form-item>
             </el-col>
 
diff --git a/src/views/alarmManage/listAlarm.vue b/src/views/alarmManage/listAlarm.vue
index 7571a0e..fe3e359 100644
--- a/src/views/alarmManage/listAlarm.vue
+++ b/src/views/alarmManage/listAlarm.vue
@@ -1,73 +1,52 @@
 <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-form-item>
-              <el-input v-model.trim="listQuery.keyword" placeholder="设备编号/设备名称" clearable/>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmType" placeholder="报警类型" clearable>
-                <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmStatus" placeholder="报警状态" clearable>
-                <el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item" prop="startTime">
-              <el-date-picker
-                v-model="timeRange"
-                type="datetimerange"
-                range-separator="至"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                start-placeholder="报警开始时间"
-                end-placeholder="报警结束时间"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
-        <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>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="设备编号/设备名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmType" size="small" placeholder="报警类型" clearable>
+          <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmStatus" size="small" placeholder="报警状态" clearable>
+          <el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          size="small"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="报警开始时间"
+          end-placeholder="报警结束时间"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="130">
           <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
             <el-button type="text" size="small" @click="showDetail(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>
     <alarm-detail v-show="dialogFormVisible" ref="alarmdetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -123,7 +102,21 @@
       dialogFormVisible: false,
       alarmStatusList: [{ name: '正在报警', value: '1' }, { name: '已取消', value: '2' }], // 报警状态列表
       alarmTypeList: [],
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   watch: {
@@ -171,19 +164,15 @@
     },
     clearInput() {
       this.listQuery = {
-        name: '', // 姓名
-        sex: '', // 性别
-        nation: '', // 民族
-        collReason: '', // 采集原因
-        cardType: '', // 证件类型
-        idCardNo: '', // 证件号码
-        alarmReason: '', // 报警原因
-        startTime: '', // 开始时间
-        endTime: '', // 结束时间
+        keyword: '', // 设备编号/设备名称
+        alarmType: '', // 报警类型
+        alarmStatus: '', // 报警状态
+        startTime: '', // 报警开始时间
+        endTime: '', // 报警结束时间
         offset: 1,
         limit: 20,
-        sort: '',
-        order: ''
+        sort: 'alarmTime',
+        order: 'desc'
       }
       this.timeRange = []
       this.fetchData(false)
@@ -194,18 +183,13 @@
         this.alarmTypeList = response.data
       })
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }
diff --git a/src/views/alarmManage/listAlarmNow.vue b/src/views/alarmManage/listAlarmNow.vue
index c48b60a..d98b641 100644
--- a/src/views/alarmManage/listAlarmNow.vue
+++ b/src/views/alarmManage/listAlarmNow.vue
@@ -1,73 +1,47 @@
 <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-form-item>
-              <el-input v-model.trim="listQuery.keyword" placeholder="设备编号/设备名称" clearable/>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmType" placeholder="报警类型" clearable>
-                <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <!--<el-form-item>-->
-            <!--<el-select v-model="listQuery.alarmStatus" placeholder="报警状态" clearable>-->
-            <!--<el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>-->
-            <!--</el-select>-->
-            <!--</el-form-item>-->
-            <el-form-item class="selectForm-container-item" prop="startTime">
-              <el-date-picker
-                v-model="timeRange"
-                type="datetimerange"
-                range-separator="至"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                start-placeholder="报警开始时间"
-                end-placeholder="报警结束时间"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
-        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="设备编号/设备名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmType" size="small" placeholder="报警类型" clearable>
+          <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          size="small"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="报警开始时间"
+          end-placeholder="报警结束时间"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
-            <span>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" align="center" width="130">
-          <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
             <el-button type="text" size="small" @click="showDetail(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>
     <alarm-detail v-show="dialogFormVisible" ref="alarmdetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -123,7 +97,21 @@
       dialogFormVisible: false,
       alarmStatusList: [{ name: '正在报警', value: '1' }, { name: '已取消', value: '2' }], // 报警状态列表
       alarmTypeList: [],
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   watch: {
@@ -171,15 +159,11 @@
     },
     clearInput() {
       this.listQuery = {
-        name: '', // 姓名
-        sex: '', // 性别
-        nation: '', // 民族
-        collReason: '', // 采集原因
-        cardType: '', // 证件类型
-        idCardNo: '', // 证件号码
-        alarmReason: '', // 报警原因
-        startTime: '', // 开始时间
-        endTime: '', // 结束时间
+        keyword: '', // 设备编号/设备名称
+        alarmType: '', // 报警类型
+        alarmStatus: '1', // 报警状态
+        startTime: '', // 报警开始时间
+        endTime: '', // 报警结束时间
         offset: 1,
         limit: 20,
         sort: '',
@@ -194,18 +178,13 @@
         this.alarmTypeList = response.data
       })
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }
diff --git a/src/views/deviceManage/busCircuit.vue b/src/views/deviceManage/busCircuit.vue
index 2e1f872..7c9c804 100644
--- a/src/views/deviceManage/busCircuit.vue
+++ b/src/views/deviceManage/busCircuit.vue
@@ -1,77 +1,48 @@
 <!--回路列表-->
 <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-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.lampboxId" placeholder="所属灯箱" filterable clearable>
-                  <el-option v-for="item in boxList" :key="item.id" :label="item.lampboxName" :value="item.id"/>
-                </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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/circuit/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-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/circuit/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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.lampboxId" size="small" placeholder="所属灯箱" filterable clearable>
+          <el-option v-for="item in boxList" :key="item.id" :label="item.lampboxName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <!--<template slot="preColumns">-->
+      <!--<el-table-column align="center" type="selection" width="55"/>-->
+      <!--</template>-->
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <el-table-column label="操作" align="center" width="160">
-          <template slot-scope="scope">
-            <el-button v-if="hasPerm('/circuit/edit')" type="text" size="small" @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-circuit ref="editCircuit" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -128,7 +99,21 @@
       multipleSelection: [], // 多选选中项
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -253,17 +238,13 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/busController.vue b/src/views/deviceManage/busController.vue
index 49789c4..4646bf2 100644
--- a/src/views/deviceManage/busController.vue
+++ b/src/views/deviceManage/busController.vue
@@ -1,98 +1,67 @@
 <!--设备列表-->
 <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>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.controllerCode" size="small" placeholder="控制器编号" clearable />
+      </search-item>
+      <search-item/>
+      <search-item>
+        <el-select v-model="listQuery.controllerType" size="small" 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" size="small" placeholder="所属组织"/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" 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
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="selectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <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>
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <!--<template slot="preColumns">-->
+      <!--<el-table-column align="center" type="selection" width="55"/>-->
+      <!--</template>-->
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <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>
@@ -152,7 +121,21 @@
       statusList: [{ value: '1', name: '在线' }, { value: '0', name: '离线' }],
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -303,21 +286,17 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
-    handleSelectionChange(val) {
+    selectionChange(val) {
       this.multipleSelection = val
     }
   }
diff --git a/src/views/deviceManage/busGroup.vue b/src/views/deviceManage/busGroup.vue
index 9f85789..a35646b 100644
--- a/src/views/deviceManage/busGroup.vue
+++ b/src/views/deviceManage/busGroup.vue
@@ -1,80 +1,48 @@
 <!--灯箱列表-->
 <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.keyword" placeholder="分组名称" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.deviceType" placeholder="设备类型" clearable @change="fetchData">
-                  <el-option v-for="item in groupList" :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="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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/lampbox/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-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column 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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="分组名称" clearable />
+      </search-item>
+      <search-item/>
+      <search-item>
+        <el-select v-model="listQuery.deviceType" size="small" placeholder="设备类型" clearable @change="fetchData">
+          <el-option v-for="item in groupList" :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" size="small" placeholder="所属组织"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <el-table-column label="操作" align="center" width="160">
-          <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>-->
-            <el-button type="text" size="small" @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-Group ref="editGroup" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -132,7 +100,21 @@
       multipleSelection: [], // 多选选中项
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -249,17 +231,13 @@
         this.listLoading = false
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/busLamp.vue b/src/views/deviceManage/busLamp.vue
index 3450479..c480b30 100644
--- a/src/views/deviceManage/busLamp.vue
+++ b/src/views/deviceManage/busLamp.vue
@@ -1,104 +1,68 @@
 <!--路灯列表-->
 <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.keyword" placeholder="关键词" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.lampType" placeholder="路灯类型" clearable>
-                  <el-option v-for="item in typeList" :key="item.id" :label="item.typeName" :value="item.id"/>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </el-select>
-              </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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/lamp/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>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/lamp/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>
-        <!--操作列-->
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="关键词" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.lampType" size="small" placeholder="路灯类型" clearable>
+          <el-option v-for="item in typeList" :key="item.id" :label="item.typeName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" 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
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <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>
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
             <el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>
-            <el-button v-if="hasPerm('/lamp/edit')" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
-
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
             <el-button v-if="hasPerm('/lamp/remoteOn')" type="text" size="small">开灯</el-button>
             <el-button v-if="hasPerm('/lamp/remoteOff')" type="text" size="small">关灯</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-Lamp ref="editLamp" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -175,7 +139,21 @@
       statusList: [{ value: '1', name: '开灯' }, { value: '2', name: '关灯' }, { value: '3', name: '报警' }, { value: '4', name: '离线' }],
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -338,17 +316,13 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/busLampbox.vue b/src/views/deviceManage/busLampbox.vue
index 292c3a5..7763fac 100644
--- a/src/views/deviceManage/busLampbox.vue
+++ b/src/views/deviceManage/busLampbox.vue
@@ -1,46 +1,34 @@
 <!--灯箱列表-->
 <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.boxName" placeholder="灯箱名称" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/lampbox/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-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/lampbox/delete')" align="center" type="selection" width="55"/>
-        <!--序号列-->
-        <el-table-column :index="indexMethod" align="center" type="index" label="#" width="55"/>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.boxName" size="small" placeholder="灯箱名称" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
         <!--内容列-->
         <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">
@@ -55,30 +43,18 @@
             </div>
           </template>
         </el-table-column>
-        <!--操作列-->
+      </template>
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
             <el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>
-            <el-button v-if="hasPerm('/lampbox/edit')" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
+            <el-button type="text" size="small" @click.stop="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-Lampbox ref="editLampbox" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -144,7 +120,21 @@
       multipleSelection: [], // 多选选中项
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -277,6 +267,15 @@
       this.listQuery.limit = val
       this.fetchData()
     },
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
+    },
     // 改变当前页
     handleCurrentChange(val) {
       this.listQuery.offset = val
diff --git a/src/views/deviceManage/busLamppost.vue b/src/views/deviceManage/busLamppost.vue
index 92833a0..c193813 100644
--- a/src/views/deviceManage/busLamppost.vue
+++ b/src/views/deviceManage/busLamppost.vue
@@ -1,100 +1,65 @@
 <!--灯杆列表-->
 <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.keyword" placeholder="关键词" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.lamppostType" placeholder="路灯杆类型" clearable>
-                  <el-option v-for="item in typeList" :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">
-                <el-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </el-select>
-              </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('/lamppost/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>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/lamppost/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>
-        <!--操作列-->
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="关键词" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.lamppostType" size="small" placeholder="路灯杆类型" clearable>
+          <el-option v-for="item in typeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" 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
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <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>
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
-            <el-button v-if="hasPerm('/lamppost/edit')" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
+            <el-button type="text" size="small" @click.stop="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-Lamppost ref="editLamppost" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -161,7 +126,21 @@
       statusList: [{ value: '1', name: '开灯' }, { value: '2', name: '关灯' }, { value: '3', name: '报警' }, { value: '4', name: '离线' }],
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -320,17 +299,13 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/editCircuit.vue b/src/views/deviceManage/editCircuit.vue
index 9e9dd03..a362483 100644
--- a/src/views/deviceManage/editCircuit.vue
+++ b/src/views/deviceManage/editCircuit.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="cirForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="cirForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="回路编号" prop="circuitCode">
diff --git a/src/views/deviceManage/editController.vue b/src/views/deviceManage/editController.vue
index 7bc786f..444c835 100644
--- a/src/views/deviceManage/editController.vue
+++ b/src/views/deviceManage/editController.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="controllerForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="controllerForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="控制器编号" prop="controllerCode">
diff --git a/src/views/deviceManage/editGroup.vue b/src/views/deviceManage/editGroup.vue
index de9b88b..403d605 100644
--- a/src/views/deviceManage/editGroup.vue
+++ b/src/views/deviceManage/editGroup.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="groupForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="groupForm" size="small" label-well-code="right" label-width="110px">
       <el-row :span="24">
         <el-form-item label="分组名称" prop="groupName">
           <el-input v-model.trim="groupForm.groupName" :readonly="!isEditMode" clearable type="text" />
diff --git a/src/views/deviceManage/editLamp.vue b/src/views/deviceManage/editLamp.vue
index 3d45138..faf37d5 100644
--- a/src/views/deviceManage/editLamp.vue
+++ b/src/views/deviceManage/editLamp.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="lampForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="lampForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="路灯编号" prop="lampCode">
diff --git a/src/views/deviceManage/editLampbox.vue b/src/views/deviceManage/editLampbox.vue
index bd3a537..a4a8ea7 100644
--- a/src/views/deviceManage/editLampbox.vue
+++ b/src/views/deviceManage/editLampbox.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="boxForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="boxForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="灯箱编号" prop="lampboxCode">
diff --git a/src/views/deviceManage/editLamppost.vue b/src/views/deviceManage/editLamppost.vue
index 67a3a6f..a384319 100644
--- a/src/views/deviceManage/editLamppost.vue
+++ b/src/views/deviceManage/editLamppost.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="postForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="postForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="路灯杆编号" prop="lamppostCode">
diff --git a/src/views/deviceManage/listLog.vue b/src/views/deviceManage/listLog.vue
index 1d00e1c..5ab9a95 100644
--- a/src/views/deviceManage/listLog.vue
+++ b/src/views/deviceManage/listLog.vue
@@ -1,36 +1,32 @@
 <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-form-item>
-              <el-input v-model.trim="listQuery.devcode" placeholder="设备编号" clearable/>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.status" placeholder="下发状态" filterable clearable>
-                <el-option v-for="item in statusList" :key="item.name" :label="item.name" :value="item.name"/>
-              </el-select>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button class="edit_btn" size="small" @click="sendAll">全部设备下发</el-button>
-          <el-button class="edit_btn" size="small" @click="send">设备下发</el-button>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" :row-style="{height: '47px'}" class="table" border @selection-change="handleSelectionChange">
-        <el-table-column align="center" type="selection" width="55"/>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.devcode" size="small" placeholder="设备编号" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" placeholder="下发状态" filterable clearable>
+          <el-option v-for="item in statusList" :key="item.name" :label="item.name" :value="item.name"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button class="edit_btn" size="small" @click="sendAll">全部设备下发</el-button>
+        <el-button class="edit_btn" size="small" @click="send">设备下发</el-button>
+      </template>
+      <template slot="columns">
         <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">
             <div v-if="column.value === 'channel1'">
@@ -50,22 +46,9 @@
             </div>
           </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>
-  </div>
+      </template>
+    </normal-table>
+  </app-container>
 </template>
 
 <script>
@@ -151,7 +134,21 @@
       alarmStatusList: [{ name: '正在报警', value: '1' }, { name: '已取消', value: '2' }], // 报警状态列表
       statusList: [{ name: '未下发' }, { name: '已下发' }],
       alarmTypeList: [],
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -262,18 +259,13 @@
       this.timeRange = []
       this.fetchData(false)
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/example/tableExample.vue b/src/views/example/tableExample.vue
index 2d54fad..e8cd106 100644
--- a/src/views/example/tableExample.vue
+++ b/src/views/example/tableExample.vue
@@ -139,7 +139,7 @@
           text: '数据列表' // 标题名称
         },
         options: {
-          needIndex: false // 是否需要序号列
+          needIndex: true // 是否需要序号列
         },
         toolsOption: {
           selectColumns: false, // 是否需要筛选列

diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 5077bef..3fd3f33 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -58,6 +58,8 @@
       <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns"/>
+        <!--复选框列-->
+        <el-table-column v-if="options && options.needMultSelect" align="center" type="selection" width="55"/>
         <!--序号列-->
         <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
         <!--内容列, 若columns存在且长度大于0-->
@@ -140,7 +142,8 @@
       type: Object,
       default: function() {
         return {
-          needIndex: true // 是否需要序号列
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
         }
       }
     }, // 配置项
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
index 1175911..b5e8442 100644
--- a/src/components/SearchArea/SearchArea.vue
+++ b/src/components/SearchArea/SearchArea.vue
@@ -16,6 +16,7 @@
       <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
       <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
       <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns-seperate"/>
     </div>
     <!-- 弹出框式高级检索 -->
     <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
index 84bdb9f..c192d79 100644
--- a/src/layout/components/AppHeader.vue
+++ b/src/layout/components/AppHeader.vue
@@ -1,6 +1,14 @@
 <template>
   <el-header class="app-header">
     <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown v-if="showChangeSys" class="systemSelect" size="medium" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
     <el-dropdown class="dropdown-container" trigger="click">
       <div class="dropdown-wrapper">
         <span style="line-height:50px;">欢迎您，{{ name }}</span>
@@ -33,6 +41,7 @@
   data() {
     return {
       title: this.baseConfig.title, // 标题
+      showChangeSys: !this.baseConfig.singleSys, // 是否显示切换系统菜单
       name: this.$store.getters.name, // 用户姓名
       showSetPwd: false // 是否显示修改密码按钮
     }
@@ -40,7 +49,9 @@
   computed: {
     ...mapGetters([
       'sidebar',
-      'avatar'
+      'avatar',
+      'currentSystem',
+      'systems'
     ])
   },
   methods: {
@@ -55,6 +66,38 @@
     resetPwd() {
       this.showSetPwd = true
       this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      const url = this.baseConfig.mainPage
+      window.location.href = url
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      const params1 = `?token=${this.$store.getters.token}`
+      const params = `?sys=${command.name}&url=${command.url}&code=${command.code}&token=${this.$store.getters.token}`
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params1
+        } else {
+          window.open(command.url + params1, '_blank')
+        }
+      } else {
+        // 取token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = this.baseConfig.mainPage + command.url + params
+        } else {
+          window.open(this.baseConfig.mainPage + command.url + params, '_blank')
+        }
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
     }
   }
 }
diff --git a/src/permission.js b/src/permission.js
index 69e8233..637373e 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -26,20 +26,13 @@
           // 设置当前子系统为基础资源子系统
           const currentSys = {
             code: 'baseResourse',
-            id: '1189107859077373285',
-            ismenu: '0',
-            levels: 1,
-            name: '智慧照明子系统',
-            num: 0,
-            parentId: '0',
-            resourceType: '02',
-            url: '/baseResourse'
+            name: '智慧照明子系统'
           }
           // 将当前系统信息保存在localStorage中
           store.commit('SET_SYSTEM', currentSys)
           // 远程访问获取权限列表（菜单&按钮）
           store.dispatch('GetMenus', currentSys).then(() => {
-            store.commit('SET_CHANGEFLAG', '0')
+            // store.commit('SET_CHANGEFLAG', '0')
             router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
             next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
           })
diff --git a/src/router/index.js b/src/router/index.js
index 32f93ef..b558038 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -49,21 +49,22 @@
   // 404错误页面
   { path: '/404', component: () => import('@/views/errorPage/404'), hidden: true },
   // 401 错误页面
-  { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
-  // 主页
-  {
-    path: '/',
-    component: Layout,
-    redirect: 'dashboard',
-    name: 'Dashboard',
-    // hidden: true,
-    children: [{
-      path: 'dashboard',
-      name: 'Dashboard',
-      component: () => import('@/views/dashboard/index'),
-      meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
-    }]
-  }
+  { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true }
+  // { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
+  // // 主页
+  // {
+  //   path: '/',
+  //   component: Layout,
+  //   redirect: 'dashboard',
+  //   name: 'Dashboard',
+  //   // hidden: true,
+  //   children: [{
+  //     path: 'dashboard',
+  //     name: 'Dashboard',
+  //     component: () => import('@/views/dashboard/index'),
+  //     meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
+  //   }]
+  // }
 ]
 // 实例化vue的时候直挂载constantRouter
 export default new Router({
diff --git a/src/views/alarmManage/alarmRule.vue b/src/views/alarmManage/alarmRule.vue
index 888a4d1..11469a2 100644
--- a/src/views/alarmManage/alarmRule.vue
+++ b/src/views/alarmManage/alarmRule.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
       <el-tab-pane label="路灯" name="lamp">
         <lamp-type-list ref="lamp"/>
@@ -8,7 +8,7 @@
         <lampbox-type-list ref="box"/>
       </el-tab-pane>
     </el-tabs>
-  </div>
+  </app-container>
 </template>
 
 <script>
diff --git a/src/views/alarmManage/components/alarmDetail.vue b/src/views/alarmManage/components/alarmDetail.vue
index 9c68377..d598779 100644
--- a/src/views/alarmManage/components/alarmDetail.vue
+++ b/src/views/alarmManage/components/alarmDetail.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :close-on-click-modal="false" :visible.sync="dialogFormVisible" title="报警详情" append-to-body>
-    <el-form ref="dataForm" :model="alarmForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :model="alarmForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="10">
           <el-form-item label="设备名称" prop="deviceName">
diff --git a/src/views/alarmManage/lampType/editLampType.vue b/src/views/alarmManage/lampType/editLampType.vue
index 8c3e37a..8e5fc23 100644
--- a/src/views/alarmManage/lampType/editLampType.vue
+++ b/src/views/alarmManage/lampType/editLampType.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="typeForm" label-well-code="right" label-width="200px">
+    <el-form ref="dataForm" :rules="rules" :model="typeForm" size="small" label-well-code="right" label-width="200px">
       <el-row :gutter="20">
         <el-col :span="20">
           <el-form-item label="路灯类型" prop="typeName">
diff --git a/src/views/alarmManage/lampType/lampTypeList.vue b/src/views/alarmManage/lampType/lampTypeList.vue
index f8547ed..f10c63b 100644
--- a/src/views/alarmManage/lampType/lampTypeList.vue
+++ b/src/views/alarmManage/lampType/lampTypeList.vue
@@ -8,12 +8,11 @@
           <el-row>
             <el-col :span="4">
               <el-form-item class="selectForm-container-item">
-                <el-input v-model.trim="listQuery.typeName" placeholder="类型名称" clearable />
+                <el-input v-model.trim="listQuery.typeName" size="small" placeholder="类型名称" clearable />
               </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-button class="filter-item" type="primary" icon="el-icon-search" size="small" style="margin-top: 2px" @click="search">搜索</el-button>
             </el-col>
           </el-row>
         </el-form>
@@ -28,7 +27,7 @@
           <el-button class="edit_btn" size="small" @click="add">新增</el-button>
         </el-col>
       </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
+      <el-table v-loading="listLoading" :data="list" class="table" size="small" border @selection-change="handleSelectionChange">
         <!--拥有删除权限则显示复选框-->
         <el-table-column v-if="hasPerm('/lampType/delete')" align="center" type="selection" width="55"/>
         <!--序号列-->
diff --git a/src/views/alarmManage/lampboxType/editLampboxType.vue b/src/views/alarmManage/lampboxType/editLampboxType.vue
index 1b94960..ae3a7c1 100644
--- a/src/views/alarmManage/lampboxType/editLampboxType.vue
+++ b/src/views/alarmManage/lampboxType/editLampboxType.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="typeForm" label-well-code="right" label-width="200px">
+    <el-form ref="dataForm" :rules="rules" :model="typeForm" size="small" label-well-code="right" label-width="200px">
       <el-row :gutter="20">
         <el-col :span="20">
           <el-form-item label="灯箱类型" prop="typeName">
diff --git a/src/views/alarmManage/lampboxType/lampboxTypeList.vue b/src/views/alarmManage/lampboxType/lampboxTypeList.vue
index 7b68f20..f33dcbf 100644
--- a/src/views/alarmManage/lampboxType/lampboxTypeList.vue
+++ b/src/views/alarmManage/lampboxType/lampboxTypeList.vue
@@ -8,7 +8,7 @@
           <el-row>
             <el-col :span="4">
               <el-form-item class="selectForm-container-item">
-                <el-input v-model.trim="listQuery.typeName" placeholder="类型名称" clearable />
+                <el-input v-model.trim="listQuery.typeName" size="small" placeholder="类型名称" clearable />
               </el-form-item>
             </el-col>
 
diff --git a/src/views/alarmManage/listAlarm.vue b/src/views/alarmManage/listAlarm.vue
index 7571a0e..fe3e359 100644
--- a/src/views/alarmManage/listAlarm.vue
+++ b/src/views/alarmManage/listAlarm.vue
@@ -1,73 +1,52 @@
 <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-form-item>
-              <el-input v-model.trim="listQuery.keyword" placeholder="设备编号/设备名称" clearable/>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmType" placeholder="报警类型" clearable>
-                <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmStatus" placeholder="报警状态" clearable>
-                <el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item" prop="startTime">
-              <el-date-picker
-                v-model="timeRange"
-                type="datetimerange"
-                range-separator="至"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                start-placeholder="报警开始时间"
-                end-placeholder="报警结束时间"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
-        <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>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="设备编号/设备名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmType" size="small" placeholder="报警类型" clearable>
+          <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmStatus" size="small" placeholder="报警状态" clearable>
+          <el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          size="small"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="报警开始时间"
+          end-placeholder="报警结束时间"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="130">
           <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
             <el-button type="text" size="small" @click="showDetail(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>
     <alarm-detail v-show="dialogFormVisible" ref="alarmdetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -123,7 +102,21 @@
       dialogFormVisible: false,
       alarmStatusList: [{ name: '正在报警', value: '1' }, { name: '已取消', value: '2' }], // 报警状态列表
       alarmTypeList: [],
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   watch: {
@@ -171,19 +164,15 @@
     },
     clearInput() {
       this.listQuery = {
-        name: '', // 姓名
-        sex: '', // 性别
-        nation: '', // 民族
-        collReason: '', // 采集原因
-        cardType: '', // 证件类型
-        idCardNo: '', // 证件号码
-        alarmReason: '', // 报警原因
-        startTime: '', // 开始时间
-        endTime: '', // 结束时间
+        keyword: '', // 设备编号/设备名称
+        alarmType: '', // 报警类型
+        alarmStatus: '', // 报警状态
+        startTime: '', // 报警开始时间
+        endTime: '', // 报警结束时间
         offset: 1,
         limit: 20,
-        sort: '',
-        order: ''
+        sort: 'alarmTime',
+        order: 'desc'
       }
       this.timeRange = []
       this.fetchData(false)
@@ -194,18 +183,13 @@
         this.alarmTypeList = response.data
       })
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }
diff --git a/src/views/alarmManage/listAlarmNow.vue b/src/views/alarmManage/listAlarmNow.vue
index c48b60a..d98b641 100644
--- a/src/views/alarmManage/listAlarmNow.vue
+++ b/src/views/alarmManage/listAlarmNow.vue
@@ -1,73 +1,47 @@
 <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-form-item>
-              <el-input v-model.trim="listQuery.keyword" placeholder="设备编号/设备名称" clearable/>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmType" placeholder="报警类型" clearable>
-                <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <!--<el-form-item>-->
-            <!--<el-select v-model="listQuery.alarmStatus" placeholder="报警状态" clearable>-->
-            <!--<el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>-->
-            <!--</el-select>-->
-            <!--</el-form-item>-->
-            <el-form-item class="selectForm-container-item" prop="startTime">
-              <el-date-picker
-                v-model="timeRange"
-                type="datetimerange"
-                range-separator="至"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                start-placeholder="报警开始时间"
-                end-placeholder="报警结束时间"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
-        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="设备编号/设备名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmType" size="small" placeholder="报警类型" clearable>
+          <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          size="small"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="报警开始时间"
+          end-placeholder="报警结束时间"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
-            <span>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" align="center" width="130">
-          <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
             <el-button type="text" size="small" @click="showDetail(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>
     <alarm-detail v-show="dialogFormVisible" ref="alarmdetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -123,7 +97,21 @@
       dialogFormVisible: false,
       alarmStatusList: [{ name: '正在报警', value: '1' }, { name: '已取消', value: '2' }], // 报警状态列表
       alarmTypeList: [],
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   watch: {
@@ -171,15 +159,11 @@
     },
     clearInput() {
       this.listQuery = {
-        name: '', // 姓名
-        sex: '', // 性别
-        nation: '', // 民族
-        collReason: '', // 采集原因
-        cardType: '', // 证件类型
-        idCardNo: '', // 证件号码
-        alarmReason: '', // 报警原因
-        startTime: '', // 开始时间
-        endTime: '', // 结束时间
+        keyword: '', // 设备编号/设备名称
+        alarmType: '', // 报警类型
+        alarmStatus: '1', // 报警状态
+        startTime: '', // 报警开始时间
+        endTime: '', // 报警结束时间
         offset: 1,
         limit: 20,
         sort: '',
@@ -194,18 +178,13 @@
         this.alarmTypeList = response.data
       })
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }
diff --git a/src/views/deviceManage/busCircuit.vue b/src/views/deviceManage/busCircuit.vue
index 2e1f872..7c9c804 100644
--- a/src/views/deviceManage/busCircuit.vue
+++ b/src/views/deviceManage/busCircuit.vue
@@ -1,77 +1,48 @@
 <!--回路列表-->
 <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-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.lampboxId" placeholder="所属灯箱" filterable clearable>
-                  <el-option v-for="item in boxList" :key="item.id" :label="item.lampboxName" :value="item.id"/>
-                </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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/circuit/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-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/circuit/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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.lampboxId" size="small" placeholder="所属灯箱" filterable clearable>
+          <el-option v-for="item in boxList" :key="item.id" :label="item.lampboxName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <!--<template slot="preColumns">-->
+      <!--<el-table-column align="center" type="selection" width="55"/>-->
+      <!--</template>-->
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <el-table-column label="操作" align="center" width="160">
-          <template slot-scope="scope">
-            <el-button v-if="hasPerm('/circuit/edit')" type="text" size="small" @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-circuit ref="editCircuit" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -128,7 +99,21 @@
       multipleSelection: [], // 多选选中项
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -253,17 +238,13 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/busController.vue b/src/views/deviceManage/busController.vue
index 49789c4..4646bf2 100644
--- a/src/views/deviceManage/busController.vue
+++ b/src/views/deviceManage/busController.vue
@@ -1,98 +1,67 @@
 <!--设备列表-->
 <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>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.controllerCode" size="small" placeholder="控制器编号" clearable />
+      </search-item>
+      <search-item/>
+      <search-item>
+        <el-select v-model="listQuery.controllerType" size="small" 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" size="small" placeholder="所属组织"/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" 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
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="selectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <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>
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <!--<template slot="preColumns">-->
+      <!--<el-table-column align="center" type="selection" width="55"/>-->
+      <!--</template>-->
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <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>
@@ -152,7 +121,21 @@
       statusList: [{ value: '1', name: '在线' }, { value: '0', name: '离线' }],
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -303,21 +286,17 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
-    handleSelectionChange(val) {
+    selectionChange(val) {
       this.multipleSelection = val
     }
   }
diff --git a/src/views/deviceManage/busGroup.vue b/src/views/deviceManage/busGroup.vue
index 9f85789..a35646b 100644
--- a/src/views/deviceManage/busGroup.vue
+++ b/src/views/deviceManage/busGroup.vue
@@ -1,80 +1,48 @@
 <!--灯箱列表-->
 <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.keyword" placeholder="分组名称" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.deviceType" placeholder="设备类型" clearable @change="fetchData">
-                  <el-option v-for="item in groupList" :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="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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/lampbox/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-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column 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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="分组名称" clearable />
+      </search-item>
+      <search-item/>
+      <search-item>
+        <el-select v-model="listQuery.deviceType" size="small" placeholder="设备类型" clearable @change="fetchData">
+          <el-option v-for="item in groupList" :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" size="small" placeholder="所属组织"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <el-table-column label="操作" align="center" width="160">
-          <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>-->
-            <el-button type="text" size="small" @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-Group ref="editGroup" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -132,7 +100,21 @@
       multipleSelection: [], // 多选选中项
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -249,17 +231,13 @@
         this.listLoading = false
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/busLamp.vue b/src/views/deviceManage/busLamp.vue
index 3450479..c480b30 100644
--- a/src/views/deviceManage/busLamp.vue
+++ b/src/views/deviceManage/busLamp.vue
@@ -1,104 +1,68 @@
 <!--路灯列表-->
 <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.keyword" placeholder="关键词" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.lampType" placeholder="路灯类型" clearable>
-                  <el-option v-for="item in typeList" :key="item.id" :label="item.typeName" :value="item.id"/>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </el-select>
-              </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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/lamp/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>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/lamp/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>
-        <!--操作列-->
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="关键词" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.lampType" size="small" placeholder="路灯类型" clearable>
+          <el-option v-for="item in typeList" :key="item.id" :label="item.typeName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" 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
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <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>
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
             <el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>
-            <el-button v-if="hasPerm('/lamp/edit')" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
-
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
             <el-button v-if="hasPerm('/lamp/remoteOn')" type="text" size="small">开灯</el-button>
             <el-button v-if="hasPerm('/lamp/remoteOff')" type="text" size="small">关灯</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-Lamp ref="editLamp" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -175,7 +139,21 @@
       statusList: [{ value: '1', name: '开灯' }, { value: '2', name: '关灯' }, { value: '3', name: '报警' }, { value: '4', name: '离线' }],
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -338,17 +316,13 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/busLampbox.vue b/src/views/deviceManage/busLampbox.vue
index 292c3a5..7763fac 100644
--- a/src/views/deviceManage/busLampbox.vue
+++ b/src/views/deviceManage/busLampbox.vue
@@ -1,46 +1,34 @@
 <!--灯箱列表-->
 <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.boxName" placeholder="灯箱名称" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/lampbox/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-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/lampbox/delete')" align="center" type="selection" width="55"/>
-        <!--序号列-->
-        <el-table-column :index="indexMethod" align="center" type="index" label="#" width="55"/>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.boxName" size="small" placeholder="灯箱名称" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
         <!--内容列-->
         <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">
@@ -55,30 +43,18 @@
             </div>
           </template>
         </el-table-column>
-        <!--操作列-->
+      </template>
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
             <el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>
-            <el-button v-if="hasPerm('/lampbox/edit')" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
+            <el-button type="text" size="small" @click.stop="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-Lampbox ref="editLampbox" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -144,7 +120,21 @@
       multipleSelection: [], // 多选选中项
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -277,6 +267,15 @@
       this.listQuery.limit = val
       this.fetchData()
     },
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
+    },
     // 改变当前页
     handleCurrentChange(val) {
       this.listQuery.offset = val
diff --git a/src/views/deviceManage/busLamppost.vue b/src/views/deviceManage/busLamppost.vue
index 92833a0..c193813 100644
--- a/src/views/deviceManage/busLamppost.vue
+++ b/src/views/deviceManage/busLamppost.vue
@@ -1,100 +1,65 @@
 <!--灯杆列表-->
 <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.keyword" placeholder="关键词" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.lamppostType" placeholder="路灯杆类型" clearable>
-                  <el-option v-for="item in typeList" :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">
-                <el-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </el-select>
-              </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('/lamppost/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>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/lamppost/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>
-        <!--操作列-->
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="关键词" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.lamppostType" size="small" placeholder="路灯杆类型" clearable>
+          <el-option v-for="item in typeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" 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
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <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>
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
-            <el-button v-if="hasPerm('/lamppost/edit')" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
+            <el-button type="text" size="small" @click.stop="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-Lamppost ref="editLamppost" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -161,7 +126,21 @@
       statusList: [{ value: '1', name: '开灯' }, { value: '2', name: '关灯' }, { value: '3', name: '报警' }, { value: '4', name: '离线' }],
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -320,17 +299,13 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/editCircuit.vue b/src/views/deviceManage/editCircuit.vue
index 9e9dd03..a362483 100644
--- a/src/views/deviceManage/editCircuit.vue
+++ b/src/views/deviceManage/editCircuit.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="cirForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="cirForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="回路编号" prop="circuitCode">
diff --git a/src/views/deviceManage/editController.vue b/src/views/deviceManage/editController.vue
index 7bc786f..444c835 100644
--- a/src/views/deviceManage/editController.vue
+++ b/src/views/deviceManage/editController.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="controllerForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="controllerForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="控制器编号" prop="controllerCode">
diff --git a/src/views/deviceManage/editGroup.vue b/src/views/deviceManage/editGroup.vue
index de9b88b..403d605 100644
--- a/src/views/deviceManage/editGroup.vue
+++ b/src/views/deviceManage/editGroup.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="groupForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="groupForm" size="small" label-well-code="right" label-width="110px">
       <el-row :span="24">
         <el-form-item label="分组名称" prop="groupName">
           <el-input v-model.trim="groupForm.groupName" :readonly="!isEditMode" clearable type="text" />
diff --git a/src/views/deviceManage/editLamp.vue b/src/views/deviceManage/editLamp.vue
index 3d45138..faf37d5 100644
--- a/src/views/deviceManage/editLamp.vue
+++ b/src/views/deviceManage/editLamp.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="lampForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="lampForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="路灯编号" prop="lampCode">
diff --git a/src/views/deviceManage/editLampbox.vue b/src/views/deviceManage/editLampbox.vue
index bd3a537..a4a8ea7 100644
--- a/src/views/deviceManage/editLampbox.vue
+++ b/src/views/deviceManage/editLampbox.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="boxForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="boxForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="灯箱编号" prop="lampboxCode">
diff --git a/src/views/deviceManage/editLamppost.vue b/src/views/deviceManage/editLamppost.vue
index 67a3a6f..a384319 100644
--- a/src/views/deviceManage/editLamppost.vue
+++ b/src/views/deviceManage/editLamppost.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="postForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="postForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="路灯杆编号" prop="lamppostCode">
diff --git a/src/views/deviceManage/listLog.vue b/src/views/deviceManage/listLog.vue
index 1d00e1c..5ab9a95 100644
--- a/src/views/deviceManage/listLog.vue
+++ b/src/views/deviceManage/listLog.vue
@@ -1,36 +1,32 @@
 <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-form-item>
-              <el-input v-model.trim="listQuery.devcode" placeholder="设备编号" clearable/>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.status" placeholder="下发状态" filterable clearable>
-                <el-option v-for="item in statusList" :key="item.name" :label="item.name" :value="item.name"/>
-              </el-select>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button class="edit_btn" size="small" @click="sendAll">全部设备下发</el-button>
-          <el-button class="edit_btn" size="small" @click="send">设备下发</el-button>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" :row-style="{height: '47px'}" class="table" border @selection-change="handleSelectionChange">
-        <el-table-column align="center" type="selection" width="55"/>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.devcode" size="small" placeholder="设备编号" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" placeholder="下发状态" filterable clearable>
+          <el-option v-for="item in statusList" :key="item.name" :label="item.name" :value="item.name"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button class="edit_btn" size="small" @click="sendAll">全部设备下发</el-button>
+        <el-button class="edit_btn" size="small" @click="send">设备下发</el-button>
+      </template>
+      <template slot="columns">
         <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">
             <div v-if="column.value === 'channel1'">
@@ -50,22 +46,9 @@
             </div>
           </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>
-  </div>
+      </template>
+    </normal-table>
+  </app-container>
 </template>
 
 <script>
@@ -151,7 +134,21 @@
       alarmStatusList: [{ name: '正在报警', value: '1' }, { name: '已取消', value: '2' }], // 报警状态列表
       statusList: [{ name: '未下发' }, { name: '已下发' }],
       alarmTypeList: [],
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -262,18 +259,13 @@
       this.timeRange = []
       this.fetchData(false)
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/example/tableExample.vue b/src/views/example/tableExample.vue
index 2d54fad..e8cd106 100644
--- a/src/views/example/tableExample.vue
+++ b/src/views/example/tableExample.vue
@@ -139,7 +139,7 @@
           text: '数据列表' // 标题名称
         },
         options: {
-          needIndex: false // 是否需要序号列
+          needIndex: true // 是否需要序号列
         },
         toolsOption: {
           selectColumns: false, // 是否需要筛选列
diff --git a/src/views/report/boxData.vue b/src/views/report/boxData.vue
index 2e04e4b..5faeff7 100644
--- a/src/views/report/boxData.vue
+++ b/src/views/report/boxData.vue
@@ -1,25 +1,50 @@
 <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-form-item class="selectForm-container-item">
-              <el-input v-model.trim="listQuery.keyword" placeholder="灯箱编号/灯箱名称" clearable/>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item">
-              <el-select v-model="listQuery.groupId" placeholder="设备组" clearable>
-                <el-option v-for="item in groupList" :key="item.id" :label="item.groupName" :value="item.id"/>
-              </el-select>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-      <div class="clearfloat"/>
-    </div>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="灯箱编号/灯箱名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.groupId" size="small" placeholder="设备组" clearable>
+          <el-option v-for="item in groupList" :key="item.id" :label="item.groupName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
+        <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">
+            <div v-if="column.value === 'A'">
+              <span v-html="allNum(scope.row.electricityA,scope.row.voltageA,scope.row.powerA)"/>
+            </div>
+            <div v-else-if="column.value === 'B'">
+              <span v-html="allNum(scope.row.electricityB,scope.row.voltageA,scope.row.powerB)"/>
+            </div>
+            <div v-else-if="column.value === 'C'">
+              <span v-html="allNum(scope.row.electricityC,scope.row.voltageA,scope.row.powerC)"/>
+            </div>
+            <div v-else>
+              <span>{{ scope.row[column.value] }}</span>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" width="130">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click="showHistory(scope.row)">查看历史</el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
     <!--查询结果Table显示-->
     <div>
       <el-row class="table-title">
@@ -43,29 +68,10 @@
             </div>
           </template>
         </el-table-column>
-        <el-table-column label="操作" align="center" width="130">
-          <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
-            <el-button type="text" size="small" @click="showHistory(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>
     <box-history v-show="dialogFormVisible" ref="boxhistory"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -121,7 +127,21 @@
       listLoading: true, // 列表加载
       dialogFormVisible: false,
       alarmReasonList: [], // 报警原因列表
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -177,18 +197,13 @@
         this.groupList = response.data
       })
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }

diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 5077bef..3fd3f33 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -58,6 +58,8 @@
       <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns"/>
+        <!--复选框列-->
+        <el-table-column v-if="options && options.needMultSelect" align="center" type="selection" width="55"/>
         <!--序号列-->
         <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
         <!--内容列, 若columns存在且长度大于0-->
@@ -140,7 +142,8 @@
       type: Object,
       default: function() {
         return {
-          needIndex: true // 是否需要序号列
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
         }
       }
     }, // 配置项
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
index 1175911..b5e8442 100644
--- a/src/components/SearchArea/SearchArea.vue
+++ b/src/components/SearchArea/SearchArea.vue
@@ -16,6 +16,7 @@
       <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
       <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
       <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns-seperate"/>
     </div>
     <!-- 弹出框式高级检索 -->
     <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
index 84bdb9f..c192d79 100644
--- a/src/layout/components/AppHeader.vue
+++ b/src/layout/components/AppHeader.vue
@@ -1,6 +1,14 @@
 <template>
   <el-header class="app-header">
     <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown v-if="showChangeSys" class="systemSelect" size="medium" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
     <el-dropdown class="dropdown-container" trigger="click">
       <div class="dropdown-wrapper">
         <span style="line-height:50px;">欢迎您，{{ name }}</span>
@@ -33,6 +41,7 @@
   data() {
     return {
       title: this.baseConfig.title, // 标题
+      showChangeSys: !this.baseConfig.singleSys, // 是否显示切换系统菜单
       name: this.$store.getters.name, // 用户姓名
       showSetPwd: false // 是否显示修改密码按钮
     }
@@ -40,7 +49,9 @@
   computed: {
     ...mapGetters([
       'sidebar',
-      'avatar'
+      'avatar',
+      'currentSystem',
+      'systems'
     ])
   },
   methods: {
@@ -55,6 +66,38 @@
     resetPwd() {
       this.showSetPwd = true
       this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      const url = this.baseConfig.mainPage
+      window.location.href = url
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      const params1 = `?token=${this.$store.getters.token}`
+      const params = `?sys=${command.name}&url=${command.url}&code=${command.code}&token=${this.$store.getters.token}`
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params1
+        } else {
+          window.open(command.url + params1, '_blank')
+        }
+      } else {
+        // 取token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = this.baseConfig.mainPage + command.url + params
+        } else {
+          window.open(this.baseConfig.mainPage + command.url + params, '_blank')
+        }
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
     }
   }
 }
diff --git a/src/permission.js b/src/permission.js
index 69e8233..637373e 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -26,20 +26,13 @@
           // 设置当前子系统为基础资源子系统
           const currentSys = {
             code: 'baseResourse',
-            id: '1189107859077373285',
-            ismenu: '0',
-            levels: 1,
-            name: '智慧照明子系统',
-            num: 0,
-            parentId: '0',
-            resourceType: '02',
-            url: '/baseResourse'
+            name: '智慧照明子系统'
           }
           // 将当前系统信息保存在localStorage中
           store.commit('SET_SYSTEM', currentSys)
           // 远程访问获取权限列表（菜单&按钮）
           store.dispatch('GetMenus', currentSys).then(() => {
-            store.commit('SET_CHANGEFLAG', '0')
+            // store.commit('SET_CHANGEFLAG', '0')
             router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
             next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
           })
diff --git a/src/router/index.js b/src/router/index.js
index 32f93ef..b558038 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -49,21 +49,22 @@
   // 404错误页面
   { path: '/404', component: () => import('@/views/errorPage/404'), hidden: true },
   // 401 错误页面
-  { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
-  // 主页
-  {
-    path: '/',
-    component: Layout,
-    redirect: 'dashboard',
-    name: 'Dashboard',
-    // hidden: true,
-    children: [{
-      path: 'dashboard',
-      name: 'Dashboard',
-      component: () => import('@/views/dashboard/index'),
-      meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
-    }]
-  }
+  { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true }
+  // { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
+  // // 主页
+  // {
+  //   path: '/',
+  //   component: Layout,
+  //   redirect: 'dashboard',
+  //   name: 'Dashboard',
+  //   // hidden: true,
+  //   children: [{
+  //     path: 'dashboard',
+  //     name: 'Dashboard',
+  //     component: () => import('@/views/dashboard/index'),
+  //     meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
+  //   }]
+  // }
 ]
 // 实例化vue的时候直挂载constantRouter
 export default new Router({
diff --git a/src/views/alarmManage/alarmRule.vue b/src/views/alarmManage/alarmRule.vue
index 888a4d1..11469a2 100644
--- a/src/views/alarmManage/alarmRule.vue
+++ b/src/views/alarmManage/alarmRule.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
       <el-tab-pane label="路灯" name="lamp">
         <lamp-type-list ref="lamp"/>
@@ -8,7 +8,7 @@
         <lampbox-type-list ref="box"/>
       </el-tab-pane>
     </el-tabs>
-  </div>
+  </app-container>
 </template>
 
 <script>
diff --git a/src/views/alarmManage/components/alarmDetail.vue b/src/views/alarmManage/components/alarmDetail.vue
index 9c68377..d598779 100644
--- a/src/views/alarmManage/components/alarmDetail.vue
+++ b/src/views/alarmManage/components/alarmDetail.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :close-on-click-modal="false" :visible.sync="dialogFormVisible" title="报警详情" append-to-body>
-    <el-form ref="dataForm" :model="alarmForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :model="alarmForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="10">
           <el-form-item label="设备名称" prop="deviceName">
diff --git a/src/views/alarmManage/lampType/editLampType.vue b/src/views/alarmManage/lampType/editLampType.vue
index 8c3e37a..8e5fc23 100644
--- a/src/views/alarmManage/lampType/editLampType.vue
+++ b/src/views/alarmManage/lampType/editLampType.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="typeForm" label-well-code="right" label-width="200px">
+    <el-form ref="dataForm" :rules="rules" :model="typeForm" size="small" label-well-code="right" label-width="200px">
       <el-row :gutter="20">
         <el-col :span="20">
           <el-form-item label="路灯类型" prop="typeName">
diff --git a/src/views/alarmManage/lampType/lampTypeList.vue b/src/views/alarmManage/lampType/lampTypeList.vue
index f8547ed..f10c63b 100644
--- a/src/views/alarmManage/lampType/lampTypeList.vue
+++ b/src/views/alarmManage/lampType/lampTypeList.vue
@@ -8,12 +8,11 @@
           <el-row>
             <el-col :span="4">
               <el-form-item class="selectForm-container-item">
-                <el-input v-model.trim="listQuery.typeName" placeholder="类型名称" clearable />
+                <el-input v-model.trim="listQuery.typeName" size="small" placeholder="类型名称" clearable />
               </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-button class="filter-item" type="primary" icon="el-icon-search" size="small" style="margin-top: 2px" @click="search">搜索</el-button>
             </el-col>
           </el-row>
         </el-form>
@@ -28,7 +27,7 @@
           <el-button class="edit_btn" size="small" @click="add">新增</el-button>
         </el-col>
       </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
+      <el-table v-loading="listLoading" :data="list" class="table" size="small" border @selection-change="handleSelectionChange">
         <!--拥有删除权限则显示复选框-->
         <el-table-column v-if="hasPerm('/lampType/delete')" align="center" type="selection" width="55"/>
         <!--序号列-->
diff --git a/src/views/alarmManage/lampboxType/editLampboxType.vue b/src/views/alarmManage/lampboxType/editLampboxType.vue
index 1b94960..ae3a7c1 100644
--- a/src/views/alarmManage/lampboxType/editLampboxType.vue
+++ b/src/views/alarmManage/lampboxType/editLampboxType.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="typeForm" label-well-code="right" label-width="200px">
+    <el-form ref="dataForm" :rules="rules" :model="typeForm" size="small" label-well-code="right" label-width="200px">
       <el-row :gutter="20">
         <el-col :span="20">
           <el-form-item label="灯箱类型" prop="typeName">
diff --git a/src/views/alarmManage/lampboxType/lampboxTypeList.vue b/src/views/alarmManage/lampboxType/lampboxTypeList.vue
index 7b68f20..f33dcbf 100644
--- a/src/views/alarmManage/lampboxType/lampboxTypeList.vue
+++ b/src/views/alarmManage/lampboxType/lampboxTypeList.vue
@@ -8,7 +8,7 @@
           <el-row>
             <el-col :span="4">
               <el-form-item class="selectForm-container-item">
-                <el-input v-model.trim="listQuery.typeName" placeholder="类型名称" clearable />
+                <el-input v-model.trim="listQuery.typeName" size="small" placeholder="类型名称" clearable />
               </el-form-item>
             </el-col>
 
diff --git a/src/views/alarmManage/listAlarm.vue b/src/views/alarmManage/listAlarm.vue
index 7571a0e..fe3e359 100644
--- a/src/views/alarmManage/listAlarm.vue
+++ b/src/views/alarmManage/listAlarm.vue
@@ -1,73 +1,52 @@
 <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-form-item>
-              <el-input v-model.trim="listQuery.keyword" placeholder="设备编号/设备名称" clearable/>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmType" placeholder="报警类型" clearable>
-                <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmStatus" placeholder="报警状态" clearable>
-                <el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item" prop="startTime">
-              <el-date-picker
-                v-model="timeRange"
-                type="datetimerange"
-                range-separator="至"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                start-placeholder="报警开始时间"
-                end-placeholder="报警结束时间"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
-        <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>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="设备编号/设备名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmType" size="small" placeholder="报警类型" clearable>
+          <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmStatus" size="small" placeholder="报警状态" clearable>
+          <el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          size="small"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="报警开始时间"
+          end-placeholder="报警结束时间"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="130">
           <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
             <el-button type="text" size="small" @click="showDetail(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>
     <alarm-detail v-show="dialogFormVisible" ref="alarmdetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -123,7 +102,21 @@
       dialogFormVisible: false,
       alarmStatusList: [{ name: '正在报警', value: '1' }, { name: '已取消', value: '2' }], // 报警状态列表
       alarmTypeList: [],
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   watch: {
@@ -171,19 +164,15 @@
     },
     clearInput() {
       this.listQuery = {
-        name: '', // 姓名
-        sex: '', // 性别
-        nation: '', // 民族
-        collReason: '', // 采集原因
-        cardType: '', // 证件类型
-        idCardNo: '', // 证件号码
-        alarmReason: '', // 报警原因
-        startTime: '', // 开始时间
-        endTime: '', // 结束时间
+        keyword: '', // 设备编号/设备名称
+        alarmType: '', // 报警类型
+        alarmStatus: '', // 报警状态
+        startTime: '', // 报警开始时间
+        endTime: '', // 报警结束时间
         offset: 1,
         limit: 20,
-        sort: '',
-        order: ''
+        sort: 'alarmTime',
+        order: 'desc'
       }
       this.timeRange = []
       this.fetchData(false)
@@ -194,18 +183,13 @@
         this.alarmTypeList = response.data
       })
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }
diff --git a/src/views/alarmManage/listAlarmNow.vue b/src/views/alarmManage/listAlarmNow.vue
index c48b60a..d98b641 100644
--- a/src/views/alarmManage/listAlarmNow.vue
+++ b/src/views/alarmManage/listAlarmNow.vue
@@ -1,73 +1,47 @@
 <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-form-item>
-              <el-input v-model.trim="listQuery.keyword" placeholder="设备编号/设备名称" clearable/>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmType" placeholder="报警类型" clearable>
-                <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <!--<el-form-item>-->
-            <!--<el-select v-model="listQuery.alarmStatus" placeholder="报警状态" clearable>-->
-            <!--<el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>-->
-            <!--</el-select>-->
-            <!--</el-form-item>-->
-            <el-form-item class="selectForm-container-item" prop="startTime">
-              <el-date-picker
-                v-model="timeRange"
-                type="datetimerange"
-                range-separator="至"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                start-placeholder="报警开始时间"
-                end-placeholder="报警结束时间"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
-        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="设备编号/设备名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmType" size="small" placeholder="报警类型" clearable>
+          <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          size="small"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="报警开始时间"
+          end-placeholder="报警结束时间"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
-            <span>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" align="center" width="130">
-          <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
             <el-button type="text" size="small" @click="showDetail(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>
     <alarm-detail v-show="dialogFormVisible" ref="alarmdetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -123,7 +97,21 @@
       dialogFormVisible: false,
       alarmStatusList: [{ name: '正在报警', value: '1' }, { name: '已取消', value: '2' }], // 报警状态列表
       alarmTypeList: [],
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   watch: {
@@ -171,15 +159,11 @@
     },
     clearInput() {
       this.listQuery = {
-        name: '', // 姓名
-        sex: '', // 性别
-        nation: '', // 民族
-        collReason: '', // 采集原因
-        cardType: '', // 证件类型
-        idCardNo: '', // 证件号码
-        alarmReason: '', // 报警原因
-        startTime: '', // 开始时间
-        endTime: '', // 结束时间
+        keyword: '', // 设备编号/设备名称
+        alarmType: '', // 报警类型
+        alarmStatus: '1', // 报警状态
+        startTime: '', // 报警开始时间
+        endTime: '', // 报警结束时间
         offset: 1,
         limit: 20,
         sort: '',
@@ -194,18 +178,13 @@
         this.alarmTypeList = response.data
       })
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }
diff --git a/src/views/deviceManage/busCircuit.vue b/src/views/deviceManage/busCircuit.vue
index 2e1f872..7c9c804 100644
--- a/src/views/deviceManage/busCircuit.vue
+++ b/src/views/deviceManage/busCircuit.vue
@@ -1,77 +1,48 @@
 <!--回路列表-->
 <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-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.lampboxId" placeholder="所属灯箱" filterable clearable>
-                  <el-option v-for="item in boxList" :key="item.id" :label="item.lampboxName" :value="item.id"/>
-                </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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/circuit/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-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/circuit/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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.lampboxId" size="small" placeholder="所属灯箱" filterable clearable>
+          <el-option v-for="item in boxList" :key="item.id" :label="item.lampboxName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <!--<template slot="preColumns">-->
+      <!--<el-table-column align="center" type="selection" width="55"/>-->
+      <!--</template>-->
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <el-table-column label="操作" align="center" width="160">
-          <template slot-scope="scope">
-            <el-button v-if="hasPerm('/circuit/edit')" type="text" size="small" @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-circuit ref="editCircuit" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -128,7 +99,21 @@
       multipleSelection: [], // 多选选中项
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -253,17 +238,13 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/busController.vue b/src/views/deviceManage/busController.vue
index 49789c4..4646bf2 100644
--- a/src/views/deviceManage/busController.vue
+++ b/src/views/deviceManage/busController.vue
@@ -1,98 +1,67 @@
 <!--设备列表-->
 <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>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.controllerCode" size="small" placeholder="控制器编号" clearable />
+      </search-item>
+      <search-item/>
+      <search-item>
+        <el-select v-model="listQuery.controllerType" size="small" 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" size="small" placeholder="所属组织"/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" 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
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="selectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <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>
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <!--<template slot="preColumns">-->
+      <!--<el-table-column align="center" type="selection" width="55"/>-->
+      <!--</template>-->
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <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>
@@ -152,7 +121,21 @@
       statusList: [{ value: '1', name: '在线' }, { value: '0', name: '离线' }],
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -303,21 +286,17 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
-    handleSelectionChange(val) {
+    selectionChange(val) {
       this.multipleSelection = val
     }
   }
diff --git a/src/views/deviceManage/busGroup.vue b/src/views/deviceManage/busGroup.vue
index 9f85789..a35646b 100644
--- a/src/views/deviceManage/busGroup.vue
+++ b/src/views/deviceManage/busGroup.vue
@@ -1,80 +1,48 @@
 <!--灯箱列表-->
 <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.keyword" placeholder="分组名称" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.deviceType" placeholder="设备类型" clearable @change="fetchData">
-                  <el-option v-for="item in groupList" :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="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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/lampbox/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-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column 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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="分组名称" clearable />
+      </search-item>
+      <search-item/>
+      <search-item>
+        <el-select v-model="listQuery.deviceType" size="small" placeholder="设备类型" clearable @change="fetchData">
+          <el-option v-for="item in groupList" :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" size="small" placeholder="所属组织"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <el-table-column label="操作" align="center" width="160">
-          <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>-->
-            <el-button type="text" size="small" @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-Group ref="editGroup" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -132,7 +100,21 @@
       multipleSelection: [], // 多选选中项
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -249,17 +231,13 @@
         this.listLoading = false
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/busLamp.vue b/src/views/deviceManage/busLamp.vue
index 3450479..c480b30 100644
--- a/src/views/deviceManage/busLamp.vue
+++ b/src/views/deviceManage/busLamp.vue
@@ -1,104 +1,68 @@
 <!--路灯列表-->
 <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.keyword" placeholder="关键词" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.lampType" placeholder="路灯类型" clearable>
-                  <el-option v-for="item in typeList" :key="item.id" :label="item.typeName" :value="item.id"/>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </el-select>
-              </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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/lamp/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>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/lamp/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>
-        <!--操作列-->
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="关键词" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.lampType" size="small" placeholder="路灯类型" clearable>
+          <el-option v-for="item in typeList" :key="item.id" :label="item.typeName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" 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
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <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>
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
             <el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>
-            <el-button v-if="hasPerm('/lamp/edit')" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
-
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
             <el-button v-if="hasPerm('/lamp/remoteOn')" type="text" size="small">开灯</el-button>
             <el-button v-if="hasPerm('/lamp/remoteOff')" type="text" size="small">关灯</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-Lamp ref="editLamp" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -175,7 +139,21 @@
       statusList: [{ value: '1', name: '开灯' }, { value: '2', name: '关灯' }, { value: '3', name: '报警' }, { value: '4', name: '离线' }],
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -338,17 +316,13 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/busLampbox.vue b/src/views/deviceManage/busLampbox.vue
index 292c3a5..7763fac 100644
--- a/src/views/deviceManage/busLampbox.vue
+++ b/src/views/deviceManage/busLampbox.vue
@@ -1,46 +1,34 @@
 <!--灯箱列表-->
 <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.boxName" placeholder="灯箱名称" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/lampbox/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-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/lampbox/delete')" align="center" type="selection" width="55"/>
-        <!--序号列-->
-        <el-table-column :index="indexMethod" align="center" type="index" label="#" width="55"/>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.boxName" size="small" placeholder="灯箱名称" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
         <!--内容列-->
         <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">
@@ -55,30 +43,18 @@
             </div>
           </template>
         </el-table-column>
-        <!--操作列-->
+      </template>
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
             <el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>
-            <el-button v-if="hasPerm('/lampbox/edit')" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
+            <el-button type="text" size="small" @click.stop="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-Lampbox ref="editLampbox" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -144,7 +120,21 @@
       multipleSelection: [], // 多选选中项
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -277,6 +267,15 @@
       this.listQuery.limit = val
       this.fetchData()
     },
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
+    },
     // 改变当前页
     handleCurrentChange(val) {
       this.listQuery.offset = val
diff --git a/src/views/deviceManage/busLamppost.vue b/src/views/deviceManage/busLamppost.vue
index 92833a0..c193813 100644
--- a/src/views/deviceManage/busLamppost.vue
+++ b/src/views/deviceManage/busLamppost.vue
@@ -1,100 +1,65 @@
 <!--灯杆列表-->
 <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.keyword" placeholder="关键词" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.lamppostType" placeholder="路灯杆类型" clearable>
-                  <el-option v-for="item in typeList" :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">
-                <el-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </el-select>
-              </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('/lamppost/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>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/lamppost/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>
-        <!--操作列-->
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="关键词" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.lamppostType" size="small" placeholder="路灯杆类型" clearable>
+          <el-option v-for="item in typeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" 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
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <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>
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
-            <el-button v-if="hasPerm('/lamppost/edit')" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
+            <el-button type="text" size="small" @click.stop="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-Lamppost ref="editLamppost" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -161,7 +126,21 @@
       statusList: [{ value: '1', name: '开灯' }, { value: '2', name: '关灯' }, { value: '3', name: '报警' }, { value: '4', name: '离线' }],
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -320,17 +299,13 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/editCircuit.vue b/src/views/deviceManage/editCircuit.vue
index 9e9dd03..a362483 100644
--- a/src/views/deviceManage/editCircuit.vue
+++ b/src/views/deviceManage/editCircuit.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="cirForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="cirForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="回路编号" prop="circuitCode">
diff --git a/src/views/deviceManage/editController.vue b/src/views/deviceManage/editController.vue
index 7bc786f..444c835 100644
--- a/src/views/deviceManage/editController.vue
+++ b/src/views/deviceManage/editController.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="controllerForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="controllerForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="控制器编号" prop="controllerCode">
diff --git a/src/views/deviceManage/editGroup.vue b/src/views/deviceManage/editGroup.vue
index de9b88b..403d605 100644
--- a/src/views/deviceManage/editGroup.vue
+++ b/src/views/deviceManage/editGroup.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="groupForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="groupForm" size="small" label-well-code="right" label-width="110px">
       <el-row :span="24">
         <el-form-item label="分组名称" prop="groupName">
           <el-input v-model.trim="groupForm.groupName" :readonly="!isEditMode" clearable type="text" />
diff --git a/src/views/deviceManage/editLamp.vue b/src/views/deviceManage/editLamp.vue
index 3d45138..faf37d5 100644
--- a/src/views/deviceManage/editLamp.vue
+++ b/src/views/deviceManage/editLamp.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="lampForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="lampForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="路灯编号" prop="lampCode">
diff --git a/src/views/deviceManage/editLampbox.vue b/src/views/deviceManage/editLampbox.vue
index bd3a537..a4a8ea7 100644
--- a/src/views/deviceManage/editLampbox.vue
+++ b/src/views/deviceManage/editLampbox.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="boxForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="boxForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="灯箱编号" prop="lampboxCode">
diff --git a/src/views/deviceManage/editLamppost.vue b/src/views/deviceManage/editLamppost.vue
index 67a3a6f..a384319 100644
--- a/src/views/deviceManage/editLamppost.vue
+++ b/src/views/deviceManage/editLamppost.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="postForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="postForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="路灯杆编号" prop="lamppostCode">
diff --git a/src/views/deviceManage/listLog.vue b/src/views/deviceManage/listLog.vue
index 1d00e1c..5ab9a95 100644
--- a/src/views/deviceManage/listLog.vue
+++ b/src/views/deviceManage/listLog.vue
@@ -1,36 +1,32 @@
 <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-form-item>
-              <el-input v-model.trim="listQuery.devcode" placeholder="设备编号" clearable/>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.status" placeholder="下发状态" filterable clearable>
-                <el-option v-for="item in statusList" :key="item.name" :label="item.name" :value="item.name"/>
-              </el-select>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button class="edit_btn" size="small" @click="sendAll">全部设备下发</el-button>
-          <el-button class="edit_btn" size="small" @click="send">设备下发</el-button>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" :row-style="{height: '47px'}" class="table" border @selection-change="handleSelectionChange">
-        <el-table-column align="center" type="selection" width="55"/>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.devcode" size="small" placeholder="设备编号" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" placeholder="下发状态" filterable clearable>
+          <el-option v-for="item in statusList" :key="item.name" :label="item.name" :value="item.name"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button class="edit_btn" size="small" @click="sendAll">全部设备下发</el-button>
+        <el-button class="edit_btn" size="small" @click="send">设备下发</el-button>
+      </template>
+      <template slot="columns">
         <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">
             <div v-if="column.value === 'channel1'">
@@ -50,22 +46,9 @@
             </div>
           </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>
-  </div>
+      </template>
+    </normal-table>
+  </app-container>
 </template>
 
 <script>
@@ -151,7 +134,21 @@
       alarmStatusList: [{ name: '正在报警', value: '1' }, { name: '已取消', value: '2' }], // 报警状态列表
       statusList: [{ name: '未下发' }, { name: '已下发' }],
       alarmTypeList: [],
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -262,18 +259,13 @@
       this.timeRange = []
       this.fetchData(false)
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/example/tableExample.vue b/src/views/example/tableExample.vue
index 2d54fad..e8cd106 100644
--- a/src/views/example/tableExample.vue
+++ b/src/views/example/tableExample.vue
@@ -139,7 +139,7 @@
           text: '数据列表' // 标题名称
         },
         options: {
-          needIndex: false // 是否需要序号列
+          needIndex: true // 是否需要序号列
         },
         toolsOption: {
           selectColumns: false, // 是否需要筛选列
diff --git a/src/views/report/boxData.vue b/src/views/report/boxData.vue
index 2e04e4b..5faeff7 100644
--- a/src/views/report/boxData.vue
+++ b/src/views/report/boxData.vue
@@ -1,25 +1,50 @@
 <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-form-item class="selectForm-container-item">
-              <el-input v-model.trim="listQuery.keyword" placeholder="灯箱编号/灯箱名称" clearable/>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item">
-              <el-select v-model="listQuery.groupId" placeholder="设备组" clearable>
-                <el-option v-for="item in groupList" :key="item.id" :label="item.groupName" :value="item.id"/>
-              </el-select>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-      <div class="clearfloat"/>
-    </div>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="灯箱编号/灯箱名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.groupId" size="small" placeholder="设备组" clearable>
+          <el-option v-for="item in groupList" :key="item.id" :label="item.groupName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
+        <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">
+            <div v-if="column.value === 'A'">
+              <span v-html="allNum(scope.row.electricityA,scope.row.voltageA,scope.row.powerA)"/>
+            </div>
+            <div v-else-if="column.value === 'B'">
+              <span v-html="allNum(scope.row.electricityB,scope.row.voltageA,scope.row.powerB)"/>
+            </div>
+            <div v-else-if="column.value === 'C'">
+              <span v-html="allNum(scope.row.electricityC,scope.row.voltageA,scope.row.powerC)"/>
+            </div>
+            <div v-else>
+              <span>{{ scope.row[column.value] }}</span>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" width="130">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click="showHistory(scope.row)">查看历史</el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
     <!--查询结果Table显示-->
     <div>
       <el-row class="table-title">
@@ -43,29 +68,10 @@
             </div>
           </template>
         </el-table-column>
-        <el-table-column label="操作" align="center" width="130">
-          <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
-            <el-button type="text" size="small" @click="showHistory(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>
     <box-history v-show="dialogFormVisible" ref="boxhistory"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -121,7 +127,21 @@
       listLoading: true, // 列表加载
       dialogFormVisible: false,
       alarmReasonList: [], // 报警原因列表
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -177,18 +197,13 @@
         this.groupList = response.data
       })
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }
diff --git a/src/views/report/boxHistory.vue b/src/views/report/boxHistory.vue
index e63fb94..c5cf8ca 100644
--- a/src/views/report/boxHistory.vue
+++ b/src/views/report/boxHistory.vue
@@ -2,7 +2,7 @@
   <div class="app-container">
     <!--筛选条件-->
     <el-dialog :visible.sync="dialogFormVisible" :title="title" append-to-body>
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
+      <el-form ref="selectForm" :inline="true" :model="listQuery" size="small" class="form-container">
         <el-form-item class="selectForm-container-item" prop="startTime">
           <el-date-picker
             v-model="timeRange"
@@ -19,7 +19,7 @@
         <el-row class="table-title">
           <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
         </el-row>
-        <el-table v-loading="listLoading" :data="list" class="table" height="300px" border>
+        <el-table v-loading="listLoading" :data="list" class="table" size="small" height="300px" border>
           <el-table-column :index="indexMethod" label="序号" align="center" type="index" width="55" ></el-table-column>
           <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">

diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 5077bef..3fd3f33 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -58,6 +58,8 @@
       <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns"/>
+        <!--复选框列-->
+        <el-table-column v-if="options && options.needMultSelect" align="center" type="selection" width="55"/>
         <!--序号列-->
         <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
         <!--内容列, 若columns存在且长度大于0-->
@@ -140,7 +142,8 @@
       type: Object,
       default: function() {
         return {
-          needIndex: true // 是否需要序号列
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
         }
       }
     }, // 配置项
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
index 1175911..b5e8442 100644
--- a/src/components/SearchArea/SearchArea.vue
+++ b/src/components/SearchArea/SearchArea.vue
@@ -16,6 +16,7 @@
       <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
       <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
       <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns-seperate"/>
     </div>
     <!-- 弹出框式高级检索 -->
     <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
index 84bdb9f..c192d79 100644
--- a/src/layout/components/AppHeader.vue
+++ b/src/layout/components/AppHeader.vue
@@ -1,6 +1,14 @@
 <template>
   <el-header class="app-header">
     <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown v-if="showChangeSys" class="systemSelect" size="medium" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
     <el-dropdown class="dropdown-container" trigger="click">
       <div class="dropdown-wrapper">
         <span style="line-height:50px;">欢迎您，{{ name }}</span>
@@ -33,6 +41,7 @@
   data() {
     return {
       title: this.baseConfig.title, // 标题
+      showChangeSys: !this.baseConfig.singleSys, // 是否显示切换系统菜单
       name: this.$store.getters.name, // 用户姓名
       showSetPwd: false // 是否显示修改密码按钮
     }
@@ -40,7 +49,9 @@
   computed: {
     ...mapGetters([
       'sidebar',
-      'avatar'
+      'avatar',
+      'currentSystem',
+      'systems'
     ])
   },
   methods: {
@@ -55,6 +66,38 @@
     resetPwd() {
       this.showSetPwd = true
       this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      const url = this.baseConfig.mainPage
+      window.location.href = url
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      const params1 = `?token=${this.$store.getters.token}`
+      const params = `?sys=${command.name}&url=${command.url}&code=${command.code}&token=${this.$store.getters.token}`
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params1
+        } else {
+          window.open(command.url + params1, '_blank')
+        }
+      } else {
+        // 取token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = this.baseConfig.mainPage + command.url + params
+        } else {
+          window.open(this.baseConfig.mainPage + command.url + params, '_blank')
+        }
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
     }
   }
 }
diff --git a/src/permission.js b/src/permission.js
index 69e8233..637373e 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -26,20 +26,13 @@
           // 设置当前子系统为基础资源子系统
           const currentSys = {
             code: 'baseResourse',
-            id: '1189107859077373285',
-            ismenu: '0',
-            levels: 1,
-            name: '智慧照明子系统',
-            num: 0,
-            parentId: '0',
-            resourceType: '02',
-            url: '/baseResourse'
+            name: '智慧照明子系统'
           }
           // 将当前系统信息保存在localStorage中
           store.commit('SET_SYSTEM', currentSys)
           // 远程访问获取权限列表（菜单&按钮）
           store.dispatch('GetMenus', currentSys).then(() => {
-            store.commit('SET_CHANGEFLAG', '0')
+            // store.commit('SET_CHANGEFLAG', '0')
             router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
             next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
           })
diff --git a/src/router/index.js b/src/router/index.js
index 32f93ef..b558038 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -49,21 +49,22 @@
   // 404错误页面
   { path: '/404', component: () => import('@/views/errorPage/404'), hidden: true },
   // 401 错误页面
-  { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
-  // 主页
-  {
-    path: '/',
-    component: Layout,
-    redirect: 'dashboard',
-    name: 'Dashboard',
-    // hidden: true,
-    children: [{
-      path: 'dashboard',
-      name: 'Dashboard',
-      component: () => import('@/views/dashboard/index'),
-      meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
-    }]
-  }
+  { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true }
+  // { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
+  // // 主页
+  // {
+  //   path: '/',
+  //   component: Layout,
+  //   redirect: 'dashboard',
+  //   name: 'Dashboard',
+  //   // hidden: true,
+  //   children: [{
+  //     path: 'dashboard',
+  //     name: 'Dashboard',
+  //     component: () => import('@/views/dashboard/index'),
+  //     meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
+  //   }]
+  // }
 ]
 // 实例化vue的时候直挂载constantRouter
 export default new Router({
diff --git a/src/views/alarmManage/alarmRule.vue b/src/views/alarmManage/alarmRule.vue
index 888a4d1..11469a2 100644
--- a/src/views/alarmManage/alarmRule.vue
+++ b/src/views/alarmManage/alarmRule.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
       <el-tab-pane label="路灯" name="lamp">
         <lamp-type-list ref="lamp"/>
@@ -8,7 +8,7 @@
         <lampbox-type-list ref="box"/>
       </el-tab-pane>
     </el-tabs>
-  </div>
+  </app-container>
 </template>
 
 <script>
diff --git a/src/views/alarmManage/components/alarmDetail.vue b/src/views/alarmManage/components/alarmDetail.vue
index 9c68377..d598779 100644
--- a/src/views/alarmManage/components/alarmDetail.vue
+++ b/src/views/alarmManage/components/alarmDetail.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :close-on-click-modal="false" :visible.sync="dialogFormVisible" title="报警详情" append-to-body>
-    <el-form ref="dataForm" :model="alarmForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :model="alarmForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="10">
           <el-form-item label="设备名称" prop="deviceName">
diff --git a/src/views/alarmManage/lampType/editLampType.vue b/src/views/alarmManage/lampType/editLampType.vue
index 8c3e37a..8e5fc23 100644
--- a/src/views/alarmManage/lampType/editLampType.vue
+++ b/src/views/alarmManage/lampType/editLampType.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="typeForm" label-well-code="right" label-width="200px">
+    <el-form ref="dataForm" :rules="rules" :model="typeForm" size="small" label-well-code="right" label-width="200px">
       <el-row :gutter="20">
         <el-col :span="20">
           <el-form-item label="路灯类型" prop="typeName">
diff --git a/src/views/alarmManage/lampType/lampTypeList.vue b/src/views/alarmManage/lampType/lampTypeList.vue
index f8547ed..f10c63b 100644
--- a/src/views/alarmManage/lampType/lampTypeList.vue
+++ b/src/views/alarmManage/lampType/lampTypeList.vue
@@ -8,12 +8,11 @@
           <el-row>
             <el-col :span="4">
               <el-form-item class="selectForm-container-item">
-                <el-input v-model.trim="listQuery.typeName" placeholder="类型名称" clearable />
+                <el-input v-model.trim="listQuery.typeName" size="small" placeholder="类型名称" clearable />
               </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-button class="filter-item" type="primary" icon="el-icon-search" size="small" style="margin-top: 2px" @click="search">搜索</el-button>
             </el-col>
           </el-row>
         </el-form>
@@ -28,7 +27,7 @@
           <el-button class="edit_btn" size="small" @click="add">新增</el-button>
         </el-col>
       </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
+      <el-table v-loading="listLoading" :data="list" class="table" size="small" border @selection-change="handleSelectionChange">
         <!--拥有删除权限则显示复选框-->
         <el-table-column v-if="hasPerm('/lampType/delete')" align="center" type="selection" width="55"/>
         <!--序号列-->
diff --git a/src/views/alarmManage/lampboxType/editLampboxType.vue b/src/views/alarmManage/lampboxType/editLampboxType.vue
index 1b94960..ae3a7c1 100644
--- a/src/views/alarmManage/lampboxType/editLampboxType.vue
+++ b/src/views/alarmManage/lampboxType/editLampboxType.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="typeForm" label-well-code="right" label-width="200px">
+    <el-form ref="dataForm" :rules="rules" :model="typeForm" size="small" label-well-code="right" label-width="200px">
       <el-row :gutter="20">
         <el-col :span="20">
           <el-form-item label="灯箱类型" prop="typeName">
diff --git a/src/views/alarmManage/lampboxType/lampboxTypeList.vue b/src/views/alarmManage/lampboxType/lampboxTypeList.vue
index 7b68f20..f33dcbf 100644
--- a/src/views/alarmManage/lampboxType/lampboxTypeList.vue
+++ b/src/views/alarmManage/lampboxType/lampboxTypeList.vue
@@ -8,7 +8,7 @@
           <el-row>
             <el-col :span="4">
               <el-form-item class="selectForm-container-item">
-                <el-input v-model.trim="listQuery.typeName" placeholder="类型名称" clearable />
+                <el-input v-model.trim="listQuery.typeName" size="small" placeholder="类型名称" clearable />
               </el-form-item>
             </el-col>
 
diff --git a/src/views/alarmManage/listAlarm.vue b/src/views/alarmManage/listAlarm.vue
index 7571a0e..fe3e359 100644
--- a/src/views/alarmManage/listAlarm.vue
+++ b/src/views/alarmManage/listAlarm.vue
@@ -1,73 +1,52 @@
 <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-form-item>
-              <el-input v-model.trim="listQuery.keyword" placeholder="设备编号/设备名称" clearable/>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmType" placeholder="报警类型" clearable>
-                <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmStatus" placeholder="报警状态" clearable>
-                <el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item" prop="startTime">
-              <el-date-picker
-                v-model="timeRange"
-                type="datetimerange"
-                range-separator="至"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                start-placeholder="报警开始时间"
-                end-placeholder="报警结束时间"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
-        <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>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="设备编号/设备名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmType" size="small" placeholder="报警类型" clearable>
+          <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmStatus" size="small" placeholder="报警状态" clearable>
+          <el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          size="small"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="报警开始时间"
+          end-placeholder="报警结束时间"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="130">
           <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
             <el-button type="text" size="small" @click="showDetail(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>
     <alarm-detail v-show="dialogFormVisible" ref="alarmdetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -123,7 +102,21 @@
       dialogFormVisible: false,
       alarmStatusList: [{ name: '正在报警', value: '1' }, { name: '已取消', value: '2' }], // 报警状态列表
       alarmTypeList: [],
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   watch: {
@@ -171,19 +164,15 @@
     },
     clearInput() {
       this.listQuery = {
-        name: '', // 姓名
-        sex: '', // 性别
-        nation: '', // 民族
-        collReason: '', // 采集原因
-        cardType: '', // 证件类型
-        idCardNo: '', // 证件号码
-        alarmReason: '', // 报警原因
-        startTime: '', // 开始时间
-        endTime: '', // 结束时间
+        keyword: '', // 设备编号/设备名称
+        alarmType: '', // 报警类型
+        alarmStatus: '', // 报警状态
+        startTime: '', // 报警开始时间
+        endTime: '', // 报警结束时间
         offset: 1,
         limit: 20,
-        sort: '',
-        order: ''
+        sort: 'alarmTime',
+        order: 'desc'
       }
       this.timeRange = []
       this.fetchData(false)
@@ -194,18 +183,13 @@
         this.alarmTypeList = response.data
       })
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }
diff --git a/src/views/alarmManage/listAlarmNow.vue b/src/views/alarmManage/listAlarmNow.vue
index c48b60a..d98b641 100644
--- a/src/views/alarmManage/listAlarmNow.vue
+++ b/src/views/alarmManage/listAlarmNow.vue
@@ -1,73 +1,47 @@
 <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-form-item>
-              <el-input v-model.trim="listQuery.keyword" placeholder="设备编号/设备名称" clearable/>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmType" placeholder="报警类型" clearable>
-                <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <!--<el-form-item>-->
-            <!--<el-select v-model="listQuery.alarmStatus" placeholder="报警状态" clearable>-->
-            <!--<el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>-->
-            <!--</el-select>-->
-            <!--</el-form-item>-->
-            <el-form-item class="selectForm-container-item" prop="startTime">
-              <el-date-picker
-                v-model="timeRange"
-                type="datetimerange"
-                range-separator="至"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                start-placeholder="报警开始时间"
-                end-placeholder="报警结束时间"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
-        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="设备编号/设备名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmType" size="small" placeholder="报警类型" clearable>
+          <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          size="small"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="报警开始时间"
+          end-placeholder="报警结束时间"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
-            <span>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" align="center" width="130">
-          <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
             <el-button type="text" size="small" @click="showDetail(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>
     <alarm-detail v-show="dialogFormVisible" ref="alarmdetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -123,7 +97,21 @@
       dialogFormVisible: false,
       alarmStatusList: [{ name: '正在报警', value: '1' }, { name: '已取消', value: '2' }], // 报警状态列表
       alarmTypeList: [],
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   watch: {
@@ -171,15 +159,11 @@
     },
     clearInput() {
       this.listQuery = {
-        name: '', // 姓名
-        sex: '', // 性别
-        nation: '', // 民族
-        collReason: '', // 采集原因
-        cardType: '', // 证件类型
-        idCardNo: '', // 证件号码
-        alarmReason: '', // 报警原因
-        startTime: '', // 开始时间
-        endTime: '', // 结束时间
+        keyword: '', // 设备编号/设备名称
+        alarmType: '', // 报警类型
+        alarmStatus: '1', // 报警状态
+        startTime: '', // 报警开始时间
+        endTime: '', // 报警结束时间
         offset: 1,
         limit: 20,
         sort: '',
@@ -194,18 +178,13 @@
         this.alarmTypeList = response.data
       })
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }
diff --git a/src/views/deviceManage/busCircuit.vue b/src/views/deviceManage/busCircuit.vue
index 2e1f872..7c9c804 100644
--- a/src/views/deviceManage/busCircuit.vue
+++ b/src/views/deviceManage/busCircuit.vue
@@ -1,77 +1,48 @@
 <!--回路列表-->
 <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-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.lampboxId" placeholder="所属灯箱" filterable clearable>
-                  <el-option v-for="item in boxList" :key="item.id" :label="item.lampboxName" :value="item.id"/>
-                </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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/circuit/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-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/circuit/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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.lampboxId" size="small" placeholder="所属灯箱" filterable clearable>
+          <el-option v-for="item in boxList" :key="item.id" :label="item.lampboxName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <!--<template slot="preColumns">-->
+      <!--<el-table-column align="center" type="selection" width="55"/>-->
+      <!--</template>-->
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <el-table-column label="操作" align="center" width="160">
-          <template slot-scope="scope">
-            <el-button v-if="hasPerm('/circuit/edit')" type="text" size="small" @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-circuit ref="editCircuit" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -128,7 +99,21 @@
       multipleSelection: [], // 多选选中项
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -253,17 +238,13 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/busController.vue b/src/views/deviceManage/busController.vue
index 49789c4..4646bf2 100644
--- a/src/views/deviceManage/busController.vue
+++ b/src/views/deviceManage/busController.vue
@@ -1,98 +1,67 @@
 <!--设备列表-->
 <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>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.controllerCode" size="small" placeholder="控制器编号" clearable />
+      </search-item>
+      <search-item/>
+      <search-item>
+        <el-select v-model="listQuery.controllerType" size="small" 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" size="small" placeholder="所属组织"/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" 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
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="selectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <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>
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <!--<template slot="preColumns">-->
+      <!--<el-table-column align="center" type="selection" width="55"/>-->
+      <!--</template>-->
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <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>
@@ -152,7 +121,21 @@
       statusList: [{ value: '1', name: '在线' }, { value: '0', name: '离线' }],
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -303,21 +286,17 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
-    handleSelectionChange(val) {
+    selectionChange(val) {
       this.multipleSelection = val
     }
   }
diff --git a/src/views/deviceManage/busGroup.vue b/src/views/deviceManage/busGroup.vue
index 9f85789..a35646b 100644
--- a/src/views/deviceManage/busGroup.vue
+++ b/src/views/deviceManage/busGroup.vue
@@ -1,80 +1,48 @@
 <!--灯箱列表-->
 <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.keyword" placeholder="分组名称" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.deviceType" placeholder="设备类型" clearable @change="fetchData">
-                  <el-option v-for="item in groupList" :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="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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/lampbox/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-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column 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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="分组名称" clearable />
+      </search-item>
+      <search-item/>
+      <search-item>
+        <el-select v-model="listQuery.deviceType" size="small" placeholder="设备类型" clearable @change="fetchData">
+          <el-option v-for="item in groupList" :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" size="small" placeholder="所属组织"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <el-table-column label="操作" align="center" width="160">
-          <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>-->
-            <el-button type="text" size="small" @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-Group ref="editGroup" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -132,7 +100,21 @@
       multipleSelection: [], // 多选选中项
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -249,17 +231,13 @@
         this.listLoading = false
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/busLamp.vue b/src/views/deviceManage/busLamp.vue
index 3450479..c480b30 100644
--- a/src/views/deviceManage/busLamp.vue
+++ b/src/views/deviceManage/busLamp.vue
@@ -1,104 +1,68 @@
 <!--路灯列表-->
 <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.keyword" placeholder="关键词" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.lampType" placeholder="路灯类型" clearable>
-                  <el-option v-for="item in typeList" :key="item.id" :label="item.typeName" :value="item.id"/>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </el-select>
-              </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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/lamp/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>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/lamp/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>
-        <!--操作列-->
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="关键词" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.lampType" size="small" placeholder="路灯类型" clearable>
+          <el-option v-for="item in typeList" :key="item.id" :label="item.typeName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" 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
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <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>
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
             <el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>
-            <el-button v-if="hasPerm('/lamp/edit')" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
-
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
             <el-button v-if="hasPerm('/lamp/remoteOn')" type="text" size="small">开灯</el-button>
             <el-button v-if="hasPerm('/lamp/remoteOff')" type="text" size="small">关灯</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-Lamp ref="editLamp" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -175,7 +139,21 @@
       statusList: [{ value: '1', name: '开灯' }, { value: '2', name: '关灯' }, { value: '3', name: '报警' }, { value: '4', name: '离线' }],
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -338,17 +316,13 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/busLampbox.vue b/src/views/deviceManage/busLampbox.vue
index 292c3a5..7763fac 100644
--- a/src/views/deviceManage/busLampbox.vue
+++ b/src/views/deviceManage/busLampbox.vue
@@ -1,46 +1,34 @@
 <!--灯箱列表-->
 <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.boxName" placeholder="灯箱名称" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/lampbox/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-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/lampbox/delete')" align="center" type="selection" width="55"/>
-        <!--序号列-->
-        <el-table-column :index="indexMethod" align="center" type="index" label="#" width="55"/>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.boxName" size="small" placeholder="灯箱名称" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
         <!--内容列-->
         <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">
@@ -55,30 +43,18 @@
             </div>
           </template>
         </el-table-column>
-        <!--操作列-->
+      </template>
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
             <el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>
-            <el-button v-if="hasPerm('/lampbox/edit')" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
+            <el-button type="text" size="small" @click.stop="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-Lampbox ref="editLampbox" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -144,7 +120,21 @@
       multipleSelection: [], // 多选选中项
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -277,6 +267,15 @@
       this.listQuery.limit = val
       this.fetchData()
     },
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
+    },
     // 改变当前页
     handleCurrentChange(val) {
       this.listQuery.offset = val
diff --git a/src/views/deviceManage/busLamppost.vue b/src/views/deviceManage/busLamppost.vue
index 92833a0..c193813 100644
--- a/src/views/deviceManage/busLamppost.vue
+++ b/src/views/deviceManage/busLamppost.vue
@@ -1,100 +1,65 @@
 <!--灯杆列表-->
 <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.keyword" placeholder="关键词" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.lamppostType" placeholder="路灯杆类型" clearable>
-                  <el-option v-for="item in typeList" :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">
-                <el-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </el-select>
-              </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('/lamppost/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>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/lamppost/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>
-        <!--操作列-->
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="关键词" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.lamppostType" size="small" placeholder="路灯杆类型" clearable>
+          <el-option v-for="item in typeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" 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
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <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>
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
-            <el-button v-if="hasPerm('/lamppost/edit')" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
+            <el-button type="text" size="small" @click.stop="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-Lamppost ref="editLamppost" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -161,7 +126,21 @@
       statusList: [{ value: '1', name: '开灯' }, { value: '2', name: '关灯' }, { value: '3', name: '报警' }, { value: '4', name: '离线' }],
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -320,17 +299,13 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/editCircuit.vue b/src/views/deviceManage/editCircuit.vue
index 9e9dd03..a362483 100644
--- a/src/views/deviceManage/editCircuit.vue
+++ b/src/views/deviceManage/editCircuit.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="cirForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="cirForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="回路编号" prop="circuitCode">
diff --git a/src/views/deviceManage/editController.vue b/src/views/deviceManage/editController.vue
index 7bc786f..444c835 100644
--- a/src/views/deviceManage/editController.vue
+++ b/src/views/deviceManage/editController.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="controllerForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="controllerForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="控制器编号" prop="controllerCode">
diff --git a/src/views/deviceManage/editGroup.vue b/src/views/deviceManage/editGroup.vue
index de9b88b..403d605 100644
--- a/src/views/deviceManage/editGroup.vue
+++ b/src/views/deviceManage/editGroup.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="groupForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="groupForm" size="small" label-well-code="right" label-width="110px">
       <el-row :span="24">
         <el-form-item label="分组名称" prop="groupName">
           <el-input v-model.trim="groupForm.groupName" :readonly="!isEditMode" clearable type="text" />
diff --git a/src/views/deviceManage/editLamp.vue b/src/views/deviceManage/editLamp.vue
index 3d45138..faf37d5 100644
--- a/src/views/deviceManage/editLamp.vue
+++ b/src/views/deviceManage/editLamp.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="lampForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="lampForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="路灯编号" prop="lampCode">
diff --git a/src/views/deviceManage/editLampbox.vue b/src/views/deviceManage/editLampbox.vue
index bd3a537..a4a8ea7 100644
--- a/src/views/deviceManage/editLampbox.vue
+++ b/src/views/deviceManage/editLampbox.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="boxForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="boxForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="灯箱编号" prop="lampboxCode">
diff --git a/src/views/deviceManage/editLamppost.vue b/src/views/deviceManage/editLamppost.vue
index 67a3a6f..a384319 100644
--- a/src/views/deviceManage/editLamppost.vue
+++ b/src/views/deviceManage/editLamppost.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="postForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="postForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="路灯杆编号" prop="lamppostCode">
diff --git a/src/views/deviceManage/listLog.vue b/src/views/deviceManage/listLog.vue
index 1d00e1c..5ab9a95 100644
--- a/src/views/deviceManage/listLog.vue
+++ b/src/views/deviceManage/listLog.vue
@@ -1,36 +1,32 @@
 <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-form-item>
-              <el-input v-model.trim="listQuery.devcode" placeholder="设备编号" clearable/>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.status" placeholder="下发状态" filterable clearable>
-                <el-option v-for="item in statusList" :key="item.name" :label="item.name" :value="item.name"/>
-              </el-select>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button class="edit_btn" size="small" @click="sendAll">全部设备下发</el-button>
-          <el-button class="edit_btn" size="small" @click="send">设备下发</el-button>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" :row-style="{height: '47px'}" class="table" border @selection-change="handleSelectionChange">
-        <el-table-column align="center" type="selection" width="55"/>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.devcode" size="small" placeholder="设备编号" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" placeholder="下发状态" filterable clearable>
+          <el-option v-for="item in statusList" :key="item.name" :label="item.name" :value="item.name"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button class="edit_btn" size="small" @click="sendAll">全部设备下发</el-button>
+        <el-button class="edit_btn" size="small" @click="send">设备下发</el-button>
+      </template>
+      <template slot="columns">
         <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">
             <div v-if="column.value === 'channel1'">
@@ -50,22 +46,9 @@
             </div>
           </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>
-  </div>
+      </template>
+    </normal-table>
+  </app-container>
 </template>
 
 <script>
@@ -151,7 +134,21 @@
       alarmStatusList: [{ name: '正在报警', value: '1' }, { name: '已取消', value: '2' }], // 报警状态列表
       statusList: [{ name: '未下发' }, { name: '已下发' }],
       alarmTypeList: [],
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -262,18 +259,13 @@
       this.timeRange = []
       this.fetchData(false)
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/example/tableExample.vue b/src/views/example/tableExample.vue
index 2d54fad..e8cd106 100644
--- a/src/views/example/tableExample.vue
+++ b/src/views/example/tableExample.vue
@@ -139,7 +139,7 @@
           text: '数据列表' // 标题名称
         },
         options: {
-          needIndex: false // 是否需要序号列
+          needIndex: true // 是否需要序号列
         },
         toolsOption: {
           selectColumns: false, // 是否需要筛选列
diff --git a/src/views/report/boxData.vue b/src/views/report/boxData.vue
index 2e04e4b..5faeff7 100644
--- a/src/views/report/boxData.vue
+++ b/src/views/report/boxData.vue
@@ -1,25 +1,50 @@
 <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-form-item class="selectForm-container-item">
-              <el-input v-model.trim="listQuery.keyword" placeholder="灯箱编号/灯箱名称" clearable/>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item">
-              <el-select v-model="listQuery.groupId" placeholder="设备组" clearable>
-                <el-option v-for="item in groupList" :key="item.id" :label="item.groupName" :value="item.id"/>
-              </el-select>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-      <div class="clearfloat"/>
-    </div>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="灯箱编号/灯箱名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.groupId" size="small" placeholder="设备组" clearable>
+          <el-option v-for="item in groupList" :key="item.id" :label="item.groupName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
+        <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">
+            <div v-if="column.value === 'A'">
+              <span v-html="allNum(scope.row.electricityA,scope.row.voltageA,scope.row.powerA)"/>
+            </div>
+            <div v-else-if="column.value === 'B'">
+              <span v-html="allNum(scope.row.electricityB,scope.row.voltageA,scope.row.powerB)"/>
+            </div>
+            <div v-else-if="column.value === 'C'">
+              <span v-html="allNum(scope.row.electricityC,scope.row.voltageA,scope.row.powerC)"/>
+            </div>
+            <div v-else>
+              <span>{{ scope.row[column.value] }}</span>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" width="130">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click="showHistory(scope.row)">查看历史</el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
     <!--查询结果Table显示-->
     <div>
       <el-row class="table-title">
@@ -43,29 +68,10 @@
             </div>
           </template>
         </el-table-column>
-        <el-table-column label="操作" align="center" width="130">
-          <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
-            <el-button type="text" size="small" @click="showHistory(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>
     <box-history v-show="dialogFormVisible" ref="boxhistory"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -121,7 +127,21 @@
       listLoading: true, // 列表加载
       dialogFormVisible: false,
       alarmReasonList: [], // 报警原因列表
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -177,18 +197,13 @@
         this.groupList = response.data
       })
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }
diff --git a/src/views/report/boxHistory.vue b/src/views/report/boxHistory.vue
index e63fb94..c5cf8ca 100644
--- a/src/views/report/boxHistory.vue
+++ b/src/views/report/boxHistory.vue
@@ -2,7 +2,7 @@
   <div class="app-container">
     <!--筛选条件-->
     <el-dialog :visible.sync="dialogFormVisible" :title="title" append-to-body>
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
+      <el-form ref="selectForm" :inline="true" :model="listQuery" size="small" class="form-container">
         <el-form-item class="selectForm-container-item" prop="startTime">
           <el-date-picker
             v-model="timeRange"
@@ -19,7 +19,7 @@
         <el-row class="table-title">
           <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
         </el-row>
-        <el-table v-loading="listLoading" :data="list" class="table" height="300px" border>
+        <el-table v-loading="listLoading" :data="list" class="table" size="small" height="300px" border>
           <el-table-column :index="indexMethod" label="序号" align="center" type="index" width="55" ></el-table-column>
           <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">
diff --git a/src/views/report/controllerData.vue b/src/views/report/controllerData.vue
index 5b7c360..ee81ba7 100644
--- a/src/views/report/controllerData.vue
+++ b/src/views/report/controllerData.vue
@@ -1,63 +1,40 @@
 <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-form-item class="selectForm-container-item">
-              <el-input v-model.trim="listQuery.keyword" placeholder="路灯编号/路灯名称" clearable/>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item">
-              <el-input v-model.trim="listQuery.controllerCode" placeholder="控制器编号" clearable/>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item">
-              <el-select v-model="listQuery.groupId" placeholder="设备组" clearable>
-                <el-option v-for="item in groupList" :key="item.id" :label="item.groupName" :value="item.id"/>
-              </el-select>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-      <div class="clearfloat"/>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="序号" width="55" align="center" type="index" />
-        <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>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="路灯编号/路灯名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.controllerCode" size="small" placeholder="控制器编号" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.groupId" size="small" placeholder="设备组" clearable>
+          <el-option v-for="item in groupList" :key="item.id" :label="item.groupName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="130">
           <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
             <el-button type="text" size="small" @click="showHistory(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>
     <history-data v-show="dialogFormVisible" ref="historydata"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -131,7 +108,21 @@
       listLoading: true, // 列表加载
       dialogFormVisible: false,
       alarmReasonList: [], // 报警原因列表
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -197,6 +188,15 @@
     handleCurrentChange(val) {
       this.listQuery.offset = val
       this.fetchData()
+    },
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
     }
   }
 }

diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 5077bef..3fd3f33 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -58,6 +58,8 @@
       <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns"/>
+        <!--复选框列-->
+        <el-table-column v-if="options && options.needMultSelect" align="center" type="selection" width="55"/>
         <!--序号列-->
         <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
         <!--内容列, 若columns存在且长度大于0-->
@@ -140,7 +142,8 @@
       type: Object,
       default: function() {
         return {
-          needIndex: true // 是否需要序号列
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
         }
       }
     }, // 配置项
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
index 1175911..b5e8442 100644
--- a/src/components/SearchArea/SearchArea.vue
+++ b/src/components/SearchArea/SearchArea.vue
@@ -16,6 +16,7 @@
       <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
       <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
       <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns-seperate"/>
     </div>
     <!-- 弹出框式高级检索 -->
     <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
index 84bdb9f..c192d79 100644
--- a/src/layout/components/AppHeader.vue
+++ b/src/layout/components/AppHeader.vue
@@ -1,6 +1,14 @@
 <template>
   <el-header class="app-header">
     <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown v-if="showChangeSys" class="systemSelect" size="medium" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
     <el-dropdown class="dropdown-container" trigger="click">
       <div class="dropdown-wrapper">
         <span style="line-height:50px;">欢迎您，{{ name }}</span>
@@ -33,6 +41,7 @@
   data() {
     return {
       title: this.baseConfig.title, // 标题
+      showChangeSys: !this.baseConfig.singleSys, // 是否显示切换系统菜单
       name: this.$store.getters.name, // 用户姓名
       showSetPwd: false // 是否显示修改密码按钮
     }
@@ -40,7 +49,9 @@
   computed: {
     ...mapGetters([
       'sidebar',
-      'avatar'
+      'avatar',
+      'currentSystem',
+      'systems'
     ])
   },
   methods: {
@@ -55,6 +66,38 @@
     resetPwd() {
       this.showSetPwd = true
       this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      const url = this.baseConfig.mainPage
+      window.location.href = url
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      const params1 = `?token=${this.$store.getters.token}`
+      const params = `?sys=${command.name}&url=${command.url}&code=${command.code}&token=${this.$store.getters.token}`
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params1
+        } else {
+          window.open(command.url + params1, '_blank')
+        }
+      } else {
+        // 取token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = this.baseConfig.mainPage + command.url + params
+        } else {
+          window.open(this.baseConfig.mainPage + command.url + params, '_blank')
+        }
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
     }
   }
 }
diff --git a/src/permission.js b/src/permission.js
index 69e8233..637373e 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -26,20 +26,13 @@
           // 设置当前子系统为基础资源子系统
           const currentSys = {
             code: 'baseResourse',
-            id: '1189107859077373285',
-            ismenu: '0',
-            levels: 1,
-            name: '智慧照明子系统',
-            num: 0,
-            parentId: '0',
-            resourceType: '02',
-            url: '/baseResourse'
+            name: '智慧照明子系统'
           }
           // 将当前系统信息保存在localStorage中
           store.commit('SET_SYSTEM', currentSys)
           // 远程访问获取权限列表（菜单&按钮）
           store.dispatch('GetMenus', currentSys).then(() => {
-            store.commit('SET_CHANGEFLAG', '0')
+            // store.commit('SET_CHANGEFLAG', '0')
             router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
             next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
           })
diff --git a/src/router/index.js b/src/router/index.js
index 32f93ef..b558038 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -49,21 +49,22 @@
   // 404错误页面
   { path: '/404', component: () => import('@/views/errorPage/404'), hidden: true },
   // 401 错误页面
-  { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
-  // 主页
-  {
-    path: '/',
-    component: Layout,
-    redirect: 'dashboard',
-    name: 'Dashboard',
-    // hidden: true,
-    children: [{
-      path: 'dashboard',
-      name: 'Dashboard',
-      component: () => import('@/views/dashboard/index'),
-      meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
-    }]
-  }
+  { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true }
+  // { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
+  // // 主页
+  // {
+  //   path: '/',
+  //   component: Layout,
+  //   redirect: 'dashboard',
+  //   name: 'Dashboard',
+  //   // hidden: true,
+  //   children: [{
+  //     path: 'dashboard',
+  //     name: 'Dashboard',
+  //     component: () => import('@/views/dashboard/index'),
+  //     meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
+  //   }]
+  // }
 ]
 // 实例化vue的时候直挂载constantRouter
 export default new Router({
diff --git a/src/views/alarmManage/alarmRule.vue b/src/views/alarmManage/alarmRule.vue
index 888a4d1..11469a2 100644
--- a/src/views/alarmManage/alarmRule.vue
+++ b/src/views/alarmManage/alarmRule.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
       <el-tab-pane label="路灯" name="lamp">
         <lamp-type-list ref="lamp"/>
@@ -8,7 +8,7 @@
         <lampbox-type-list ref="box"/>
       </el-tab-pane>
     </el-tabs>
-  </div>
+  </app-container>
 </template>
 
 <script>
diff --git a/src/views/alarmManage/components/alarmDetail.vue b/src/views/alarmManage/components/alarmDetail.vue
index 9c68377..d598779 100644
--- a/src/views/alarmManage/components/alarmDetail.vue
+++ b/src/views/alarmManage/components/alarmDetail.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :close-on-click-modal="false" :visible.sync="dialogFormVisible" title="报警详情" append-to-body>
-    <el-form ref="dataForm" :model="alarmForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :model="alarmForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="10">
           <el-form-item label="设备名称" prop="deviceName">
diff --git a/src/views/alarmManage/lampType/editLampType.vue b/src/views/alarmManage/lampType/editLampType.vue
index 8c3e37a..8e5fc23 100644
--- a/src/views/alarmManage/lampType/editLampType.vue
+++ b/src/views/alarmManage/lampType/editLampType.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="typeForm" label-well-code="right" label-width="200px">
+    <el-form ref="dataForm" :rules="rules" :model="typeForm" size="small" label-well-code="right" label-width="200px">
       <el-row :gutter="20">
         <el-col :span="20">
           <el-form-item label="路灯类型" prop="typeName">
diff --git a/src/views/alarmManage/lampType/lampTypeList.vue b/src/views/alarmManage/lampType/lampTypeList.vue
index f8547ed..f10c63b 100644
--- a/src/views/alarmManage/lampType/lampTypeList.vue
+++ b/src/views/alarmManage/lampType/lampTypeList.vue
@@ -8,12 +8,11 @@
           <el-row>
             <el-col :span="4">
               <el-form-item class="selectForm-container-item">
-                <el-input v-model.trim="listQuery.typeName" placeholder="类型名称" clearable />
+                <el-input v-model.trim="listQuery.typeName" size="small" placeholder="类型名称" clearable />
               </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-button class="filter-item" type="primary" icon="el-icon-search" size="small" style="margin-top: 2px" @click="search">搜索</el-button>
             </el-col>
           </el-row>
         </el-form>
@@ -28,7 +27,7 @@
           <el-button class="edit_btn" size="small" @click="add">新增</el-button>
         </el-col>
       </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
+      <el-table v-loading="listLoading" :data="list" class="table" size="small" border @selection-change="handleSelectionChange">
         <!--拥有删除权限则显示复选框-->
         <el-table-column v-if="hasPerm('/lampType/delete')" align="center" type="selection" width="55"/>
         <!--序号列-->
diff --git a/src/views/alarmManage/lampboxType/editLampboxType.vue b/src/views/alarmManage/lampboxType/editLampboxType.vue
index 1b94960..ae3a7c1 100644
--- a/src/views/alarmManage/lampboxType/editLampboxType.vue
+++ b/src/views/alarmManage/lampboxType/editLampboxType.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="typeForm" label-well-code="right" label-width="200px">
+    <el-form ref="dataForm" :rules="rules" :model="typeForm" size="small" label-well-code="right" label-width="200px">
       <el-row :gutter="20">
         <el-col :span="20">
           <el-form-item label="灯箱类型" prop="typeName">
diff --git a/src/views/alarmManage/lampboxType/lampboxTypeList.vue b/src/views/alarmManage/lampboxType/lampboxTypeList.vue
index 7b68f20..f33dcbf 100644
--- a/src/views/alarmManage/lampboxType/lampboxTypeList.vue
+++ b/src/views/alarmManage/lampboxType/lampboxTypeList.vue
@@ -8,7 +8,7 @@
           <el-row>
             <el-col :span="4">
               <el-form-item class="selectForm-container-item">
-                <el-input v-model.trim="listQuery.typeName" placeholder="类型名称" clearable />
+                <el-input v-model.trim="listQuery.typeName" size="small" placeholder="类型名称" clearable />
               </el-form-item>
             </el-col>
 
diff --git a/src/views/alarmManage/listAlarm.vue b/src/views/alarmManage/listAlarm.vue
index 7571a0e..fe3e359 100644
--- a/src/views/alarmManage/listAlarm.vue
+++ b/src/views/alarmManage/listAlarm.vue
@@ -1,73 +1,52 @@
 <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-form-item>
-              <el-input v-model.trim="listQuery.keyword" placeholder="设备编号/设备名称" clearable/>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmType" placeholder="报警类型" clearable>
-                <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmStatus" placeholder="报警状态" clearable>
-                <el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item" prop="startTime">
-              <el-date-picker
-                v-model="timeRange"
-                type="datetimerange"
-                range-separator="至"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                start-placeholder="报警开始时间"
-                end-placeholder="报警结束时间"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
-        <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>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="设备编号/设备名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmType" size="small" placeholder="报警类型" clearable>
+          <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmStatus" size="small" placeholder="报警状态" clearable>
+          <el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          size="small"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="报警开始时间"
+          end-placeholder="报警结束时间"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="130">
           <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
             <el-button type="text" size="small" @click="showDetail(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>
     <alarm-detail v-show="dialogFormVisible" ref="alarmdetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -123,7 +102,21 @@
       dialogFormVisible: false,
       alarmStatusList: [{ name: '正在报警', value: '1' }, { name: '已取消', value: '2' }], // 报警状态列表
       alarmTypeList: [],
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   watch: {
@@ -171,19 +164,15 @@
     },
     clearInput() {
       this.listQuery = {
-        name: '', // 姓名
-        sex: '', // 性别
-        nation: '', // 民族
-        collReason: '', // 采集原因
-        cardType: '', // 证件类型
-        idCardNo: '', // 证件号码
-        alarmReason: '', // 报警原因
-        startTime: '', // 开始时间
-        endTime: '', // 结束时间
+        keyword: '', // 设备编号/设备名称
+        alarmType: '', // 报警类型
+        alarmStatus: '', // 报警状态
+        startTime: '', // 报警开始时间
+        endTime: '', // 报警结束时间
         offset: 1,
         limit: 20,
-        sort: '',
-        order: ''
+        sort: 'alarmTime',
+        order: 'desc'
       }
       this.timeRange = []
       this.fetchData(false)
@@ -194,18 +183,13 @@
         this.alarmTypeList = response.data
       })
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }
diff --git a/src/views/alarmManage/listAlarmNow.vue b/src/views/alarmManage/listAlarmNow.vue
index c48b60a..d98b641 100644
--- a/src/views/alarmManage/listAlarmNow.vue
+++ b/src/views/alarmManage/listAlarmNow.vue
@@ -1,73 +1,47 @@
 <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-form-item>
-              <el-input v-model.trim="listQuery.keyword" placeholder="设备编号/设备名称" clearable/>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmType" placeholder="报警类型" clearable>
-                <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <!--<el-form-item>-->
-            <!--<el-select v-model="listQuery.alarmStatus" placeholder="报警状态" clearable>-->
-            <!--<el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>-->
-            <!--</el-select>-->
-            <!--</el-form-item>-->
-            <el-form-item class="selectForm-container-item" prop="startTime">
-              <el-date-picker
-                v-model="timeRange"
-                type="datetimerange"
-                range-separator="至"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                start-placeholder="报警开始时间"
-                end-placeholder="报警结束时间"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
-        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="设备编号/设备名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmType" size="small" placeholder="报警类型" clearable>
+          <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          size="small"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="报警开始时间"
+          end-placeholder="报警结束时间"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
-            <span>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" align="center" width="130">
-          <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
             <el-button type="text" size="small" @click="showDetail(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>
     <alarm-detail v-show="dialogFormVisible" ref="alarmdetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -123,7 +97,21 @@
       dialogFormVisible: false,
       alarmStatusList: [{ name: '正在报警', value: '1' }, { name: '已取消', value: '2' }], // 报警状态列表
       alarmTypeList: [],
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   watch: {
@@ -171,15 +159,11 @@
     },
     clearInput() {
       this.listQuery = {
-        name: '', // 姓名
-        sex: '', // 性别
-        nation: '', // 民族
-        collReason: '', // 采集原因
-        cardType: '', // 证件类型
-        idCardNo: '', // 证件号码
-        alarmReason: '', // 报警原因
-        startTime: '', // 开始时间
-        endTime: '', // 结束时间
+        keyword: '', // 设备编号/设备名称
+        alarmType: '', // 报警类型
+        alarmStatus: '1', // 报警状态
+        startTime: '', // 报警开始时间
+        endTime: '', // 报警结束时间
         offset: 1,
         limit: 20,
         sort: '',
@@ -194,18 +178,13 @@
         this.alarmTypeList = response.data
       })
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }
diff --git a/src/views/deviceManage/busCircuit.vue b/src/views/deviceManage/busCircuit.vue
index 2e1f872..7c9c804 100644
--- a/src/views/deviceManage/busCircuit.vue
+++ b/src/views/deviceManage/busCircuit.vue
@@ -1,77 +1,48 @@
 <!--回路列表-->
 <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-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.lampboxId" placeholder="所属灯箱" filterable clearable>
-                  <el-option v-for="item in boxList" :key="item.id" :label="item.lampboxName" :value="item.id"/>
-                </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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/circuit/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-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/circuit/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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.lampboxId" size="small" placeholder="所属灯箱" filterable clearable>
+          <el-option v-for="item in boxList" :key="item.id" :label="item.lampboxName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <!--<template slot="preColumns">-->
+      <!--<el-table-column align="center" type="selection" width="55"/>-->
+      <!--</template>-->
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <el-table-column label="操作" align="center" width="160">
-          <template slot-scope="scope">
-            <el-button v-if="hasPerm('/circuit/edit')" type="text" size="small" @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-circuit ref="editCircuit" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -128,7 +99,21 @@
       multipleSelection: [], // 多选选中项
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -253,17 +238,13 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/busController.vue b/src/views/deviceManage/busController.vue
index 49789c4..4646bf2 100644
--- a/src/views/deviceManage/busController.vue
+++ b/src/views/deviceManage/busController.vue
@@ -1,98 +1,67 @@
 <!--设备列表-->
 <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>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.controllerCode" size="small" placeholder="控制器编号" clearable />
+      </search-item>
+      <search-item/>
+      <search-item>
+        <el-select v-model="listQuery.controllerType" size="small" 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" size="small" placeholder="所属组织"/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" 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
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="selectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <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>
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <!--<template slot="preColumns">-->
+      <!--<el-table-column align="center" type="selection" width="55"/>-->
+      <!--</template>-->
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <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>
@@ -152,7 +121,21 @@
       statusList: [{ value: '1', name: '在线' }, { value: '0', name: '离线' }],
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -303,21 +286,17 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
-    handleSelectionChange(val) {
+    selectionChange(val) {
       this.multipleSelection = val
     }
   }
diff --git a/src/views/deviceManage/busGroup.vue b/src/views/deviceManage/busGroup.vue
index 9f85789..a35646b 100644
--- a/src/views/deviceManage/busGroup.vue
+++ b/src/views/deviceManage/busGroup.vue
@@ -1,80 +1,48 @@
 <!--灯箱列表-->
 <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.keyword" placeholder="分组名称" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.deviceType" placeholder="设备类型" clearable @change="fetchData">
-                  <el-option v-for="item in groupList" :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="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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/lampbox/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-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column 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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="分组名称" clearable />
+      </search-item>
+      <search-item/>
+      <search-item>
+        <el-select v-model="listQuery.deviceType" size="small" placeholder="设备类型" clearable @change="fetchData">
+          <el-option v-for="item in groupList" :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" size="small" placeholder="所属组织"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <el-table-column label="操作" align="center" width="160">
-          <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>-->
-            <el-button type="text" size="small" @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-Group ref="editGroup" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -132,7 +100,21 @@
       multipleSelection: [], // 多选选中项
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -249,17 +231,13 @@
         this.listLoading = false
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/busLamp.vue b/src/views/deviceManage/busLamp.vue
index 3450479..c480b30 100644
--- a/src/views/deviceManage/busLamp.vue
+++ b/src/views/deviceManage/busLamp.vue
@@ -1,104 +1,68 @@
 <!--路灯列表-->
 <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.keyword" placeholder="关键词" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.lampType" placeholder="路灯类型" clearable>
-                  <el-option v-for="item in typeList" :key="item.id" :label="item.typeName" :value="item.id"/>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </el-select>
-              </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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/lamp/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>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/lamp/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>
-        <!--操作列-->
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="关键词" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.lampType" size="small" placeholder="路灯类型" clearable>
+          <el-option v-for="item in typeList" :key="item.id" :label="item.typeName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" 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
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <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>
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
             <el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>
-            <el-button v-if="hasPerm('/lamp/edit')" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
-
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
             <el-button v-if="hasPerm('/lamp/remoteOn')" type="text" size="small">开灯</el-button>
             <el-button v-if="hasPerm('/lamp/remoteOff')" type="text" size="small">关灯</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-Lamp ref="editLamp" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -175,7 +139,21 @@
       statusList: [{ value: '1', name: '开灯' }, { value: '2', name: '关灯' }, { value: '3', name: '报警' }, { value: '4', name: '离线' }],
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -338,17 +316,13 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/busLampbox.vue b/src/views/deviceManage/busLampbox.vue
index 292c3a5..7763fac 100644
--- a/src/views/deviceManage/busLampbox.vue
+++ b/src/views/deviceManage/busLampbox.vue
@@ -1,46 +1,34 @@
 <!--灯箱列表-->
 <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.boxName" placeholder="灯箱名称" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/lampbox/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-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/lampbox/delete')" align="center" type="selection" width="55"/>
-        <!--序号列-->
-        <el-table-column :index="indexMethod" align="center" type="index" label="#" width="55"/>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.boxName" size="small" placeholder="灯箱名称" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
         <!--内容列-->
         <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">
@@ -55,30 +43,18 @@
             </div>
           </template>
         </el-table-column>
-        <!--操作列-->
+      </template>
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
             <el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>
-            <el-button v-if="hasPerm('/lampbox/edit')" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
+            <el-button type="text" size="small" @click.stop="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-Lampbox ref="editLampbox" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -144,7 +120,21 @@
       multipleSelection: [], // 多选选中项
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -277,6 +267,15 @@
       this.listQuery.limit = val
       this.fetchData()
     },
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
+    },
     // 改变当前页
     handleCurrentChange(val) {
       this.listQuery.offset = val
diff --git a/src/views/deviceManage/busLamppost.vue b/src/views/deviceManage/busLamppost.vue
index 92833a0..c193813 100644
--- a/src/views/deviceManage/busLamppost.vue
+++ b/src/views/deviceManage/busLamppost.vue
@@ -1,100 +1,65 @@
 <!--灯杆列表-->
 <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.keyword" placeholder="关键词" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.lamppostType" placeholder="路灯杆类型" clearable>
-                  <el-option v-for="item in typeList" :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">
-                <el-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </el-select>
-              </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('/lamppost/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>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/lamppost/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>
-        <!--操作列-->
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="关键词" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.lamppostType" size="small" placeholder="路灯杆类型" clearable>
+          <el-option v-for="item in typeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" 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
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <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>
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
-            <el-button v-if="hasPerm('/lamppost/edit')" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
+            <el-button type="text" size="small" @click.stop="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-Lamppost ref="editLamppost" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -161,7 +126,21 @@
       statusList: [{ value: '1', name: '开灯' }, { value: '2', name: '关灯' }, { value: '3', name: '报警' }, { value: '4', name: '离线' }],
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -320,17 +299,13 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/editCircuit.vue b/src/views/deviceManage/editCircuit.vue
index 9e9dd03..a362483 100644
--- a/src/views/deviceManage/editCircuit.vue
+++ b/src/views/deviceManage/editCircuit.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="cirForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="cirForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="回路编号" prop="circuitCode">
diff --git a/src/views/deviceManage/editController.vue b/src/views/deviceManage/editController.vue
index 7bc786f..444c835 100644
--- a/src/views/deviceManage/editController.vue
+++ b/src/views/deviceManage/editController.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="controllerForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="controllerForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="控制器编号" prop="controllerCode">
diff --git a/src/views/deviceManage/editGroup.vue b/src/views/deviceManage/editGroup.vue
index de9b88b..403d605 100644
--- a/src/views/deviceManage/editGroup.vue
+++ b/src/views/deviceManage/editGroup.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="groupForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="groupForm" size="small" label-well-code="right" label-width="110px">
       <el-row :span="24">
         <el-form-item label="分组名称" prop="groupName">
           <el-input v-model.trim="groupForm.groupName" :readonly="!isEditMode" clearable type="text" />
diff --git a/src/views/deviceManage/editLamp.vue b/src/views/deviceManage/editLamp.vue
index 3d45138..faf37d5 100644
--- a/src/views/deviceManage/editLamp.vue
+++ b/src/views/deviceManage/editLamp.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="lampForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="lampForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="路灯编号" prop="lampCode">
diff --git a/src/views/deviceManage/editLampbox.vue b/src/views/deviceManage/editLampbox.vue
index bd3a537..a4a8ea7 100644
--- a/src/views/deviceManage/editLampbox.vue
+++ b/src/views/deviceManage/editLampbox.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="boxForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="boxForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="灯箱编号" prop="lampboxCode">
diff --git a/src/views/deviceManage/editLamppost.vue b/src/views/deviceManage/editLamppost.vue
index 67a3a6f..a384319 100644
--- a/src/views/deviceManage/editLamppost.vue
+++ b/src/views/deviceManage/editLamppost.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="postForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="postForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="路灯杆编号" prop="lamppostCode">
diff --git a/src/views/deviceManage/listLog.vue b/src/views/deviceManage/listLog.vue
index 1d00e1c..5ab9a95 100644
--- a/src/views/deviceManage/listLog.vue
+++ b/src/views/deviceManage/listLog.vue
@@ -1,36 +1,32 @@
 <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-form-item>
-              <el-input v-model.trim="listQuery.devcode" placeholder="设备编号" clearable/>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.status" placeholder="下发状态" filterable clearable>
-                <el-option v-for="item in statusList" :key="item.name" :label="item.name" :value="item.name"/>
-              </el-select>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button class="edit_btn" size="small" @click="sendAll">全部设备下发</el-button>
-          <el-button class="edit_btn" size="small" @click="send">设备下发</el-button>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" :row-style="{height: '47px'}" class="table" border @selection-change="handleSelectionChange">
-        <el-table-column align="center" type="selection" width="55"/>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.devcode" size="small" placeholder="设备编号" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" placeholder="下发状态" filterable clearable>
+          <el-option v-for="item in statusList" :key="item.name" :label="item.name" :value="item.name"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button class="edit_btn" size="small" @click="sendAll">全部设备下发</el-button>
+        <el-button class="edit_btn" size="small" @click="send">设备下发</el-button>
+      </template>
+      <template slot="columns">
         <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">
             <div v-if="column.value === 'channel1'">
@@ -50,22 +46,9 @@
             </div>
           </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>
-  </div>
+      </template>
+    </normal-table>
+  </app-container>
 </template>
 
 <script>
@@ -151,7 +134,21 @@
       alarmStatusList: [{ name: '正在报警', value: '1' }, { name: '已取消', value: '2' }], // 报警状态列表
       statusList: [{ name: '未下发' }, { name: '已下发' }],
       alarmTypeList: [],
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -262,18 +259,13 @@
       this.timeRange = []
       this.fetchData(false)
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/example/tableExample.vue b/src/views/example/tableExample.vue
index 2d54fad..e8cd106 100644
--- a/src/views/example/tableExample.vue
+++ b/src/views/example/tableExample.vue
@@ -139,7 +139,7 @@
           text: '数据列表' // 标题名称
         },
         options: {
-          needIndex: false // 是否需要序号列
+          needIndex: true // 是否需要序号列
         },
         toolsOption: {
           selectColumns: false, // 是否需要筛选列
diff --git a/src/views/report/boxData.vue b/src/views/report/boxData.vue
index 2e04e4b..5faeff7 100644
--- a/src/views/report/boxData.vue
+++ b/src/views/report/boxData.vue
@@ -1,25 +1,50 @@
 <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-form-item class="selectForm-container-item">
-              <el-input v-model.trim="listQuery.keyword" placeholder="灯箱编号/灯箱名称" clearable/>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item">
-              <el-select v-model="listQuery.groupId" placeholder="设备组" clearable>
-                <el-option v-for="item in groupList" :key="item.id" :label="item.groupName" :value="item.id"/>
-              </el-select>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-      <div class="clearfloat"/>
-    </div>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="灯箱编号/灯箱名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.groupId" size="small" placeholder="设备组" clearable>
+          <el-option v-for="item in groupList" :key="item.id" :label="item.groupName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
+        <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">
+            <div v-if="column.value === 'A'">
+              <span v-html="allNum(scope.row.electricityA,scope.row.voltageA,scope.row.powerA)"/>
+            </div>
+            <div v-else-if="column.value === 'B'">
+              <span v-html="allNum(scope.row.electricityB,scope.row.voltageA,scope.row.powerB)"/>
+            </div>
+            <div v-else-if="column.value === 'C'">
+              <span v-html="allNum(scope.row.electricityC,scope.row.voltageA,scope.row.powerC)"/>
+            </div>
+            <div v-else>
+              <span>{{ scope.row[column.value] }}</span>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" width="130">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click="showHistory(scope.row)">查看历史</el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
     <!--查询结果Table显示-->
     <div>
       <el-row class="table-title">
@@ -43,29 +68,10 @@
             </div>
           </template>
         </el-table-column>
-        <el-table-column label="操作" align="center" width="130">
-          <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
-            <el-button type="text" size="small" @click="showHistory(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>
     <box-history v-show="dialogFormVisible" ref="boxhistory"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -121,7 +127,21 @@
       listLoading: true, // 列表加载
       dialogFormVisible: false,
       alarmReasonList: [], // 报警原因列表
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -177,18 +197,13 @@
         this.groupList = response.data
       })
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }
diff --git a/src/views/report/boxHistory.vue b/src/views/report/boxHistory.vue
index e63fb94..c5cf8ca 100644
--- a/src/views/report/boxHistory.vue
+++ b/src/views/report/boxHistory.vue
@@ -2,7 +2,7 @@
   <div class="app-container">
     <!--筛选条件-->
     <el-dialog :visible.sync="dialogFormVisible" :title="title" append-to-body>
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
+      <el-form ref="selectForm" :inline="true" :model="listQuery" size="small" class="form-container">
         <el-form-item class="selectForm-container-item" prop="startTime">
           <el-date-picker
             v-model="timeRange"
@@ -19,7 +19,7 @@
         <el-row class="table-title">
           <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
         </el-row>
-        <el-table v-loading="listLoading" :data="list" class="table" height="300px" border>
+        <el-table v-loading="listLoading" :data="list" class="table" size="small" height="300px" border>
           <el-table-column :index="indexMethod" label="序号" align="center" type="index" width="55" ></el-table-column>
           <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">
diff --git a/src/views/report/controllerData.vue b/src/views/report/controllerData.vue
index 5b7c360..ee81ba7 100644
--- a/src/views/report/controllerData.vue
+++ b/src/views/report/controllerData.vue
@@ -1,63 +1,40 @@
 <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-form-item class="selectForm-container-item">
-              <el-input v-model.trim="listQuery.keyword" placeholder="路灯编号/路灯名称" clearable/>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item">
-              <el-input v-model.trim="listQuery.controllerCode" placeholder="控制器编号" clearable/>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item">
-              <el-select v-model="listQuery.groupId" placeholder="设备组" clearable>
-                <el-option v-for="item in groupList" :key="item.id" :label="item.groupName" :value="item.id"/>
-              </el-select>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-      <div class="clearfloat"/>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="序号" width="55" align="center" type="index" />
-        <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>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="路灯编号/路灯名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.controllerCode" size="small" placeholder="控制器编号" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.groupId" size="small" placeholder="设备组" clearable>
+          <el-option v-for="item in groupList" :key="item.id" :label="item.groupName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="130">
           <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
             <el-button type="text" size="small" @click="showHistory(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>
     <history-data v-show="dialogFormVisible" ref="historydata"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -131,7 +108,21 @@
       listLoading: true, // 列表加载
       dialogFormVisible: false,
       alarmReasonList: [], // 报警原因列表
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -197,6 +188,15 @@
     handleCurrentChange(val) {
       this.listQuery.offset = val
       this.fetchData()
+    },
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
     }
   }
 }
diff --git a/src/views/report/historyData.vue b/src/views/report/historyData.vue
index 17e66de..9ba326e 100644
--- a/src/views/report/historyData.vue
+++ b/src/views/report/historyData.vue
@@ -2,7 +2,7 @@
   <div class="app-container">
     <!--筛选条件-->
     <el-dialog :visible.sync="dialogFormVisible" :title="title" append-to-body>
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
+      <el-form ref="selectForm" :inline="true" :model="listQuery" size="small" class="form-container">
         <el-form-item class="selectForm-container-item" prop="startTime">
           <el-date-picker
             v-model="timeRange"
@@ -12,14 +12,14 @@
             start-placeholder="查询开始时间"
             end-placeholder="查询结束时间"/>
         </el-form-item>
-        <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
+        <el-button class="filter-item" type="primary" icon="el-icon-search" size="small" @click="search">搜索</el-button>
       </el-form>
       <!--查询结果Table显示-->
       <div>
         <el-row class="table-title">
           <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
         </el-row>
-        <el-table v-loading="listLoading" :data="list" class="table" height="300px" border>
+        <el-table v-loading="listLoading" :data="list" class="table" size="small" height="300px" border>
           <el-table-column :index="indexMethod" label="序号" align="center" type="index" width="55" ></el-table-column>
           <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">

diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 5077bef..3fd3f33 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -58,6 +58,8 @@
       <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns"/>
+        <!--复选框列-->
+        <el-table-column v-if="options && options.needMultSelect" align="center" type="selection" width="55"/>
         <!--序号列-->
         <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
         <!--内容列, 若columns存在且长度大于0-->
@@ -140,7 +142,8 @@
       type: Object,
       default: function() {
         return {
-          needIndex: true // 是否需要序号列
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
         }
       }
     }, // 配置项
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
index 1175911..b5e8442 100644
--- a/src/components/SearchArea/SearchArea.vue
+++ b/src/components/SearchArea/SearchArea.vue
@@ -16,6 +16,7 @@
       <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
       <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
       <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns-seperate"/>
     </div>
     <!-- 弹出框式高级检索 -->
     <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
index 84bdb9f..c192d79 100644
--- a/src/layout/components/AppHeader.vue
+++ b/src/layout/components/AppHeader.vue
@@ -1,6 +1,14 @@
 <template>
   <el-header class="app-header">
     <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown v-if="showChangeSys" class="systemSelect" size="medium" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
     <el-dropdown class="dropdown-container" trigger="click">
       <div class="dropdown-wrapper">
         <span style="line-height:50px;">欢迎您，{{ name }}</span>
@@ -33,6 +41,7 @@
   data() {
     return {
       title: this.baseConfig.title, // 标题
+      showChangeSys: !this.baseConfig.singleSys, // 是否显示切换系统菜单
       name: this.$store.getters.name, // 用户姓名
       showSetPwd: false // 是否显示修改密码按钮
     }
@@ -40,7 +49,9 @@
   computed: {
     ...mapGetters([
       'sidebar',
-      'avatar'
+      'avatar',
+      'currentSystem',
+      'systems'
     ])
   },
   methods: {
@@ -55,6 +66,38 @@
     resetPwd() {
       this.showSetPwd = true
       this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      const url = this.baseConfig.mainPage
+      window.location.href = url
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      const params1 = `?token=${this.$store.getters.token}`
+      const params = `?sys=${command.name}&url=${command.url}&code=${command.code}&token=${this.$store.getters.token}`
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params1
+        } else {
+          window.open(command.url + params1, '_blank')
+        }
+      } else {
+        // 取token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = this.baseConfig.mainPage + command.url + params
+        } else {
+          window.open(this.baseConfig.mainPage + command.url + params, '_blank')
+        }
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
     }
   }
 }
diff --git a/src/permission.js b/src/permission.js
index 69e8233..637373e 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -26,20 +26,13 @@
           // 设置当前子系统为基础资源子系统
           const currentSys = {
             code: 'baseResourse',
-            id: '1189107859077373285',
-            ismenu: '0',
-            levels: 1,
-            name: '智慧照明子系统',
-            num: 0,
-            parentId: '0',
-            resourceType: '02',
-            url: '/baseResourse'
+            name: '智慧照明子系统'
           }
           // 将当前系统信息保存在localStorage中
           store.commit('SET_SYSTEM', currentSys)
           // 远程访问获取权限列表（菜单&按钮）
           store.dispatch('GetMenus', currentSys).then(() => {
-            store.commit('SET_CHANGEFLAG', '0')
+            // store.commit('SET_CHANGEFLAG', '0')
             router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
             next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
           })
diff --git a/src/router/index.js b/src/router/index.js
index 32f93ef..b558038 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -49,21 +49,22 @@
   // 404错误页面
   { path: '/404', component: () => import('@/views/errorPage/404'), hidden: true },
   // 401 错误页面
-  { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
-  // 主页
-  {
-    path: '/',
-    component: Layout,
-    redirect: 'dashboard',
-    name: 'Dashboard',
-    // hidden: true,
-    children: [{
-      path: 'dashboard',
-      name: 'Dashboard',
-      component: () => import('@/views/dashboard/index'),
-      meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
-    }]
-  }
+  { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true }
+  // { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
+  // // 主页
+  // {
+  //   path: '/',
+  //   component: Layout,
+  //   redirect: 'dashboard',
+  //   name: 'Dashboard',
+  //   // hidden: true,
+  //   children: [{
+  //     path: 'dashboard',
+  //     name: 'Dashboard',
+  //     component: () => import('@/views/dashboard/index'),
+  //     meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
+  //   }]
+  // }
 ]
 // 实例化vue的时候直挂载constantRouter
 export default new Router({
diff --git a/src/views/alarmManage/alarmRule.vue b/src/views/alarmManage/alarmRule.vue
index 888a4d1..11469a2 100644
--- a/src/views/alarmManage/alarmRule.vue
+++ b/src/views/alarmManage/alarmRule.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
       <el-tab-pane label="路灯" name="lamp">
         <lamp-type-list ref="lamp"/>
@@ -8,7 +8,7 @@
         <lampbox-type-list ref="box"/>
       </el-tab-pane>
     </el-tabs>
-  </div>
+  </app-container>
 </template>
 
 <script>
diff --git a/src/views/alarmManage/components/alarmDetail.vue b/src/views/alarmManage/components/alarmDetail.vue
index 9c68377..d598779 100644
--- a/src/views/alarmManage/components/alarmDetail.vue
+++ b/src/views/alarmManage/components/alarmDetail.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :close-on-click-modal="false" :visible.sync="dialogFormVisible" title="报警详情" append-to-body>
-    <el-form ref="dataForm" :model="alarmForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :model="alarmForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="10">
           <el-form-item label="设备名称" prop="deviceName">
diff --git a/src/views/alarmManage/lampType/editLampType.vue b/src/views/alarmManage/lampType/editLampType.vue
index 8c3e37a..8e5fc23 100644
--- a/src/views/alarmManage/lampType/editLampType.vue
+++ b/src/views/alarmManage/lampType/editLampType.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="typeForm" label-well-code="right" label-width="200px">
+    <el-form ref="dataForm" :rules="rules" :model="typeForm" size="small" label-well-code="right" label-width="200px">
       <el-row :gutter="20">
         <el-col :span="20">
           <el-form-item label="路灯类型" prop="typeName">
diff --git a/src/views/alarmManage/lampType/lampTypeList.vue b/src/views/alarmManage/lampType/lampTypeList.vue
index f8547ed..f10c63b 100644
--- a/src/views/alarmManage/lampType/lampTypeList.vue
+++ b/src/views/alarmManage/lampType/lampTypeList.vue
@@ -8,12 +8,11 @@
           <el-row>
             <el-col :span="4">
               <el-form-item class="selectForm-container-item">
-                <el-input v-model.trim="listQuery.typeName" placeholder="类型名称" clearable />
+                <el-input v-model.trim="listQuery.typeName" size="small" placeholder="类型名称" clearable />
               </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-button class="filter-item" type="primary" icon="el-icon-search" size="small" style="margin-top: 2px" @click="search">搜索</el-button>
             </el-col>
           </el-row>
         </el-form>
@@ -28,7 +27,7 @@
           <el-button class="edit_btn" size="small" @click="add">新增</el-button>
         </el-col>
       </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
+      <el-table v-loading="listLoading" :data="list" class="table" size="small" border @selection-change="handleSelectionChange">
         <!--拥有删除权限则显示复选框-->
         <el-table-column v-if="hasPerm('/lampType/delete')" align="center" type="selection" width="55"/>
         <!--序号列-->
diff --git a/src/views/alarmManage/lampboxType/editLampboxType.vue b/src/views/alarmManage/lampboxType/editLampboxType.vue
index 1b94960..ae3a7c1 100644
--- a/src/views/alarmManage/lampboxType/editLampboxType.vue
+++ b/src/views/alarmManage/lampboxType/editLampboxType.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="typeForm" label-well-code="right" label-width="200px">
+    <el-form ref="dataForm" :rules="rules" :model="typeForm" size="small" label-well-code="right" label-width="200px">
       <el-row :gutter="20">
         <el-col :span="20">
           <el-form-item label="灯箱类型" prop="typeName">
diff --git a/src/views/alarmManage/lampboxType/lampboxTypeList.vue b/src/views/alarmManage/lampboxType/lampboxTypeList.vue
index 7b68f20..f33dcbf 100644
--- a/src/views/alarmManage/lampboxType/lampboxTypeList.vue
+++ b/src/views/alarmManage/lampboxType/lampboxTypeList.vue
@@ -8,7 +8,7 @@
           <el-row>
             <el-col :span="4">
               <el-form-item class="selectForm-container-item">
-                <el-input v-model.trim="listQuery.typeName" placeholder="类型名称" clearable />
+                <el-input v-model.trim="listQuery.typeName" size="small" placeholder="类型名称" clearable />
               </el-form-item>
             </el-col>
 
diff --git a/src/views/alarmManage/listAlarm.vue b/src/views/alarmManage/listAlarm.vue
index 7571a0e..fe3e359 100644
--- a/src/views/alarmManage/listAlarm.vue
+++ b/src/views/alarmManage/listAlarm.vue
@@ -1,73 +1,52 @@
 <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-form-item>
-              <el-input v-model.trim="listQuery.keyword" placeholder="设备编号/设备名称" clearable/>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmType" placeholder="报警类型" clearable>
-                <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmStatus" placeholder="报警状态" clearable>
-                <el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item" prop="startTime">
-              <el-date-picker
-                v-model="timeRange"
-                type="datetimerange"
-                range-separator="至"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                start-placeholder="报警开始时间"
-                end-placeholder="报警结束时间"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
-        <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>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="设备编号/设备名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmType" size="small" placeholder="报警类型" clearable>
+          <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmStatus" size="small" placeholder="报警状态" clearable>
+          <el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          size="small"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="报警开始时间"
+          end-placeholder="报警结束时间"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="130">
           <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
             <el-button type="text" size="small" @click="showDetail(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>
     <alarm-detail v-show="dialogFormVisible" ref="alarmdetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -123,7 +102,21 @@
       dialogFormVisible: false,
       alarmStatusList: [{ name: '正在报警', value: '1' }, { name: '已取消', value: '2' }], // 报警状态列表
       alarmTypeList: [],
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   watch: {
@@ -171,19 +164,15 @@
     },
     clearInput() {
       this.listQuery = {
-        name: '', // 姓名
-        sex: '', // 性别
-        nation: '', // 民族
-        collReason: '', // 采集原因
-        cardType: '', // 证件类型
-        idCardNo: '', // 证件号码
-        alarmReason: '', // 报警原因
-        startTime: '', // 开始时间
-        endTime: '', // 结束时间
+        keyword: '', // 设备编号/设备名称
+        alarmType: '', // 报警类型
+        alarmStatus: '', // 报警状态
+        startTime: '', // 报警开始时间
+        endTime: '', // 报警结束时间
         offset: 1,
         limit: 20,
-        sort: '',
-        order: ''
+        sort: 'alarmTime',
+        order: 'desc'
       }
       this.timeRange = []
       this.fetchData(false)
@@ -194,18 +183,13 @@
         this.alarmTypeList = response.data
       })
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }
diff --git a/src/views/alarmManage/listAlarmNow.vue b/src/views/alarmManage/listAlarmNow.vue
index c48b60a..d98b641 100644
--- a/src/views/alarmManage/listAlarmNow.vue
+++ b/src/views/alarmManage/listAlarmNow.vue
@@ -1,73 +1,47 @@
 <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-form-item>
-              <el-input v-model.trim="listQuery.keyword" placeholder="设备编号/设备名称" clearable/>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmType" placeholder="报警类型" clearable>
-                <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <!--<el-form-item>-->
-            <!--<el-select v-model="listQuery.alarmStatus" placeholder="报警状态" clearable>-->
-            <!--<el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>-->
-            <!--</el-select>-->
-            <!--</el-form-item>-->
-            <el-form-item class="selectForm-container-item" prop="startTime">
-              <el-date-picker
-                v-model="timeRange"
-                type="datetimerange"
-                range-separator="至"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                start-placeholder="报警开始时间"
-                end-placeholder="报警结束时间"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
-        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="设备编号/设备名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmType" size="small" placeholder="报警类型" clearable>
+          <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          size="small"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="报警开始时间"
+          end-placeholder="报警结束时间"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
-            <span>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" align="center" width="130">
-          <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
             <el-button type="text" size="small" @click="showDetail(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>
     <alarm-detail v-show="dialogFormVisible" ref="alarmdetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -123,7 +97,21 @@
       dialogFormVisible: false,
       alarmStatusList: [{ name: '正在报警', value: '1' }, { name: '已取消', value: '2' }], // 报警状态列表
       alarmTypeList: [],
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   watch: {
@@ -171,15 +159,11 @@
     },
     clearInput() {
       this.listQuery = {
-        name: '', // 姓名
-        sex: '', // 性别
-        nation: '', // 民族
-        collReason: '', // 采集原因
-        cardType: '', // 证件类型
-        idCardNo: '', // 证件号码
-        alarmReason: '', // 报警原因
-        startTime: '', // 开始时间
-        endTime: '', // 结束时间
+        keyword: '', // 设备编号/设备名称
+        alarmType: '', // 报警类型
+        alarmStatus: '1', // 报警状态
+        startTime: '', // 报警开始时间
+        endTime: '', // 报警结束时间
         offset: 1,
         limit: 20,
         sort: '',
@@ -194,18 +178,13 @@
         this.alarmTypeList = response.data
       })
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }
diff --git a/src/views/deviceManage/busCircuit.vue b/src/views/deviceManage/busCircuit.vue
index 2e1f872..7c9c804 100644
--- a/src/views/deviceManage/busCircuit.vue
+++ b/src/views/deviceManage/busCircuit.vue
@@ -1,77 +1,48 @@
 <!--回路列表-->
 <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-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.lampboxId" placeholder="所属灯箱" filterable clearable>
-                  <el-option v-for="item in boxList" :key="item.id" :label="item.lampboxName" :value="item.id"/>
-                </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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/circuit/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-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/circuit/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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.lampboxId" size="small" placeholder="所属灯箱" filterable clearable>
+          <el-option v-for="item in boxList" :key="item.id" :label="item.lampboxName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <!--<template slot="preColumns">-->
+      <!--<el-table-column align="center" type="selection" width="55"/>-->
+      <!--</template>-->
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <el-table-column label="操作" align="center" width="160">
-          <template slot-scope="scope">
-            <el-button v-if="hasPerm('/circuit/edit')" type="text" size="small" @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-circuit ref="editCircuit" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -128,7 +99,21 @@
       multipleSelection: [], // 多选选中项
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -253,17 +238,13 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/busController.vue b/src/views/deviceManage/busController.vue
index 49789c4..4646bf2 100644
--- a/src/views/deviceManage/busController.vue
+++ b/src/views/deviceManage/busController.vue
@@ -1,98 +1,67 @@
 <!--设备列表-->
 <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>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.controllerCode" size="small" placeholder="控制器编号" clearable />
+      </search-item>
+      <search-item/>
+      <search-item>
+        <el-select v-model="listQuery.controllerType" size="small" 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" size="small" placeholder="所属组织"/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" 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
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="selectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <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>
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <!--<template slot="preColumns">-->
+      <!--<el-table-column align="center" type="selection" width="55"/>-->
+      <!--</template>-->
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <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>
@@ -152,7 +121,21 @@
       statusList: [{ value: '1', name: '在线' }, { value: '0', name: '离线' }],
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -303,21 +286,17 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
-    handleSelectionChange(val) {
+    selectionChange(val) {
       this.multipleSelection = val
     }
   }
diff --git a/src/views/deviceManage/busGroup.vue b/src/views/deviceManage/busGroup.vue
index 9f85789..a35646b 100644
--- a/src/views/deviceManage/busGroup.vue
+++ b/src/views/deviceManage/busGroup.vue
@@ -1,80 +1,48 @@
 <!--灯箱列表-->
 <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.keyword" placeholder="分组名称" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.deviceType" placeholder="设备类型" clearable @change="fetchData">
-                  <el-option v-for="item in groupList" :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="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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/lampbox/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-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column 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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="分组名称" clearable />
+      </search-item>
+      <search-item/>
+      <search-item>
+        <el-select v-model="listQuery.deviceType" size="small" placeholder="设备类型" clearable @change="fetchData">
+          <el-option v-for="item in groupList" :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" size="small" placeholder="所属组织"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <el-table-column label="操作" align="center" width="160">
-          <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>-->
-            <el-button type="text" size="small" @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-Group ref="editGroup" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -132,7 +100,21 @@
       multipleSelection: [], // 多选选中项
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -249,17 +231,13 @@
         this.listLoading = false
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/busLamp.vue b/src/views/deviceManage/busLamp.vue
index 3450479..c480b30 100644
--- a/src/views/deviceManage/busLamp.vue
+++ b/src/views/deviceManage/busLamp.vue
@@ -1,104 +1,68 @@
 <!--路灯列表-->
 <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.keyword" placeholder="关键词" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.lampType" placeholder="路灯类型" clearable>
-                  <el-option v-for="item in typeList" :key="item.id" :label="item.typeName" :value="item.id"/>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </el-select>
-              </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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/lamp/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>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/lamp/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>
-        <!--操作列-->
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="关键词" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.lampType" size="small" placeholder="路灯类型" clearable>
+          <el-option v-for="item in typeList" :key="item.id" :label="item.typeName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" 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
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <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>
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
             <el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>
-            <el-button v-if="hasPerm('/lamp/edit')" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
-
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
             <el-button v-if="hasPerm('/lamp/remoteOn')" type="text" size="small">开灯</el-button>
             <el-button v-if="hasPerm('/lamp/remoteOff')" type="text" size="small">关灯</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-Lamp ref="editLamp" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -175,7 +139,21 @@
       statusList: [{ value: '1', name: '开灯' }, { value: '2', name: '关灯' }, { value: '3', name: '报警' }, { value: '4', name: '离线' }],
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -338,17 +316,13 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/busLampbox.vue b/src/views/deviceManage/busLampbox.vue
index 292c3a5..7763fac 100644
--- a/src/views/deviceManage/busLampbox.vue
+++ b/src/views/deviceManage/busLampbox.vue
@@ -1,46 +1,34 @@
 <!--灯箱列表-->
 <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.boxName" placeholder="灯箱名称" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/lampbox/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-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/lampbox/delete')" align="center" type="selection" width="55"/>
-        <!--序号列-->
-        <el-table-column :index="indexMethod" align="center" type="index" label="#" width="55"/>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.boxName" size="small" placeholder="灯箱名称" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
         <!--内容列-->
         <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">
@@ -55,30 +43,18 @@
             </div>
           </template>
         </el-table-column>
-        <!--操作列-->
+      </template>
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
             <el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>
-            <el-button v-if="hasPerm('/lampbox/edit')" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
+            <el-button type="text" size="small" @click.stop="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-Lampbox ref="editLampbox" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -144,7 +120,21 @@
       multipleSelection: [], // 多选选中项
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -277,6 +267,15 @@
       this.listQuery.limit = val
       this.fetchData()
     },
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
+    },
     // 改变当前页
     handleCurrentChange(val) {
       this.listQuery.offset = val
diff --git a/src/views/deviceManage/busLamppost.vue b/src/views/deviceManage/busLamppost.vue
index 92833a0..c193813 100644
--- a/src/views/deviceManage/busLamppost.vue
+++ b/src/views/deviceManage/busLamppost.vue
@@ -1,100 +1,65 @@
 <!--灯杆列表-->
 <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.keyword" placeholder="关键词" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.lamppostType" placeholder="路灯杆类型" clearable>
-                  <el-option v-for="item in typeList" :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">
-                <el-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </el-select>
-              </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('/lamppost/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>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/lamppost/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>
-        <!--操作列-->
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="关键词" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.lamppostType" size="small" placeholder="路灯杆类型" clearable>
+          <el-option v-for="item in typeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" 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
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <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>
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
-            <el-button v-if="hasPerm('/lamppost/edit')" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
+            <el-button type="text" size="small" @click.stop="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-Lamppost ref="editLamppost" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -161,7 +126,21 @@
       statusList: [{ value: '1', name: '开灯' }, { value: '2', name: '关灯' }, { value: '3', name: '报警' }, { value: '4', name: '离线' }],
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -320,17 +299,13 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/editCircuit.vue b/src/views/deviceManage/editCircuit.vue
index 9e9dd03..a362483 100644
--- a/src/views/deviceManage/editCircuit.vue
+++ b/src/views/deviceManage/editCircuit.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="cirForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="cirForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="回路编号" prop="circuitCode">
diff --git a/src/views/deviceManage/editController.vue b/src/views/deviceManage/editController.vue
index 7bc786f..444c835 100644
--- a/src/views/deviceManage/editController.vue
+++ b/src/views/deviceManage/editController.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="controllerForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="controllerForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="控制器编号" prop="controllerCode">
diff --git a/src/views/deviceManage/editGroup.vue b/src/views/deviceManage/editGroup.vue
index de9b88b..403d605 100644
--- a/src/views/deviceManage/editGroup.vue
+++ b/src/views/deviceManage/editGroup.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="groupForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="groupForm" size="small" label-well-code="right" label-width="110px">
       <el-row :span="24">
         <el-form-item label="分组名称" prop="groupName">
           <el-input v-model.trim="groupForm.groupName" :readonly="!isEditMode" clearable type="text" />
diff --git a/src/views/deviceManage/editLamp.vue b/src/views/deviceManage/editLamp.vue
index 3d45138..faf37d5 100644
--- a/src/views/deviceManage/editLamp.vue
+++ b/src/views/deviceManage/editLamp.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="lampForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="lampForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="路灯编号" prop="lampCode">
diff --git a/src/views/deviceManage/editLampbox.vue b/src/views/deviceManage/editLampbox.vue
index bd3a537..a4a8ea7 100644
--- a/src/views/deviceManage/editLampbox.vue
+++ b/src/views/deviceManage/editLampbox.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="boxForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="boxForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="灯箱编号" prop="lampboxCode">
diff --git a/src/views/deviceManage/editLamppost.vue b/src/views/deviceManage/editLamppost.vue
index 67a3a6f..a384319 100644
--- a/src/views/deviceManage/editLamppost.vue
+++ b/src/views/deviceManage/editLamppost.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="postForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="postForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="路灯杆编号" prop="lamppostCode">
diff --git a/src/views/deviceManage/listLog.vue b/src/views/deviceManage/listLog.vue
index 1d00e1c..5ab9a95 100644
--- a/src/views/deviceManage/listLog.vue
+++ b/src/views/deviceManage/listLog.vue
@@ -1,36 +1,32 @@
 <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-form-item>
-              <el-input v-model.trim="listQuery.devcode" placeholder="设备编号" clearable/>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.status" placeholder="下发状态" filterable clearable>
-                <el-option v-for="item in statusList" :key="item.name" :label="item.name" :value="item.name"/>
-              </el-select>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button class="edit_btn" size="small" @click="sendAll">全部设备下发</el-button>
-          <el-button class="edit_btn" size="small" @click="send">设备下发</el-button>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" :row-style="{height: '47px'}" class="table" border @selection-change="handleSelectionChange">
-        <el-table-column align="center" type="selection" width="55"/>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.devcode" size="small" placeholder="设备编号" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" placeholder="下发状态" filterable clearable>
+          <el-option v-for="item in statusList" :key="item.name" :label="item.name" :value="item.name"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button class="edit_btn" size="small" @click="sendAll">全部设备下发</el-button>
+        <el-button class="edit_btn" size="small" @click="send">设备下发</el-button>
+      </template>
+      <template slot="columns">
         <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">
             <div v-if="column.value === 'channel1'">
@@ -50,22 +46,9 @@
             </div>
           </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>
-  </div>
+      </template>
+    </normal-table>
+  </app-container>
 </template>
 
 <script>
@@ -151,7 +134,21 @@
       alarmStatusList: [{ name: '正在报警', value: '1' }, { name: '已取消', value: '2' }], // 报警状态列表
       statusList: [{ name: '未下发' }, { name: '已下发' }],
       alarmTypeList: [],
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -262,18 +259,13 @@
       this.timeRange = []
       this.fetchData(false)
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/example/tableExample.vue b/src/views/example/tableExample.vue
index 2d54fad..e8cd106 100644
--- a/src/views/example/tableExample.vue
+++ b/src/views/example/tableExample.vue
@@ -139,7 +139,7 @@
           text: '数据列表' // 标题名称
         },
         options: {
-          needIndex: false // 是否需要序号列
+          needIndex: true // 是否需要序号列
         },
         toolsOption: {
           selectColumns: false, // 是否需要筛选列
diff --git a/src/views/report/boxData.vue b/src/views/report/boxData.vue
index 2e04e4b..5faeff7 100644
--- a/src/views/report/boxData.vue
+++ b/src/views/report/boxData.vue
@@ -1,25 +1,50 @@
 <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-form-item class="selectForm-container-item">
-              <el-input v-model.trim="listQuery.keyword" placeholder="灯箱编号/灯箱名称" clearable/>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item">
-              <el-select v-model="listQuery.groupId" placeholder="设备组" clearable>
-                <el-option v-for="item in groupList" :key="item.id" :label="item.groupName" :value="item.id"/>
-              </el-select>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-      <div class="clearfloat"/>
-    </div>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="灯箱编号/灯箱名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.groupId" size="small" placeholder="设备组" clearable>
+          <el-option v-for="item in groupList" :key="item.id" :label="item.groupName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
+        <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">
+            <div v-if="column.value === 'A'">
+              <span v-html="allNum(scope.row.electricityA,scope.row.voltageA,scope.row.powerA)"/>
+            </div>
+            <div v-else-if="column.value === 'B'">
+              <span v-html="allNum(scope.row.electricityB,scope.row.voltageA,scope.row.powerB)"/>
+            </div>
+            <div v-else-if="column.value === 'C'">
+              <span v-html="allNum(scope.row.electricityC,scope.row.voltageA,scope.row.powerC)"/>
+            </div>
+            <div v-else>
+              <span>{{ scope.row[column.value] }}</span>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" width="130">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click="showHistory(scope.row)">查看历史</el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
     <!--查询结果Table显示-->
     <div>
       <el-row class="table-title">
@@ -43,29 +68,10 @@
             </div>
           </template>
         </el-table-column>
-        <el-table-column label="操作" align="center" width="130">
-          <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
-            <el-button type="text" size="small" @click="showHistory(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>
     <box-history v-show="dialogFormVisible" ref="boxhistory"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -121,7 +127,21 @@
       listLoading: true, // 列表加载
       dialogFormVisible: false,
       alarmReasonList: [], // 报警原因列表
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -177,18 +197,13 @@
         this.groupList = response.data
       })
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }
diff --git a/src/views/report/boxHistory.vue b/src/views/report/boxHistory.vue
index e63fb94..c5cf8ca 100644
--- a/src/views/report/boxHistory.vue
+++ b/src/views/report/boxHistory.vue
@@ -2,7 +2,7 @@
   <div class="app-container">
     <!--筛选条件-->
     <el-dialog :visible.sync="dialogFormVisible" :title="title" append-to-body>
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
+      <el-form ref="selectForm" :inline="true" :model="listQuery" size="small" class="form-container">
         <el-form-item class="selectForm-container-item" prop="startTime">
           <el-date-picker
             v-model="timeRange"
@@ -19,7 +19,7 @@
         <el-row class="table-title">
           <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
         </el-row>
-        <el-table v-loading="listLoading" :data="list" class="table" height="300px" border>
+        <el-table v-loading="listLoading" :data="list" class="table" size="small" height="300px" border>
           <el-table-column :index="indexMethod" label="序号" align="center" type="index" width="55" ></el-table-column>
           <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">
diff --git a/src/views/report/controllerData.vue b/src/views/report/controllerData.vue
index 5b7c360..ee81ba7 100644
--- a/src/views/report/controllerData.vue
+++ b/src/views/report/controllerData.vue
@@ -1,63 +1,40 @@
 <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-form-item class="selectForm-container-item">
-              <el-input v-model.trim="listQuery.keyword" placeholder="路灯编号/路灯名称" clearable/>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item">
-              <el-input v-model.trim="listQuery.controllerCode" placeholder="控制器编号" clearable/>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item">
-              <el-select v-model="listQuery.groupId" placeholder="设备组" clearable>
-                <el-option v-for="item in groupList" :key="item.id" :label="item.groupName" :value="item.id"/>
-              </el-select>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-      <div class="clearfloat"/>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="序号" width="55" align="center" type="index" />
-        <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>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="路灯编号/路灯名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.controllerCode" size="small" placeholder="控制器编号" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.groupId" size="small" placeholder="设备组" clearable>
+          <el-option v-for="item in groupList" :key="item.id" :label="item.groupName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="130">
           <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
             <el-button type="text" size="small" @click="showHistory(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>
     <history-data v-show="dialogFormVisible" ref="historydata"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -131,7 +108,21 @@
       listLoading: true, // 列表加载
       dialogFormVisible: false,
       alarmReasonList: [], // 报警原因列表
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -197,6 +188,15 @@
     handleCurrentChange(val) {
       this.listQuery.offset = val
       this.fetchData()
+    },
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
     }
   }
 }
diff --git a/src/views/report/historyData.vue b/src/views/report/historyData.vue
index 17e66de..9ba326e 100644
--- a/src/views/report/historyData.vue
+++ b/src/views/report/historyData.vue
@@ -2,7 +2,7 @@
   <div class="app-container">
     <!--筛选条件-->
     <el-dialog :visible.sync="dialogFormVisible" :title="title" append-to-body>
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
+      <el-form ref="selectForm" :inline="true" :model="listQuery" size="small" class="form-container">
         <el-form-item class="selectForm-container-item" prop="startTime">
           <el-date-picker
             v-model="timeRange"
@@ -12,14 +12,14 @@
             start-placeholder="查询开始时间"
             end-placeholder="查询结束时间"/>
         </el-form-item>
-        <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
+        <el-button class="filter-item" type="primary" icon="el-icon-search" size="small" @click="search">搜索</el-button>
       </el-form>
       <!--查询结果Table显示-->
       <div>
         <el-row class="table-title">
           <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
         </el-row>
-        <el-table v-loading="listLoading" :data="list" class="table" height="300px" border>
+        <el-table v-loading="listLoading" :data="list" class="table" size="small" height="300px" border>
           <el-table-column :index="indexMethod" label="序号" align="center" type="index" width="55" ></el-table-column>
           <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">
diff --git a/src/views/report/quantityData.vue b/src/views/report/quantityData.vue
index a4bd607..88a4d4d 100644
--- a/src/views/report/quantityData.vue
+++ b/src/views/report/quantityData.vue
@@ -1,46 +1,35 @@
 <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-form-item class="selectForm-container-item">
-              <el-date-picker
-                v-model="timeRange"
-                :picker-options="pickerOptions"
-                :clearable="false"
-                type="daterange"
-                value-format="yyyy-MM-dd"
-                align="right"
-                unlink-panels
-                range-separator="至"
-                start-placeholder="开始日期"
-                end-placeholder="结束日期"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-      <div class="clearfloat"/>
-    </div>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          :picker-options="pickerOptions"
+          :clearable="false"
+          type="daterange"
+          value-format="yyyy-MM-dd"
+          align="right"
+          unlink-panels
+          range-separator="至"
+          size="small"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"/>
+      </search-item>
+    </search-area>
     <div ref="chart" class="chart-body" style="padding-top: 20px;"/>
-    <!--查询结果Table显示-->
-    <div style="margin-bottom: 50px">
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" :row-style="{height: '47px'}" class="table" border>
-        <el-table-column :index="indexMethod" label="序号" width="55" align="center" type="index" />
-        <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>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-  </div>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage"/>
+  </app-container>
 </template>
 
 <script>
@@ -104,7 +93,21 @@
       list: [], // 报警列表
       chart: '',
       staticsList: [], // 报警列表
-      listLoading: true // 列表加载
+      listLoading: true, // 列表加载
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   watch: {
@@ -202,6 +205,15 @@
     handleCurrentChange(val) {
       this.listQuery.offset = val
       this.fetchData()
+    },
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
     }
   }
 }

diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 5077bef..3fd3f33 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -58,6 +58,8 @@
       <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns"/>
+        <!--复选框列-->
+        <el-table-column v-if="options && options.needMultSelect" align="center" type="selection" width="55"/>
         <!--序号列-->
         <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
         <!--内容列, 若columns存在且长度大于0-->
@@ -140,7 +142,8 @@
       type: Object,
       default: function() {
         return {
-          needIndex: true // 是否需要序号列
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
         }
       }
     }, // 配置项
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
index 1175911..b5e8442 100644
--- a/src/components/SearchArea/SearchArea.vue
+++ b/src/components/SearchArea/SearchArea.vue
@@ -16,6 +16,7 @@
       <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
       <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
       <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns-seperate"/>
     </div>
     <!-- 弹出框式高级检索 -->
     <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
index 84bdb9f..c192d79 100644
--- a/src/layout/components/AppHeader.vue
+++ b/src/layout/components/AppHeader.vue
@@ -1,6 +1,14 @@
 <template>
   <el-header class="app-header">
     <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown v-if="showChangeSys" class="systemSelect" size="medium" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
     <el-dropdown class="dropdown-container" trigger="click">
       <div class="dropdown-wrapper">
         <span style="line-height:50px;">欢迎您，{{ name }}</span>
@@ -33,6 +41,7 @@
   data() {
     return {
       title: this.baseConfig.title, // 标题
+      showChangeSys: !this.baseConfig.singleSys, // 是否显示切换系统菜单
       name: this.$store.getters.name, // 用户姓名
       showSetPwd: false // 是否显示修改密码按钮
     }
@@ -40,7 +49,9 @@
   computed: {
     ...mapGetters([
       'sidebar',
-      'avatar'
+      'avatar',
+      'currentSystem',
+      'systems'
     ])
   },
   methods: {
@@ -55,6 +66,38 @@
     resetPwd() {
       this.showSetPwd = true
       this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      const url = this.baseConfig.mainPage
+      window.location.href = url
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      const params1 = `?token=${this.$store.getters.token}`
+      const params = `?sys=${command.name}&url=${command.url}&code=${command.code}&token=${this.$store.getters.token}`
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params1
+        } else {
+          window.open(command.url + params1, '_blank')
+        }
+      } else {
+        // 取token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = this.baseConfig.mainPage + command.url + params
+        } else {
+          window.open(this.baseConfig.mainPage + command.url + params, '_blank')
+        }
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
     }
   }
 }
diff --git a/src/permission.js b/src/permission.js
index 69e8233..637373e 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -26,20 +26,13 @@
           // 设置当前子系统为基础资源子系统
           const currentSys = {
             code: 'baseResourse',
-            id: '1189107859077373285',
-            ismenu: '0',
-            levels: 1,
-            name: '智慧照明子系统',
-            num: 0,
-            parentId: '0',
-            resourceType: '02',
-            url: '/baseResourse'
+            name: '智慧照明子系统'
           }
           // 将当前系统信息保存在localStorage中
           store.commit('SET_SYSTEM', currentSys)
           // 远程访问获取权限列表（菜单&按钮）
           store.dispatch('GetMenus', currentSys).then(() => {
-            store.commit('SET_CHANGEFLAG', '0')
+            // store.commit('SET_CHANGEFLAG', '0')
             router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
             next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
           })
diff --git a/src/router/index.js b/src/router/index.js
index 32f93ef..b558038 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -49,21 +49,22 @@
   // 404错误页面
   { path: '/404', component: () => import('@/views/errorPage/404'), hidden: true },
   // 401 错误页面
-  { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
-  // 主页
-  {
-    path: '/',
-    component: Layout,
-    redirect: 'dashboard',
-    name: 'Dashboard',
-    // hidden: true,
-    children: [{
-      path: 'dashboard',
-      name: 'Dashboard',
-      component: () => import('@/views/dashboard/index'),
-      meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
-    }]
-  }
+  { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true }
+  // { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
+  // // 主页
+  // {
+  //   path: '/',
+  //   component: Layout,
+  //   redirect: 'dashboard',
+  //   name: 'Dashboard',
+  //   // hidden: true,
+  //   children: [{
+  //     path: 'dashboard',
+  //     name: 'Dashboard',
+  //     component: () => import('@/views/dashboard/index'),
+  //     meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
+  //   }]
+  // }
 ]
 // 实例化vue的时候直挂载constantRouter
 export default new Router({
diff --git a/src/views/alarmManage/alarmRule.vue b/src/views/alarmManage/alarmRule.vue
index 888a4d1..11469a2 100644
--- a/src/views/alarmManage/alarmRule.vue
+++ b/src/views/alarmManage/alarmRule.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
       <el-tab-pane label="路灯" name="lamp">
         <lamp-type-list ref="lamp"/>
@@ -8,7 +8,7 @@
         <lampbox-type-list ref="box"/>
       </el-tab-pane>
     </el-tabs>
-  </div>
+  </app-container>
 </template>
 
 <script>
diff --git a/src/views/alarmManage/components/alarmDetail.vue b/src/views/alarmManage/components/alarmDetail.vue
index 9c68377..d598779 100644
--- a/src/views/alarmManage/components/alarmDetail.vue
+++ b/src/views/alarmManage/components/alarmDetail.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :close-on-click-modal="false" :visible.sync="dialogFormVisible" title="报警详情" append-to-body>
-    <el-form ref="dataForm" :model="alarmForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :model="alarmForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="10">
           <el-form-item label="设备名称" prop="deviceName">
diff --git a/src/views/alarmManage/lampType/editLampType.vue b/src/views/alarmManage/lampType/editLampType.vue
index 8c3e37a..8e5fc23 100644
--- a/src/views/alarmManage/lampType/editLampType.vue
+++ b/src/views/alarmManage/lampType/editLampType.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="typeForm" label-well-code="right" label-width="200px">
+    <el-form ref="dataForm" :rules="rules" :model="typeForm" size="small" label-well-code="right" label-width="200px">
       <el-row :gutter="20">
         <el-col :span="20">
           <el-form-item label="路灯类型" prop="typeName">
diff --git a/src/views/alarmManage/lampType/lampTypeList.vue b/src/views/alarmManage/lampType/lampTypeList.vue
index f8547ed..f10c63b 100644
--- a/src/views/alarmManage/lampType/lampTypeList.vue
+++ b/src/views/alarmManage/lampType/lampTypeList.vue
@@ -8,12 +8,11 @@
           <el-row>
             <el-col :span="4">
               <el-form-item class="selectForm-container-item">
-                <el-input v-model.trim="listQuery.typeName" placeholder="类型名称" clearable />
+                <el-input v-model.trim="listQuery.typeName" size="small" placeholder="类型名称" clearable />
               </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-button class="filter-item" type="primary" icon="el-icon-search" size="small" style="margin-top: 2px" @click="search">搜索</el-button>
             </el-col>
           </el-row>
         </el-form>
@@ -28,7 +27,7 @@
           <el-button class="edit_btn" size="small" @click="add">新增</el-button>
         </el-col>
       </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
+      <el-table v-loading="listLoading" :data="list" class="table" size="small" border @selection-change="handleSelectionChange">
         <!--拥有删除权限则显示复选框-->
         <el-table-column v-if="hasPerm('/lampType/delete')" align="center" type="selection" width="55"/>
         <!--序号列-->
diff --git a/src/views/alarmManage/lampboxType/editLampboxType.vue b/src/views/alarmManage/lampboxType/editLampboxType.vue
index 1b94960..ae3a7c1 100644
--- a/src/views/alarmManage/lampboxType/editLampboxType.vue
+++ b/src/views/alarmManage/lampboxType/editLampboxType.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="typeForm" label-well-code="right" label-width="200px">
+    <el-form ref="dataForm" :rules="rules" :model="typeForm" size="small" label-well-code="right" label-width="200px">
       <el-row :gutter="20">
         <el-col :span="20">
           <el-form-item label="灯箱类型" prop="typeName">
diff --git a/src/views/alarmManage/lampboxType/lampboxTypeList.vue b/src/views/alarmManage/lampboxType/lampboxTypeList.vue
index 7b68f20..f33dcbf 100644
--- a/src/views/alarmManage/lampboxType/lampboxTypeList.vue
+++ b/src/views/alarmManage/lampboxType/lampboxTypeList.vue
@@ -8,7 +8,7 @@
           <el-row>
             <el-col :span="4">
               <el-form-item class="selectForm-container-item">
-                <el-input v-model.trim="listQuery.typeName" placeholder="类型名称" clearable />
+                <el-input v-model.trim="listQuery.typeName" size="small" placeholder="类型名称" clearable />
               </el-form-item>
             </el-col>
 
diff --git a/src/views/alarmManage/listAlarm.vue b/src/views/alarmManage/listAlarm.vue
index 7571a0e..fe3e359 100644
--- a/src/views/alarmManage/listAlarm.vue
+++ b/src/views/alarmManage/listAlarm.vue
@@ -1,73 +1,52 @@
 <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-form-item>
-              <el-input v-model.trim="listQuery.keyword" placeholder="设备编号/设备名称" clearable/>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmType" placeholder="报警类型" clearable>
-                <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmStatus" placeholder="报警状态" clearable>
-                <el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item" prop="startTime">
-              <el-date-picker
-                v-model="timeRange"
-                type="datetimerange"
-                range-separator="至"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                start-placeholder="报警开始时间"
-                end-placeholder="报警结束时间"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
-        <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>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="设备编号/设备名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmType" size="small" placeholder="报警类型" clearable>
+          <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmStatus" size="small" placeholder="报警状态" clearable>
+          <el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          size="small"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="报警开始时间"
+          end-placeholder="报警结束时间"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="130">
           <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
             <el-button type="text" size="small" @click="showDetail(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>
     <alarm-detail v-show="dialogFormVisible" ref="alarmdetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -123,7 +102,21 @@
       dialogFormVisible: false,
       alarmStatusList: [{ name: '正在报警', value: '1' }, { name: '已取消', value: '2' }], // 报警状态列表
       alarmTypeList: [],
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   watch: {
@@ -171,19 +164,15 @@
     },
     clearInput() {
       this.listQuery = {
-        name: '', // 姓名
-        sex: '', // 性别
-        nation: '', // 民族
-        collReason: '', // 采集原因
-        cardType: '', // 证件类型
-        idCardNo: '', // 证件号码
-        alarmReason: '', // 报警原因
-        startTime: '', // 开始时间
-        endTime: '', // 结束时间
+        keyword: '', // 设备编号/设备名称
+        alarmType: '', // 报警类型
+        alarmStatus: '', // 报警状态
+        startTime: '', // 报警开始时间
+        endTime: '', // 报警结束时间
         offset: 1,
         limit: 20,
-        sort: '',
-        order: ''
+        sort: 'alarmTime',
+        order: 'desc'
       }
       this.timeRange = []
       this.fetchData(false)
@@ -194,18 +183,13 @@
         this.alarmTypeList = response.data
       })
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }
diff --git a/src/views/alarmManage/listAlarmNow.vue b/src/views/alarmManage/listAlarmNow.vue
index c48b60a..d98b641 100644
--- a/src/views/alarmManage/listAlarmNow.vue
+++ b/src/views/alarmManage/listAlarmNow.vue
@@ -1,73 +1,47 @@
 <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-form-item>
-              <el-input v-model.trim="listQuery.keyword" placeholder="设备编号/设备名称" clearable/>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmType" placeholder="报警类型" clearable>
-                <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <!--<el-form-item>-->
-            <!--<el-select v-model="listQuery.alarmStatus" placeholder="报警状态" clearable>-->
-            <!--<el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>-->
-            <!--</el-select>-->
-            <!--</el-form-item>-->
-            <el-form-item class="selectForm-container-item" prop="startTime">
-              <el-date-picker
-                v-model="timeRange"
-                type="datetimerange"
-                range-separator="至"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                start-placeholder="报警开始时间"
-                end-placeholder="报警结束时间"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
-        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="设备编号/设备名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmType" size="small" placeholder="报警类型" clearable>
+          <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          size="small"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="报警开始时间"
+          end-placeholder="报警结束时间"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
-            <span>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" align="center" width="130">
-          <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
             <el-button type="text" size="small" @click="showDetail(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>
     <alarm-detail v-show="dialogFormVisible" ref="alarmdetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -123,7 +97,21 @@
       dialogFormVisible: false,
       alarmStatusList: [{ name: '正在报警', value: '1' }, { name: '已取消', value: '2' }], // 报警状态列表
       alarmTypeList: [],
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   watch: {
@@ -171,15 +159,11 @@
     },
     clearInput() {
       this.listQuery = {
-        name: '', // 姓名
-        sex: '', // 性别
-        nation: '', // 民族
-        collReason: '', // 采集原因
-        cardType: '', // 证件类型
-        idCardNo: '', // 证件号码
-        alarmReason: '', // 报警原因
-        startTime: '', // 开始时间
-        endTime: '', // 结束时间
+        keyword: '', // 设备编号/设备名称
+        alarmType: '', // 报警类型
+        alarmStatus: '1', // 报警状态
+        startTime: '', // 报警开始时间
+        endTime: '', // 报警结束时间
         offset: 1,
         limit: 20,
         sort: '',
@@ -194,18 +178,13 @@
         this.alarmTypeList = response.data
       })
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }
diff --git a/src/views/deviceManage/busCircuit.vue b/src/views/deviceManage/busCircuit.vue
index 2e1f872..7c9c804 100644
--- a/src/views/deviceManage/busCircuit.vue
+++ b/src/views/deviceManage/busCircuit.vue
@@ -1,77 +1,48 @@
 <!--回路列表-->
 <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-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.lampboxId" placeholder="所属灯箱" filterable clearable>
-                  <el-option v-for="item in boxList" :key="item.id" :label="item.lampboxName" :value="item.id"/>
-                </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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/circuit/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-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/circuit/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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.lampboxId" size="small" placeholder="所属灯箱" filterable clearable>
+          <el-option v-for="item in boxList" :key="item.id" :label="item.lampboxName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <!--<template slot="preColumns">-->
+      <!--<el-table-column align="center" type="selection" width="55"/>-->
+      <!--</template>-->
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <el-table-column label="操作" align="center" width="160">
-          <template slot-scope="scope">
-            <el-button v-if="hasPerm('/circuit/edit')" type="text" size="small" @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-circuit ref="editCircuit" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -128,7 +99,21 @@
       multipleSelection: [], // 多选选中项
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -253,17 +238,13 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/busController.vue b/src/views/deviceManage/busController.vue
index 49789c4..4646bf2 100644
--- a/src/views/deviceManage/busController.vue
+++ b/src/views/deviceManage/busController.vue
@@ -1,98 +1,67 @@
 <!--设备列表-->
 <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>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.controllerCode" size="small" placeholder="控制器编号" clearable />
+      </search-item>
+      <search-item/>
+      <search-item>
+        <el-select v-model="listQuery.controllerType" size="small" 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" size="small" placeholder="所属组织"/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" 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
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="selectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <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>
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <!--<template slot="preColumns">-->
+      <!--<el-table-column align="center" type="selection" width="55"/>-->
+      <!--</template>-->
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <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>
@@ -152,7 +121,21 @@
       statusList: [{ value: '1', name: '在线' }, { value: '0', name: '离线' }],
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -303,21 +286,17 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
-    handleSelectionChange(val) {
+    selectionChange(val) {
       this.multipleSelection = val
     }
   }
diff --git a/src/views/deviceManage/busGroup.vue b/src/views/deviceManage/busGroup.vue
index 9f85789..a35646b 100644
--- a/src/views/deviceManage/busGroup.vue
+++ b/src/views/deviceManage/busGroup.vue
@@ -1,80 +1,48 @@
 <!--灯箱列表-->
 <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.keyword" placeholder="分组名称" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.deviceType" placeholder="设备类型" clearable @change="fetchData">
-                  <el-option v-for="item in groupList" :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="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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/lampbox/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-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column 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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="分组名称" clearable />
+      </search-item>
+      <search-item/>
+      <search-item>
+        <el-select v-model="listQuery.deviceType" size="small" placeholder="设备类型" clearable @change="fetchData">
+          <el-option v-for="item in groupList" :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" size="small" placeholder="所属组织"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <el-table-column label="操作" align="center" width="160">
-          <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>-->
-            <el-button type="text" size="small" @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-Group ref="editGroup" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -132,7 +100,21 @@
       multipleSelection: [], // 多选选中项
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -249,17 +231,13 @@
         this.listLoading = false
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/busLamp.vue b/src/views/deviceManage/busLamp.vue
index 3450479..c480b30 100644
--- a/src/views/deviceManage/busLamp.vue
+++ b/src/views/deviceManage/busLamp.vue
@@ -1,104 +1,68 @@
 <!--路灯列表-->
 <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.keyword" placeholder="关键词" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.lampType" placeholder="路灯类型" clearable>
-                  <el-option v-for="item in typeList" :key="item.id" :label="item.typeName" :value="item.id"/>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </el-select>
-              </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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/lamp/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>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/lamp/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>
-        <!--操作列-->
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="关键词" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.lampType" size="small" placeholder="路灯类型" clearable>
+          <el-option v-for="item in typeList" :key="item.id" :label="item.typeName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" 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
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <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>
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
             <el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>
-            <el-button v-if="hasPerm('/lamp/edit')" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
-
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
             <el-button v-if="hasPerm('/lamp/remoteOn')" type="text" size="small">开灯</el-button>
             <el-button v-if="hasPerm('/lamp/remoteOff')" type="text" size="small">关灯</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-Lamp ref="editLamp" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -175,7 +139,21 @@
       statusList: [{ value: '1', name: '开灯' }, { value: '2', name: '关灯' }, { value: '3', name: '报警' }, { value: '4', name: '离线' }],
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -338,17 +316,13 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/busLampbox.vue b/src/views/deviceManage/busLampbox.vue
index 292c3a5..7763fac 100644
--- a/src/views/deviceManage/busLampbox.vue
+++ b/src/views/deviceManage/busLampbox.vue
@@ -1,46 +1,34 @@
 <!--灯箱列表-->
 <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.boxName" placeholder="灯箱名称" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/lampbox/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-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/lampbox/delete')" align="center" type="selection" width="55"/>
-        <!--序号列-->
-        <el-table-column :index="indexMethod" align="center" type="index" label="#" width="55"/>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.boxName" size="small" placeholder="灯箱名称" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
         <!--内容列-->
         <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">
@@ -55,30 +43,18 @@
             </div>
           </template>
         </el-table-column>
-        <!--操作列-->
+      </template>
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
             <el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>
-            <el-button v-if="hasPerm('/lampbox/edit')" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
+            <el-button type="text" size="small" @click.stop="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-Lampbox ref="editLampbox" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -144,7 +120,21 @@
       multipleSelection: [], // 多选选中项
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -277,6 +267,15 @@
       this.listQuery.limit = val
       this.fetchData()
     },
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
+    },
     // 改变当前页
     handleCurrentChange(val) {
       this.listQuery.offset = val
diff --git a/src/views/deviceManage/busLamppost.vue b/src/views/deviceManage/busLamppost.vue
index 92833a0..c193813 100644
--- a/src/views/deviceManage/busLamppost.vue
+++ b/src/views/deviceManage/busLamppost.vue
@@ -1,100 +1,65 @@
 <!--灯杆列表-->
 <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.keyword" placeholder="关键词" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.lamppostType" placeholder="路灯杆类型" clearable>
-                  <el-option v-for="item in typeList" :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">
-                <el-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </el-select>
-              </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('/lamppost/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>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/lamppost/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>
-        <!--操作列-->
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="关键词" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.lamppostType" size="small" placeholder="路灯杆类型" clearable>
+          <el-option v-for="item in typeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" 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
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <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>
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
-            <el-button v-if="hasPerm('/lamppost/edit')" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
+            <el-button type="text" size="small" @click.stop="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-Lamppost ref="editLamppost" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -161,7 +126,21 @@
       statusList: [{ value: '1', name: '开灯' }, { value: '2', name: '关灯' }, { value: '3', name: '报警' }, { value: '4', name: '离线' }],
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -320,17 +299,13 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/editCircuit.vue b/src/views/deviceManage/editCircuit.vue
index 9e9dd03..a362483 100644
--- a/src/views/deviceManage/editCircuit.vue
+++ b/src/views/deviceManage/editCircuit.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="cirForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="cirForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="回路编号" prop="circuitCode">
diff --git a/src/views/deviceManage/editController.vue b/src/views/deviceManage/editController.vue
index 7bc786f..444c835 100644
--- a/src/views/deviceManage/editController.vue
+++ b/src/views/deviceManage/editController.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="controllerForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="controllerForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="控制器编号" prop="controllerCode">
diff --git a/src/views/deviceManage/editGroup.vue b/src/views/deviceManage/editGroup.vue
index de9b88b..403d605 100644
--- a/src/views/deviceManage/editGroup.vue
+++ b/src/views/deviceManage/editGroup.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="groupForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="groupForm" size="small" label-well-code="right" label-width="110px">
       <el-row :span="24">
         <el-form-item label="分组名称" prop="groupName">
           <el-input v-model.trim="groupForm.groupName" :readonly="!isEditMode" clearable type="text" />
diff --git a/src/views/deviceManage/editLamp.vue b/src/views/deviceManage/editLamp.vue
index 3d45138..faf37d5 100644
--- a/src/views/deviceManage/editLamp.vue
+++ b/src/views/deviceManage/editLamp.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="lampForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="lampForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="路灯编号" prop="lampCode">
diff --git a/src/views/deviceManage/editLampbox.vue b/src/views/deviceManage/editLampbox.vue
index bd3a537..a4a8ea7 100644
--- a/src/views/deviceManage/editLampbox.vue
+++ b/src/views/deviceManage/editLampbox.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="boxForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="boxForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="灯箱编号" prop="lampboxCode">
diff --git a/src/views/deviceManage/editLamppost.vue b/src/views/deviceManage/editLamppost.vue
index 67a3a6f..a384319 100644
--- a/src/views/deviceManage/editLamppost.vue
+++ b/src/views/deviceManage/editLamppost.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="postForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="postForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="路灯杆编号" prop="lamppostCode">
diff --git a/src/views/deviceManage/listLog.vue b/src/views/deviceManage/listLog.vue
index 1d00e1c..5ab9a95 100644
--- a/src/views/deviceManage/listLog.vue
+++ b/src/views/deviceManage/listLog.vue
@@ -1,36 +1,32 @@
 <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-form-item>
-              <el-input v-model.trim="listQuery.devcode" placeholder="设备编号" clearable/>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.status" placeholder="下发状态" filterable clearable>
-                <el-option v-for="item in statusList" :key="item.name" :label="item.name" :value="item.name"/>
-              </el-select>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button class="edit_btn" size="small" @click="sendAll">全部设备下发</el-button>
-          <el-button class="edit_btn" size="small" @click="send">设备下发</el-button>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" :row-style="{height: '47px'}" class="table" border @selection-change="handleSelectionChange">
-        <el-table-column align="center" type="selection" width="55"/>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.devcode" size="small" placeholder="设备编号" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" placeholder="下发状态" filterable clearable>
+          <el-option v-for="item in statusList" :key="item.name" :label="item.name" :value="item.name"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button class="edit_btn" size="small" @click="sendAll">全部设备下发</el-button>
+        <el-button class="edit_btn" size="small" @click="send">设备下发</el-button>
+      </template>
+      <template slot="columns">
         <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">
             <div v-if="column.value === 'channel1'">
@@ -50,22 +46,9 @@
             </div>
           </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>
-  </div>
+      </template>
+    </normal-table>
+  </app-container>
 </template>
 
 <script>
@@ -151,7 +134,21 @@
       alarmStatusList: [{ name: '正在报警', value: '1' }, { name: '已取消', value: '2' }], // 报警状态列表
       statusList: [{ name: '未下发' }, { name: '已下发' }],
       alarmTypeList: [],
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -262,18 +259,13 @@
       this.timeRange = []
       this.fetchData(false)
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/example/tableExample.vue b/src/views/example/tableExample.vue
index 2d54fad..e8cd106 100644
--- a/src/views/example/tableExample.vue
+++ b/src/views/example/tableExample.vue
@@ -139,7 +139,7 @@
           text: '数据列表' // 标题名称
         },
         options: {
-          needIndex: false // 是否需要序号列
+          needIndex: true // 是否需要序号列
         },
         toolsOption: {
           selectColumns: false, // 是否需要筛选列
diff --git a/src/views/report/boxData.vue b/src/views/report/boxData.vue
index 2e04e4b..5faeff7 100644
--- a/src/views/report/boxData.vue
+++ b/src/views/report/boxData.vue
@@ -1,25 +1,50 @@
 <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-form-item class="selectForm-container-item">
-              <el-input v-model.trim="listQuery.keyword" placeholder="灯箱编号/灯箱名称" clearable/>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item">
-              <el-select v-model="listQuery.groupId" placeholder="设备组" clearable>
-                <el-option v-for="item in groupList" :key="item.id" :label="item.groupName" :value="item.id"/>
-              </el-select>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-      <div class="clearfloat"/>
-    </div>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="灯箱编号/灯箱名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.groupId" size="small" placeholder="设备组" clearable>
+          <el-option v-for="item in groupList" :key="item.id" :label="item.groupName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
+        <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">
+            <div v-if="column.value === 'A'">
+              <span v-html="allNum(scope.row.electricityA,scope.row.voltageA,scope.row.powerA)"/>
+            </div>
+            <div v-else-if="column.value === 'B'">
+              <span v-html="allNum(scope.row.electricityB,scope.row.voltageA,scope.row.powerB)"/>
+            </div>
+            <div v-else-if="column.value === 'C'">
+              <span v-html="allNum(scope.row.electricityC,scope.row.voltageA,scope.row.powerC)"/>
+            </div>
+            <div v-else>
+              <span>{{ scope.row[column.value] }}</span>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" width="130">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click="showHistory(scope.row)">查看历史</el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
     <!--查询结果Table显示-->
     <div>
       <el-row class="table-title">
@@ -43,29 +68,10 @@
             </div>
           </template>
         </el-table-column>
-        <el-table-column label="操作" align="center" width="130">
-          <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
-            <el-button type="text" size="small" @click="showHistory(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>
     <box-history v-show="dialogFormVisible" ref="boxhistory"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -121,7 +127,21 @@
       listLoading: true, // 列表加载
       dialogFormVisible: false,
       alarmReasonList: [], // 报警原因列表
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -177,18 +197,13 @@
         this.groupList = response.data
       })
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }
diff --git a/src/views/report/boxHistory.vue b/src/views/report/boxHistory.vue
index e63fb94..c5cf8ca 100644
--- a/src/views/report/boxHistory.vue
+++ b/src/views/report/boxHistory.vue
@@ -2,7 +2,7 @@
   <div class="app-container">
     <!--筛选条件-->
     <el-dialog :visible.sync="dialogFormVisible" :title="title" append-to-body>
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
+      <el-form ref="selectForm" :inline="true" :model="listQuery" size="small" class="form-container">
         <el-form-item class="selectForm-container-item" prop="startTime">
           <el-date-picker
             v-model="timeRange"
@@ -19,7 +19,7 @@
         <el-row class="table-title">
           <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
         </el-row>
-        <el-table v-loading="listLoading" :data="list" class="table" height="300px" border>
+        <el-table v-loading="listLoading" :data="list" class="table" size="small" height="300px" border>
           <el-table-column :index="indexMethod" label="序号" align="center" type="index" width="55" ></el-table-column>
           <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">
diff --git a/src/views/report/controllerData.vue b/src/views/report/controllerData.vue
index 5b7c360..ee81ba7 100644
--- a/src/views/report/controllerData.vue
+++ b/src/views/report/controllerData.vue
@@ -1,63 +1,40 @@
 <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-form-item class="selectForm-container-item">
-              <el-input v-model.trim="listQuery.keyword" placeholder="路灯编号/路灯名称" clearable/>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item">
-              <el-input v-model.trim="listQuery.controllerCode" placeholder="控制器编号" clearable/>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item">
-              <el-select v-model="listQuery.groupId" placeholder="设备组" clearable>
-                <el-option v-for="item in groupList" :key="item.id" :label="item.groupName" :value="item.id"/>
-              </el-select>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-      <div class="clearfloat"/>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="序号" width="55" align="center" type="index" />
-        <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>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="路灯编号/路灯名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.controllerCode" size="small" placeholder="控制器编号" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.groupId" size="small" placeholder="设备组" clearable>
+          <el-option v-for="item in groupList" :key="item.id" :label="item.groupName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="130">
           <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
             <el-button type="text" size="small" @click="showHistory(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>
     <history-data v-show="dialogFormVisible" ref="historydata"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -131,7 +108,21 @@
       listLoading: true, // 列表加载
       dialogFormVisible: false,
       alarmReasonList: [], // 报警原因列表
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -197,6 +188,15 @@
     handleCurrentChange(val) {
       this.listQuery.offset = val
       this.fetchData()
+    },
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
     }
   }
 }
diff --git a/src/views/report/historyData.vue b/src/views/report/historyData.vue
index 17e66de..9ba326e 100644
--- a/src/views/report/historyData.vue
+++ b/src/views/report/historyData.vue
@@ -2,7 +2,7 @@
   <div class="app-container">
     <!--筛选条件-->
     <el-dialog :visible.sync="dialogFormVisible" :title="title" append-to-body>
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
+      <el-form ref="selectForm" :inline="true" :model="listQuery" size="small" class="form-container">
         <el-form-item class="selectForm-container-item" prop="startTime">
           <el-date-picker
             v-model="timeRange"
@@ -12,14 +12,14 @@
             start-placeholder="查询开始时间"
             end-placeholder="查询结束时间"/>
         </el-form-item>
-        <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
+        <el-button class="filter-item" type="primary" icon="el-icon-search" size="small" @click="search">搜索</el-button>
       </el-form>
       <!--查询结果Table显示-->
       <div>
         <el-row class="table-title">
           <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
         </el-row>
-        <el-table v-loading="listLoading" :data="list" class="table" height="300px" border>
+        <el-table v-loading="listLoading" :data="list" class="table" size="small" height="300px" border>
           <el-table-column :index="indexMethod" label="序号" align="center" type="index" width="55" ></el-table-column>
           <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">
diff --git a/src/views/report/quantityData.vue b/src/views/report/quantityData.vue
index a4bd607..88a4d4d 100644
--- a/src/views/report/quantityData.vue
+++ b/src/views/report/quantityData.vue
@@ -1,46 +1,35 @@
 <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-form-item class="selectForm-container-item">
-              <el-date-picker
-                v-model="timeRange"
-                :picker-options="pickerOptions"
-                :clearable="false"
-                type="daterange"
-                value-format="yyyy-MM-dd"
-                align="right"
-                unlink-panels
-                range-separator="至"
-                start-placeholder="开始日期"
-                end-placeholder="结束日期"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-      <div class="clearfloat"/>
-    </div>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          :picker-options="pickerOptions"
+          :clearable="false"
+          type="daterange"
+          value-format="yyyy-MM-dd"
+          align="right"
+          unlink-panels
+          range-separator="至"
+          size="small"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"/>
+      </search-item>
+    </search-area>
     <div ref="chart" class="chart-body" style="padding-top: 20px;"/>
-    <!--查询结果Table显示-->
-    <div style="margin-bottom: 50px">
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" :row-style="{height: '47px'}" class="table" border>
-        <el-table-column :index="indexMethod" label="序号" width="55" align="center" type="index" />
-        <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>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-  </div>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage"/>
+  </app-container>
 </template>
 
 <script>
@@ -104,7 +93,21 @@
       list: [], // 报警列表
       chart: '',
       staticsList: [], // 报警列表
-      listLoading: true // 列表加载
+      listLoading: true, // 列表加载
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   watch: {
@@ -202,6 +205,15 @@
     handleCurrentChange(val) {
       this.listQuery.offset = val
       this.fetchData()
+    },
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
     }
   }
 }
diff --git a/src/views/report/statics.vue b/src/views/report/statics.vue
index 8a16fbd..005a41e 100644
--- a/src/views/report/statics.vue
+++ b/src/views/report/statics.vue
@@ -1,31 +1,24 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <!--筛选条件-->
-    <div class="search-div">
-      <div class="search-left">
-        <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
-          <el-row>
-            <el-form-item class="selectForm-container-item">
-              <el-date-picker
-                v-model="timeRange"
-                :picker-options="pickerOptions"
-                :clearable="false"
-                type="daterange"
-                value-format="yyyy-MM-dd"
-                align="right"
-                unlink-panels
-                range-separator="至"
-                start-placeholder="开始日期"
-                end-placeholder="结束日期"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-      <div class="clearfloat"/>
-    </div>
-    <el-tabs v-model="tab" type="border-card">
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          :picker-options="pickerOptions"
+          :clearable="false"
+          size="small"
+          type="daterange"
+          value-format="yyyy-MM-dd"
+          align="right"
+          unlink-panels
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"/>
+      </search-item>
+    </search-area>
+    <el-tabs v-model="tab" type="border-card" style="border-top: 12px solid #ebebeb !important;">
       <el-tab-pane label="街道统计" name="street">
         <el-row v-if="tab === 'street'" style="padding-top: 20px;">
           <el-col :span="12" >
@@ -68,7 +61,7 @@
         <div ref="chart" class="chart-body"/>
       </el-col>
     </el-row>
-  </div>
+  </app-container>
 </template>
 
 <script>

diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 5077bef..3fd3f33 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -58,6 +58,8 @@
       <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns"/>
+        <!--复选框列-->
+        <el-table-column v-if="options && options.needMultSelect" align="center" type="selection" width="55"/>
         <!--序号列-->
         <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
         <!--内容列, 若columns存在且长度大于0-->
@@ -140,7 +142,8 @@
       type: Object,
       default: function() {
         return {
-          needIndex: true // 是否需要序号列
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
         }
       }
     }, // 配置项
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
index 1175911..b5e8442 100644
--- a/src/components/SearchArea/SearchArea.vue
+++ b/src/components/SearchArea/SearchArea.vue
@@ -16,6 +16,7 @@
       <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
       <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
       <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns-seperate"/>
     </div>
     <!-- 弹出框式高级检索 -->
     <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
index 84bdb9f..c192d79 100644
--- a/src/layout/components/AppHeader.vue
+++ b/src/layout/components/AppHeader.vue
@@ -1,6 +1,14 @@
 <template>
   <el-header class="app-header">
     <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown v-if="showChangeSys" class="systemSelect" size="medium" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
     <el-dropdown class="dropdown-container" trigger="click">
       <div class="dropdown-wrapper">
         <span style="line-height:50px;">欢迎您，{{ name }}</span>
@@ -33,6 +41,7 @@
   data() {
     return {
       title: this.baseConfig.title, // 标题
+      showChangeSys: !this.baseConfig.singleSys, // 是否显示切换系统菜单
       name: this.$store.getters.name, // 用户姓名
       showSetPwd: false // 是否显示修改密码按钮
     }
@@ -40,7 +49,9 @@
   computed: {
     ...mapGetters([
       'sidebar',
-      'avatar'
+      'avatar',
+      'currentSystem',
+      'systems'
     ])
   },
   methods: {
@@ -55,6 +66,38 @@
     resetPwd() {
       this.showSetPwd = true
       this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      const url = this.baseConfig.mainPage
+      window.location.href = url
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      const params1 = `?token=${this.$store.getters.token}`
+      const params = `?sys=${command.name}&url=${command.url}&code=${command.code}&token=${this.$store.getters.token}`
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params1
+        } else {
+          window.open(command.url + params1, '_blank')
+        }
+      } else {
+        // 取token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = this.baseConfig.mainPage + command.url + params
+        } else {
+          window.open(this.baseConfig.mainPage + command.url + params, '_blank')
+        }
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
     }
   }
 }
diff --git a/src/permission.js b/src/permission.js
index 69e8233..637373e 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -26,20 +26,13 @@
           // 设置当前子系统为基础资源子系统
           const currentSys = {
             code: 'baseResourse',
-            id: '1189107859077373285',
-            ismenu: '0',
-            levels: 1,
-            name: '智慧照明子系统',
-            num: 0,
-            parentId: '0',
-            resourceType: '02',
-            url: '/baseResourse'
+            name: '智慧照明子系统'
           }
           // 将当前系统信息保存在localStorage中
           store.commit('SET_SYSTEM', currentSys)
           // 远程访问获取权限列表（菜单&按钮）
           store.dispatch('GetMenus', currentSys).then(() => {
-            store.commit('SET_CHANGEFLAG', '0')
+            // store.commit('SET_CHANGEFLAG', '0')
             router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
             next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
           })
diff --git a/src/router/index.js b/src/router/index.js
index 32f93ef..b558038 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -49,21 +49,22 @@
   // 404错误页面
   { path: '/404', component: () => import('@/views/errorPage/404'), hidden: true },
   // 401 错误页面
-  { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
-  // 主页
-  {
-    path: '/',
-    component: Layout,
-    redirect: 'dashboard',
-    name: 'Dashboard',
-    // hidden: true,
-    children: [{
-      path: 'dashboard',
-      name: 'Dashboard',
-      component: () => import('@/views/dashboard/index'),
-      meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
-    }]
-  }
+  { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true }
+  // { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
+  // // 主页
+  // {
+  //   path: '/',
+  //   component: Layout,
+  //   redirect: 'dashboard',
+  //   name: 'Dashboard',
+  //   // hidden: true,
+  //   children: [{
+  //     path: 'dashboard',
+  //     name: 'Dashboard',
+  //     component: () => import('@/views/dashboard/index'),
+  //     meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
+  //   }]
+  // }
 ]
 // 实例化vue的时候直挂载constantRouter
 export default new Router({
diff --git a/src/views/alarmManage/alarmRule.vue b/src/views/alarmManage/alarmRule.vue
index 888a4d1..11469a2 100644
--- a/src/views/alarmManage/alarmRule.vue
+++ b/src/views/alarmManage/alarmRule.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
       <el-tab-pane label="路灯" name="lamp">
         <lamp-type-list ref="lamp"/>
@@ -8,7 +8,7 @@
         <lampbox-type-list ref="box"/>
       </el-tab-pane>
     </el-tabs>
-  </div>
+  </app-container>
 </template>
 
 <script>
diff --git a/src/views/alarmManage/components/alarmDetail.vue b/src/views/alarmManage/components/alarmDetail.vue
index 9c68377..d598779 100644
--- a/src/views/alarmManage/components/alarmDetail.vue
+++ b/src/views/alarmManage/components/alarmDetail.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :close-on-click-modal="false" :visible.sync="dialogFormVisible" title="报警详情" append-to-body>
-    <el-form ref="dataForm" :model="alarmForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :model="alarmForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="10">
           <el-form-item label="设备名称" prop="deviceName">
diff --git a/src/views/alarmManage/lampType/editLampType.vue b/src/views/alarmManage/lampType/editLampType.vue
index 8c3e37a..8e5fc23 100644
--- a/src/views/alarmManage/lampType/editLampType.vue
+++ b/src/views/alarmManage/lampType/editLampType.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="typeForm" label-well-code="right" label-width="200px">
+    <el-form ref="dataForm" :rules="rules" :model="typeForm" size="small" label-well-code="right" label-width="200px">
       <el-row :gutter="20">
         <el-col :span="20">
           <el-form-item label="路灯类型" prop="typeName">
diff --git a/src/views/alarmManage/lampType/lampTypeList.vue b/src/views/alarmManage/lampType/lampTypeList.vue
index f8547ed..f10c63b 100644
--- a/src/views/alarmManage/lampType/lampTypeList.vue
+++ b/src/views/alarmManage/lampType/lampTypeList.vue
@@ -8,12 +8,11 @@
           <el-row>
             <el-col :span="4">
               <el-form-item class="selectForm-container-item">
-                <el-input v-model.trim="listQuery.typeName" placeholder="类型名称" clearable />
+                <el-input v-model.trim="listQuery.typeName" size="small" placeholder="类型名称" clearable />
               </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-button class="filter-item" type="primary" icon="el-icon-search" size="small" style="margin-top: 2px" @click="search">搜索</el-button>
             </el-col>
           </el-row>
         </el-form>
@@ -28,7 +27,7 @@
           <el-button class="edit_btn" size="small" @click="add">新增</el-button>
         </el-col>
       </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
+      <el-table v-loading="listLoading" :data="list" class="table" size="small" border @selection-change="handleSelectionChange">
         <!--拥有删除权限则显示复选框-->
         <el-table-column v-if="hasPerm('/lampType/delete')" align="center" type="selection" width="55"/>
         <!--序号列-->
diff --git a/src/views/alarmManage/lampboxType/editLampboxType.vue b/src/views/alarmManage/lampboxType/editLampboxType.vue
index 1b94960..ae3a7c1 100644
--- a/src/views/alarmManage/lampboxType/editLampboxType.vue
+++ b/src/views/alarmManage/lampboxType/editLampboxType.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="typeForm" label-well-code="right" label-width="200px">
+    <el-form ref="dataForm" :rules="rules" :model="typeForm" size="small" label-well-code="right" label-width="200px">
       <el-row :gutter="20">
         <el-col :span="20">
           <el-form-item label="灯箱类型" prop="typeName">
diff --git a/src/views/alarmManage/lampboxType/lampboxTypeList.vue b/src/views/alarmManage/lampboxType/lampboxTypeList.vue
index 7b68f20..f33dcbf 100644
--- a/src/views/alarmManage/lampboxType/lampboxTypeList.vue
+++ b/src/views/alarmManage/lampboxType/lampboxTypeList.vue
@@ -8,7 +8,7 @@
           <el-row>
             <el-col :span="4">
               <el-form-item class="selectForm-container-item">
-                <el-input v-model.trim="listQuery.typeName" placeholder="类型名称" clearable />
+                <el-input v-model.trim="listQuery.typeName" size="small" placeholder="类型名称" clearable />
               </el-form-item>
             </el-col>
 
diff --git a/src/views/alarmManage/listAlarm.vue b/src/views/alarmManage/listAlarm.vue
index 7571a0e..fe3e359 100644
--- a/src/views/alarmManage/listAlarm.vue
+++ b/src/views/alarmManage/listAlarm.vue
@@ -1,73 +1,52 @@
 <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-form-item>
-              <el-input v-model.trim="listQuery.keyword" placeholder="设备编号/设备名称" clearable/>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmType" placeholder="报警类型" clearable>
-                <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmStatus" placeholder="报警状态" clearable>
-                <el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item" prop="startTime">
-              <el-date-picker
-                v-model="timeRange"
-                type="datetimerange"
-                range-separator="至"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                start-placeholder="报警开始时间"
-                end-placeholder="报警结束时间"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
-        <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>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="设备编号/设备名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmType" size="small" placeholder="报警类型" clearable>
+          <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmStatus" size="small" placeholder="报警状态" clearable>
+          <el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          size="small"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="报警开始时间"
+          end-placeholder="报警结束时间"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="130">
           <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
             <el-button type="text" size="small" @click="showDetail(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>
     <alarm-detail v-show="dialogFormVisible" ref="alarmdetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -123,7 +102,21 @@
       dialogFormVisible: false,
       alarmStatusList: [{ name: '正在报警', value: '1' }, { name: '已取消', value: '2' }], // 报警状态列表
       alarmTypeList: [],
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   watch: {
@@ -171,19 +164,15 @@
     },
     clearInput() {
       this.listQuery = {
-        name: '', // 姓名
-        sex: '', // 性别
-        nation: '', // 民族
-        collReason: '', // 采集原因
-        cardType: '', // 证件类型
-        idCardNo: '', // 证件号码
-        alarmReason: '', // 报警原因
-        startTime: '', // 开始时间
-        endTime: '', // 结束时间
+        keyword: '', // 设备编号/设备名称
+        alarmType: '', // 报警类型
+        alarmStatus: '', // 报警状态
+        startTime: '', // 报警开始时间
+        endTime: '', // 报警结束时间
         offset: 1,
         limit: 20,
-        sort: '',
-        order: ''
+        sort: 'alarmTime',
+        order: 'desc'
       }
       this.timeRange = []
       this.fetchData(false)
@@ -194,18 +183,13 @@
         this.alarmTypeList = response.data
       })
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }
diff --git a/src/views/alarmManage/listAlarmNow.vue b/src/views/alarmManage/listAlarmNow.vue
index c48b60a..d98b641 100644
--- a/src/views/alarmManage/listAlarmNow.vue
+++ b/src/views/alarmManage/listAlarmNow.vue
@@ -1,73 +1,47 @@
 <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-form-item>
-              <el-input v-model.trim="listQuery.keyword" placeholder="设备编号/设备名称" clearable/>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmType" placeholder="报警类型" clearable>
-                <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <!--<el-form-item>-->
-            <!--<el-select v-model="listQuery.alarmStatus" placeholder="报警状态" clearable>-->
-            <!--<el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>-->
-            <!--</el-select>-->
-            <!--</el-form-item>-->
-            <el-form-item class="selectForm-container-item" prop="startTime">
-              <el-date-picker
-                v-model="timeRange"
-                type="datetimerange"
-                range-separator="至"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                start-placeholder="报警开始时间"
-                end-placeholder="报警结束时间"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
-        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="设备编号/设备名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmType" size="small" placeholder="报警类型" clearable>
+          <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          size="small"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="报警开始时间"
+          end-placeholder="报警结束时间"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
-            <span>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" align="center" width="130">
-          <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
             <el-button type="text" size="small" @click="showDetail(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>
     <alarm-detail v-show="dialogFormVisible" ref="alarmdetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -123,7 +97,21 @@
       dialogFormVisible: false,
       alarmStatusList: [{ name: '正在报警', value: '1' }, { name: '已取消', value: '2' }], // 报警状态列表
       alarmTypeList: [],
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   watch: {
@@ -171,15 +159,11 @@
     },
     clearInput() {
       this.listQuery = {
-        name: '', // 姓名
-        sex: '', // 性别
-        nation: '', // 民族
-        collReason: '', // 采集原因
-        cardType: '', // 证件类型
-        idCardNo: '', // 证件号码
-        alarmReason: '', // 报警原因
-        startTime: '', // 开始时间
-        endTime: '', // 结束时间
+        keyword: '', // 设备编号/设备名称
+        alarmType: '', // 报警类型
+        alarmStatus: '1', // 报警状态
+        startTime: '', // 报警开始时间
+        endTime: '', // 报警结束时间
         offset: 1,
         limit: 20,
         sort: '',
@@ -194,18 +178,13 @@
         this.alarmTypeList = response.data
       })
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }
diff --git a/src/views/deviceManage/busCircuit.vue b/src/views/deviceManage/busCircuit.vue
index 2e1f872..7c9c804 100644
--- a/src/views/deviceManage/busCircuit.vue
+++ b/src/views/deviceManage/busCircuit.vue
@@ -1,77 +1,48 @@
 <!--回路列表-->
 <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-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.lampboxId" placeholder="所属灯箱" filterable clearable>
-                  <el-option v-for="item in boxList" :key="item.id" :label="item.lampboxName" :value="item.id"/>
-                </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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/circuit/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-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/circuit/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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.lampboxId" size="small" placeholder="所属灯箱" filterable clearable>
+          <el-option v-for="item in boxList" :key="item.id" :label="item.lampboxName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <!--<template slot="preColumns">-->
+      <!--<el-table-column align="center" type="selection" width="55"/>-->
+      <!--</template>-->
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <el-table-column label="操作" align="center" width="160">
-          <template slot-scope="scope">
-            <el-button v-if="hasPerm('/circuit/edit')" type="text" size="small" @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-circuit ref="editCircuit" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -128,7 +99,21 @@
       multipleSelection: [], // 多选选中项
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -253,17 +238,13 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/busController.vue b/src/views/deviceManage/busController.vue
index 49789c4..4646bf2 100644
--- a/src/views/deviceManage/busController.vue
+++ b/src/views/deviceManage/busController.vue
@@ -1,98 +1,67 @@
 <!--设备列表-->
 <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>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.controllerCode" size="small" placeholder="控制器编号" clearable />
+      </search-item>
+      <search-item/>
+      <search-item>
+        <el-select v-model="listQuery.controllerType" size="small" 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" size="small" placeholder="所属组织"/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" 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
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="selectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <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>
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <!--<template slot="preColumns">-->
+      <!--<el-table-column align="center" type="selection" width="55"/>-->
+      <!--</template>-->
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <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>
@@ -152,7 +121,21 @@
       statusList: [{ value: '1', name: '在线' }, { value: '0', name: '离线' }],
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -303,21 +286,17 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
-    handleSelectionChange(val) {
+    selectionChange(val) {
       this.multipleSelection = val
     }
   }
diff --git a/src/views/deviceManage/busGroup.vue b/src/views/deviceManage/busGroup.vue
index 9f85789..a35646b 100644
--- a/src/views/deviceManage/busGroup.vue
+++ b/src/views/deviceManage/busGroup.vue
@@ -1,80 +1,48 @@
 <!--灯箱列表-->
 <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.keyword" placeholder="分组名称" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.deviceType" placeholder="设备类型" clearable @change="fetchData">
-                  <el-option v-for="item in groupList" :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="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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/lampbox/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-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column 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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="分组名称" clearable />
+      </search-item>
+      <search-item/>
+      <search-item>
+        <el-select v-model="listQuery.deviceType" size="small" placeholder="设备类型" clearable @change="fetchData">
+          <el-option v-for="item in groupList" :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" size="small" placeholder="所属组织"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <el-table-column label="操作" align="center" width="160">
-          <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>-->
-            <el-button type="text" size="small" @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-Group ref="editGroup" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -132,7 +100,21 @@
       multipleSelection: [], // 多选选中项
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -249,17 +231,13 @@
         this.listLoading = false
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/busLamp.vue b/src/views/deviceManage/busLamp.vue
index 3450479..c480b30 100644
--- a/src/views/deviceManage/busLamp.vue
+++ b/src/views/deviceManage/busLamp.vue
@@ -1,104 +1,68 @@
 <!--路灯列表-->
 <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.keyword" placeholder="关键词" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.lampType" placeholder="路灯类型" clearable>
-                  <el-option v-for="item in typeList" :key="item.id" :label="item.typeName" :value="item.id"/>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </el-select>
-              </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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/lamp/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>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/lamp/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>
-        <!--操作列-->
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="关键词" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.lampType" size="small" placeholder="路灯类型" clearable>
+          <el-option v-for="item in typeList" :key="item.id" :label="item.typeName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" 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
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <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>
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
             <el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>
-            <el-button v-if="hasPerm('/lamp/edit')" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
-
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
             <el-button v-if="hasPerm('/lamp/remoteOn')" type="text" size="small">开灯</el-button>
             <el-button v-if="hasPerm('/lamp/remoteOff')" type="text" size="small">关灯</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-Lamp ref="editLamp" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -175,7 +139,21 @@
       statusList: [{ value: '1', name: '开灯' }, { value: '2', name: '关灯' }, { value: '3', name: '报警' }, { value: '4', name: '离线' }],
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -338,17 +316,13 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/busLampbox.vue b/src/views/deviceManage/busLampbox.vue
index 292c3a5..7763fac 100644
--- a/src/views/deviceManage/busLampbox.vue
+++ b/src/views/deviceManage/busLampbox.vue
@@ -1,46 +1,34 @@
 <!--灯箱列表-->
 <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.boxName" placeholder="灯箱名称" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/lampbox/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-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/lampbox/delete')" align="center" type="selection" width="55"/>
-        <!--序号列-->
-        <el-table-column :index="indexMethod" align="center" type="index" label="#" width="55"/>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.boxName" size="small" placeholder="灯箱名称" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
         <!--内容列-->
         <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">
@@ -55,30 +43,18 @@
             </div>
           </template>
         </el-table-column>
-        <!--操作列-->
+      </template>
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
             <el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>
-            <el-button v-if="hasPerm('/lampbox/edit')" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
+            <el-button type="text" size="small" @click.stop="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-Lampbox ref="editLampbox" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -144,7 +120,21 @@
       multipleSelection: [], // 多选选中项
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -277,6 +267,15 @@
       this.listQuery.limit = val
       this.fetchData()
     },
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
+    },
     // 改变当前页
     handleCurrentChange(val) {
       this.listQuery.offset = val
diff --git a/src/views/deviceManage/busLamppost.vue b/src/views/deviceManage/busLamppost.vue
index 92833a0..c193813 100644
--- a/src/views/deviceManage/busLamppost.vue
+++ b/src/views/deviceManage/busLamppost.vue
@@ -1,100 +1,65 @@
 <!--灯杆列表-->
 <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.keyword" placeholder="关键词" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.lamppostType" placeholder="路灯杆类型" clearable>
-                  <el-option v-for="item in typeList" :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">
-                <el-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </el-select>
-              </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('/lamppost/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>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/lamppost/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>
-        <!--操作列-->
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="关键词" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.lamppostType" size="small" placeholder="路灯杆类型" clearable>
+          <el-option v-for="item in typeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" 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
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <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>
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
-            <el-button v-if="hasPerm('/lamppost/edit')" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
+            <el-button type="text" size="small" @click.stop="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-Lamppost ref="editLamppost" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -161,7 +126,21 @@
       statusList: [{ value: '1', name: '开灯' }, { value: '2', name: '关灯' }, { value: '3', name: '报警' }, { value: '4', name: '离线' }],
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -320,17 +299,13 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/editCircuit.vue b/src/views/deviceManage/editCircuit.vue
index 9e9dd03..a362483 100644
--- a/src/views/deviceManage/editCircuit.vue
+++ b/src/views/deviceManage/editCircuit.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="cirForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="cirForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="回路编号" prop="circuitCode">
diff --git a/src/views/deviceManage/editController.vue b/src/views/deviceManage/editController.vue
index 7bc786f..444c835 100644
--- a/src/views/deviceManage/editController.vue
+++ b/src/views/deviceManage/editController.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="controllerForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="controllerForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="控制器编号" prop="controllerCode">
diff --git a/src/views/deviceManage/editGroup.vue b/src/views/deviceManage/editGroup.vue
index de9b88b..403d605 100644
--- a/src/views/deviceManage/editGroup.vue
+++ b/src/views/deviceManage/editGroup.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="groupForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="groupForm" size="small" label-well-code="right" label-width="110px">
       <el-row :span="24">
         <el-form-item label="分组名称" prop="groupName">
           <el-input v-model.trim="groupForm.groupName" :readonly="!isEditMode" clearable type="text" />
diff --git a/src/views/deviceManage/editLamp.vue b/src/views/deviceManage/editLamp.vue
index 3d45138..faf37d5 100644
--- a/src/views/deviceManage/editLamp.vue
+++ b/src/views/deviceManage/editLamp.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="lampForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="lampForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="路灯编号" prop="lampCode">
diff --git a/src/views/deviceManage/editLampbox.vue b/src/views/deviceManage/editLampbox.vue
index bd3a537..a4a8ea7 100644
--- a/src/views/deviceManage/editLampbox.vue
+++ b/src/views/deviceManage/editLampbox.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="boxForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="boxForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="灯箱编号" prop="lampboxCode">
diff --git a/src/views/deviceManage/editLamppost.vue b/src/views/deviceManage/editLamppost.vue
index 67a3a6f..a384319 100644
--- a/src/views/deviceManage/editLamppost.vue
+++ b/src/views/deviceManage/editLamppost.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="postForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="postForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="路灯杆编号" prop="lamppostCode">
diff --git a/src/views/deviceManage/listLog.vue b/src/views/deviceManage/listLog.vue
index 1d00e1c..5ab9a95 100644
--- a/src/views/deviceManage/listLog.vue
+++ b/src/views/deviceManage/listLog.vue
@@ -1,36 +1,32 @@
 <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-form-item>
-              <el-input v-model.trim="listQuery.devcode" placeholder="设备编号" clearable/>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.status" placeholder="下发状态" filterable clearable>
-                <el-option v-for="item in statusList" :key="item.name" :label="item.name" :value="item.name"/>
-              </el-select>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button class="edit_btn" size="small" @click="sendAll">全部设备下发</el-button>
-          <el-button class="edit_btn" size="small" @click="send">设备下发</el-button>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" :row-style="{height: '47px'}" class="table" border @selection-change="handleSelectionChange">
-        <el-table-column align="center" type="selection" width="55"/>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.devcode" size="small" placeholder="设备编号" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" placeholder="下发状态" filterable clearable>
+          <el-option v-for="item in statusList" :key="item.name" :label="item.name" :value="item.name"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button class="edit_btn" size="small" @click="sendAll">全部设备下发</el-button>
+        <el-button class="edit_btn" size="small" @click="send">设备下发</el-button>
+      </template>
+      <template slot="columns">
         <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">
             <div v-if="column.value === 'channel1'">
@@ -50,22 +46,9 @@
             </div>
           </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>
-  </div>
+      </template>
+    </normal-table>
+  </app-container>
 </template>
 
 <script>
@@ -151,7 +134,21 @@
       alarmStatusList: [{ name: '正在报警', value: '1' }, { name: '已取消', value: '2' }], // 报警状态列表
       statusList: [{ name: '未下发' }, { name: '已下发' }],
       alarmTypeList: [],
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -262,18 +259,13 @@
       this.timeRange = []
       this.fetchData(false)
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/example/tableExample.vue b/src/views/example/tableExample.vue
index 2d54fad..e8cd106 100644
--- a/src/views/example/tableExample.vue
+++ b/src/views/example/tableExample.vue
@@ -139,7 +139,7 @@
           text: '数据列表' // 标题名称
         },
         options: {
-          needIndex: false // 是否需要序号列
+          needIndex: true // 是否需要序号列
         },
         toolsOption: {
           selectColumns: false, // 是否需要筛选列
diff --git a/src/views/report/boxData.vue b/src/views/report/boxData.vue
index 2e04e4b..5faeff7 100644
--- a/src/views/report/boxData.vue
+++ b/src/views/report/boxData.vue
@@ -1,25 +1,50 @@
 <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-form-item class="selectForm-container-item">
-              <el-input v-model.trim="listQuery.keyword" placeholder="灯箱编号/灯箱名称" clearable/>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item">
-              <el-select v-model="listQuery.groupId" placeholder="设备组" clearable>
-                <el-option v-for="item in groupList" :key="item.id" :label="item.groupName" :value="item.id"/>
-              </el-select>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-      <div class="clearfloat"/>
-    </div>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="灯箱编号/灯箱名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.groupId" size="small" placeholder="设备组" clearable>
+          <el-option v-for="item in groupList" :key="item.id" :label="item.groupName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
+        <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">
+            <div v-if="column.value === 'A'">
+              <span v-html="allNum(scope.row.electricityA,scope.row.voltageA,scope.row.powerA)"/>
+            </div>
+            <div v-else-if="column.value === 'B'">
+              <span v-html="allNum(scope.row.electricityB,scope.row.voltageA,scope.row.powerB)"/>
+            </div>
+            <div v-else-if="column.value === 'C'">
+              <span v-html="allNum(scope.row.electricityC,scope.row.voltageA,scope.row.powerC)"/>
+            </div>
+            <div v-else>
+              <span>{{ scope.row[column.value] }}</span>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" width="130">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click="showHistory(scope.row)">查看历史</el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
     <!--查询结果Table显示-->
     <div>
       <el-row class="table-title">
@@ -43,29 +68,10 @@
             </div>
           </template>
         </el-table-column>
-        <el-table-column label="操作" align="center" width="130">
-          <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
-            <el-button type="text" size="small" @click="showHistory(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>
     <box-history v-show="dialogFormVisible" ref="boxhistory"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -121,7 +127,21 @@
       listLoading: true, // 列表加载
       dialogFormVisible: false,
       alarmReasonList: [], // 报警原因列表
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -177,18 +197,13 @@
         this.groupList = response.data
       })
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }
diff --git a/src/views/report/boxHistory.vue b/src/views/report/boxHistory.vue
index e63fb94..c5cf8ca 100644
--- a/src/views/report/boxHistory.vue
+++ b/src/views/report/boxHistory.vue
@@ -2,7 +2,7 @@
   <div class="app-container">
     <!--筛选条件-->
     <el-dialog :visible.sync="dialogFormVisible" :title="title" append-to-body>
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
+      <el-form ref="selectForm" :inline="true" :model="listQuery" size="small" class="form-container">
         <el-form-item class="selectForm-container-item" prop="startTime">
           <el-date-picker
             v-model="timeRange"
@@ -19,7 +19,7 @@
         <el-row class="table-title">
           <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
         </el-row>
-        <el-table v-loading="listLoading" :data="list" class="table" height="300px" border>
+        <el-table v-loading="listLoading" :data="list" class="table" size="small" height="300px" border>
           <el-table-column :index="indexMethod" label="序号" align="center" type="index" width="55" ></el-table-column>
           <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">
diff --git a/src/views/report/controllerData.vue b/src/views/report/controllerData.vue
index 5b7c360..ee81ba7 100644
--- a/src/views/report/controllerData.vue
+++ b/src/views/report/controllerData.vue
@@ -1,63 +1,40 @@
 <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-form-item class="selectForm-container-item">
-              <el-input v-model.trim="listQuery.keyword" placeholder="路灯编号/路灯名称" clearable/>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item">
-              <el-input v-model.trim="listQuery.controllerCode" placeholder="控制器编号" clearable/>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item">
-              <el-select v-model="listQuery.groupId" placeholder="设备组" clearable>
-                <el-option v-for="item in groupList" :key="item.id" :label="item.groupName" :value="item.id"/>
-              </el-select>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-      <div class="clearfloat"/>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="序号" width="55" align="center" type="index" />
-        <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>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="路灯编号/路灯名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.controllerCode" size="small" placeholder="控制器编号" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.groupId" size="small" placeholder="设备组" clearable>
+          <el-option v-for="item in groupList" :key="item.id" :label="item.groupName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="130">
           <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
             <el-button type="text" size="small" @click="showHistory(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>
     <history-data v-show="dialogFormVisible" ref="historydata"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -131,7 +108,21 @@
       listLoading: true, // 列表加载
       dialogFormVisible: false,
       alarmReasonList: [], // 报警原因列表
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -197,6 +188,15 @@
     handleCurrentChange(val) {
       this.listQuery.offset = val
       this.fetchData()
+    },
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
     }
   }
 }
diff --git a/src/views/report/historyData.vue b/src/views/report/historyData.vue
index 17e66de..9ba326e 100644
--- a/src/views/report/historyData.vue
+++ b/src/views/report/historyData.vue
@@ -2,7 +2,7 @@
   <div class="app-container">
     <!--筛选条件-->
     <el-dialog :visible.sync="dialogFormVisible" :title="title" append-to-body>
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
+      <el-form ref="selectForm" :inline="true" :model="listQuery" size="small" class="form-container">
         <el-form-item class="selectForm-container-item" prop="startTime">
           <el-date-picker
             v-model="timeRange"
@@ -12,14 +12,14 @@
             start-placeholder="查询开始时间"
             end-placeholder="查询结束时间"/>
         </el-form-item>
-        <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
+        <el-button class="filter-item" type="primary" icon="el-icon-search" size="small" @click="search">搜索</el-button>
       </el-form>
       <!--查询结果Table显示-->
       <div>
         <el-row class="table-title">
           <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
         </el-row>
-        <el-table v-loading="listLoading" :data="list" class="table" height="300px" border>
+        <el-table v-loading="listLoading" :data="list" class="table" size="small" height="300px" border>
           <el-table-column :index="indexMethod" label="序号" align="center" type="index" width="55" ></el-table-column>
           <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">
diff --git a/src/views/report/quantityData.vue b/src/views/report/quantityData.vue
index a4bd607..88a4d4d 100644
--- a/src/views/report/quantityData.vue
+++ b/src/views/report/quantityData.vue
@@ -1,46 +1,35 @@
 <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-form-item class="selectForm-container-item">
-              <el-date-picker
-                v-model="timeRange"
-                :picker-options="pickerOptions"
-                :clearable="false"
-                type="daterange"
-                value-format="yyyy-MM-dd"
-                align="right"
-                unlink-panels
-                range-separator="至"
-                start-placeholder="开始日期"
-                end-placeholder="结束日期"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-      <div class="clearfloat"/>
-    </div>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          :picker-options="pickerOptions"
+          :clearable="false"
+          type="daterange"
+          value-format="yyyy-MM-dd"
+          align="right"
+          unlink-panels
+          range-separator="至"
+          size="small"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"/>
+      </search-item>
+    </search-area>
     <div ref="chart" class="chart-body" style="padding-top: 20px;"/>
-    <!--查询结果Table显示-->
-    <div style="margin-bottom: 50px">
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" :row-style="{height: '47px'}" class="table" border>
-        <el-table-column :index="indexMethod" label="序号" width="55" align="center" type="index" />
-        <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>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-  </div>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage"/>
+  </app-container>
 </template>
 
 <script>
@@ -104,7 +93,21 @@
       list: [], // 报警列表
       chart: '',
       staticsList: [], // 报警列表
-      listLoading: true // 列表加载
+      listLoading: true, // 列表加载
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   watch: {
@@ -202,6 +205,15 @@
     handleCurrentChange(val) {
       this.listQuery.offset = val
       this.fetchData()
+    },
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
     }
   }
 }
diff --git a/src/views/report/statics.vue b/src/views/report/statics.vue
index 8a16fbd..005a41e 100644
--- a/src/views/report/statics.vue
+++ b/src/views/report/statics.vue
@@ -1,31 +1,24 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <!--筛选条件-->
-    <div class="search-div">
-      <div class="search-left">
-        <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
-          <el-row>
-            <el-form-item class="selectForm-container-item">
-              <el-date-picker
-                v-model="timeRange"
-                :picker-options="pickerOptions"
-                :clearable="false"
-                type="daterange"
-                value-format="yyyy-MM-dd"
-                align="right"
-                unlink-panels
-                range-separator="至"
-                start-placeholder="开始日期"
-                end-placeholder="结束日期"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-      <div class="clearfloat"/>
-    </div>
-    <el-tabs v-model="tab" type="border-card">
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          :picker-options="pickerOptions"
+          :clearable="false"
+          size="small"
+          type="daterange"
+          value-format="yyyy-MM-dd"
+          align="right"
+          unlink-panels
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"/>
+      </search-item>
+    </search-area>
+    <el-tabs v-model="tab" type="border-card" style="border-top: 12px solid #ebebeb !important;">
       <el-tab-pane label="街道统计" name="street">
         <el-row v-if="tab === 'street'" style="padding-top: 20px;">
           <el-col :span="12" >
@@ -68,7 +61,7 @@
         <div ref="chart" class="chart-body"/>
       </el-col>
     </el-row>
-  </div>
+  </app-container>
 </template>
 
 <script>
diff --git a/src/views/strategy/components/editStrategy.vue b/src/views/strategy/components/editStrategy.vue
index c396b81..ae64c77 100644
--- a/src/views/strategy/components/editStrategy.vue
+++ b/src/views/strategy/components/editStrategy.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="strategyInfo.strategyInfo" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="strategyInfo.strategyInfo" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="策略名称" prop="strategyName">
@@ -52,7 +52,7 @@
     </el-form>
     <el-tabs v-model="tab" type="border-card" >
       <el-tab-pane label="开灯命令" name="open">
-        <el-form ref="openForm" :rules="rules1" :model="openForm" label-well-code="right" label-width="110px">
+        <el-form ref="openForm" :rules="rules1" :model="openForm" size="small" label-well-code="right" label-width="110px">
           <el-row :gutter="20">
             <el-col :span="12">
               <el-form-item label="策略类型" prop="strategyType">
@@ -98,7 +98,7 @@
         </el-form>
       </el-tab-pane>
       <el-tab-pane label="关灯命令" name="close">
-        <el-form ref="closeForm" :rules="rules2" :model="closeForm" label-well-code="right" label-width="110px">
+        <el-form ref="closeForm" :rules="rules2" :model="closeForm" size="small" label-well-code="right" label-width="110px">
           <el-row :gutter="20">
             <el-col :span="12">
               <el-form-item label="策略类型" prop="strategyType">

diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 5077bef..3fd3f33 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -58,6 +58,8 @@
       <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns"/>
+        <!--复选框列-->
+        <el-table-column v-if="options && options.needMultSelect" align="center" type="selection" width="55"/>
         <!--序号列-->
         <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
         <!--内容列, 若columns存在且长度大于0-->
@@ -140,7 +142,8 @@
       type: Object,
       default: function() {
         return {
-          needIndex: true // 是否需要序号列
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
         }
       }
     }, // 配置项
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
index 1175911..b5e8442 100644
--- a/src/components/SearchArea/SearchArea.vue
+++ b/src/components/SearchArea/SearchArea.vue
@@ -16,6 +16,7 @@
       <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
       <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
       <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns-seperate"/>
     </div>
     <!-- 弹出框式高级检索 -->
     <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
index 84bdb9f..c192d79 100644
--- a/src/layout/components/AppHeader.vue
+++ b/src/layout/components/AppHeader.vue
@@ -1,6 +1,14 @@
 <template>
   <el-header class="app-header">
     <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown v-if="showChangeSys" class="systemSelect" size="medium" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
     <el-dropdown class="dropdown-container" trigger="click">
       <div class="dropdown-wrapper">
         <span style="line-height:50px;">欢迎您，{{ name }}</span>
@@ -33,6 +41,7 @@
   data() {
     return {
       title: this.baseConfig.title, // 标题
+      showChangeSys: !this.baseConfig.singleSys, // 是否显示切换系统菜单
       name: this.$store.getters.name, // 用户姓名
       showSetPwd: false // 是否显示修改密码按钮
     }
@@ -40,7 +49,9 @@
   computed: {
     ...mapGetters([
       'sidebar',
-      'avatar'
+      'avatar',
+      'currentSystem',
+      'systems'
     ])
   },
   methods: {
@@ -55,6 +66,38 @@
     resetPwd() {
       this.showSetPwd = true
       this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      const url = this.baseConfig.mainPage
+      window.location.href = url
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      const params1 = `?token=${this.$store.getters.token}`
+      const params = `?sys=${command.name}&url=${command.url}&code=${command.code}&token=${this.$store.getters.token}`
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params1
+        } else {
+          window.open(command.url + params1, '_blank')
+        }
+      } else {
+        // 取token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = this.baseConfig.mainPage + command.url + params
+        } else {
+          window.open(this.baseConfig.mainPage + command.url + params, '_blank')
+        }
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
     }
   }
 }
diff --git a/src/permission.js b/src/permission.js
index 69e8233..637373e 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -26,20 +26,13 @@
           // 设置当前子系统为基础资源子系统
           const currentSys = {
             code: 'baseResourse',
-            id: '1189107859077373285',
-            ismenu: '0',
-            levels: 1,
-            name: '智慧照明子系统',
-            num: 0,
-            parentId: '0',
-            resourceType: '02',
-            url: '/baseResourse'
+            name: '智慧照明子系统'
           }
           // 将当前系统信息保存在localStorage中
           store.commit('SET_SYSTEM', currentSys)
           // 远程访问获取权限列表（菜单&按钮）
           store.dispatch('GetMenus', currentSys).then(() => {
-            store.commit('SET_CHANGEFLAG', '0')
+            // store.commit('SET_CHANGEFLAG', '0')
             router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
             next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
           })
diff --git a/src/router/index.js b/src/router/index.js
index 32f93ef..b558038 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -49,21 +49,22 @@
   // 404错误页面
   { path: '/404', component: () => import('@/views/errorPage/404'), hidden: true },
   // 401 错误页面
-  { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
-  // 主页
-  {
-    path: '/',
-    component: Layout,
-    redirect: 'dashboard',
-    name: 'Dashboard',
-    // hidden: true,
-    children: [{
-      path: 'dashboard',
-      name: 'Dashboard',
-      component: () => import('@/views/dashboard/index'),
-      meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
-    }]
-  }
+  { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true }
+  // { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
+  // // 主页
+  // {
+  //   path: '/',
+  //   component: Layout,
+  //   redirect: 'dashboard',
+  //   name: 'Dashboard',
+  //   // hidden: true,
+  //   children: [{
+  //     path: 'dashboard',
+  //     name: 'Dashboard',
+  //     component: () => import('@/views/dashboard/index'),
+  //     meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
+  //   }]
+  // }
 ]
 // 实例化vue的时候直挂载constantRouter
 export default new Router({
diff --git a/src/views/alarmManage/alarmRule.vue b/src/views/alarmManage/alarmRule.vue
index 888a4d1..11469a2 100644
--- a/src/views/alarmManage/alarmRule.vue
+++ b/src/views/alarmManage/alarmRule.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
       <el-tab-pane label="路灯" name="lamp">
         <lamp-type-list ref="lamp"/>
@@ -8,7 +8,7 @@
         <lampbox-type-list ref="box"/>
       </el-tab-pane>
     </el-tabs>
-  </div>
+  </app-container>
 </template>
 
 <script>
diff --git a/src/views/alarmManage/components/alarmDetail.vue b/src/views/alarmManage/components/alarmDetail.vue
index 9c68377..d598779 100644
--- a/src/views/alarmManage/components/alarmDetail.vue
+++ b/src/views/alarmManage/components/alarmDetail.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :close-on-click-modal="false" :visible.sync="dialogFormVisible" title="报警详情" append-to-body>
-    <el-form ref="dataForm" :model="alarmForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :model="alarmForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="10">
           <el-form-item label="设备名称" prop="deviceName">
diff --git a/src/views/alarmManage/lampType/editLampType.vue b/src/views/alarmManage/lampType/editLampType.vue
index 8c3e37a..8e5fc23 100644
--- a/src/views/alarmManage/lampType/editLampType.vue
+++ b/src/views/alarmManage/lampType/editLampType.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="typeForm" label-well-code="right" label-width="200px">
+    <el-form ref="dataForm" :rules="rules" :model="typeForm" size="small" label-well-code="right" label-width="200px">
       <el-row :gutter="20">
         <el-col :span="20">
           <el-form-item label="路灯类型" prop="typeName">
diff --git a/src/views/alarmManage/lampType/lampTypeList.vue b/src/views/alarmManage/lampType/lampTypeList.vue
index f8547ed..f10c63b 100644
--- a/src/views/alarmManage/lampType/lampTypeList.vue
+++ b/src/views/alarmManage/lampType/lampTypeList.vue
@@ -8,12 +8,11 @@
           <el-row>
             <el-col :span="4">
               <el-form-item class="selectForm-container-item">
-                <el-input v-model.trim="listQuery.typeName" placeholder="类型名称" clearable />
+                <el-input v-model.trim="listQuery.typeName" size="small" placeholder="类型名称" clearable />
               </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-button class="filter-item" type="primary" icon="el-icon-search" size="small" style="margin-top: 2px" @click="search">搜索</el-button>
             </el-col>
           </el-row>
         </el-form>
@@ -28,7 +27,7 @@
           <el-button class="edit_btn" size="small" @click="add">新增</el-button>
         </el-col>
       </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
+      <el-table v-loading="listLoading" :data="list" class="table" size="small" border @selection-change="handleSelectionChange">
         <!--拥有删除权限则显示复选框-->
         <el-table-column v-if="hasPerm('/lampType/delete')" align="center" type="selection" width="55"/>
         <!--序号列-->
diff --git a/src/views/alarmManage/lampboxType/editLampboxType.vue b/src/views/alarmManage/lampboxType/editLampboxType.vue
index 1b94960..ae3a7c1 100644
--- a/src/views/alarmManage/lampboxType/editLampboxType.vue
+++ b/src/views/alarmManage/lampboxType/editLampboxType.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="typeForm" label-well-code="right" label-width="200px">
+    <el-form ref="dataForm" :rules="rules" :model="typeForm" size="small" label-well-code="right" label-width="200px">
       <el-row :gutter="20">
         <el-col :span="20">
           <el-form-item label="灯箱类型" prop="typeName">
diff --git a/src/views/alarmManage/lampboxType/lampboxTypeList.vue b/src/views/alarmManage/lampboxType/lampboxTypeList.vue
index 7b68f20..f33dcbf 100644
--- a/src/views/alarmManage/lampboxType/lampboxTypeList.vue
+++ b/src/views/alarmManage/lampboxType/lampboxTypeList.vue
@@ -8,7 +8,7 @@
           <el-row>
             <el-col :span="4">
               <el-form-item class="selectForm-container-item">
-                <el-input v-model.trim="listQuery.typeName" placeholder="类型名称" clearable />
+                <el-input v-model.trim="listQuery.typeName" size="small" placeholder="类型名称" clearable />
               </el-form-item>
             </el-col>
 
diff --git a/src/views/alarmManage/listAlarm.vue b/src/views/alarmManage/listAlarm.vue
index 7571a0e..fe3e359 100644
--- a/src/views/alarmManage/listAlarm.vue
+++ b/src/views/alarmManage/listAlarm.vue
@@ -1,73 +1,52 @@
 <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-form-item>
-              <el-input v-model.trim="listQuery.keyword" placeholder="设备编号/设备名称" clearable/>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmType" placeholder="报警类型" clearable>
-                <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmStatus" placeholder="报警状态" clearable>
-                <el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item" prop="startTime">
-              <el-date-picker
-                v-model="timeRange"
-                type="datetimerange"
-                range-separator="至"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                start-placeholder="报警开始时间"
-                end-placeholder="报警结束时间"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
-        <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>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="设备编号/设备名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmType" size="small" placeholder="报警类型" clearable>
+          <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmStatus" size="small" placeholder="报警状态" clearable>
+          <el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          size="small"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="报警开始时间"
+          end-placeholder="报警结束时间"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="130">
           <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
             <el-button type="text" size="small" @click="showDetail(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>
     <alarm-detail v-show="dialogFormVisible" ref="alarmdetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -123,7 +102,21 @@
       dialogFormVisible: false,
       alarmStatusList: [{ name: '正在报警', value: '1' }, { name: '已取消', value: '2' }], // 报警状态列表
       alarmTypeList: [],
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   watch: {
@@ -171,19 +164,15 @@
     },
     clearInput() {
       this.listQuery = {
-        name: '', // 姓名
-        sex: '', // 性别
-        nation: '', // 民族
-        collReason: '', // 采集原因
-        cardType: '', // 证件类型
-        idCardNo: '', // 证件号码
-        alarmReason: '', // 报警原因
-        startTime: '', // 开始时间
-        endTime: '', // 结束时间
+        keyword: '', // 设备编号/设备名称
+        alarmType: '', // 报警类型
+        alarmStatus: '', // 报警状态
+        startTime: '', // 报警开始时间
+        endTime: '', // 报警结束时间
         offset: 1,
         limit: 20,
-        sort: '',
-        order: ''
+        sort: 'alarmTime',
+        order: 'desc'
       }
       this.timeRange = []
       this.fetchData(false)
@@ -194,18 +183,13 @@
         this.alarmTypeList = response.data
       })
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }
diff --git a/src/views/alarmManage/listAlarmNow.vue b/src/views/alarmManage/listAlarmNow.vue
index c48b60a..d98b641 100644
--- a/src/views/alarmManage/listAlarmNow.vue
+++ b/src/views/alarmManage/listAlarmNow.vue
@@ -1,73 +1,47 @@
 <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-form-item>
-              <el-input v-model.trim="listQuery.keyword" placeholder="设备编号/设备名称" clearable/>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmType" placeholder="报警类型" clearable>
-                <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <!--<el-form-item>-->
-            <!--<el-select v-model="listQuery.alarmStatus" placeholder="报警状态" clearable>-->
-            <!--<el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>-->
-            <!--</el-select>-->
-            <!--</el-form-item>-->
-            <el-form-item class="selectForm-container-item" prop="startTime">
-              <el-date-picker
-                v-model="timeRange"
-                type="datetimerange"
-                range-separator="至"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                start-placeholder="报警开始时间"
-                end-placeholder="报警结束时间"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
-        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="设备编号/设备名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmType" size="small" placeholder="报警类型" clearable>
+          <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          size="small"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="报警开始时间"
+          end-placeholder="报警结束时间"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
-            <span>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" align="center" width="130">
-          <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
             <el-button type="text" size="small" @click="showDetail(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>
     <alarm-detail v-show="dialogFormVisible" ref="alarmdetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -123,7 +97,21 @@
       dialogFormVisible: false,
       alarmStatusList: [{ name: '正在报警', value: '1' }, { name: '已取消', value: '2' }], // 报警状态列表
       alarmTypeList: [],
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   watch: {
@@ -171,15 +159,11 @@
     },
     clearInput() {
       this.listQuery = {
-        name: '', // 姓名
-        sex: '', // 性别
-        nation: '', // 民族
-        collReason: '', // 采集原因
-        cardType: '', // 证件类型
-        idCardNo: '', // 证件号码
-        alarmReason: '', // 报警原因
-        startTime: '', // 开始时间
-        endTime: '', // 结束时间
+        keyword: '', // 设备编号/设备名称
+        alarmType: '', // 报警类型
+        alarmStatus: '1', // 报警状态
+        startTime: '', // 报警开始时间
+        endTime: '', // 报警结束时间
         offset: 1,
         limit: 20,
         sort: '',
@@ -194,18 +178,13 @@
         this.alarmTypeList = response.data
       })
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }
diff --git a/src/views/deviceManage/busCircuit.vue b/src/views/deviceManage/busCircuit.vue
index 2e1f872..7c9c804 100644
--- a/src/views/deviceManage/busCircuit.vue
+++ b/src/views/deviceManage/busCircuit.vue
@@ -1,77 +1,48 @@
 <!--回路列表-->
 <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-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.lampboxId" placeholder="所属灯箱" filterable clearable>
-                  <el-option v-for="item in boxList" :key="item.id" :label="item.lampboxName" :value="item.id"/>
-                </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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/circuit/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-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/circuit/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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.lampboxId" size="small" placeholder="所属灯箱" filterable clearable>
+          <el-option v-for="item in boxList" :key="item.id" :label="item.lampboxName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <!--<template slot="preColumns">-->
+      <!--<el-table-column align="center" type="selection" width="55"/>-->
+      <!--</template>-->
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <el-table-column label="操作" align="center" width="160">
-          <template slot-scope="scope">
-            <el-button v-if="hasPerm('/circuit/edit')" type="text" size="small" @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-circuit ref="editCircuit" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -128,7 +99,21 @@
       multipleSelection: [], // 多选选中项
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -253,17 +238,13 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/busController.vue b/src/views/deviceManage/busController.vue
index 49789c4..4646bf2 100644
--- a/src/views/deviceManage/busController.vue
+++ b/src/views/deviceManage/busController.vue
@@ -1,98 +1,67 @@
 <!--设备列表-->
 <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>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.controllerCode" size="small" placeholder="控制器编号" clearable />
+      </search-item>
+      <search-item/>
+      <search-item>
+        <el-select v-model="listQuery.controllerType" size="small" 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" size="small" placeholder="所属组织"/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" 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
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="selectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <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>
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <!--<template slot="preColumns">-->
+      <!--<el-table-column align="center" type="selection" width="55"/>-->
+      <!--</template>-->
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <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>
@@ -152,7 +121,21 @@
       statusList: [{ value: '1', name: '在线' }, { value: '0', name: '离线' }],
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -303,21 +286,17 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
-    handleSelectionChange(val) {
+    selectionChange(val) {
       this.multipleSelection = val
     }
   }
diff --git a/src/views/deviceManage/busGroup.vue b/src/views/deviceManage/busGroup.vue
index 9f85789..a35646b 100644
--- a/src/views/deviceManage/busGroup.vue
+++ b/src/views/deviceManage/busGroup.vue
@@ -1,80 +1,48 @@
 <!--灯箱列表-->
 <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.keyword" placeholder="分组名称" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.deviceType" placeholder="设备类型" clearable @change="fetchData">
-                  <el-option v-for="item in groupList" :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="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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/lampbox/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-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column 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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="分组名称" clearable />
+      </search-item>
+      <search-item/>
+      <search-item>
+        <el-select v-model="listQuery.deviceType" size="small" placeholder="设备类型" clearable @change="fetchData">
+          <el-option v-for="item in groupList" :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" size="small" placeholder="所属组织"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <el-table-column label="操作" align="center" width="160">
-          <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>-->
-            <el-button type="text" size="small" @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-Group ref="editGroup" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -132,7 +100,21 @@
       multipleSelection: [], // 多选选中项
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -249,17 +231,13 @@
         this.listLoading = false
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/busLamp.vue b/src/views/deviceManage/busLamp.vue
index 3450479..c480b30 100644
--- a/src/views/deviceManage/busLamp.vue
+++ b/src/views/deviceManage/busLamp.vue
@@ -1,104 +1,68 @@
 <!--路灯列表-->
 <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.keyword" placeholder="关键词" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.lampType" placeholder="路灯类型" clearable>
-                  <el-option v-for="item in typeList" :key="item.id" :label="item.typeName" :value="item.id"/>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </el-select>
-              </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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/lamp/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>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/lamp/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>
-        <!--操作列-->
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="关键词" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.lampType" size="small" placeholder="路灯类型" clearable>
+          <el-option v-for="item in typeList" :key="item.id" :label="item.typeName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" 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
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <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>
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
             <el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>
-            <el-button v-if="hasPerm('/lamp/edit')" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
-
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
             <el-button v-if="hasPerm('/lamp/remoteOn')" type="text" size="small">开灯</el-button>
             <el-button v-if="hasPerm('/lamp/remoteOff')" type="text" size="small">关灯</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-Lamp ref="editLamp" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -175,7 +139,21 @@
       statusList: [{ value: '1', name: '开灯' }, { value: '2', name: '关灯' }, { value: '3', name: '报警' }, { value: '4', name: '离线' }],
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -338,17 +316,13 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/busLampbox.vue b/src/views/deviceManage/busLampbox.vue
index 292c3a5..7763fac 100644
--- a/src/views/deviceManage/busLampbox.vue
+++ b/src/views/deviceManage/busLampbox.vue
@@ -1,46 +1,34 @@
 <!--灯箱列表-->
 <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.boxName" placeholder="灯箱名称" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/lampbox/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-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/lampbox/delete')" align="center" type="selection" width="55"/>
-        <!--序号列-->
-        <el-table-column :index="indexMethod" align="center" type="index" label="#" width="55"/>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.boxName" size="small" placeholder="灯箱名称" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
         <!--内容列-->
         <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">
@@ -55,30 +43,18 @@
             </div>
           </template>
         </el-table-column>
-        <!--操作列-->
+      </template>
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
             <el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>
-            <el-button v-if="hasPerm('/lampbox/edit')" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
+            <el-button type="text" size="small" @click.stop="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-Lampbox ref="editLampbox" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -144,7 +120,21 @@
       multipleSelection: [], // 多选选中项
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -277,6 +267,15 @@
       this.listQuery.limit = val
       this.fetchData()
     },
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
+    },
     // 改变当前页
     handleCurrentChange(val) {
       this.listQuery.offset = val
diff --git a/src/views/deviceManage/busLamppost.vue b/src/views/deviceManage/busLamppost.vue
index 92833a0..c193813 100644
--- a/src/views/deviceManage/busLamppost.vue
+++ b/src/views/deviceManage/busLamppost.vue
@@ -1,100 +1,65 @@
 <!--灯杆列表-->
 <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.keyword" placeholder="关键词" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.lamppostType" placeholder="路灯杆类型" clearable>
-                  <el-option v-for="item in typeList" :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">
-                <el-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </el-select>
-              </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('/lamppost/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>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/lamppost/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>
-        <!--操作列-->
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="关键词" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.lamppostType" size="small" placeholder="路灯杆类型" clearable>
+          <el-option v-for="item in typeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" 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
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <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>
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
-            <el-button v-if="hasPerm('/lamppost/edit')" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
+            <el-button type="text" size="small" @click.stop="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-Lamppost ref="editLamppost" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -161,7 +126,21 @@
       statusList: [{ value: '1', name: '开灯' }, { value: '2', name: '关灯' }, { value: '3', name: '报警' }, { value: '4', name: '离线' }],
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -320,17 +299,13 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/editCircuit.vue b/src/views/deviceManage/editCircuit.vue
index 9e9dd03..a362483 100644
--- a/src/views/deviceManage/editCircuit.vue
+++ b/src/views/deviceManage/editCircuit.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="cirForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="cirForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="回路编号" prop="circuitCode">
diff --git a/src/views/deviceManage/editController.vue b/src/views/deviceManage/editController.vue
index 7bc786f..444c835 100644
--- a/src/views/deviceManage/editController.vue
+++ b/src/views/deviceManage/editController.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="controllerForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="controllerForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="控制器编号" prop="controllerCode">
diff --git a/src/views/deviceManage/editGroup.vue b/src/views/deviceManage/editGroup.vue
index de9b88b..403d605 100644
--- a/src/views/deviceManage/editGroup.vue
+++ b/src/views/deviceManage/editGroup.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="groupForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="groupForm" size="small" label-well-code="right" label-width="110px">
       <el-row :span="24">
         <el-form-item label="分组名称" prop="groupName">
           <el-input v-model.trim="groupForm.groupName" :readonly="!isEditMode" clearable type="text" />
diff --git a/src/views/deviceManage/editLamp.vue b/src/views/deviceManage/editLamp.vue
index 3d45138..faf37d5 100644
--- a/src/views/deviceManage/editLamp.vue
+++ b/src/views/deviceManage/editLamp.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="lampForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="lampForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="路灯编号" prop="lampCode">
diff --git a/src/views/deviceManage/editLampbox.vue b/src/views/deviceManage/editLampbox.vue
index bd3a537..a4a8ea7 100644
--- a/src/views/deviceManage/editLampbox.vue
+++ b/src/views/deviceManage/editLampbox.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="boxForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="boxForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="灯箱编号" prop="lampboxCode">
diff --git a/src/views/deviceManage/editLamppost.vue b/src/views/deviceManage/editLamppost.vue
index 67a3a6f..a384319 100644
--- a/src/views/deviceManage/editLamppost.vue
+++ b/src/views/deviceManage/editLamppost.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="postForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="postForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="路灯杆编号" prop="lamppostCode">
diff --git a/src/views/deviceManage/listLog.vue b/src/views/deviceManage/listLog.vue
index 1d00e1c..5ab9a95 100644
--- a/src/views/deviceManage/listLog.vue
+++ b/src/views/deviceManage/listLog.vue
@@ -1,36 +1,32 @@
 <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-form-item>
-              <el-input v-model.trim="listQuery.devcode" placeholder="设备编号" clearable/>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.status" placeholder="下发状态" filterable clearable>
-                <el-option v-for="item in statusList" :key="item.name" :label="item.name" :value="item.name"/>
-              </el-select>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button class="edit_btn" size="small" @click="sendAll">全部设备下发</el-button>
-          <el-button class="edit_btn" size="small" @click="send">设备下发</el-button>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" :row-style="{height: '47px'}" class="table" border @selection-change="handleSelectionChange">
-        <el-table-column align="center" type="selection" width="55"/>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.devcode" size="small" placeholder="设备编号" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" placeholder="下发状态" filterable clearable>
+          <el-option v-for="item in statusList" :key="item.name" :label="item.name" :value="item.name"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button class="edit_btn" size="small" @click="sendAll">全部设备下发</el-button>
+        <el-button class="edit_btn" size="small" @click="send">设备下发</el-button>
+      </template>
+      <template slot="columns">
         <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">
             <div v-if="column.value === 'channel1'">
@@ -50,22 +46,9 @@
             </div>
           </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>
-  </div>
+      </template>
+    </normal-table>
+  </app-container>
 </template>
 
 <script>
@@ -151,7 +134,21 @@
       alarmStatusList: [{ name: '正在报警', value: '1' }, { name: '已取消', value: '2' }], // 报警状态列表
       statusList: [{ name: '未下发' }, { name: '已下发' }],
       alarmTypeList: [],
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -262,18 +259,13 @@
       this.timeRange = []
       this.fetchData(false)
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/example/tableExample.vue b/src/views/example/tableExample.vue
index 2d54fad..e8cd106 100644
--- a/src/views/example/tableExample.vue
+++ b/src/views/example/tableExample.vue
@@ -139,7 +139,7 @@
           text: '数据列表' // 标题名称
         },
         options: {
-          needIndex: false // 是否需要序号列
+          needIndex: true // 是否需要序号列
         },
         toolsOption: {
           selectColumns: false, // 是否需要筛选列
diff --git a/src/views/report/boxData.vue b/src/views/report/boxData.vue
index 2e04e4b..5faeff7 100644
--- a/src/views/report/boxData.vue
+++ b/src/views/report/boxData.vue
@@ -1,25 +1,50 @@
 <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-form-item class="selectForm-container-item">
-              <el-input v-model.trim="listQuery.keyword" placeholder="灯箱编号/灯箱名称" clearable/>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item">
-              <el-select v-model="listQuery.groupId" placeholder="设备组" clearable>
-                <el-option v-for="item in groupList" :key="item.id" :label="item.groupName" :value="item.id"/>
-              </el-select>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-      <div class="clearfloat"/>
-    </div>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="灯箱编号/灯箱名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.groupId" size="small" placeholder="设备组" clearable>
+          <el-option v-for="item in groupList" :key="item.id" :label="item.groupName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
+        <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">
+            <div v-if="column.value === 'A'">
+              <span v-html="allNum(scope.row.electricityA,scope.row.voltageA,scope.row.powerA)"/>
+            </div>
+            <div v-else-if="column.value === 'B'">
+              <span v-html="allNum(scope.row.electricityB,scope.row.voltageA,scope.row.powerB)"/>
+            </div>
+            <div v-else-if="column.value === 'C'">
+              <span v-html="allNum(scope.row.electricityC,scope.row.voltageA,scope.row.powerC)"/>
+            </div>
+            <div v-else>
+              <span>{{ scope.row[column.value] }}</span>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" width="130">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click="showHistory(scope.row)">查看历史</el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
     <!--查询结果Table显示-->
     <div>
       <el-row class="table-title">
@@ -43,29 +68,10 @@
             </div>
           </template>
         </el-table-column>
-        <el-table-column label="操作" align="center" width="130">
-          <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
-            <el-button type="text" size="small" @click="showHistory(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>
     <box-history v-show="dialogFormVisible" ref="boxhistory"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -121,7 +127,21 @@
       listLoading: true, // 列表加载
       dialogFormVisible: false,
       alarmReasonList: [], // 报警原因列表
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -177,18 +197,13 @@
         this.groupList = response.data
       })
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }
diff --git a/src/views/report/boxHistory.vue b/src/views/report/boxHistory.vue
index e63fb94..c5cf8ca 100644
--- a/src/views/report/boxHistory.vue
+++ b/src/views/report/boxHistory.vue
@@ -2,7 +2,7 @@
   <div class="app-container">
     <!--筛选条件-->
     <el-dialog :visible.sync="dialogFormVisible" :title="title" append-to-body>
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
+      <el-form ref="selectForm" :inline="true" :model="listQuery" size="small" class="form-container">
         <el-form-item class="selectForm-container-item" prop="startTime">
           <el-date-picker
             v-model="timeRange"
@@ -19,7 +19,7 @@
         <el-row class="table-title">
           <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
         </el-row>
-        <el-table v-loading="listLoading" :data="list" class="table" height="300px" border>
+        <el-table v-loading="listLoading" :data="list" class="table" size="small" height="300px" border>
           <el-table-column :index="indexMethod" label="序号" align="center" type="index" width="55" ></el-table-column>
           <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">
diff --git a/src/views/report/controllerData.vue b/src/views/report/controllerData.vue
index 5b7c360..ee81ba7 100644
--- a/src/views/report/controllerData.vue
+++ b/src/views/report/controllerData.vue
@@ -1,63 +1,40 @@
 <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-form-item class="selectForm-container-item">
-              <el-input v-model.trim="listQuery.keyword" placeholder="路灯编号/路灯名称" clearable/>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item">
-              <el-input v-model.trim="listQuery.controllerCode" placeholder="控制器编号" clearable/>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item">
-              <el-select v-model="listQuery.groupId" placeholder="设备组" clearable>
-                <el-option v-for="item in groupList" :key="item.id" :label="item.groupName" :value="item.id"/>
-              </el-select>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-      <div class="clearfloat"/>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="序号" width="55" align="center" type="index" />
-        <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>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="路灯编号/路灯名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.controllerCode" size="small" placeholder="控制器编号" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.groupId" size="small" placeholder="设备组" clearable>
+          <el-option v-for="item in groupList" :key="item.id" :label="item.groupName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="130">
           <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
             <el-button type="text" size="small" @click="showHistory(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>
     <history-data v-show="dialogFormVisible" ref="historydata"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -131,7 +108,21 @@
       listLoading: true, // 列表加载
       dialogFormVisible: false,
       alarmReasonList: [], // 报警原因列表
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -197,6 +188,15 @@
     handleCurrentChange(val) {
       this.listQuery.offset = val
       this.fetchData()
+    },
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
     }
   }
 }
diff --git a/src/views/report/historyData.vue b/src/views/report/historyData.vue
index 17e66de..9ba326e 100644
--- a/src/views/report/historyData.vue
+++ b/src/views/report/historyData.vue
@@ -2,7 +2,7 @@
   <div class="app-container">
     <!--筛选条件-->
     <el-dialog :visible.sync="dialogFormVisible" :title="title" append-to-body>
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
+      <el-form ref="selectForm" :inline="true" :model="listQuery" size="small" class="form-container">
         <el-form-item class="selectForm-container-item" prop="startTime">
           <el-date-picker
             v-model="timeRange"
@@ -12,14 +12,14 @@
             start-placeholder="查询开始时间"
             end-placeholder="查询结束时间"/>
         </el-form-item>
-        <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
+        <el-button class="filter-item" type="primary" icon="el-icon-search" size="small" @click="search">搜索</el-button>
       </el-form>
       <!--查询结果Table显示-->
       <div>
         <el-row class="table-title">
           <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
         </el-row>
-        <el-table v-loading="listLoading" :data="list" class="table" height="300px" border>
+        <el-table v-loading="listLoading" :data="list" class="table" size="small" height="300px" border>
           <el-table-column :index="indexMethod" label="序号" align="center" type="index" width="55" ></el-table-column>
           <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">
diff --git a/src/views/report/quantityData.vue b/src/views/report/quantityData.vue
index a4bd607..88a4d4d 100644
--- a/src/views/report/quantityData.vue
+++ b/src/views/report/quantityData.vue
@@ -1,46 +1,35 @@
 <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-form-item class="selectForm-container-item">
-              <el-date-picker
-                v-model="timeRange"
-                :picker-options="pickerOptions"
-                :clearable="false"
-                type="daterange"
-                value-format="yyyy-MM-dd"
-                align="right"
-                unlink-panels
-                range-separator="至"
-                start-placeholder="开始日期"
-                end-placeholder="结束日期"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-      <div class="clearfloat"/>
-    </div>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          :picker-options="pickerOptions"
+          :clearable="false"
+          type="daterange"
+          value-format="yyyy-MM-dd"
+          align="right"
+          unlink-panels
+          range-separator="至"
+          size="small"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"/>
+      </search-item>
+    </search-area>
     <div ref="chart" class="chart-body" style="padding-top: 20px;"/>
-    <!--查询结果Table显示-->
-    <div style="margin-bottom: 50px">
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" :row-style="{height: '47px'}" class="table" border>
-        <el-table-column :index="indexMethod" label="序号" width="55" align="center" type="index" />
-        <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>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-  </div>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage"/>
+  </app-container>
 </template>
 
 <script>
@@ -104,7 +93,21 @@
       list: [], // 报警列表
       chart: '',
       staticsList: [], // 报警列表
-      listLoading: true // 列表加载
+      listLoading: true, // 列表加载
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   watch: {
@@ -202,6 +205,15 @@
     handleCurrentChange(val) {
       this.listQuery.offset = val
       this.fetchData()
+    },
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
     }
   }
 }
diff --git a/src/views/report/statics.vue b/src/views/report/statics.vue
index 8a16fbd..005a41e 100644
--- a/src/views/report/statics.vue
+++ b/src/views/report/statics.vue
@@ -1,31 +1,24 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <!--筛选条件-->
-    <div class="search-div">
-      <div class="search-left">
-        <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
-          <el-row>
-            <el-form-item class="selectForm-container-item">
-              <el-date-picker
-                v-model="timeRange"
-                :picker-options="pickerOptions"
-                :clearable="false"
-                type="daterange"
-                value-format="yyyy-MM-dd"
-                align="right"
-                unlink-panels
-                range-separator="至"
-                start-placeholder="开始日期"
-                end-placeholder="结束日期"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-      <div class="clearfloat"/>
-    </div>
-    <el-tabs v-model="tab" type="border-card">
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          :picker-options="pickerOptions"
+          :clearable="false"
+          size="small"
+          type="daterange"
+          value-format="yyyy-MM-dd"
+          align="right"
+          unlink-panels
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"/>
+      </search-item>
+    </search-area>
+    <el-tabs v-model="tab" type="border-card" style="border-top: 12px solid #ebebeb !important;">
       <el-tab-pane label="街道统计" name="street">
         <el-row v-if="tab === 'street'" style="padding-top: 20px;">
           <el-col :span="12" >
@@ -68,7 +61,7 @@
         <div ref="chart" class="chart-body"/>
       </el-col>
     </el-row>
-  </div>
+  </app-container>
 </template>
 
 <script>
diff --git a/src/views/strategy/components/editStrategy.vue b/src/views/strategy/components/editStrategy.vue
index c396b81..ae64c77 100644
--- a/src/views/strategy/components/editStrategy.vue
+++ b/src/views/strategy/components/editStrategy.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="strategyInfo.strategyInfo" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="strategyInfo.strategyInfo" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="策略名称" prop="strategyName">
@@ -52,7 +52,7 @@
     </el-form>
     <el-tabs v-model="tab" type="border-card" >
       <el-tab-pane label="开灯命令" name="open">
-        <el-form ref="openForm" :rules="rules1" :model="openForm" label-well-code="right" label-width="110px">
+        <el-form ref="openForm" :rules="rules1" :model="openForm" size="small" label-well-code="right" label-width="110px">
           <el-row :gutter="20">
             <el-col :span="12">
               <el-form-item label="策略类型" prop="strategyType">
@@ -98,7 +98,7 @@
         </el-form>
       </el-tab-pane>
       <el-tab-pane label="关灯命令" name="close">
-        <el-form ref="closeForm" :rules="rules2" :model="closeForm" label-well-code="right" label-width="110px">
+        <el-form ref="closeForm" :rules="rules2" :model="closeForm" size="small" label-well-code="right" label-width="110px">
           <el-row :gutter="20">
             <el-col :span="12">
               <el-form-item label="策略类型" prop="strategyType">
diff --git a/src/views/strategy/components/editThreshold.vue b/src/views/strategy/components/editThreshold.vue
index e1037e4..499f827 100644
--- a/src/views/strategy/components/editThreshold.vue
+++ b/src/views/strategy/components/editThreshold.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" append-to-body width="700px">
+  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" size="small" append-to-body width="700px">
     <el-form ref="dataForm" :rules="rules" :model="thresholdForm" label-position="right" label-width="180px">
       <el-row :gutter="20">
         <el-col :span="16" offset="4">

diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 5077bef..3fd3f33 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -58,6 +58,8 @@
       <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns"/>
+        <!--复选框列-->
+        <el-table-column v-if="options && options.needMultSelect" align="center" type="selection" width="55"/>
         <!--序号列-->
         <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
         <!--内容列, 若columns存在且长度大于0-->
@@ -140,7 +142,8 @@
       type: Object,
       default: function() {
         return {
-          needIndex: true // 是否需要序号列
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
         }
       }
     }, // 配置项
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
index 1175911..b5e8442 100644
--- a/src/components/SearchArea/SearchArea.vue
+++ b/src/components/SearchArea/SearchArea.vue
@@ -16,6 +16,7 @@
       <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
       <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
       <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns-seperate"/>
     </div>
     <!-- 弹出框式高级检索 -->
     <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
index 84bdb9f..c192d79 100644
--- a/src/layout/components/AppHeader.vue
+++ b/src/layout/components/AppHeader.vue
@@ -1,6 +1,14 @@
 <template>
   <el-header class="app-header">
     <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown v-if="showChangeSys" class="systemSelect" size="medium" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
     <el-dropdown class="dropdown-container" trigger="click">
       <div class="dropdown-wrapper">
         <span style="line-height:50px;">欢迎您，{{ name }}</span>
@@ -33,6 +41,7 @@
   data() {
     return {
       title: this.baseConfig.title, // 标题
+      showChangeSys: !this.baseConfig.singleSys, // 是否显示切换系统菜单
       name: this.$store.getters.name, // 用户姓名
       showSetPwd: false // 是否显示修改密码按钮
     }
@@ -40,7 +49,9 @@
   computed: {
     ...mapGetters([
       'sidebar',
-      'avatar'
+      'avatar',
+      'currentSystem',
+      'systems'
     ])
   },
   methods: {
@@ -55,6 +66,38 @@
     resetPwd() {
       this.showSetPwd = true
       this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      const url = this.baseConfig.mainPage
+      window.location.href = url
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      const params1 = `?token=${this.$store.getters.token}`
+      const params = `?sys=${command.name}&url=${command.url}&code=${command.code}&token=${this.$store.getters.token}`
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params1
+        } else {
+          window.open(command.url + params1, '_blank')
+        }
+      } else {
+        // 取token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = this.baseConfig.mainPage + command.url + params
+        } else {
+          window.open(this.baseConfig.mainPage + command.url + params, '_blank')
+        }
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
     }
   }
 }
diff --git a/src/permission.js b/src/permission.js
index 69e8233..637373e 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -26,20 +26,13 @@
           // 设置当前子系统为基础资源子系统
           const currentSys = {
             code: 'baseResourse',
-            id: '1189107859077373285',
-            ismenu: '0',
-            levels: 1,
-            name: '智慧照明子系统',
-            num: 0,
-            parentId: '0',
-            resourceType: '02',
-            url: '/baseResourse'
+            name: '智慧照明子系统'
           }
           // 将当前系统信息保存在localStorage中
           store.commit('SET_SYSTEM', currentSys)
           // 远程访问获取权限列表（菜单&按钮）
           store.dispatch('GetMenus', currentSys).then(() => {
-            store.commit('SET_CHANGEFLAG', '0')
+            // store.commit('SET_CHANGEFLAG', '0')
             router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
             next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
           })
diff --git a/src/router/index.js b/src/router/index.js
index 32f93ef..b558038 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -49,21 +49,22 @@
   // 404错误页面
   { path: '/404', component: () => import('@/views/errorPage/404'), hidden: true },
   // 401 错误页面
-  { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
-  // 主页
-  {
-    path: '/',
-    component: Layout,
-    redirect: 'dashboard',
-    name: 'Dashboard',
-    // hidden: true,
-    children: [{
-      path: 'dashboard',
-      name: 'Dashboard',
-      component: () => import('@/views/dashboard/index'),
-      meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
-    }]
-  }
+  { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true }
+  // { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
+  // // 主页
+  // {
+  //   path: '/',
+  //   component: Layout,
+  //   redirect: 'dashboard',
+  //   name: 'Dashboard',
+  //   // hidden: true,
+  //   children: [{
+  //     path: 'dashboard',
+  //     name: 'Dashboard',
+  //     component: () => import('@/views/dashboard/index'),
+  //     meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
+  //   }]
+  // }
 ]
 // 实例化vue的时候直挂载constantRouter
 export default new Router({
diff --git a/src/views/alarmManage/alarmRule.vue b/src/views/alarmManage/alarmRule.vue
index 888a4d1..11469a2 100644
--- a/src/views/alarmManage/alarmRule.vue
+++ b/src/views/alarmManage/alarmRule.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
       <el-tab-pane label="路灯" name="lamp">
         <lamp-type-list ref="lamp"/>
@@ -8,7 +8,7 @@
         <lampbox-type-list ref="box"/>
       </el-tab-pane>
     </el-tabs>
-  </div>
+  </app-container>
 </template>
 
 <script>
diff --git a/src/views/alarmManage/components/alarmDetail.vue b/src/views/alarmManage/components/alarmDetail.vue
index 9c68377..d598779 100644
--- a/src/views/alarmManage/components/alarmDetail.vue
+++ b/src/views/alarmManage/components/alarmDetail.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :close-on-click-modal="false" :visible.sync="dialogFormVisible" title="报警详情" append-to-body>
-    <el-form ref="dataForm" :model="alarmForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :model="alarmForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="10">
           <el-form-item label="设备名称" prop="deviceName">
diff --git a/src/views/alarmManage/lampType/editLampType.vue b/src/views/alarmManage/lampType/editLampType.vue
index 8c3e37a..8e5fc23 100644
--- a/src/views/alarmManage/lampType/editLampType.vue
+++ b/src/views/alarmManage/lampType/editLampType.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="typeForm" label-well-code="right" label-width="200px">
+    <el-form ref="dataForm" :rules="rules" :model="typeForm" size="small" label-well-code="right" label-width="200px">
       <el-row :gutter="20">
         <el-col :span="20">
           <el-form-item label="路灯类型" prop="typeName">
diff --git a/src/views/alarmManage/lampType/lampTypeList.vue b/src/views/alarmManage/lampType/lampTypeList.vue
index f8547ed..f10c63b 100644
--- a/src/views/alarmManage/lampType/lampTypeList.vue
+++ b/src/views/alarmManage/lampType/lampTypeList.vue
@@ -8,12 +8,11 @@
           <el-row>
             <el-col :span="4">
               <el-form-item class="selectForm-container-item">
-                <el-input v-model.trim="listQuery.typeName" placeholder="类型名称" clearable />
+                <el-input v-model.trim="listQuery.typeName" size="small" placeholder="类型名称" clearable />
               </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-button class="filter-item" type="primary" icon="el-icon-search" size="small" style="margin-top: 2px" @click="search">搜索</el-button>
             </el-col>
           </el-row>
         </el-form>
@@ -28,7 +27,7 @@
           <el-button class="edit_btn" size="small" @click="add">新增</el-button>
         </el-col>
       </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
+      <el-table v-loading="listLoading" :data="list" class="table" size="small" border @selection-change="handleSelectionChange">
         <!--拥有删除权限则显示复选框-->
         <el-table-column v-if="hasPerm('/lampType/delete')" align="center" type="selection" width="55"/>
         <!--序号列-->
diff --git a/src/views/alarmManage/lampboxType/editLampboxType.vue b/src/views/alarmManage/lampboxType/editLampboxType.vue
index 1b94960..ae3a7c1 100644
--- a/src/views/alarmManage/lampboxType/editLampboxType.vue
+++ b/src/views/alarmManage/lampboxType/editLampboxType.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="typeForm" label-well-code="right" label-width="200px">
+    <el-form ref="dataForm" :rules="rules" :model="typeForm" size="small" label-well-code="right" label-width="200px">
       <el-row :gutter="20">
         <el-col :span="20">
           <el-form-item label="灯箱类型" prop="typeName">
diff --git a/src/views/alarmManage/lampboxType/lampboxTypeList.vue b/src/views/alarmManage/lampboxType/lampboxTypeList.vue
index 7b68f20..f33dcbf 100644
--- a/src/views/alarmManage/lampboxType/lampboxTypeList.vue
+++ b/src/views/alarmManage/lampboxType/lampboxTypeList.vue
@@ -8,7 +8,7 @@
           <el-row>
             <el-col :span="4">
               <el-form-item class="selectForm-container-item">
-                <el-input v-model.trim="listQuery.typeName" placeholder="类型名称" clearable />
+                <el-input v-model.trim="listQuery.typeName" size="small" placeholder="类型名称" clearable />
               </el-form-item>
             </el-col>
 
diff --git a/src/views/alarmManage/listAlarm.vue b/src/views/alarmManage/listAlarm.vue
index 7571a0e..fe3e359 100644
--- a/src/views/alarmManage/listAlarm.vue
+++ b/src/views/alarmManage/listAlarm.vue
@@ -1,73 +1,52 @@
 <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-form-item>
-              <el-input v-model.trim="listQuery.keyword" placeholder="设备编号/设备名称" clearable/>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmType" placeholder="报警类型" clearable>
-                <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmStatus" placeholder="报警状态" clearable>
-                <el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item" prop="startTime">
-              <el-date-picker
-                v-model="timeRange"
-                type="datetimerange"
-                range-separator="至"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                start-placeholder="报警开始时间"
-                end-placeholder="报警结束时间"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
-        <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>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="设备编号/设备名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmType" size="small" placeholder="报警类型" clearable>
+          <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmStatus" size="small" placeholder="报警状态" clearable>
+          <el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          size="small"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="报警开始时间"
+          end-placeholder="报警结束时间"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="130">
           <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
             <el-button type="text" size="small" @click="showDetail(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>
     <alarm-detail v-show="dialogFormVisible" ref="alarmdetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -123,7 +102,21 @@
       dialogFormVisible: false,
       alarmStatusList: [{ name: '正在报警', value: '1' }, { name: '已取消', value: '2' }], // 报警状态列表
       alarmTypeList: [],
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   watch: {
@@ -171,19 +164,15 @@
     },
     clearInput() {
       this.listQuery = {
-        name: '', // 姓名
-        sex: '', // 性别
-        nation: '', // 民族
-        collReason: '', // 采集原因
-        cardType: '', // 证件类型
-        idCardNo: '', // 证件号码
-        alarmReason: '', // 报警原因
-        startTime: '', // 开始时间
-        endTime: '', // 结束时间
+        keyword: '', // 设备编号/设备名称
+        alarmType: '', // 报警类型
+        alarmStatus: '', // 报警状态
+        startTime: '', // 报警开始时间
+        endTime: '', // 报警结束时间
         offset: 1,
         limit: 20,
-        sort: '',
-        order: ''
+        sort: 'alarmTime',
+        order: 'desc'
       }
       this.timeRange = []
       this.fetchData(false)
@@ -194,18 +183,13 @@
         this.alarmTypeList = response.data
       })
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }
diff --git a/src/views/alarmManage/listAlarmNow.vue b/src/views/alarmManage/listAlarmNow.vue
index c48b60a..d98b641 100644
--- a/src/views/alarmManage/listAlarmNow.vue
+++ b/src/views/alarmManage/listAlarmNow.vue
@@ -1,73 +1,47 @@
 <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-form-item>
-              <el-input v-model.trim="listQuery.keyword" placeholder="设备编号/设备名称" clearable/>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmType" placeholder="报警类型" clearable>
-                <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <!--<el-form-item>-->
-            <!--<el-select v-model="listQuery.alarmStatus" placeholder="报警状态" clearable>-->
-            <!--<el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>-->
-            <!--</el-select>-->
-            <!--</el-form-item>-->
-            <el-form-item class="selectForm-container-item" prop="startTime">
-              <el-date-picker
-                v-model="timeRange"
-                type="datetimerange"
-                range-separator="至"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                start-placeholder="报警开始时间"
-                end-placeholder="报警结束时间"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
-        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="设备编号/设备名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmType" size="small" placeholder="报警类型" clearable>
+          <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          size="small"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="报警开始时间"
+          end-placeholder="报警结束时间"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
-            <span>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" align="center" width="130">
-          <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
             <el-button type="text" size="small" @click="showDetail(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>
     <alarm-detail v-show="dialogFormVisible" ref="alarmdetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -123,7 +97,21 @@
       dialogFormVisible: false,
       alarmStatusList: [{ name: '正在报警', value: '1' }, { name: '已取消', value: '2' }], // 报警状态列表
       alarmTypeList: [],
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   watch: {
@@ -171,15 +159,11 @@
     },
     clearInput() {
       this.listQuery = {
-        name: '', // 姓名
-        sex: '', // 性别
-        nation: '', // 民族
-        collReason: '', // 采集原因
-        cardType: '', // 证件类型
-        idCardNo: '', // 证件号码
-        alarmReason: '', // 报警原因
-        startTime: '', // 开始时间
-        endTime: '', // 结束时间
+        keyword: '', // 设备编号/设备名称
+        alarmType: '', // 报警类型
+        alarmStatus: '1', // 报警状态
+        startTime: '', // 报警开始时间
+        endTime: '', // 报警结束时间
         offset: 1,
         limit: 20,
         sort: '',
@@ -194,18 +178,13 @@
         this.alarmTypeList = response.data
       })
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }
diff --git a/src/views/deviceManage/busCircuit.vue b/src/views/deviceManage/busCircuit.vue
index 2e1f872..7c9c804 100644
--- a/src/views/deviceManage/busCircuit.vue
+++ b/src/views/deviceManage/busCircuit.vue
@@ -1,77 +1,48 @@
 <!--回路列表-->
 <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-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.lampboxId" placeholder="所属灯箱" filterable clearable>
-                  <el-option v-for="item in boxList" :key="item.id" :label="item.lampboxName" :value="item.id"/>
-                </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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/circuit/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-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/circuit/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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.lampboxId" size="small" placeholder="所属灯箱" filterable clearable>
+          <el-option v-for="item in boxList" :key="item.id" :label="item.lampboxName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <!--<template slot="preColumns">-->
+      <!--<el-table-column align="center" type="selection" width="55"/>-->
+      <!--</template>-->
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <el-table-column label="操作" align="center" width="160">
-          <template slot-scope="scope">
-            <el-button v-if="hasPerm('/circuit/edit')" type="text" size="small" @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-circuit ref="editCircuit" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -128,7 +99,21 @@
       multipleSelection: [], // 多选选中项
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -253,17 +238,13 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/busController.vue b/src/views/deviceManage/busController.vue
index 49789c4..4646bf2 100644
--- a/src/views/deviceManage/busController.vue
+++ b/src/views/deviceManage/busController.vue
@@ -1,98 +1,67 @@
 <!--设备列表-->
 <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>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.controllerCode" size="small" placeholder="控制器编号" clearable />
+      </search-item>
+      <search-item/>
+      <search-item>
+        <el-select v-model="listQuery.controllerType" size="small" 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" size="small" placeholder="所属组织"/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" 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
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="selectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <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>
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <!--<template slot="preColumns">-->
+      <!--<el-table-column align="center" type="selection" width="55"/>-->
+      <!--</template>-->
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <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>
@@ -152,7 +121,21 @@
       statusList: [{ value: '1', name: '在线' }, { value: '0', name: '离线' }],
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -303,21 +286,17 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
-    handleSelectionChange(val) {
+    selectionChange(val) {
       this.multipleSelection = val
     }
   }
diff --git a/src/views/deviceManage/busGroup.vue b/src/views/deviceManage/busGroup.vue
index 9f85789..a35646b 100644
--- a/src/views/deviceManage/busGroup.vue
+++ b/src/views/deviceManage/busGroup.vue
@@ -1,80 +1,48 @@
 <!--灯箱列表-->
 <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.keyword" placeholder="分组名称" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.deviceType" placeholder="设备类型" clearable @change="fetchData">
-                  <el-option v-for="item in groupList" :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="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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/lampbox/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-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column 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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="分组名称" clearable />
+      </search-item>
+      <search-item/>
+      <search-item>
+        <el-select v-model="listQuery.deviceType" size="small" placeholder="设备类型" clearable @change="fetchData">
+          <el-option v-for="item in groupList" :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" size="small" placeholder="所属组织"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <el-table-column label="操作" align="center" width="160">
-          <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>-->
-            <el-button type="text" size="small" @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-Group ref="editGroup" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -132,7 +100,21 @@
       multipleSelection: [], // 多选选中项
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -249,17 +231,13 @@
         this.listLoading = false
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/busLamp.vue b/src/views/deviceManage/busLamp.vue
index 3450479..c480b30 100644
--- a/src/views/deviceManage/busLamp.vue
+++ b/src/views/deviceManage/busLamp.vue
@@ -1,104 +1,68 @@
 <!--路灯列表-->
 <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.keyword" placeholder="关键词" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.lampType" placeholder="路灯类型" clearable>
-                  <el-option v-for="item in typeList" :key="item.id" :label="item.typeName" :value="item.id"/>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </el-select>
-              </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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/lamp/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>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/lamp/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>
-        <!--操作列-->
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="关键词" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.lampType" size="small" placeholder="路灯类型" clearable>
+          <el-option v-for="item in typeList" :key="item.id" :label="item.typeName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" 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
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <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>
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
             <el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>
-            <el-button v-if="hasPerm('/lamp/edit')" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
-
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
             <el-button v-if="hasPerm('/lamp/remoteOn')" type="text" size="small">开灯</el-button>
             <el-button v-if="hasPerm('/lamp/remoteOff')" type="text" size="small">关灯</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-Lamp ref="editLamp" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -175,7 +139,21 @@
       statusList: [{ value: '1', name: '开灯' }, { value: '2', name: '关灯' }, { value: '3', name: '报警' }, { value: '4', name: '离线' }],
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -338,17 +316,13 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/busLampbox.vue b/src/views/deviceManage/busLampbox.vue
index 292c3a5..7763fac 100644
--- a/src/views/deviceManage/busLampbox.vue
+++ b/src/views/deviceManage/busLampbox.vue
@@ -1,46 +1,34 @@
 <!--灯箱列表-->
 <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.boxName" placeholder="灯箱名称" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/lampbox/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-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/lampbox/delete')" align="center" type="selection" width="55"/>
-        <!--序号列-->
-        <el-table-column :index="indexMethod" align="center" type="index" label="#" width="55"/>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.boxName" size="small" placeholder="灯箱名称" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
         <!--内容列-->
         <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">
@@ -55,30 +43,18 @@
             </div>
           </template>
         </el-table-column>
-        <!--操作列-->
+      </template>
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
             <el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>
-            <el-button v-if="hasPerm('/lampbox/edit')" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
+            <el-button type="text" size="small" @click.stop="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-Lampbox ref="editLampbox" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -144,7 +120,21 @@
       multipleSelection: [], // 多选选中项
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -277,6 +267,15 @@
       this.listQuery.limit = val
       this.fetchData()
     },
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
+    },
     // 改变当前页
     handleCurrentChange(val) {
       this.listQuery.offset = val
diff --git a/src/views/deviceManage/busLamppost.vue b/src/views/deviceManage/busLamppost.vue
index 92833a0..c193813 100644
--- a/src/views/deviceManage/busLamppost.vue
+++ b/src/views/deviceManage/busLamppost.vue
@@ -1,100 +1,65 @@
 <!--灯杆列表-->
 <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.keyword" placeholder="关键词" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.lamppostType" placeholder="路灯杆类型" clearable>
-                  <el-option v-for="item in typeList" :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">
-                <el-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </el-select>
-              </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('/lamppost/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>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/lamppost/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>
-        <!--操作列-->
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="关键词" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.lamppostType" size="small" placeholder="路灯杆类型" clearable>
+          <el-option v-for="item in typeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" 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
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <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>
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
-            <el-button v-if="hasPerm('/lamppost/edit')" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
+            <el-button type="text" size="small" @click.stop="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-Lamppost ref="editLamppost" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -161,7 +126,21 @@
       statusList: [{ value: '1', name: '开灯' }, { value: '2', name: '关灯' }, { value: '3', name: '报警' }, { value: '4', name: '离线' }],
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -320,17 +299,13 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/editCircuit.vue b/src/views/deviceManage/editCircuit.vue
index 9e9dd03..a362483 100644
--- a/src/views/deviceManage/editCircuit.vue
+++ b/src/views/deviceManage/editCircuit.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="cirForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="cirForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="回路编号" prop="circuitCode">
diff --git a/src/views/deviceManage/editController.vue b/src/views/deviceManage/editController.vue
index 7bc786f..444c835 100644
--- a/src/views/deviceManage/editController.vue
+++ b/src/views/deviceManage/editController.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="controllerForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="controllerForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="控制器编号" prop="controllerCode">
diff --git a/src/views/deviceManage/editGroup.vue b/src/views/deviceManage/editGroup.vue
index de9b88b..403d605 100644
--- a/src/views/deviceManage/editGroup.vue
+++ b/src/views/deviceManage/editGroup.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="groupForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="groupForm" size="small" label-well-code="right" label-width="110px">
       <el-row :span="24">
         <el-form-item label="分组名称" prop="groupName">
           <el-input v-model.trim="groupForm.groupName" :readonly="!isEditMode" clearable type="text" />
diff --git a/src/views/deviceManage/editLamp.vue b/src/views/deviceManage/editLamp.vue
index 3d45138..faf37d5 100644
--- a/src/views/deviceManage/editLamp.vue
+++ b/src/views/deviceManage/editLamp.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="lampForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="lampForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="路灯编号" prop="lampCode">
diff --git a/src/views/deviceManage/editLampbox.vue b/src/views/deviceManage/editLampbox.vue
index bd3a537..a4a8ea7 100644
--- a/src/views/deviceManage/editLampbox.vue
+++ b/src/views/deviceManage/editLampbox.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="boxForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="boxForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="灯箱编号" prop="lampboxCode">
diff --git a/src/views/deviceManage/editLamppost.vue b/src/views/deviceManage/editLamppost.vue
index 67a3a6f..a384319 100644
--- a/src/views/deviceManage/editLamppost.vue
+++ b/src/views/deviceManage/editLamppost.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="postForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="postForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="路灯杆编号" prop="lamppostCode">
diff --git a/src/views/deviceManage/listLog.vue b/src/views/deviceManage/listLog.vue
index 1d00e1c..5ab9a95 100644
--- a/src/views/deviceManage/listLog.vue
+++ b/src/views/deviceManage/listLog.vue
@@ -1,36 +1,32 @@
 <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-form-item>
-              <el-input v-model.trim="listQuery.devcode" placeholder="设备编号" clearable/>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.status" placeholder="下发状态" filterable clearable>
-                <el-option v-for="item in statusList" :key="item.name" :label="item.name" :value="item.name"/>
-              </el-select>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button class="edit_btn" size="small" @click="sendAll">全部设备下发</el-button>
-          <el-button class="edit_btn" size="small" @click="send">设备下发</el-button>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" :row-style="{height: '47px'}" class="table" border @selection-change="handleSelectionChange">
-        <el-table-column align="center" type="selection" width="55"/>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.devcode" size="small" placeholder="设备编号" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" placeholder="下发状态" filterable clearable>
+          <el-option v-for="item in statusList" :key="item.name" :label="item.name" :value="item.name"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button class="edit_btn" size="small" @click="sendAll">全部设备下发</el-button>
+        <el-button class="edit_btn" size="small" @click="send">设备下发</el-button>
+      </template>
+      <template slot="columns">
         <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">
             <div v-if="column.value === 'channel1'">
@@ -50,22 +46,9 @@
             </div>
           </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>
-  </div>
+      </template>
+    </normal-table>
+  </app-container>
 </template>
 
 <script>
@@ -151,7 +134,21 @@
       alarmStatusList: [{ name: '正在报警', value: '1' }, { name: '已取消', value: '2' }], // 报警状态列表
       statusList: [{ name: '未下发' }, { name: '已下发' }],
       alarmTypeList: [],
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -262,18 +259,13 @@
       this.timeRange = []
       this.fetchData(false)
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/example/tableExample.vue b/src/views/example/tableExample.vue
index 2d54fad..e8cd106 100644
--- a/src/views/example/tableExample.vue
+++ b/src/views/example/tableExample.vue
@@ -139,7 +139,7 @@
           text: '数据列表' // 标题名称
         },
         options: {
-          needIndex: false // 是否需要序号列
+          needIndex: true // 是否需要序号列
         },
         toolsOption: {
           selectColumns: false, // 是否需要筛选列
diff --git a/src/views/report/boxData.vue b/src/views/report/boxData.vue
index 2e04e4b..5faeff7 100644
--- a/src/views/report/boxData.vue
+++ b/src/views/report/boxData.vue
@@ -1,25 +1,50 @@
 <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-form-item class="selectForm-container-item">
-              <el-input v-model.trim="listQuery.keyword" placeholder="灯箱编号/灯箱名称" clearable/>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item">
-              <el-select v-model="listQuery.groupId" placeholder="设备组" clearable>
-                <el-option v-for="item in groupList" :key="item.id" :label="item.groupName" :value="item.id"/>
-              </el-select>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-      <div class="clearfloat"/>
-    </div>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="灯箱编号/灯箱名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.groupId" size="small" placeholder="设备组" clearable>
+          <el-option v-for="item in groupList" :key="item.id" :label="item.groupName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
+        <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">
+            <div v-if="column.value === 'A'">
+              <span v-html="allNum(scope.row.electricityA,scope.row.voltageA,scope.row.powerA)"/>
+            </div>
+            <div v-else-if="column.value === 'B'">
+              <span v-html="allNum(scope.row.electricityB,scope.row.voltageA,scope.row.powerB)"/>
+            </div>
+            <div v-else-if="column.value === 'C'">
+              <span v-html="allNum(scope.row.electricityC,scope.row.voltageA,scope.row.powerC)"/>
+            </div>
+            <div v-else>
+              <span>{{ scope.row[column.value] }}</span>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" width="130">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click="showHistory(scope.row)">查看历史</el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
     <!--查询结果Table显示-->
     <div>
       <el-row class="table-title">
@@ -43,29 +68,10 @@
             </div>
           </template>
         </el-table-column>
-        <el-table-column label="操作" align="center" width="130">
-          <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
-            <el-button type="text" size="small" @click="showHistory(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>
     <box-history v-show="dialogFormVisible" ref="boxhistory"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -121,7 +127,21 @@
       listLoading: true, // 列表加载
       dialogFormVisible: false,
       alarmReasonList: [], // 报警原因列表
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -177,18 +197,13 @@
         this.groupList = response.data
       })
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }
diff --git a/src/views/report/boxHistory.vue b/src/views/report/boxHistory.vue
index e63fb94..c5cf8ca 100644
--- a/src/views/report/boxHistory.vue
+++ b/src/views/report/boxHistory.vue
@@ -2,7 +2,7 @@
   <div class="app-container">
     <!--筛选条件-->
     <el-dialog :visible.sync="dialogFormVisible" :title="title" append-to-body>
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
+      <el-form ref="selectForm" :inline="true" :model="listQuery" size="small" class="form-container">
         <el-form-item class="selectForm-container-item" prop="startTime">
           <el-date-picker
             v-model="timeRange"
@@ -19,7 +19,7 @@
         <el-row class="table-title">
           <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
         </el-row>
-        <el-table v-loading="listLoading" :data="list" class="table" height="300px" border>
+        <el-table v-loading="listLoading" :data="list" class="table" size="small" height="300px" border>
           <el-table-column :index="indexMethod" label="序号" align="center" type="index" width="55" ></el-table-column>
           <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">
diff --git a/src/views/report/controllerData.vue b/src/views/report/controllerData.vue
index 5b7c360..ee81ba7 100644
--- a/src/views/report/controllerData.vue
+++ b/src/views/report/controllerData.vue
@@ -1,63 +1,40 @@
 <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-form-item class="selectForm-container-item">
-              <el-input v-model.trim="listQuery.keyword" placeholder="路灯编号/路灯名称" clearable/>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item">
-              <el-input v-model.trim="listQuery.controllerCode" placeholder="控制器编号" clearable/>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item">
-              <el-select v-model="listQuery.groupId" placeholder="设备组" clearable>
-                <el-option v-for="item in groupList" :key="item.id" :label="item.groupName" :value="item.id"/>
-              </el-select>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-      <div class="clearfloat"/>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="序号" width="55" align="center" type="index" />
-        <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>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="路灯编号/路灯名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.controllerCode" size="small" placeholder="控制器编号" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.groupId" size="small" placeholder="设备组" clearable>
+          <el-option v-for="item in groupList" :key="item.id" :label="item.groupName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="130">
           <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
             <el-button type="text" size="small" @click="showHistory(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>
     <history-data v-show="dialogFormVisible" ref="historydata"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -131,7 +108,21 @@
       listLoading: true, // 列表加载
       dialogFormVisible: false,
       alarmReasonList: [], // 报警原因列表
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -197,6 +188,15 @@
     handleCurrentChange(val) {
       this.listQuery.offset = val
       this.fetchData()
+    },
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
     }
   }
 }
diff --git a/src/views/report/historyData.vue b/src/views/report/historyData.vue
index 17e66de..9ba326e 100644
--- a/src/views/report/historyData.vue
+++ b/src/views/report/historyData.vue
@@ -2,7 +2,7 @@
   <div class="app-container">
     <!--筛选条件-->
     <el-dialog :visible.sync="dialogFormVisible" :title="title" append-to-body>
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
+      <el-form ref="selectForm" :inline="true" :model="listQuery" size="small" class="form-container">
         <el-form-item class="selectForm-container-item" prop="startTime">
           <el-date-picker
             v-model="timeRange"
@@ -12,14 +12,14 @@
             start-placeholder="查询开始时间"
             end-placeholder="查询结束时间"/>
         </el-form-item>
-        <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
+        <el-button class="filter-item" type="primary" icon="el-icon-search" size="small" @click="search">搜索</el-button>
       </el-form>
       <!--查询结果Table显示-->
       <div>
         <el-row class="table-title">
           <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
         </el-row>
-        <el-table v-loading="listLoading" :data="list" class="table" height="300px" border>
+        <el-table v-loading="listLoading" :data="list" class="table" size="small" height="300px" border>
           <el-table-column :index="indexMethod" label="序号" align="center" type="index" width="55" ></el-table-column>
           <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">
diff --git a/src/views/report/quantityData.vue b/src/views/report/quantityData.vue
index a4bd607..88a4d4d 100644
--- a/src/views/report/quantityData.vue
+++ b/src/views/report/quantityData.vue
@@ -1,46 +1,35 @@
 <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-form-item class="selectForm-container-item">
-              <el-date-picker
-                v-model="timeRange"
-                :picker-options="pickerOptions"
-                :clearable="false"
-                type="daterange"
-                value-format="yyyy-MM-dd"
-                align="right"
-                unlink-panels
-                range-separator="至"
-                start-placeholder="开始日期"
-                end-placeholder="结束日期"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-      <div class="clearfloat"/>
-    </div>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          :picker-options="pickerOptions"
+          :clearable="false"
+          type="daterange"
+          value-format="yyyy-MM-dd"
+          align="right"
+          unlink-panels
+          range-separator="至"
+          size="small"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"/>
+      </search-item>
+    </search-area>
     <div ref="chart" class="chart-body" style="padding-top: 20px;"/>
-    <!--查询结果Table显示-->
-    <div style="margin-bottom: 50px">
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" :row-style="{height: '47px'}" class="table" border>
-        <el-table-column :index="indexMethod" label="序号" width="55" align="center" type="index" />
-        <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>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-  </div>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage"/>
+  </app-container>
 </template>
 
 <script>
@@ -104,7 +93,21 @@
       list: [], // 报警列表
       chart: '',
       staticsList: [], // 报警列表
-      listLoading: true // 列表加载
+      listLoading: true, // 列表加载
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   watch: {
@@ -202,6 +205,15 @@
     handleCurrentChange(val) {
       this.listQuery.offset = val
       this.fetchData()
+    },
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
     }
   }
 }
diff --git a/src/views/report/statics.vue b/src/views/report/statics.vue
index 8a16fbd..005a41e 100644
--- a/src/views/report/statics.vue
+++ b/src/views/report/statics.vue
@@ -1,31 +1,24 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <!--筛选条件-->
-    <div class="search-div">
-      <div class="search-left">
-        <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
-          <el-row>
-            <el-form-item class="selectForm-container-item">
-              <el-date-picker
-                v-model="timeRange"
-                :picker-options="pickerOptions"
-                :clearable="false"
-                type="daterange"
-                value-format="yyyy-MM-dd"
-                align="right"
-                unlink-panels
-                range-separator="至"
-                start-placeholder="开始日期"
-                end-placeholder="结束日期"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-      <div class="clearfloat"/>
-    </div>
-    <el-tabs v-model="tab" type="border-card">
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          :picker-options="pickerOptions"
+          :clearable="false"
+          size="small"
+          type="daterange"
+          value-format="yyyy-MM-dd"
+          align="right"
+          unlink-panels
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"/>
+      </search-item>
+    </search-area>
+    <el-tabs v-model="tab" type="border-card" style="border-top: 12px solid #ebebeb !important;">
       <el-tab-pane label="街道统计" name="street">
         <el-row v-if="tab === 'street'" style="padding-top: 20px;">
           <el-col :span="12" >
@@ -68,7 +61,7 @@
         <div ref="chart" class="chart-body"/>
       </el-col>
     </el-row>
-  </div>
+  </app-container>
 </template>
 
 <script>
diff --git a/src/views/strategy/components/editStrategy.vue b/src/views/strategy/components/editStrategy.vue
index c396b81..ae64c77 100644
--- a/src/views/strategy/components/editStrategy.vue
+++ b/src/views/strategy/components/editStrategy.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="strategyInfo.strategyInfo" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="strategyInfo.strategyInfo" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="策略名称" prop="strategyName">
@@ -52,7 +52,7 @@
     </el-form>
     <el-tabs v-model="tab" type="border-card" >
       <el-tab-pane label="开灯命令" name="open">
-        <el-form ref="openForm" :rules="rules1" :model="openForm" label-well-code="right" label-width="110px">
+        <el-form ref="openForm" :rules="rules1" :model="openForm" size="small" label-well-code="right" label-width="110px">
           <el-row :gutter="20">
             <el-col :span="12">
               <el-form-item label="策略类型" prop="strategyType">
@@ -98,7 +98,7 @@
         </el-form>
       </el-tab-pane>
       <el-tab-pane label="关灯命令" name="close">
-        <el-form ref="closeForm" :rules="rules2" :model="closeForm" label-well-code="right" label-width="110px">
+        <el-form ref="closeForm" :rules="rules2" :model="closeForm" size="small" label-well-code="right" label-width="110px">
           <el-row :gutter="20">
             <el-col :span="12">
               <el-form-item label="策略类型" prop="strategyType">
diff --git a/src/views/strategy/components/editThreshold.vue b/src/views/strategy/components/editThreshold.vue
index e1037e4..499f827 100644
--- a/src/views/strategy/components/editThreshold.vue
+++ b/src/views/strategy/components/editThreshold.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" append-to-body width="700px">
+  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" size="small" append-to-body width="700px">
     <el-form ref="dataForm" :rules="rules" :model="thresholdForm" label-position="right" label-width="180px">
       <el-row :gutter="20">
         <el-col :span="16" offset="4">
diff --git a/src/views/strategy/components/editTime.vue b/src/views/strategy/components/editTime.vue
index a2d132f..54b2f2b 100644
--- a/src/views/strategy/components/editTime.vue
+++ b/src/views/strategy/components/editTime.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" append-to-body width="700px">
+  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" size="small" append-to-body width="700px">
     <el-row class="table-title" style="margin-top: -20px;margin-bottom: 20px">
       <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>控制器采集设置</div>
       </el-col>

diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 5077bef..3fd3f33 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -58,6 +58,8 @@
       <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns"/>
+        <!--复选框列-->
+        <el-table-column v-if="options && options.needMultSelect" align="center" type="selection" width="55"/>
         <!--序号列-->
         <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
         <!--内容列, 若columns存在且长度大于0-->
@@ -140,7 +142,8 @@
       type: Object,
       default: function() {
         return {
-          needIndex: true // 是否需要序号列
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
         }
       }
     }, // 配置项
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
index 1175911..b5e8442 100644
--- a/src/components/SearchArea/SearchArea.vue
+++ b/src/components/SearchArea/SearchArea.vue
@@ -16,6 +16,7 @@
       <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
       <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
       <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns-seperate"/>
     </div>
     <!-- 弹出框式高级检索 -->
     <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
index 84bdb9f..c192d79 100644
--- a/src/layout/components/AppHeader.vue
+++ b/src/layout/components/AppHeader.vue
@@ -1,6 +1,14 @@
 <template>
   <el-header class="app-header">
     <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown v-if="showChangeSys" class="systemSelect" size="medium" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
     <el-dropdown class="dropdown-container" trigger="click">
       <div class="dropdown-wrapper">
         <span style="line-height:50px;">欢迎您，{{ name }}</span>
@@ -33,6 +41,7 @@
   data() {
     return {
       title: this.baseConfig.title, // 标题
+      showChangeSys: !this.baseConfig.singleSys, // 是否显示切换系统菜单
       name: this.$store.getters.name, // 用户姓名
       showSetPwd: false // 是否显示修改密码按钮
     }
@@ -40,7 +49,9 @@
   computed: {
     ...mapGetters([
       'sidebar',
-      'avatar'
+      'avatar',
+      'currentSystem',
+      'systems'
     ])
   },
   methods: {
@@ -55,6 +66,38 @@
     resetPwd() {
       this.showSetPwd = true
       this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      const url = this.baseConfig.mainPage
+      window.location.href = url
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      const params1 = `?token=${this.$store.getters.token}`
+      const params = `?sys=${command.name}&url=${command.url}&code=${command.code}&token=${this.$store.getters.token}`
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params1
+        } else {
+          window.open(command.url + params1, '_blank')
+        }
+      } else {
+        // 取token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = this.baseConfig.mainPage + command.url + params
+        } else {
+          window.open(this.baseConfig.mainPage + command.url + params, '_blank')
+        }
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
     }
   }
 }
diff --git a/src/permission.js b/src/permission.js
index 69e8233..637373e 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -26,20 +26,13 @@
           // 设置当前子系统为基础资源子系统
           const currentSys = {
             code: 'baseResourse',
-            id: '1189107859077373285',
-            ismenu: '0',
-            levels: 1,
-            name: '智慧照明子系统',
-            num: 0,
-            parentId: '0',
-            resourceType: '02',
-            url: '/baseResourse'
+            name: '智慧照明子系统'
           }
           // 将当前系统信息保存在localStorage中
           store.commit('SET_SYSTEM', currentSys)
           // 远程访问获取权限列表（菜单&按钮）
           store.dispatch('GetMenus', currentSys).then(() => {
-            store.commit('SET_CHANGEFLAG', '0')
+            // store.commit('SET_CHANGEFLAG', '0')
             router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
             next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
           })
diff --git a/src/router/index.js b/src/router/index.js
index 32f93ef..b558038 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -49,21 +49,22 @@
   // 404错误页面
   { path: '/404', component: () => import('@/views/errorPage/404'), hidden: true },
   // 401 错误页面
-  { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
-  // 主页
-  {
-    path: '/',
-    component: Layout,
-    redirect: 'dashboard',
-    name: 'Dashboard',
-    // hidden: true,
-    children: [{
-      path: 'dashboard',
-      name: 'Dashboard',
-      component: () => import('@/views/dashboard/index'),
-      meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
-    }]
-  }
+  { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true }
+  // { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
+  // // 主页
+  // {
+  //   path: '/',
+  //   component: Layout,
+  //   redirect: 'dashboard',
+  //   name: 'Dashboard',
+  //   // hidden: true,
+  //   children: [{
+  //     path: 'dashboard',
+  //     name: 'Dashboard',
+  //     component: () => import('@/views/dashboard/index'),
+  //     meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
+  //   }]
+  // }
 ]
 // 实例化vue的时候直挂载constantRouter
 export default new Router({
diff --git a/src/views/alarmManage/alarmRule.vue b/src/views/alarmManage/alarmRule.vue
index 888a4d1..11469a2 100644
--- a/src/views/alarmManage/alarmRule.vue
+++ b/src/views/alarmManage/alarmRule.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
       <el-tab-pane label="路灯" name="lamp">
         <lamp-type-list ref="lamp"/>
@@ -8,7 +8,7 @@
         <lampbox-type-list ref="box"/>
       </el-tab-pane>
     </el-tabs>
-  </div>
+  </app-container>
 </template>
 
 <script>
diff --git a/src/views/alarmManage/components/alarmDetail.vue b/src/views/alarmManage/components/alarmDetail.vue
index 9c68377..d598779 100644
--- a/src/views/alarmManage/components/alarmDetail.vue
+++ b/src/views/alarmManage/components/alarmDetail.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :close-on-click-modal="false" :visible.sync="dialogFormVisible" title="报警详情" append-to-body>
-    <el-form ref="dataForm" :model="alarmForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :model="alarmForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="10">
           <el-form-item label="设备名称" prop="deviceName">
diff --git a/src/views/alarmManage/lampType/editLampType.vue b/src/views/alarmManage/lampType/editLampType.vue
index 8c3e37a..8e5fc23 100644
--- a/src/views/alarmManage/lampType/editLampType.vue
+++ b/src/views/alarmManage/lampType/editLampType.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="typeForm" label-well-code="right" label-width="200px">
+    <el-form ref="dataForm" :rules="rules" :model="typeForm" size="small" label-well-code="right" label-width="200px">
       <el-row :gutter="20">
         <el-col :span="20">
           <el-form-item label="路灯类型" prop="typeName">
diff --git a/src/views/alarmManage/lampType/lampTypeList.vue b/src/views/alarmManage/lampType/lampTypeList.vue
index f8547ed..f10c63b 100644
--- a/src/views/alarmManage/lampType/lampTypeList.vue
+++ b/src/views/alarmManage/lampType/lampTypeList.vue
@@ -8,12 +8,11 @@
           <el-row>
             <el-col :span="4">
               <el-form-item class="selectForm-container-item">
-                <el-input v-model.trim="listQuery.typeName" placeholder="类型名称" clearable />
+                <el-input v-model.trim="listQuery.typeName" size="small" placeholder="类型名称" clearable />
               </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-button class="filter-item" type="primary" icon="el-icon-search" size="small" style="margin-top: 2px" @click="search">搜索</el-button>
             </el-col>
           </el-row>
         </el-form>
@@ -28,7 +27,7 @@
           <el-button class="edit_btn" size="small" @click="add">新增</el-button>
         </el-col>
       </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
+      <el-table v-loading="listLoading" :data="list" class="table" size="small" border @selection-change="handleSelectionChange">
         <!--拥有删除权限则显示复选框-->
         <el-table-column v-if="hasPerm('/lampType/delete')" align="center" type="selection" width="55"/>
         <!--序号列-->
diff --git a/src/views/alarmManage/lampboxType/editLampboxType.vue b/src/views/alarmManage/lampboxType/editLampboxType.vue
index 1b94960..ae3a7c1 100644
--- a/src/views/alarmManage/lampboxType/editLampboxType.vue
+++ b/src/views/alarmManage/lampboxType/editLampboxType.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="typeForm" label-well-code="right" label-width="200px">
+    <el-form ref="dataForm" :rules="rules" :model="typeForm" size="small" label-well-code="right" label-width="200px">
       <el-row :gutter="20">
         <el-col :span="20">
           <el-form-item label="灯箱类型" prop="typeName">
diff --git a/src/views/alarmManage/lampboxType/lampboxTypeList.vue b/src/views/alarmManage/lampboxType/lampboxTypeList.vue
index 7b68f20..f33dcbf 100644
--- a/src/views/alarmManage/lampboxType/lampboxTypeList.vue
+++ b/src/views/alarmManage/lampboxType/lampboxTypeList.vue
@@ -8,7 +8,7 @@
           <el-row>
             <el-col :span="4">
               <el-form-item class="selectForm-container-item">
-                <el-input v-model.trim="listQuery.typeName" placeholder="类型名称" clearable />
+                <el-input v-model.trim="listQuery.typeName" size="small" placeholder="类型名称" clearable />
               </el-form-item>
             </el-col>
 
diff --git a/src/views/alarmManage/listAlarm.vue b/src/views/alarmManage/listAlarm.vue
index 7571a0e..fe3e359 100644
--- a/src/views/alarmManage/listAlarm.vue
+++ b/src/views/alarmManage/listAlarm.vue
@@ -1,73 +1,52 @@
 <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-form-item>
-              <el-input v-model.trim="listQuery.keyword" placeholder="设备编号/设备名称" clearable/>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmType" placeholder="报警类型" clearable>
-                <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmStatus" placeholder="报警状态" clearable>
-                <el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item" prop="startTime">
-              <el-date-picker
-                v-model="timeRange"
-                type="datetimerange"
-                range-separator="至"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                start-placeholder="报警开始时间"
-                end-placeholder="报警结束时间"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
-        <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>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="设备编号/设备名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmType" size="small" placeholder="报警类型" clearable>
+          <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmStatus" size="small" placeholder="报警状态" clearable>
+          <el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          size="small"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="报警开始时间"
+          end-placeholder="报警结束时间"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="130">
           <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
             <el-button type="text" size="small" @click="showDetail(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>
     <alarm-detail v-show="dialogFormVisible" ref="alarmdetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -123,7 +102,21 @@
       dialogFormVisible: false,
       alarmStatusList: [{ name: '正在报警', value: '1' }, { name: '已取消', value: '2' }], // 报警状态列表
       alarmTypeList: [],
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   watch: {
@@ -171,19 +164,15 @@
     },
     clearInput() {
       this.listQuery = {
-        name: '', // 姓名
-        sex: '', // 性别
-        nation: '', // 民族
-        collReason: '', // 采集原因
-        cardType: '', // 证件类型
-        idCardNo: '', // 证件号码
-        alarmReason: '', // 报警原因
-        startTime: '', // 开始时间
-        endTime: '', // 结束时间
+        keyword: '', // 设备编号/设备名称
+        alarmType: '', // 报警类型
+        alarmStatus: '', // 报警状态
+        startTime: '', // 报警开始时间
+        endTime: '', // 报警结束时间
         offset: 1,
         limit: 20,
-        sort: '',
-        order: ''
+        sort: 'alarmTime',
+        order: 'desc'
       }
       this.timeRange = []
       this.fetchData(false)
@@ -194,18 +183,13 @@
         this.alarmTypeList = response.data
       })
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }
diff --git a/src/views/alarmManage/listAlarmNow.vue b/src/views/alarmManage/listAlarmNow.vue
index c48b60a..d98b641 100644
--- a/src/views/alarmManage/listAlarmNow.vue
+++ b/src/views/alarmManage/listAlarmNow.vue
@@ -1,73 +1,47 @@
 <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-form-item>
-              <el-input v-model.trim="listQuery.keyword" placeholder="设备编号/设备名称" clearable/>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmType" placeholder="报警类型" clearable>
-                <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <!--<el-form-item>-->
-            <!--<el-select v-model="listQuery.alarmStatus" placeholder="报警状态" clearable>-->
-            <!--<el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>-->
-            <!--</el-select>-->
-            <!--</el-form-item>-->
-            <el-form-item class="selectForm-container-item" prop="startTime">
-              <el-date-picker
-                v-model="timeRange"
-                type="datetimerange"
-                range-separator="至"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                start-placeholder="报警开始时间"
-                end-placeholder="报警结束时间"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
-        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="设备编号/设备名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmType" size="small" placeholder="报警类型" clearable>
+          <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          size="small"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="报警开始时间"
+          end-placeholder="报警结束时间"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
-            <span>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" align="center" width="130">
-          <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
             <el-button type="text" size="small" @click="showDetail(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>
     <alarm-detail v-show="dialogFormVisible" ref="alarmdetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -123,7 +97,21 @@
       dialogFormVisible: false,
       alarmStatusList: [{ name: '正在报警', value: '1' }, { name: '已取消', value: '2' }], // 报警状态列表
       alarmTypeList: [],
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   watch: {
@@ -171,15 +159,11 @@
     },
     clearInput() {
       this.listQuery = {
-        name: '', // 姓名
-        sex: '', // 性别
-        nation: '', // 民族
-        collReason: '', // 采集原因
-        cardType: '', // 证件类型
-        idCardNo: '', // 证件号码
-        alarmReason: '', // 报警原因
-        startTime: '', // 开始时间
-        endTime: '', // 结束时间
+        keyword: '', // 设备编号/设备名称
+        alarmType: '', // 报警类型
+        alarmStatus: '1', // 报警状态
+        startTime: '', // 报警开始时间
+        endTime: '', // 报警结束时间
         offset: 1,
         limit: 20,
         sort: '',
@@ -194,18 +178,13 @@
         this.alarmTypeList = response.data
       })
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }
diff --git a/src/views/deviceManage/busCircuit.vue b/src/views/deviceManage/busCircuit.vue
index 2e1f872..7c9c804 100644
--- a/src/views/deviceManage/busCircuit.vue
+++ b/src/views/deviceManage/busCircuit.vue
@@ -1,77 +1,48 @@
 <!--回路列表-->
 <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-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.lampboxId" placeholder="所属灯箱" filterable clearable>
-                  <el-option v-for="item in boxList" :key="item.id" :label="item.lampboxName" :value="item.id"/>
-                </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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/circuit/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-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/circuit/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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.lampboxId" size="small" placeholder="所属灯箱" filterable clearable>
+          <el-option v-for="item in boxList" :key="item.id" :label="item.lampboxName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <!--<template slot="preColumns">-->
+      <!--<el-table-column align="center" type="selection" width="55"/>-->
+      <!--</template>-->
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <el-table-column label="操作" align="center" width="160">
-          <template slot-scope="scope">
-            <el-button v-if="hasPerm('/circuit/edit')" type="text" size="small" @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-circuit ref="editCircuit" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -128,7 +99,21 @@
       multipleSelection: [], // 多选选中项
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -253,17 +238,13 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/busController.vue b/src/views/deviceManage/busController.vue
index 49789c4..4646bf2 100644
--- a/src/views/deviceManage/busController.vue
+++ b/src/views/deviceManage/busController.vue
@@ -1,98 +1,67 @@
 <!--设备列表-->
 <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>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.controllerCode" size="small" placeholder="控制器编号" clearable />
+      </search-item>
+      <search-item/>
+      <search-item>
+        <el-select v-model="listQuery.controllerType" size="small" 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" size="small" placeholder="所属组织"/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" 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
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="selectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <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>
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <!--<template slot="preColumns">-->
+      <!--<el-table-column align="center" type="selection" width="55"/>-->
+      <!--</template>-->
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <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>
@@ -152,7 +121,21 @@
       statusList: [{ value: '1', name: '在线' }, { value: '0', name: '离线' }],
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -303,21 +286,17 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
-    handleSelectionChange(val) {
+    selectionChange(val) {
       this.multipleSelection = val
     }
   }
diff --git a/src/views/deviceManage/busGroup.vue b/src/views/deviceManage/busGroup.vue
index 9f85789..a35646b 100644
--- a/src/views/deviceManage/busGroup.vue
+++ b/src/views/deviceManage/busGroup.vue
@@ -1,80 +1,48 @@
 <!--灯箱列表-->
 <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.keyword" placeholder="分组名称" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.deviceType" placeholder="设备类型" clearable @change="fetchData">
-                  <el-option v-for="item in groupList" :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="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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/lampbox/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-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column 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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="分组名称" clearable />
+      </search-item>
+      <search-item/>
+      <search-item>
+        <el-select v-model="listQuery.deviceType" size="small" placeholder="设备类型" clearable @change="fetchData">
+          <el-option v-for="item in groupList" :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" size="small" placeholder="所属组织"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <el-table-column label="操作" align="center" width="160">
-          <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>-->
-            <el-button type="text" size="small" @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-Group ref="editGroup" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -132,7 +100,21 @@
       multipleSelection: [], // 多选选中项
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -249,17 +231,13 @@
         this.listLoading = false
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/busLamp.vue b/src/views/deviceManage/busLamp.vue
index 3450479..c480b30 100644
--- a/src/views/deviceManage/busLamp.vue
+++ b/src/views/deviceManage/busLamp.vue
@@ -1,104 +1,68 @@
 <!--路灯列表-->
 <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.keyword" placeholder="关键词" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.lampType" placeholder="路灯类型" clearable>
-                  <el-option v-for="item in typeList" :key="item.id" :label="item.typeName" :value="item.id"/>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </el-select>
-              </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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/lamp/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>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/lamp/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>
-        <!--操作列-->
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="关键词" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.lampType" size="small" placeholder="路灯类型" clearable>
+          <el-option v-for="item in typeList" :key="item.id" :label="item.typeName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" 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
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <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>
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
             <el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>
-            <el-button v-if="hasPerm('/lamp/edit')" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
-
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
             <el-button v-if="hasPerm('/lamp/remoteOn')" type="text" size="small">开灯</el-button>
             <el-button v-if="hasPerm('/lamp/remoteOff')" type="text" size="small">关灯</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-Lamp ref="editLamp" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -175,7 +139,21 @@
       statusList: [{ value: '1', name: '开灯' }, { value: '2', name: '关灯' }, { value: '3', name: '报警' }, { value: '4', name: '离线' }],
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -338,17 +316,13 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/busLampbox.vue b/src/views/deviceManage/busLampbox.vue
index 292c3a5..7763fac 100644
--- a/src/views/deviceManage/busLampbox.vue
+++ b/src/views/deviceManage/busLampbox.vue
@@ -1,46 +1,34 @@
 <!--灯箱列表-->
 <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.boxName" placeholder="灯箱名称" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/lampbox/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-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/lampbox/delete')" align="center" type="selection" width="55"/>
-        <!--序号列-->
-        <el-table-column :index="indexMethod" align="center" type="index" label="#" width="55"/>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.boxName" size="small" placeholder="灯箱名称" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
         <!--内容列-->
         <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">
@@ -55,30 +43,18 @@
             </div>
           </template>
         </el-table-column>
-        <!--操作列-->
+      </template>
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
             <el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>
-            <el-button v-if="hasPerm('/lampbox/edit')" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
+            <el-button type="text" size="small" @click.stop="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-Lampbox ref="editLampbox" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -144,7 +120,21 @@
       multipleSelection: [], // 多选选中项
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -277,6 +267,15 @@
       this.listQuery.limit = val
       this.fetchData()
     },
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
+    },
     // 改变当前页
     handleCurrentChange(val) {
       this.listQuery.offset = val
diff --git a/src/views/deviceManage/busLamppost.vue b/src/views/deviceManage/busLamppost.vue
index 92833a0..c193813 100644
--- a/src/views/deviceManage/busLamppost.vue
+++ b/src/views/deviceManage/busLamppost.vue
@@ -1,100 +1,65 @@
 <!--灯杆列表-->
 <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.keyword" placeholder="关键词" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.lamppostType" placeholder="路灯杆类型" clearable>
-                  <el-option v-for="item in typeList" :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">
-                <el-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </el-select>
-              </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('/lamppost/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>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/lamppost/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>
-        <!--操作列-->
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="关键词" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.lamppostType" size="small" placeholder="路灯杆类型" clearable>
+          <el-option v-for="item in typeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" 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
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <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>
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
-            <el-button v-if="hasPerm('/lamppost/edit')" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
+            <el-button type="text" size="small" @click.stop="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-Lamppost ref="editLamppost" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -161,7 +126,21 @@
       statusList: [{ value: '1', name: '开灯' }, { value: '2', name: '关灯' }, { value: '3', name: '报警' }, { value: '4', name: '离线' }],
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -320,17 +299,13 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/editCircuit.vue b/src/views/deviceManage/editCircuit.vue
index 9e9dd03..a362483 100644
--- a/src/views/deviceManage/editCircuit.vue
+++ b/src/views/deviceManage/editCircuit.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="cirForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="cirForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="回路编号" prop="circuitCode">
diff --git a/src/views/deviceManage/editController.vue b/src/views/deviceManage/editController.vue
index 7bc786f..444c835 100644
--- a/src/views/deviceManage/editController.vue
+++ b/src/views/deviceManage/editController.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="controllerForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="controllerForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="控制器编号" prop="controllerCode">
diff --git a/src/views/deviceManage/editGroup.vue b/src/views/deviceManage/editGroup.vue
index de9b88b..403d605 100644
--- a/src/views/deviceManage/editGroup.vue
+++ b/src/views/deviceManage/editGroup.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="groupForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="groupForm" size="small" label-well-code="right" label-width="110px">
       <el-row :span="24">
         <el-form-item label="分组名称" prop="groupName">
           <el-input v-model.trim="groupForm.groupName" :readonly="!isEditMode" clearable type="text" />
diff --git a/src/views/deviceManage/editLamp.vue b/src/views/deviceManage/editLamp.vue
index 3d45138..faf37d5 100644
--- a/src/views/deviceManage/editLamp.vue
+++ b/src/views/deviceManage/editLamp.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="lampForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="lampForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="路灯编号" prop="lampCode">
diff --git a/src/views/deviceManage/editLampbox.vue b/src/views/deviceManage/editLampbox.vue
index bd3a537..a4a8ea7 100644
--- a/src/views/deviceManage/editLampbox.vue
+++ b/src/views/deviceManage/editLampbox.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="boxForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="boxForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="灯箱编号" prop="lampboxCode">
diff --git a/src/views/deviceManage/editLamppost.vue b/src/views/deviceManage/editLamppost.vue
index 67a3a6f..a384319 100644
--- a/src/views/deviceManage/editLamppost.vue
+++ b/src/views/deviceManage/editLamppost.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="postForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="postForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="路灯杆编号" prop="lamppostCode">
diff --git a/src/views/deviceManage/listLog.vue b/src/views/deviceManage/listLog.vue
index 1d00e1c..5ab9a95 100644
--- a/src/views/deviceManage/listLog.vue
+++ b/src/views/deviceManage/listLog.vue
@@ -1,36 +1,32 @@
 <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-form-item>
-              <el-input v-model.trim="listQuery.devcode" placeholder="设备编号" clearable/>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.status" placeholder="下发状态" filterable clearable>
-                <el-option v-for="item in statusList" :key="item.name" :label="item.name" :value="item.name"/>
-              </el-select>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button class="edit_btn" size="small" @click="sendAll">全部设备下发</el-button>
-          <el-button class="edit_btn" size="small" @click="send">设备下发</el-button>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" :row-style="{height: '47px'}" class="table" border @selection-change="handleSelectionChange">
-        <el-table-column align="center" type="selection" width="55"/>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.devcode" size="small" placeholder="设备编号" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" placeholder="下发状态" filterable clearable>
+          <el-option v-for="item in statusList" :key="item.name" :label="item.name" :value="item.name"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button class="edit_btn" size="small" @click="sendAll">全部设备下发</el-button>
+        <el-button class="edit_btn" size="small" @click="send">设备下发</el-button>
+      </template>
+      <template slot="columns">
         <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">
             <div v-if="column.value === 'channel1'">
@@ -50,22 +46,9 @@
             </div>
           </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>
-  </div>
+      </template>
+    </normal-table>
+  </app-container>
 </template>
 
 <script>
@@ -151,7 +134,21 @@
       alarmStatusList: [{ name: '正在报警', value: '1' }, { name: '已取消', value: '2' }], // 报警状态列表
       statusList: [{ name: '未下发' }, { name: '已下发' }],
       alarmTypeList: [],
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -262,18 +259,13 @@
       this.timeRange = []
       this.fetchData(false)
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/example/tableExample.vue b/src/views/example/tableExample.vue
index 2d54fad..e8cd106 100644
--- a/src/views/example/tableExample.vue
+++ b/src/views/example/tableExample.vue
@@ -139,7 +139,7 @@
           text: '数据列表' // 标题名称
         },
         options: {
-          needIndex: false // 是否需要序号列
+          needIndex: true // 是否需要序号列
         },
         toolsOption: {
           selectColumns: false, // 是否需要筛选列
diff --git a/src/views/report/boxData.vue b/src/views/report/boxData.vue
index 2e04e4b..5faeff7 100644
--- a/src/views/report/boxData.vue
+++ b/src/views/report/boxData.vue
@@ -1,25 +1,50 @@
 <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-form-item class="selectForm-container-item">
-              <el-input v-model.trim="listQuery.keyword" placeholder="灯箱编号/灯箱名称" clearable/>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item">
-              <el-select v-model="listQuery.groupId" placeholder="设备组" clearable>
-                <el-option v-for="item in groupList" :key="item.id" :label="item.groupName" :value="item.id"/>
-              </el-select>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-      <div class="clearfloat"/>
-    </div>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="灯箱编号/灯箱名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.groupId" size="small" placeholder="设备组" clearable>
+          <el-option v-for="item in groupList" :key="item.id" :label="item.groupName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
+        <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">
+            <div v-if="column.value === 'A'">
+              <span v-html="allNum(scope.row.electricityA,scope.row.voltageA,scope.row.powerA)"/>
+            </div>
+            <div v-else-if="column.value === 'B'">
+              <span v-html="allNum(scope.row.electricityB,scope.row.voltageA,scope.row.powerB)"/>
+            </div>
+            <div v-else-if="column.value === 'C'">
+              <span v-html="allNum(scope.row.electricityC,scope.row.voltageA,scope.row.powerC)"/>
+            </div>
+            <div v-else>
+              <span>{{ scope.row[column.value] }}</span>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" width="130">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click="showHistory(scope.row)">查看历史</el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
     <!--查询结果Table显示-->
     <div>
       <el-row class="table-title">
@@ -43,29 +68,10 @@
             </div>
           </template>
         </el-table-column>
-        <el-table-column label="操作" align="center" width="130">
-          <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
-            <el-button type="text" size="small" @click="showHistory(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>
     <box-history v-show="dialogFormVisible" ref="boxhistory"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -121,7 +127,21 @@
       listLoading: true, // 列表加载
       dialogFormVisible: false,
       alarmReasonList: [], // 报警原因列表
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -177,18 +197,13 @@
         this.groupList = response.data
       })
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }
diff --git a/src/views/report/boxHistory.vue b/src/views/report/boxHistory.vue
index e63fb94..c5cf8ca 100644
--- a/src/views/report/boxHistory.vue
+++ b/src/views/report/boxHistory.vue
@@ -2,7 +2,7 @@
   <div class="app-container">
     <!--筛选条件-->
     <el-dialog :visible.sync="dialogFormVisible" :title="title" append-to-body>
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
+      <el-form ref="selectForm" :inline="true" :model="listQuery" size="small" class="form-container">
         <el-form-item class="selectForm-container-item" prop="startTime">
           <el-date-picker
             v-model="timeRange"
@@ -19,7 +19,7 @@
         <el-row class="table-title">
           <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
         </el-row>
-        <el-table v-loading="listLoading" :data="list" class="table" height="300px" border>
+        <el-table v-loading="listLoading" :data="list" class="table" size="small" height="300px" border>
           <el-table-column :index="indexMethod" label="序号" align="center" type="index" width="55" ></el-table-column>
           <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">
diff --git a/src/views/report/controllerData.vue b/src/views/report/controllerData.vue
index 5b7c360..ee81ba7 100644
--- a/src/views/report/controllerData.vue
+++ b/src/views/report/controllerData.vue
@@ -1,63 +1,40 @@
 <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-form-item class="selectForm-container-item">
-              <el-input v-model.trim="listQuery.keyword" placeholder="路灯编号/路灯名称" clearable/>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item">
-              <el-input v-model.trim="listQuery.controllerCode" placeholder="控制器编号" clearable/>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item">
-              <el-select v-model="listQuery.groupId" placeholder="设备组" clearable>
-                <el-option v-for="item in groupList" :key="item.id" :label="item.groupName" :value="item.id"/>
-              </el-select>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-      <div class="clearfloat"/>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="序号" width="55" align="center" type="index" />
-        <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>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="路灯编号/路灯名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.controllerCode" size="small" placeholder="控制器编号" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.groupId" size="small" placeholder="设备组" clearable>
+          <el-option v-for="item in groupList" :key="item.id" :label="item.groupName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="130">
           <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
             <el-button type="text" size="small" @click="showHistory(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>
     <history-data v-show="dialogFormVisible" ref="historydata"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -131,7 +108,21 @@
       listLoading: true, // 列表加载
       dialogFormVisible: false,
       alarmReasonList: [], // 报警原因列表
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -197,6 +188,15 @@
     handleCurrentChange(val) {
       this.listQuery.offset = val
       this.fetchData()
+    },
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
     }
   }
 }
diff --git a/src/views/report/historyData.vue b/src/views/report/historyData.vue
index 17e66de..9ba326e 100644
--- a/src/views/report/historyData.vue
+++ b/src/views/report/historyData.vue
@@ -2,7 +2,7 @@
   <div class="app-container">
     <!--筛选条件-->
     <el-dialog :visible.sync="dialogFormVisible" :title="title" append-to-body>
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
+      <el-form ref="selectForm" :inline="true" :model="listQuery" size="small" class="form-container">
         <el-form-item class="selectForm-container-item" prop="startTime">
           <el-date-picker
             v-model="timeRange"
@@ -12,14 +12,14 @@
             start-placeholder="查询开始时间"
             end-placeholder="查询结束时间"/>
         </el-form-item>
-        <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
+        <el-button class="filter-item" type="primary" icon="el-icon-search" size="small" @click="search">搜索</el-button>
       </el-form>
       <!--查询结果Table显示-->
       <div>
         <el-row class="table-title">
           <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
         </el-row>
-        <el-table v-loading="listLoading" :data="list" class="table" height="300px" border>
+        <el-table v-loading="listLoading" :data="list" class="table" size="small" height="300px" border>
           <el-table-column :index="indexMethod" label="序号" align="center" type="index" width="55" ></el-table-column>
           <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">
diff --git a/src/views/report/quantityData.vue b/src/views/report/quantityData.vue
index a4bd607..88a4d4d 100644
--- a/src/views/report/quantityData.vue
+++ b/src/views/report/quantityData.vue
@@ -1,46 +1,35 @@
 <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-form-item class="selectForm-container-item">
-              <el-date-picker
-                v-model="timeRange"
-                :picker-options="pickerOptions"
-                :clearable="false"
-                type="daterange"
-                value-format="yyyy-MM-dd"
-                align="right"
-                unlink-panels
-                range-separator="至"
-                start-placeholder="开始日期"
-                end-placeholder="结束日期"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-      <div class="clearfloat"/>
-    </div>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          :picker-options="pickerOptions"
+          :clearable="false"
+          type="daterange"
+          value-format="yyyy-MM-dd"
+          align="right"
+          unlink-panels
+          range-separator="至"
+          size="small"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"/>
+      </search-item>
+    </search-area>
     <div ref="chart" class="chart-body" style="padding-top: 20px;"/>
-    <!--查询结果Table显示-->
-    <div style="margin-bottom: 50px">
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" :row-style="{height: '47px'}" class="table" border>
-        <el-table-column :index="indexMethod" label="序号" width="55" align="center" type="index" />
-        <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>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-  </div>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage"/>
+  </app-container>
 </template>
 
 <script>
@@ -104,7 +93,21 @@
       list: [], // 报警列表
       chart: '',
       staticsList: [], // 报警列表
-      listLoading: true // 列表加载
+      listLoading: true, // 列表加载
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   watch: {
@@ -202,6 +205,15 @@
     handleCurrentChange(val) {
       this.listQuery.offset = val
       this.fetchData()
+    },
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
     }
   }
 }
diff --git a/src/views/report/statics.vue b/src/views/report/statics.vue
index 8a16fbd..005a41e 100644
--- a/src/views/report/statics.vue
+++ b/src/views/report/statics.vue
@@ -1,31 +1,24 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <!--筛选条件-->
-    <div class="search-div">
-      <div class="search-left">
-        <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
-          <el-row>
-            <el-form-item class="selectForm-container-item">
-              <el-date-picker
-                v-model="timeRange"
-                :picker-options="pickerOptions"
-                :clearable="false"
-                type="daterange"
-                value-format="yyyy-MM-dd"
-                align="right"
-                unlink-panels
-                range-separator="至"
-                start-placeholder="开始日期"
-                end-placeholder="结束日期"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-      <div class="clearfloat"/>
-    </div>
-    <el-tabs v-model="tab" type="border-card">
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          :picker-options="pickerOptions"
+          :clearable="false"
+          size="small"
+          type="daterange"
+          value-format="yyyy-MM-dd"
+          align="right"
+          unlink-panels
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"/>
+      </search-item>
+    </search-area>
+    <el-tabs v-model="tab" type="border-card" style="border-top: 12px solid #ebebeb !important;">
       <el-tab-pane label="街道统计" name="street">
         <el-row v-if="tab === 'street'" style="padding-top: 20px;">
           <el-col :span="12" >
@@ -68,7 +61,7 @@
         <div ref="chart" class="chart-body"/>
       </el-col>
     </el-row>
-  </div>
+  </app-container>
 </template>
 
 <script>
diff --git a/src/views/strategy/components/editStrategy.vue b/src/views/strategy/components/editStrategy.vue
index c396b81..ae64c77 100644
--- a/src/views/strategy/components/editStrategy.vue
+++ b/src/views/strategy/components/editStrategy.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="strategyInfo.strategyInfo" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="strategyInfo.strategyInfo" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="策略名称" prop="strategyName">
@@ -52,7 +52,7 @@
     </el-form>
     <el-tabs v-model="tab" type="border-card" >
       <el-tab-pane label="开灯命令" name="open">
-        <el-form ref="openForm" :rules="rules1" :model="openForm" label-well-code="right" label-width="110px">
+        <el-form ref="openForm" :rules="rules1" :model="openForm" size="small" label-well-code="right" label-width="110px">
           <el-row :gutter="20">
             <el-col :span="12">
               <el-form-item label="策略类型" prop="strategyType">
@@ -98,7 +98,7 @@
         </el-form>
       </el-tab-pane>
       <el-tab-pane label="关灯命令" name="close">
-        <el-form ref="closeForm" :rules="rules2" :model="closeForm" label-well-code="right" label-width="110px">
+        <el-form ref="closeForm" :rules="rules2" :model="closeForm" size="small" label-well-code="right" label-width="110px">
           <el-row :gutter="20">
             <el-col :span="12">
               <el-form-item label="策略类型" prop="strategyType">
diff --git a/src/views/strategy/components/editThreshold.vue b/src/views/strategy/components/editThreshold.vue
index e1037e4..499f827 100644
--- a/src/views/strategy/components/editThreshold.vue
+++ b/src/views/strategy/components/editThreshold.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" append-to-body width="700px">
+  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" size="small" append-to-body width="700px">
     <el-form ref="dataForm" :rules="rules" :model="thresholdForm" label-position="right" label-width="180px">
       <el-row :gutter="20">
         <el-col :span="16" offset="4">
diff --git a/src/views/strategy/components/editTime.vue b/src/views/strategy/components/editTime.vue
index a2d132f..54b2f2b 100644
--- a/src/views/strategy/components/editTime.vue
+++ b/src/views/strategy/components/editTime.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" append-to-body width="700px">
+  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" size="small" append-to-body width="700px">
     <el-row class="table-title" style="margin-top: -20px;margin-bottom: 20px">
       <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>控制器采集设置</div>
       </el-col>
diff --git a/src/views/strategy/deviceData.vue b/src/views/strategy/deviceData.vue
index 63c5a6c..df200aa 100644
--- a/src/views/strategy/deviceData.vue
+++ b/src/views/strategy/deviceData.vue
@@ -1,58 +1,38 @@
 <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-form-item class="selectForm-container-item">
-              <el-input v-model.trim="listQuery.deviceName" placeholder="设备名称" clearable/>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item">
-              <el-select v-model="listQuery.deviceType" placeholder="设备类型" clearable @change="fetchData">
-                <el-option v-for="item in groupList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-          </el-row>
-        </el-form>
-      </div>
-      <div class="clearfloat"/>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="序号" width="55" align="center" type="index" />
-        <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>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" align="center" width="100">
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.deviceName" size="small" placeholder="设备名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.deviceType" size="small" placeholder="设备类型" clearable @change="fetchData">
+          <el-option v-for="item in groupList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="130">
           <template slot-scope="scope">
             <el-button type="text" size="small" @click="showHistory(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>
     <device-history v-show="dialogFormVisible" ref="devicehistory"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -134,7 +114,21 @@
       listLoading: true, // 列表加载
       dialogFormVisible: false,
       alarmReasonList: [], // 报警原因列表
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {

diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 5077bef..3fd3f33 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -58,6 +58,8 @@
       <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns"/>
+        <!--复选框列-->
+        <el-table-column v-if="options && options.needMultSelect" align="center" type="selection" width="55"/>
         <!--序号列-->
         <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
         <!--内容列, 若columns存在且长度大于0-->
@@ -140,7 +142,8 @@
       type: Object,
       default: function() {
         return {
-          needIndex: true // 是否需要序号列
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
         }
       }
     }, // 配置项
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
index 1175911..b5e8442 100644
--- a/src/components/SearchArea/SearchArea.vue
+++ b/src/components/SearchArea/SearchArea.vue
@@ -16,6 +16,7 @@
       <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
       <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
       <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns-seperate"/>
     </div>
     <!-- 弹出框式高级检索 -->
     <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
index 84bdb9f..c192d79 100644
--- a/src/layout/components/AppHeader.vue
+++ b/src/layout/components/AppHeader.vue
@@ -1,6 +1,14 @@
 <template>
   <el-header class="app-header">
     <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown v-if="showChangeSys" class="systemSelect" size="medium" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
     <el-dropdown class="dropdown-container" trigger="click">
       <div class="dropdown-wrapper">
         <span style="line-height:50px;">欢迎您，{{ name }}</span>
@@ -33,6 +41,7 @@
   data() {
     return {
       title: this.baseConfig.title, // 标题
+      showChangeSys: !this.baseConfig.singleSys, // 是否显示切换系统菜单
       name: this.$store.getters.name, // 用户姓名
       showSetPwd: false // 是否显示修改密码按钮
     }
@@ -40,7 +49,9 @@
   computed: {
     ...mapGetters([
       'sidebar',
-      'avatar'
+      'avatar',
+      'currentSystem',
+      'systems'
     ])
   },
   methods: {
@@ -55,6 +66,38 @@
     resetPwd() {
       this.showSetPwd = true
       this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      const url = this.baseConfig.mainPage
+      window.location.href = url
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      const params1 = `?token=${this.$store.getters.token}`
+      const params = `?sys=${command.name}&url=${command.url}&code=${command.code}&token=${this.$store.getters.token}`
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params1
+        } else {
+          window.open(command.url + params1, '_blank')
+        }
+      } else {
+        // 取token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = this.baseConfig.mainPage + command.url + params
+        } else {
+          window.open(this.baseConfig.mainPage + command.url + params, '_blank')
+        }
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
     }
   }
 }
diff --git a/src/permission.js b/src/permission.js
index 69e8233..637373e 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -26,20 +26,13 @@
           // 设置当前子系统为基础资源子系统
           const currentSys = {
             code: 'baseResourse',
-            id: '1189107859077373285',
-            ismenu: '0',
-            levels: 1,
-            name: '智慧照明子系统',
-            num: 0,
-            parentId: '0',
-            resourceType: '02',
-            url: '/baseResourse'
+            name: '智慧照明子系统'
           }
           // 将当前系统信息保存在localStorage中
           store.commit('SET_SYSTEM', currentSys)
           // 远程访问获取权限列表（菜单&按钮）
           store.dispatch('GetMenus', currentSys).then(() => {
-            store.commit('SET_CHANGEFLAG', '0')
+            // store.commit('SET_CHANGEFLAG', '0')
             router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
             next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
           })
diff --git a/src/router/index.js b/src/router/index.js
index 32f93ef..b558038 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -49,21 +49,22 @@
   // 404错误页面
   { path: '/404', component: () => import('@/views/errorPage/404'), hidden: true },
   // 401 错误页面
-  { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
-  // 主页
-  {
-    path: '/',
-    component: Layout,
-    redirect: 'dashboard',
-    name: 'Dashboard',
-    // hidden: true,
-    children: [{
-      path: 'dashboard',
-      name: 'Dashboard',
-      component: () => import('@/views/dashboard/index'),
-      meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
-    }]
-  }
+  { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true }
+  // { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
+  // // 主页
+  // {
+  //   path: '/',
+  //   component: Layout,
+  //   redirect: 'dashboard',
+  //   name: 'Dashboard',
+  //   // hidden: true,
+  //   children: [{
+  //     path: 'dashboard',
+  //     name: 'Dashboard',
+  //     component: () => import('@/views/dashboard/index'),
+  //     meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
+  //   }]
+  // }
 ]
 // 实例化vue的时候直挂载constantRouter
 export default new Router({
diff --git a/src/views/alarmManage/alarmRule.vue b/src/views/alarmManage/alarmRule.vue
index 888a4d1..11469a2 100644
--- a/src/views/alarmManage/alarmRule.vue
+++ b/src/views/alarmManage/alarmRule.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
       <el-tab-pane label="路灯" name="lamp">
         <lamp-type-list ref="lamp"/>
@@ -8,7 +8,7 @@
         <lampbox-type-list ref="box"/>
       </el-tab-pane>
     </el-tabs>
-  </div>
+  </app-container>
 </template>
 
 <script>
diff --git a/src/views/alarmManage/components/alarmDetail.vue b/src/views/alarmManage/components/alarmDetail.vue
index 9c68377..d598779 100644
--- a/src/views/alarmManage/components/alarmDetail.vue
+++ b/src/views/alarmManage/components/alarmDetail.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :close-on-click-modal="false" :visible.sync="dialogFormVisible" title="报警详情" append-to-body>
-    <el-form ref="dataForm" :model="alarmForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :model="alarmForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="10">
           <el-form-item label="设备名称" prop="deviceName">
diff --git a/src/views/alarmManage/lampType/editLampType.vue b/src/views/alarmManage/lampType/editLampType.vue
index 8c3e37a..8e5fc23 100644
--- a/src/views/alarmManage/lampType/editLampType.vue
+++ b/src/views/alarmManage/lampType/editLampType.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="typeForm" label-well-code="right" label-width="200px">
+    <el-form ref="dataForm" :rules="rules" :model="typeForm" size="small" label-well-code="right" label-width="200px">
       <el-row :gutter="20">
         <el-col :span="20">
           <el-form-item label="路灯类型" prop="typeName">
diff --git a/src/views/alarmManage/lampType/lampTypeList.vue b/src/views/alarmManage/lampType/lampTypeList.vue
index f8547ed..f10c63b 100644
--- a/src/views/alarmManage/lampType/lampTypeList.vue
+++ b/src/views/alarmManage/lampType/lampTypeList.vue
@@ -8,12 +8,11 @@
           <el-row>
             <el-col :span="4">
               <el-form-item class="selectForm-container-item">
-                <el-input v-model.trim="listQuery.typeName" placeholder="类型名称" clearable />
+                <el-input v-model.trim="listQuery.typeName" size="small" placeholder="类型名称" clearable />
               </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-button class="filter-item" type="primary" icon="el-icon-search" size="small" style="margin-top: 2px" @click="search">搜索</el-button>
             </el-col>
           </el-row>
         </el-form>
@@ -28,7 +27,7 @@
           <el-button class="edit_btn" size="small" @click="add">新增</el-button>
         </el-col>
       </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
+      <el-table v-loading="listLoading" :data="list" class="table" size="small" border @selection-change="handleSelectionChange">
         <!--拥有删除权限则显示复选框-->
         <el-table-column v-if="hasPerm('/lampType/delete')" align="center" type="selection" width="55"/>
         <!--序号列-->
diff --git a/src/views/alarmManage/lampboxType/editLampboxType.vue b/src/views/alarmManage/lampboxType/editLampboxType.vue
index 1b94960..ae3a7c1 100644
--- a/src/views/alarmManage/lampboxType/editLampboxType.vue
+++ b/src/views/alarmManage/lampboxType/editLampboxType.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="typeForm" label-well-code="right" label-width="200px">
+    <el-form ref="dataForm" :rules="rules" :model="typeForm" size="small" label-well-code="right" label-width="200px">
       <el-row :gutter="20">
         <el-col :span="20">
           <el-form-item label="灯箱类型" prop="typeName">
diff --git a/src/views/alarmManage/lampboxType/lampboxTypeList.vue b/src/views/alarmManage/lampboxType/lampboxTypeList.vue
index 7b68f20..f33dcbf 100644
--- a/src/views/alarmManage/lampboxType/lampboxTypeList.vue
+++ b/src/views/alarmManage/lampboxType/lampboxTypeList.vue
@@ -8,7 +8,7 @@
           <el-row>
             <el-col :span="4">
               <el-form-item class="selectForm-container-item">
-                <el-input v-model.trim="listQuery.typeName" placeholder="类型名称" clearable />
+                <el-input v-model.trim="listQuery.typeName" size="small" placeholder="类型名称" clearable />
               </el-form-item>
             </el-col>
 
diff --git a/src/views/alarmManage/listAlarm.vue b/src/views/alarmManage/listAlarm.vue
index 7571a0e..fe3e359 100644
--- a/src/views/alarmManage/listAlarm.vue
+++ b/src/views/alarmManage/listAlarm.vue
@@ -1,73 +1,52 @@
 <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-form-item>
-              <el-input v-model.trim="listQuery.keyword" placeholder="设备编号/设备名称" clearable/>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmType" placeholder="报警类型" clearable>
-                <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmStatus" placeholder="报警状态" clearable>
-                <el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item" prop="startTime">
-              <el-date-picker
-                v-model="timeRange"
-                type="datetimerange"
-                range-separator="至"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                start-placeholder="报警开始时间"
-                end-placeholder="报警结束时间"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
-        <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>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="设备编号/设备名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmType" size="small" placeholder="报警类型" clearable>
+          <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmStatus" size="small" placeholder="报警状态" clearable>
+          <el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          size="small"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="报警开始时间"
+          end-placeholder="报警结束时间"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="130">
           <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
             <el-button type="text" size="small" @click="showDetail(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>
     <alarm-detail v-show="dialogFormVisible" ref="alarmdetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -123,7 +102,21 @@
       dialogFormVisible: false,
       alarmStatusList: [{ name: '正在报警', value: '1' }, { name: '已取消', value: '2' }], // 报警状态列表
       alarmTypeList: [],
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   watch: {
@@ -171,19 +164,15 @@
     },
     clearInput() {
       this.listQuery = {
-        name: '', // 姓名
-        sex: '', // 性别
-        nation: '', // 民族
-        collReason: '', // 采集原因
-        cardType: '', // 证件类型
-        idCardNo: '', // 证件号码
-        alarmReason: '', // 报警原因
-        startTime: '', // 开始时间
-        endTime: '', // 结束时间
+        keyword: '', // 设备编号/设备名称
+        alarmType: '', // 报警类型
+        alarmStatus: '', // 报警状态
+        startTime: '', // 报警开始时间
+        endTime: '', // 报警结束时间
         offset: 1,
         limit: 20,
-        sort: '',
-        order: ''
+        sort: 'alarmTime',
+        order: 'desc'
       }
       this.timeRange = []
       this.fetchData(false)
@@ -194,18 +183,13 @@
         this.alarmTypeList = response.data
       })
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }
diff --git a/src/views/alarmManage/listAlarmNow.vue b/src/views/alarmManage/listAlarmNow.vue
index c48b60a..d98b641 100644
--- a/src/views/alarmManage/listAlarmNow.vue
+++ b/src/views/alarmManage/listAlarmNow.vue
@@ -1,73 +1,47 @@
 <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-form-item>
-              <el-input v-model.trim="listQuery.keyword" placeholder="设备编号/设备名称" clearable/>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmType" placeholder="报警类型" clearable>
-                <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <!--<el-form-item>-->
-            <!--<el-select v-model="listQuery.alarmStatus" placeholder="报警状态" clearable>-->
-            <!--<el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>-->
-            <!--</el-select>-->
-            <!--</el-form-item>-->
-            <el-form-item class="selectForm-container-item" prop="startTime">
-              <el-date-picker
-                v-model="timeRange"
-                type="datetimerange"
-                range-separator="至"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                start-placeholder="报警开始时间"
-                end-placeholder="报警结束时间"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
-        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="设备编号/设备名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmType" size="small" placeholder="报警类型" clearable>
+          <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          size="small"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="报警开始时间"
+          end-placeholder="报警结束时间"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
-            <span>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" align="center" width="130">
-          <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
             <el-button type="text" size="small" @click="showDetail(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>
     <alarm-detail v-show="dialogFormVisible" ref="alarmdetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -123,7 +97,21 @@
       dialogFormVisible: false,
       alarmStatusList: [{ name: '正在报警', value: '1' }, { name: '已取消', value: '2' }], // 报警状态列表
       alarmTypeList: [],
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   watch: {
@@ -171,15 +159,11 @@
     },
     clearInput() {
       this.listQuery = {
-        name: '', // 姓名
-        sex: '', // 性别
-        nation: '', // 民族
-        collReason: '', // 采集原因
-        cardType: '', // 证件类型
-        idCardNo: '', // 证件号码
-        alarmReason: '', // 报警原因
-        startTime: '', // 开始时间
-        endTime: '', // 结束时间
+        keyword: '', // 设备编号/设备名称
+        alarmType: '', // 报警类型
+        alarmStatus: '1', // 报警状态
+        startTime: '', // 报警开始时间
+        endTime: '', // 报警结束时间
         offset: 1,
         limit: 20,
         sort: '',
@@ -194,18 +178,13 @@
         this.alarmTypeList = response.data
       })
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }
diff --git a/src/views/deviceManage/busCircuit.vue b/src/views/deviceManage/busCircuit.vue
index 2e1f872..7c9c804 100644
--- a/src/views/deviceManage/busCircuit.vue
+++ b/src/views/deviceManage/busCircuit.vue
@@ -1,77 +1,48 @@
 <!--回路列表-->
 <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-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.lampboxId" placeholder="所属灯箱" filterable clearable>
-                  <el-option v-for="item in boxList" :key="item.id" :label="item.lampboxName" :value="item.id"/>
-                </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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/circuit/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-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/circuit/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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.lampboxId" size="small" placeholder="所属灯箱" filterable clearable>
+          <el-option v-for="item in boxList" :key="item.id" :label="item.lampboxName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <!--<template slot="preColumns">-->
+      <!--<el-table-column align="center" type="selection" width="55"/>-->
+      <!--</template>-->
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <el-table-column label="操作" align="center" width="160">
-          <template slot-scope="scope">
-            <el-button v-if="hasPerm('/circuit/edit')" type="text" size="small" @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-circuit ref="editCircuit" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -128,7 +99,21 @@
       multipleSelection: [], // 多选选中项
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -253,17 +238,13 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/busController.vue b/src/views/deviceManage/busController.vue
index 49789c4..4646bf2 100644
--- a/src/views/deviceManage/busController.vue
+++ b/src/views/deviceManage/busController.vue
@@ -1,98 +1,67 @@
 <!--设备列表-->
 <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>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.controllerCode" size="small" placeholder="控制器编号" clearable />
+      </search-item>
+      <search-item/>
+      <search-item>
+        <el-select v-model="listQuery.controllerType" size="small" 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" size="small" placeholder="所属组织"/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" 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
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="selectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <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>
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <!--<template slot="preColumns">-->
+      <!--<el-table-column align="center" type="selection" width="55"/>-->
+      <!--</template>-->
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <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>
@@ -152,7 +121,21 @@
       statusList: [{ value: '1', name: '在线' }, { value: '0', name: '离线' }],
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -303,21 +286,17 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
-    handleSelectionChange(val) {
+    selectionChange(val) {
       this.multipleSelection = val
     }
   }
diff --git a/src/views/deviceManage/busGroup.vue b/src/views/deviceManage/busGroup.vue
index 9f85789..a35646b 100644
--- a/src/views/deviceManage/busGroup.vue
+++ b/src/views/deviceManage/busGroup.vue
@@ -1,80 +1,48 @@
 <!--灯箱列表-->
 <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.keyword" placeholder="分组名称" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.deviceType" placeholder="设备类型" clearable @change="fetchData">
-                  <el-option v-for="item in groupList" :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="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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/lampbox/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-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column 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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="分组名称" clearable />
+      </search-item>
+      <search-item/>
+      <search-item>
+        <el-select v-model="listQuery.deviceType" size="small" placeholder="设备类型" clearable @change="fetchData">
+          <el-option v-for="item in groupList" :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" size="small" placeholder="所属组织"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <el-table-column label="操作" align="center" width="160">
-          <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>-->
-            <el-button type="text" size="small" @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-Group ref="editGroup" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -132,7 +100,21 @@
       multipleSelection: [], // 多选选中项
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -249,17 +231,13 @@
         this.listLoading = false
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/busLamp.vue b/src/views/deviceManage/busLamp.vue
index 3450479..c480b30 100644
--- a/src/views/deviceManage/busLamp.vue
+++ b/src/views/deviceManage/busLamp.vue
@@ -1,104 +1,68 @@
 <!--路灯列表-->
 <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.keyword" placeholder="关键词" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.lampType" placeholder="路灯类型" clearable>
-                  <el-option v-for="item in typeList" :key="item.id" :label="item.typeName" :value="item.id"/>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </el-select>
-              </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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/lamp/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>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/lamp/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>
-        <!--操作列-->
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="关键词" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.lampType" size="small" placeholder="路灯类型" clearable>
+          <el-option v-for="item in typeList" :key="item.id" :label="item.typeName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" 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
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <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>
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
             <el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>
-            <el-button v-if="hasPerm('/lamp/edit')" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
-
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
             <el-button v-if="hasPerm('/lamp/remoteOn')" type="text" size="small">开灯</el-button>
             <el-button v-if="hasPerm('/lamp/remoteOff')" type="text" size="small">关灯</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-Lamp ref="editLamp" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -175,7 +139,21 @@
       statusList: [{ value: '1', name: '开灯' }, { value: '2', name: '关灯' }, { value: '3', name: '报警' }, { value: '4', name: '离线' }],
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -338,17 +316,13 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/busLampbox.vue b/src/views/deviceManage/busLampbox.vue
index 292c3a5..7763fac 100644
--- a/src/views/deviceManage/busLampbox.vue
+++ b/src/views/deviceManage/busLampbox.vue
@@ -1,46 +1,34 @@
 <!--灯箱列表-->
 <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.boxName" placeholder="灯箱名称" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/lampbox/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-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/lampbox/delete')" align="center" type="selection" width="55"/>
-        <!--序号列-->
-        <el-table-column :index="indexMethod" align="center" type="index" label="#" width="55"/>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.boxName" size="small" placeholder="灯箱名称" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
         <!--内容列-->
         <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">
@@ -55,30 +43,18 @@
             </div>
           </template>
         </el-table-column>
-        <!--操作列-->
+      </template>
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
             <el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>
-            <el-button v-if="hasPerm('/lampbox/edit')" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
+            <el-button type="text" size="small" @click.stop="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-Lampbox ref="editLampbox" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -144,7 +120,21 @@
       multipleSelection: [], // 多选选中项
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -277,6 +267,15 @@
       this.listQuery.limit = val
       this.fetchData()
     },
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
+    },
     // 改变当前页
     handleCurrentChange(val) {
       this.listQuery.offset = val
diff --git a/src/views/deviceManage/busLamppost.vue b/src/views/deviceManage/busLamppost.vue
index 92833a0..c193813 100644
--- a/src/views/deviceManage/busLamppost.vue
+++ b/src/views/deviceManage/busLamppost.vue
@@ -1,100 +1,65 @@
 <!--灯杆列表-->
 <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.keyword" placeholder="关键词" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.lamppostType" placeholder="路灯杆类型" clearable>
-                  <el-option v-for="item in typeList" :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">
-                <el-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </el-select>
-              </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('/lamppost/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>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/lamppost/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>
-        <!--操作列-->
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="关键词" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.lamppostType" size="small" placeholder="路灯杆类型" clearable>
+          <el-option v-for="item in typeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" 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
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <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>
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
-            <el-button v-if="hasPerm('/lamppost/edit')" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
+            <el-button type="text" size="small" @click.stop="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-Lamppost ref="editLamppost" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -161,7 +126,21 @@
       statusList: [{ value: '1', name: '开灯' }, { value: '2', name: '关灯' }, { value: '3', name: '报警' }, { value: '4', name: '离线' }],
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -320,17 +299,13 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/editCircuit.vue b/src/views/deviceManage/editCircuit.vue
index 9e9dd03..a362483 100644
--- a/src/views/deviceManage/editCircuit.vue
+++ b/src/views/deviceManage/editCircuit.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="cirForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="cirForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="回路编号" prop="circuitCode">
diff --git a/src/views/deviceManage/editController.vue b/src/views/deviceManage/editController.vue
index 7bc786f..444c835 100644
--- a/src/views/deviceManage/editController.vue
+++ b/src/views/deviceManage/editController.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="controllerForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="controllerForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="控制器编号" prop="controllerCode">
diff --git a/src/views/deviceManage/editGroup.vue b/src/views/deviceManage/editGroup.vue
index de9b88b..403d605 100644
--- a/src/views/deviceManage/editGroup.vue
+++ b/src/views/deviceManage/editGroup.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="groupForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="groupForm" size="small" label-well-code="right" label-width="110px">
       <el-row :span="24">
         <el-form-item label="分组名称" prop="groupName">
           <el-input v-model.trim="groupForm.groupName" :readonly="!isEditMode" clearable type="text" />
diff --git a/src/views/deviceManage/editLamp.vue b/src/views/deviceManage/editLamp.vue
index 3d45138..faf37d5 100644
--- a/src/views/deviceManage/editLamp.vue
+++ b/src/views/deviceManage/editLamp.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="lampForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="lampForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="路灯编号" prop="lampCode">
diff --git a/src/views/deviceManage/editLampbox.vue b/src/views/deviceManage/editLampbox.vue
index bd3a537..a4a8ea7 100644
--- a/src/views/deviceManage/editLampbox.vue
+++ b/src/views/deviceManage/editLampbox.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="boxForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="boxForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="灯箱编号" prop="lampboxCode">
diff --git a/src/views/deviceManage/editLamppost.vue b/src/views/deviceManage/editLamppost.vue
index 67a3a6f..a384319 100644
--- a/src/views/deviceManage/editLamppost.vue
+++ b/src/views/deviceManage/editLamppost.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="postForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="postForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="路灯杆编号" prop="lamppostCode">
diff --git a/src/views/deviceManage/listLog.vue b/src/views/deviceManage/listLog.vue
index 1d00e1c..5ab9a95 100644
--- a/src/views/deviceManage/listLog.vue
+++ b/src/views/deviceManage/listLog.vue
@@ -1,36 +1,32 @@
 <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-form-item>
-              <el-input v-model.trim="listQuery.devcode" placeholder="设备编号" clearable/>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.status" placeholder="下发状态" filterable clearable>
-                <el-option v-for="item in statusList" :key="item.name" :label="item.name" :value="item.name"/>
-              </el-select>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button class="edit_btn" size="small" @click="sendAll">全部设备下发</el-button>
-          <el-button class="edit_btn" size="small" @click="send">设备下发</el-button>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" :row-style="{height: '47px'}" class="table" border @selection-change="handleSelectionChange">
-        <el-table-column align="center" type="selection" width="55"/>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.devcode" size="small" placeholder="设备编号" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" placeholder="下发状态" filterable clearable>
+          <el-option v-for="item in statusList" :key="item.name" :label="item.name" :value="item.name"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button class="edit_btn" size="small" @click="sendAll">全部设备下发</el-button>
+        <el-button class="edit_btn" size="small" @click="send">设备下发</el-button>
+      </template>
+      <template slot="columns">
         <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">
             <div v-if="column.value === 'channel1'">
@@ -50,22 +46,9 @@
             </div>
           </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>
-  </div>
+      </template>
+    </normal-table>
+  </app-container>
 </template>
 
 <script>
@@ -151,7 +134,21 @@
       alarmStatusList: [{ name: '正在报警', value: '1' }, { name: '已取消', value: '2' }], // 报警状态列表
       statusList: [{ name: '未下发' }, { name: '已下发' }],
       alarmTypeList: [],
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -262,18 +259,13 @@
       this.timeRange = []
       this.fetchData(false)
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/example/tableExample.vue b/src/views/example/tableExample.vue
index 2d54fad..e8cd106 100644
--- a/src/views/example/tableExample.vue
+++ b/src/views/example/tableExample.vue
@@ -139,7 +139,7 @@
           text: '数据列表' // 标题名称
         },
         options: {
-          needIndex: false // 是否需要序号列
+          needIndex: true // 是否需要序号列
         },
         toolsOption: {
           selectColumns: false, // 是否需要筛选列
diff --git a/src/views/report/boxData.vue b/src/views/report/boxData.vue
index 2e04e4b..5faeff7 100644
--- a/src/views/report/boxData.vue
+++ b/src/views/report/boxData.vue
@@ -1,25 +1,50 @@
 <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-form-item class="selectForm-container-item">
-              <el-input v-model.trim="listQuery.keyword" placeholder="灯箱编号/灯箱名称" clearable/>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item">
-              <el-select v-model="listQuery.groupId" placeholder="设备组" clearable>
-                <el-option v-for="item in groupList" :key="item.id" :label="item.groupName" :value="item.id"/>
-              </el-select>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-      <div class="clearfloat"/>
-    </div>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="灯箱编号/灯箱名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.groupId" size="small" placeholder="设备组" clearable>
+          <el-option v-for="item in groupList" :key="item.id" :label="item.groupName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
+        <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">
+            <div v-if="column.value === 'A'">
+              <span v-html="allNum(scope.row.electricityA,scope.row.voltageA,scope.row.powerA)"/>
+            </div>
+            <div v-else-if="column.value === 'B'">
+              <span v-html="allNum(scope.row.electricityB,scope.row.voltageA,scope.row.powerB)"/>
+            </div>
+            <div v-else-if="column.value === 'C'">
+              <span v-html="allNum(scope.row.electricityC,scope.row.voltageA,scope.row.powerC)"/>
+            </div>
+            <div v-else>
+              <span>{{ scope.row[column.value] }}</span>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" width="130">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click="showHistory(scope.row)">查看历史</el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
     <!--查询结果Table显示-->
     <div>
       <el-row class="table-title">
@@ -43,29 +68,10 @@
             </div>
           </template>
         </el-table-column>
-        <el-table-column label="操作" align="center" width="130">
-          <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
-            <el-button type="text" size="small" @click="showHistory(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>
     <box-history v-show="dialogFormVisible" ref="boxhistory"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -121,7 +127,21 @@
       listLoading: true, // 列表加载
       dialogFormVisible: false,
       alarmReasonList: [], // 报警原因列表
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -177,18 +197,13 @@
         this.groupList = response.data
       })
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }
diff --git a/src/views/report/boxHistory.vue b/src/views/report/boxHistory.vue
index e63fb94..c5cf8ca 100644
--- a/src/views/report/boxHistory.vue
+++ b/src/views/report/boxHistory.vue
@@ -2,7 +2,7 @@
   <div class="app-container">
     <!--筛选条件-->
     <el-dialog :visible.sync="dialogFormVisible" :title="title" append-to-body>
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
+      <el-form ref="selectForm" :inline="true" :model="listQuery" size="small" class="form-container">
         <el-form-item class="selectForm-container-item" prop="startTime">
           <el-date-picker
             v-model="timeRange"
@@ -19,7 +19,7 @@
         <el-row class="table-title">
           <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
         </el-row>
-        <el-table v-loading="listLoading" :data="list" class="table" height="300px" border>
+        <el-table v-loading="listLoading" :data="list" class="table" size="small" height="300px" border>
           <el-table-column :index="indexMethod" label="序号" align="center" type="index" width="55" ></el-table-column>
           <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">
diff --git a/src/views/report/controllerData.vue b/src/views/report/controllerData.vue
index 5b7c360..ee81ba7 100644
--- a/src/views/report/controllerData.vue
+++ b/src/views/report/controllerData.vue
@@ -1,63 +1,40 @@
 <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-form-item class="selectForm-container-item">
-              <el-input v-model.trim="listQuery.keyword" placeholder="路灯编号/路灯名称" clearable/>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item">
-              <el-input v-model.trim="listQuery.controllerCode" placeholder="控制器编号" clearable/>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item">
-              <el-select v-model="listQuery.groupId" placeholder="设备组" clearable>
-                <el-option v-for="item in groupList" :key="item.id" :label="item.groupName" :value="item.id"/>
-              </el-select>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-      <div class="clearfloat"/>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="序号" width="55" align="center" type="index" />
-        <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>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="路灯编号/路灯名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.controllerCode" size="small" placeholder="控制器编号" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.groupId" size="small" placeholder="设备组" clearable>
+          <el-option v-for="item in groupList" :key="item.id" :label="item.groupName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="130">
           <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
             <el-button type="text" size="small" @click="showHistory(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>
     <history-data v-show="dialogFormVisible" ref="historydata"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -131,7 +108,21 @@
       listLoading: true, // 列表加载
       dialogFormVisible: false,
       alarmReasonList: [], // 报警原因列表
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -197,6 +188,15 @@
     handleCurrentChange(val) {
       this.listQuery.offset = val
       this.fetchData()
+    },
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
     }
   }
 }
diff --git a/src/views/report/historyData.vue b/src/views/report/historyData.vue
index 17e66de..9ba326e 100644
--- a/src/views/report/historyData.vue
+++ b/src/views/report/historyData.vue
@@ -2,7 +2,7 @@
   <div class="app-container">
     <!--筛选条件-->
     <el-dialog :visible.sync="dialogFormVisible" :title="title" append-to-body>
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
+      <el-form ref="selectForm" :inline="true" :model="listQuery" size="small" class="form-container">
         <el-form-item class="selectForm-container-item" prop="startTime">
           <el-date-picker
             v-model="timeRange"
@@ -12,14 +12,14 @@
             start-placeholder="查询开始时间"
             end-placeholder="查询结束时间"/>
         </el-form-item>
-        <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
+        <el-button class="filter-item" type="primary" icon="el-icon-search" size="small" @click="search">搜索</el-button>
       </el-form>
       <!--查询结果Table显示-->
       <div>
         <el-row class="table-title">
           <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
         </el-row>
-        <el-table v-loading="listLoading" :data="list" class="table" height="300px" border>
+        <el-table v-loading="listLoading" :data="list" class="table" size="small" height="300px" border>
           <el-table-column :index="indexMethod" label="序号" align="center" type="index" width="55" ></el-table-column>
           <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">
diff --git a/src/views/report/quantityData.vue b/src/views/report/quantityData.vue
index a4bd607..88a4d4d 100644
--- a/src/views/report/quantityData.vue
+++ b/src/views/report/quantityData.vue
@@ -1,46 +1,35 @@
 <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-form-item class="selectForm-container-item">
-              <el-date-picker
-                v-model="timeRange"
-                :picker-options="pickerOptions"
-                :clearable="false"
-                type="daterange"
-                value-format="yyyy-MM-dd"
-                align="right"
-                unlink-panels
-                range-separator="至"
-                start-placeholder="开始日期"
-                end-placeholder="结束日期"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-      <div class="clearfloat"/>
-    </div>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          :picker-options="pickerOptions"
+          :clearable="false"
+          type="daterange"
+          value-format="yyyy-MM-dd"
+          align="right"
+          unlink-panels
+          range-separator="至"
+          size="small"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"/>
+      </search-item>
+    </search-area>
     <div ref="chart" class="chart-body" style="padding-top: 20px;"/>
-    <!--查询结果Table显示-->
-    <div style="margin-bottom: 50px">
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" :row-style="{height: '47px'}" class="table" border>
-        <el-table-column :index="indexMethod" label="序号" width="55" align="center" type="index" />
-        <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>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-  </div>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage"/>
+  </app-container>
 </template>
 
 <script>
@@ -104,7 +93,21 @@
       list: [], // 报警列表
       chart: '',
       staticsList: [], // 报警列表
-      listLoading: true // 列表加载
+      listLoading: true, // 列表加载
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   watch: {
@@ -202,6 +205,15 @@
     handleCurrentChange(val) {
       this.listQuery.offset = val
       this.fetchData()
+    },
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
     }
   }
 }
diff --git a/src/views/report/statics.vue b/src/views/report/statics.vue
index 8a16fbd..005a41e 100644
--- a/src/views/report/statics.vue
+++ b/src/views/report/statics.vue
@@ -1,31 +1,24 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <!--筛选条件-->
-    <div class="search-div">
-      <div class="search-left">
-        <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
-          <el-row>
-            <el-form-item class="selectForm-container-item">
-              <el-date-picker
-                v-model="timeRange"
-                :picker-options="pickerOptions"
-                :clearable="false"
-                type="daterange"
-                value-format="yyyy-MM-dd"
-                align="right"
-                unlink-panels
-                range-separator="至"
-                start-placeholder="开始日期"
-                end-placeholder="结束日期"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-      <div class="clearfloat"/>
-    </div>
-    <el-tabs v-model="tab" type="border-card">
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          :picker-options="pickerOptions"
+          :clearable="false"
+          size="small"
+          type="daterange"
+          value-format="yyyy-MM-dd"
+          align="right"
+          unlink-panels
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"/>
+      </search-item>
+    </search-area>
+    <el-tabs v-model="tab" type="border-card" style="border-top: 12px solid #ebebeb !important;">
       <el-tab-pane label="街道统计" name="street">
         <el-row v-if="tab === 'street'" style="padding-top: 20px;">
           <el-col :span="12" >
@@ -68,7 +61,7 @@
         <div ref="chart" class="chart-body"/>
       </el-col>
     </el-row>
-  </div>
+  </app-container>
 </template>
 
 <script>
diff --git a/src/views/strategy/components/editStrategy.vue b/src/views/strategy/components/editStrategy.vue
index c396b81..ae64c77 100644
--- a/src/views/strategy/components/editStrategy.vue
+++ b/src/views/strategy/components/editStrategy.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="strategyInfo.strategyInfo" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="strategyInfo.strategyInfo" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="策略名称" prop="strategyName">
@@ -52,7 +52,7 @@
     </el-form>
     <el-tabs v-model="tab" type="border-card" >
       <el-tab-pane label="开灯命令" name="open">
-        <el-form ref="openForm" :rules="rules1" :model="openForm" label-well-code="right" label-width="110px">
+        <el-form ref="openForm" :rules="rules1" :model="openForm" size="small" label-well-code="right" label-width="110px">
           <el-row :gutter="20">
             <el-col :span="12">
               <el-form-item label="策略类型" prop="strategyType">
@@ -98,7 +98,7 @@
         </el-form>
       </el-tab-pane>
       <el-tab-pane label="关灯命令" name="close">
-        <el-form ref="closeForm" :rules="rules2" :model="closeForm" label-well-code="right" label-width="110px">
+        <el-form ref="closeForm" :rules="rules2" :model="closeForm" size="small" label-well-code="right" label-width="110px">
           <el-row :gutter="20">
             <el-col :span="12">
               <el-form-item label="策略类型" prop="strategyType">
diff --git a/src/views/strategy/components/editThreshold.vue b/src/views/strategy/components/editThreshold.vue
index e1037e4..499f827 100644
--- a/src/views/strategy/components/editThreshold.vue
+++ b/src/views/strategy/components/editThreshold.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" append-to-body width="700px">
+  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" size="small" append-to-body width="700px">
     <el-form ref="dataForm" :rules="rules" :model="thresholdForm" label-position="right" label-width="180px">
       <el-row :gutter="20">
         <el-col :span="16" offset="4">
diff --git a/src/views/strategy/components/editTime.vue b/src/views/strategy/components/editTime.vue
index a2d132f..54b2f2b 100644
--- a/src/views/strategy/components/editTime.vue
+++ b/src/views/strategy/components/editTime.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" append-to-body width="700px">
+  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" size="small" append-to-body width="700px">
     <el-row class="table-title" style="margin-top: -20px;margin-bottom: 20px">
       <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>控制器采集设置</div>
       </el-col>
diff --git a/src/views/strategy/deviceData.vue b/src/views/strategy/deviceData.vue
index 63c5a6c..df200aa 100644
--- a/src/views/strategy/deviceData.vue
+++ b/src/views/strategy/deviceData.vue
@@ -1,58 +1,38 @@
 <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-form-item class="selectForm-container-item">
-              <el-input v-model.trim="listQuery.deviceName" placeholder="设备名称" clearable/>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item">
-              <el-select v-model="listQuery.deviceType" placeholder="设备类型" clearable @change="fetchData">
-                <el-option v-for="item in groupList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-          </el-row>
-        </el-form>
-      </div>
-      <div class="clearfloat"/>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="序号" width="55" align="center" type="index" />
-        <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>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" align="center" width="100">
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.deviceName" size="small" placeholder="设备名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.deviceType" size="small" placeholder="设备类型" clearable @change="fetchData">
+          <el-option v-for="item in groupList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="130">
           <template slot-scope="scope">
             <el-button type="text" size="small" @click="showHistory(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>
     <device-history v-show="dialogFormVisible" ref="devicehistory"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -134,7 +114,21 @@
       listLoading: true, // 列表加载
       dialogFormVisible: false,
       alarmReasonList: [], // 报警原因列表
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
diff --git a/src/views/strategy/deviceHistory.vue b/src/views/strategy/deviceHistory.vue
index 89fb7c1..a2a2f00 100644
--- a/src/views/strategy/deviceHistory.vue
+++ b/src/views/strategy/deviceHistory.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <!--筛选条件-->
     <el-dialog :visible.sync="dialogFormVisible" :title="title" append-to-body width="1100px">
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
+      <el-form ref="selectForm" :inline="true" :model="listQuery" size="small" class="form-container">
         <el-form-item class="selectForm-container-item" prop="startTime">
           <el-date-picker
             v-model="timeRange"
@@ -42,7 +42,7 @@
           @current-change="handleCurrentChange"/>
       </div>
     </el-dialog>
-  </div>
+  </app-container>
 </template>
 
 <script>

diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 5077bef..3fd3f33 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -58,6 +58,8 @@
       <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns"/>
+        <!--复选框列-->
+        <el-table-column v-if="options && options.needMultSelect" align="center" type="selection" width="55"/>
         <!--序号列-->
         <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
         <!--内容列, 若columns存在且长度大于0-->
@@ -140,7 +142,8 @@
       type: Object,
       default: function() {
         return {
-          needIndex: true // 是否需要序号列
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
         }
       }
     }, // 配置项
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
index 1175911..b5e8442 100644
--- a/src/components/SearchArea/SearchArea.vue
+++ b/src/components/SearchArea/SearchArea.vue
@@ -16,6 +16,7 @@
       <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
       <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
       <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns-seperate"/>
     </div>
     <!-- 弹出框式高级检索 -->
     <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
index 84bdb9f..c192d79 100644
--- a/src/layout/components/AppHeader.vue
+++ b/src/layout/components/AppHeader.vue
@@ -1,6 +1,14 @@
 <template>
   <el-header class="app-header">
     <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown v-if="showChangeSys" class="systemSelect" size="medium" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
     <el-dropdown class="dropdown-container" trigger="click">
       <div class="dropdown-wrapper">
         <span style="line-height:50px;">欢迎您，{{ name }}</span>
@@ -33,6 +41,7 @@
   data() {
     return {
       title: this.baseConfig.title, // 标题
+      showChangeSys: !this.baseConfig.singleSys, // 是否显示切换系统菜单
       name: this.$store.getters.name, // 用户姓名
       showSetPwd: false // 是否显示修改密码按钮
     }
@@ -40,7 +49,9 @@
   computed: {
     ...mapGetters([
       'sidebar',
-      'avatar'
+      'avatar',
+      'currentSystem',
+      'systems'
     ])
   },
   methods: {
@@ -55,6 +66,38 @@
     resetPwd() {
       this.showSetPwd = true
       this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      const url = this.baseConfig.mainPage
+      window.location.href = url
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      const params1 = `?token=${this.$store.getters.token}`
+      const params = `?sys=${command.name}&url=${command.url}&code=${command.code}&token=${this.$store.getters.token}`
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params1
+        } else {
+          window.open(command.url + params1, '_blank')
+        }
+      } else {
+        // 取token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = this.baseConfig.mainPage + command.url + params
+        } else {
+          window.open(this.baseConfig.mainPage + command.url + params, '_blank')
+        }
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
     }
   }
 }
diff --git a/src/permission.js b/src/permission.js
index 69e8233..637373e 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -26,20 +26,13 @@
           // 设置当前子系统为基础资源子系统
           const currentSys = {
             code: 'baseResourse',
-            id: '1189107859077373285',
-            ismenu: '0',
-            levels: 1,
-            name: '智慧照明子系统',
-            num: 0,
-            parentId: '0',
-            resourceType: '02',
-            url: '/baseResourse'
+            name: '智慧照明子系统'
           }
           // 将当前系统信息保存在localStorage中
           store.commit('SET_SYSTEM', currentSys)
           // 远程访问获取权限列表（菜单&按钮）
           store.dispatch('GetMenus', currentSys).then(() => {
-            store.commit('SET_CHANGEFLAG', '0')
+            // store.commit('SET_CHANGEFLAG', '0')
             router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
             next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
           })
diff --git a/src/router/index.js b/src/router/index.js
index 32f93ef..b558038 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -49,21 +49,22 @@
   // 404错误页面
   { path: '/404', component: () => import('@/views/errorPage/404'), hidden: true },
   // 401 错误页面
-  { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
-  // 主页
-  {
-    path: '/',
-    component: Layout,
-    redirect: 'dashboard',
-    name: 'Dashboard',
-    // hidden: true,
-    children: [{
-      path: 'dashboard',
-      name: 'Dashboard',
-      component: () => import('@/views/dashboard/index'),
-      meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
-    }]
-  }
+  { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true }
+  // { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
+  // // 主页
+  // {
+  //   path: '/',
+  //   component: Layout,
+  //   redirect: 'dashboard',
+  //   name: 'Dashboard',
+  //   // hidden: true,
+  //   children: [{
+  //     path: 'dashboard',
+  //     name: 'Dashboard',
+  //     component: () => import('@/views/dashboard/index'),
+  //     meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
+  //   }]
+  // }
 ]
 // 实例化vue的时候直挂载constantRouter
 export default new Router({
diff --git a/src/views/alarmManage/alarmRule.vue b/src/views/alarmManage/alarmRule.vue
index 888a4d1..11469a2 100644
--- a/src/views/alarmManage/alarmRule.vue
+++ b/src/views/alarmManage/alarmRule.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
       <el-tab-pane label="路灯" name="lamp">
         <lamp-type-list ref="lamp"/>
@@ -8,7 +8,7 @@
         <lampbox-type-list ref="box"/>
       </el-tab-pane>
     </el-tabs>
-  </div>
+  </app-container>
 </template>
 
 <script>
diff --git a/src/views/alarmManage/components/alarmDetail.vue b/src/views/alarmManage/components/alarmDetail.vue
index 9c68377..d598779 100644
--- a/src/views/alarmManage/components/alarmDetail.vue
+++ b/src/views/alarmManage/components/alarmDetail.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :close-on-click-modal="false" :visible.sync="dialogFormVisible" title="报警详情" append-to-body>
-    <el-form ref="dataForm" :model="alarmForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :model="alarmForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="10">
           <el-form-item label="设备名称" prop="deviceName">
diff --git a/src/views/alarmManage/lampType/editLampType.vue b/src/views/alarmManage/lampType/editLampType.vue
index 8c3e37a..8e5fc23 100644
--- a/src/views/alarmManage/lampType/editLampType.vue
+++ b/src/views/alarmManage/lampType/editLampType.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="typeForm" label-well-code="right" label-width="200px">
+    <el-form ref="dataForm" :rules="rules" :model="typeForm" size="small" label-well-code="right" label-width="200px">
       <el-row :gutter="20">
         <el-col :span="20">
           <el-form-item label="路灯类型" prop="typeName">
diff --git a/src/views/alarmManage/lampType/lampTypeList.vue b/src/views/alarmManage/lampType/lampTypeList.vue
index f8547ed..f10c63b 100644
--- a/src/views/alarmManage/lampType/lampTypeList.vue
+++ b/src/views/alarmManage/lampType/lampTypeList.vue
@@ -8,12 +8,11 @@
           <el-row>
             <el-col :span="4">
               <el-form-item class="selectForm-container-item">
-                <el-input v-model.trim="listQuery.typeName" placeholder="类型名称" clearable />
+                <el-input v-model.trim="listQuery.typeName" size="small" placeholder="类型名称" clearable />
               </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-button class="filter-item" type="primary" icon="el-icon-search" size="small" style="margin-top: 2px" @click="search">搜索</el-button>
             </el-col>
           </el-row>
         </el-form>
@@ -28,7 +27,7 @@
           <el-button class="edit_btn" size="small" @click="add">新增</el-button>
         </el-col>
       </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
+      <el-table v-loading="listLoading" :data="list" class="table" size="small" border @selection-change="handleSelectionChange">
         <!--拥有删除权限则显示复选框-->
         <el-table-column v-if="hasPerm('/lampType/delete')" align="center" type="selection" width="55"/>
         <!--序号列-->
diff --git a/src/views/alarmManage/lampboxType/editLampboxType.vue b/src/views/alarmManage/lampboxType/editLampboxType.vue
index 1b94960..ae3a7c1 100644
--- a/src/views/alarmManage/lampboxType/editLampboxType.vue
+++ b/src/views/alarmManage/lampboxType/editLampboxType.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="typeForm" label-well-code="right" label-width="200px">
+    <el-form ref="dataForm" :rules="rules" :model="typeForm" size="small" label-well-code="right" label-width="200px">
       <el-row :gutter="20">
         <el-col :span="20">
           <el-form-item label="灯箱类型" prop="typeName">
diff --git a/src/views/alarmManage/lampboxType/lampboxTypeList.vue b/src/views/alarmManage/lampboxType/lampboxTypeList.vue
index 7b68f20..f33dcbf 100644
--- a/src/views/alarmManage/lampboxType/lampboxTypeList.vue
+++ b/src/views/alarmManage/lampboxType/lampboxTypeList.vue
@@ -8,7 +8,7 @@
           <el-row>
             <el-col :span="4">
               <el-form-item class="selectForm-container-item">
-                <el-input v-model.trim="listQuery.typeName" placeholder="类型名称" clearable />
+                <el-input v-model.trim="listQuery.typeName" size="small" placeholder="类型名称" clearable />
               </el-form-item>
             </el-col>
 
diff --git a/src/views/alarmManage/listAlarm.vue b/src/views/alarmManage/listAlarm.vue
index 7571a0e..fe3e359 100644
--- a/src/views/alarmManage/listAlarm.vue
+++ b/src/views/alarmManage/listAlarm.vue
@@ -1,73 +1,52 @@
 <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-form-item>
-              <el-input v-model.trim="listQuery.keyword" placeholder="设备编号/设备名称" clearable/>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmType" placeholder="报警类型" clearable>
-                <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmStatus" placeholder="报警状态" clearable>
-                <el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item" prop="startTime">
-              <el-date-picker
-                v-model="timeRange"
-                type="datetimerange"
-                range-separator="至"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                start-placeholder="报警开始时间"
-                end-placeholder="报警结束时间"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
-        <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>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="设备编号/设备名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmType" size="small" placeholder="报警类型" clearable>
+          <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmStatus" size="small" placeholder="报警状态" clearable>
+          <el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          size="small"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="报警开始时间"
+          end-placeholder="报警结束时间"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="130">
           <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
             <el-button type="text" size="small" @click="showDetail(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>
     <alarm-detail v-show="dialogFormVisible" ref="alarmdetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -123,7 +102,21 @@
       dialogFormVisible: false,
       alarmStatusList: [{ name: '正在报警', value: '1' }, { name: '已取消', value: '2' }], // 报警状态列表
       alarmTypeList: [],
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   watch: {
@@ -171,19 +164,15 @@
     },
     clearInput() {
       this.listQuery = {
-        name: '', // 姓名
-        sex: '', // 性别
-        nation: '', // 民族
-        collReason: '', // 采集原因
-        cardType: '', // 证件类型
-        idCardNo: '', // 证件号码
-        alarmReason: '', // 报警原因
-        startTime: '', // 开始时间
-        endTime: '', // 结束时间
+        keyword: '', // 设备编号/设备名称
+        alarmType: '', // 报警类型
+        alarmStatus: '', // 报警状态
+        startTime: '', // 报警开始时间
+        endTime: '', // 报警结束时间
         offset: 1,
         limit: 20,
-        sort: '',
-        order: ''
+        sort: 'alarmTime',
+        order: 'desc'
       }
       this.timeRange = []
       this.fetchData(false)
@@ -194,18 +183,13 @@
         this.alarmTypeList = response.data
       })
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }
diff --git a/src/views/alarmManage/listAlarmNow.vue b/src/views/alarmManage/listAlarmNow.vue
index c48b60a..d98b641 100644
--- a/src/views/alarmManage/listAlarmNow.vue
+++ b/src/views/alarmManage/listAlarmNow.vue
@@ -1,73 +1,47 @@
 <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-form-item>
-              <el-input v-model.trim="listQuery.keyword" placeholder="设备编号/设备名称" clearable/>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmType" placeholder="报警类型" clearable>
-                <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <!--<el-form-item>-->
-            <!--<el-select v-model="listQuery.alarmStatus" placeholder="报警状态" clearable>-->
-            <!--<el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>-->
-            <!--</el-select>-->
-            <!--</el-form-item>-->
-            <el-form-item class="selectForm-container-item" prop="startTime">
-              <el-date-picker
-                v-model="timeRange"
-                type="datetimerange"
-                range-separator="至"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                start-placeholder="报警开始时间"
-                end-placeholder="报警结束时间"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
-        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="设备编号/设备名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmType" size="small" placeholder="报警类型" clearable>
+          <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          size="small"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="报警开始时间"
+          end-placeholder="报警结束时间"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
-            <span>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" align="center" width="130">
-          <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
             <el-button type="text" size="small" @click="showDetail(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>
     <alarm-detail v-show="dialogFormVisible" ref="alarmdetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -123,7 +97,21 @@
       dialogFormVisible: false,
       alarmStatusList: [{ name: '正在报警', value: '1' }, { name: '已取消', value: '2' }], // 报警状态列表
       alarmTypeList: [],
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   watch: {
@@ -171,15 +159,11 @@
     },
     clearInput() {
       this.listQuery = {
-        name: '', // 姓名
-        sex: '', // 性别
-        nation: '', // 民族
-        collReason: '', // 采集原因
-        cardType: '', // 证件类型
-        idCardNo: '', // 证件号码
-        alarmReason: '', // 报警原因
-        startTime: '', // 开始时间
-        endTime: '', // 结束时间
+        keyword: '', // 设备编号/设备名称
+        alarmType: '', // 报警类型
+        alarmStatus: '1', // 报警状态
+        startTime: '', // 报警开始时间
+        endTime: '', // 报警结束时间
         offset: 1,
         limit: 20,
         sort: '',
@@ -194,18 +178,13 @@
         this.alarmTypeList = response.data
       })
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }
diff --git a/src/views/deviceManage/busCircuit.vue b/src/views/deviceManage/busCircuit.vue
index 2e1f872..7c9c804 100644
--- a/src/views/deviceManage/busCircuit.vue
+++ b/src/views/deviceManage/busCircuit.vue
@@ -1,77 +1,48 @@
 <!--回路列表-->
 <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-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.lampboxId" placeholder="所属灯箱" filterable clearable>
-                  <el-option v-for="item in boxList" :key="item.id" :label="item.lampboxName" :value="item.id"/>
-                </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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/circuit/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-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/circuit/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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.lampboxId" size="small" placeholder="所属灯箱" filterable clearable>
+          <el-option v-for="item in boxList" :key="item.id" :label="item.lampboxName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <!--<template slot="preColumns">-->
+      <!--<el-table-column align="center" type="selection" width="55"/>-->
+      <!--</template>-->
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <el-table-column label="操作" align="center" width="160">
-          <template slot-scope="scope">
-            <el-button v-if="hasPerm('/circuit/edit')" type="text" size="small" @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-circuit ref="editCircuit" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -128,7 +99,21 @@
       multipleSelection: [], // 多选选中项
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -253,17 +238,13 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/busController.vue b/src/views/deviceManage/busController.vue
index 49789c4..4646bf2 100644
--- a/src/views/deviceManage/busController.vue
+++ b/src/views/deviceManage/busController.vue
@@ -1,98 +1,67 @@
 <!--设备列表-->
 <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>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.controllerCode" size="small" placeholder="控制器编号" clearable />
+      </search-item>
+      <search-item/>
+      <search-item>
+        <el-select v-model="listQuery.controllerType" size="small" 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" size="small" placeholder="所属组织"/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" 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
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="selectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <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>
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <!--<template slot="preColumns">-->
+      <!--<el-table-column align="center" type="selection" width="55"/>-->
+      <!--</template>-->
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <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>
@@ -152,7 +121,21 @@
       statusList: [{ value: '1', name: '在线' }, { value: '0', name: '离线' }],
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -303,21 +286,17 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
-    handleSelectionChange(val) {
+    selectionChange(val) {
       this.multipleSelection = val
     }
   }
diff --git a/src/views/deviceManage/busGroup.vue b/src/views/deviceManage/busGroup.vue
index 9f85789..a35646b 100644
--- a/src/views/deviceManage/busGroup.vue
+++ b/src/views/deviceManage/busGroup.vue
@@ -1,80 +1,48 @@
 <!--灯箱列表-->
 <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.keyword" placeholder="分组名称" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.deviceType" placeholder="设备类型" clearable @change="fetchData">
-                  <el-option v-for="item in groupList" :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="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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/lampbox/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-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column 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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="分组名称" clearable />
+      </search-item>
+      <search-item/>
+      <search-item>
+        <el-select v-model="listQuery.deviceType" size="small" placeholder="设备类型" clearable @change="fetchData">
+          <el-option v-for="item in groupList" :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" size="small" placeholder="所属组织"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <el-table-column label="操作" align="center" width="160">
-          <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>-->
-            <el-button type="text" size="small" @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-Group ref="editGroup" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -132,7 +100,21 @@
       multipleSelection: [], // 多选选中项
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -249,17 +231,13 @@
         this.listLoading = false
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/busLamp.vue b/src/views/deviceManage/busLamp.vue
index 3450479..c480b30 100644
--- a/src/views/deviceManage/busLamp.vue
+++ b/src/views/deviceManage/busLamp.vue
@@ -1,104 +1,68 @@
 <!--路灯列表-->
 <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.keyword" placeholder="关键词" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.lampType" placeholder="路灯类型" clearable>
-                  <el-option v-for="item in typeList" :key="item.id" :label="item.typeName" :value="item.id"/>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </el-select>
-              </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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/lamp/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>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/lamp/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>
-        <!--操作列-->
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="关键词" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.lampType" size="small" placeholder="路灯类型" clearable>
+          <el-option v-for="item in typeList" :key="item.id" :label="item.typeName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" 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
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <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>
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
             <el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>
-            <el-button v-if="hasPerm('/lamp/edit')" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
-
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
             <el-button v-if="hasPerm('/lamp/remoteOn')" type="text" size="small">开灯</el-button>
             <el-button v-if="hasPerm('/lamp/remoteOff')" type="text" size="small">关灯</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-Lamp ref="editLamp" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -175,7 +139,21 @@
       statusList: [{ value: '1', name: '开灯' }, { value: '2', name: '关灯' }, { value: '3', name: '报警' }, { value: '4', name: '离线' }],
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -338,17 +316,13 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/busLampbox.vue b/src/views/deviceManage/busLampbox.vue
index 292c3a5..7763fac 100644
--- a/src/views/deviceManage/busLampbox.vue
+++ b/src/views/deviceManage/busLampbox.vue
@@ -1,46 +1,34 @@
 <!--灯箱列表-->
 <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.boxName" placeholder="灯箱名称" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/lampbox/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-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/lampbox/delete')" align="center" type="selection" width="55"/>
-        <!--序号列-->
-        <el-table-column :index="indexMethod" align="center" type="index" label="#" width="55"/>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.boxName" size="small" placeholder="灯箱名称" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
         <!--内容列-->
         <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">
@@ -55,30 +43,18 @@
             </div>
           </template>
         </el-table-column>
-        <!--操作列-->
+      </template>
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
             <el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>
-            <el-button v-if="hasPerm('/lampbox/edit')" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
+            <el-button type="text" size="small" @click.stop="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-Lampbox ref="editLampbox" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -144,7 +120,21 @@
       multipleSelection: [], // 多选选中项
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -277,6 +267,15 @@
       this.listQuery.limit = val
       this.fetchData()
     },
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
+    },
     // 改变当前页
     handleCurrentChange(val) {
       this.listQuery.offset = val
diff --git a/src/views/deviceManage/busLamppost.vue b/src/views/deviceManage/busLamppost.vue
index 92833a0..c193813 100644
--- a/src/views/deviceManage/busLamppost.vue
+++ b/src/views/deviceManage/busLamppost.vue
@@ -1,100 +1,65 @@
 <!--灯杆列表-->
 <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.keyword" placeholder="关键词" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.lamppostType" placeholder="路灯杆类型" clearable>
-                  <el-option v-for="item in typeList" :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">
-                <el-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </el-select>
-              </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('/lamppost/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>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/lamppost/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>
-        <!--操作列-->
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="关键词" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.lamppostType" size="small" placeholder="路灯杆类型" clearable>
+          <el-option v-for="item in typeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" 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
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <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>
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
-            <el-button v-if="hasPerm('/lamppost/edit')" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
+            <el-button type="text" size="small" @click.stop="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-Lamppost ref="editLamppost" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -161,7 +126,21 @@
       statusList: [{ value: '1', name: '开灯' }, { value: '2', name: '关灯' }, { value: '3', name: '报警' }, { value: '4', name: '离线' }],
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -320,17 +299,13 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/editCircuit.vue b/src/views/deviceManage/editCircuit.vue
index 9e9dd03..a362483 100644
--- a/src/views/deviceManage/editCircuit.vue
+++ b/src/views/deviceManage/editCircuit.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="cirForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="cirForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="回路编号" prop="circuitCode">
diff --git a/src/views/deviceManage/editController.vue b/src/views/deviceManage/editController.vue
index 7bc786f..444c835 100644
--- a/src/views/deviceManage/editController.vue
+++ b/src/views/deviceManage/editController.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="controllerForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="controllerForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="控制器编号" prop="controllerCode">
diff --git a/src/views/deviceManage/editGroup.vue b/src/views/deviceManage/editGroup.vue
index de9b88b..403d605 100644
--- a/src/views/deviceManage/editGroup.vue
+++ b/src/views/deviceManage/editGroup.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="groupForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="groupForm" size="small" label-well-code="right" label-width="110px">
       <el-row :span="24">
         <el-form-item label="分组名称" prop="groupName">
           <el-input v-model.trim="groupForm.groupName" :readonly="!isEditMode" clearable type="text" />
diff --git a/src/views/deviceManage/editLamp.vue b/src/views/deviceManage/editLamp.vue
index 3d45138..faf37d5 100644
--- a/src/views/deviceManage/editLamp.vue
+++ b/src/views/deviceManage/editLamp.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="lampForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="lampForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="路灯编号" prop="lampCode">
diff --git a/src/views/deviceManage/editLampbox.vue b/src/views/deviceManage/editLampbox.vue
index bd3a537..a4a8ea7 100644
--- a/src/views/deviceManage/editLampbox.vue
+++ b/src/views/deviceManage/editLampbox.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="boxForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="boxForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="灯箱编号" prop="lampboxCode">
diff --git a/src/views/deviceManage/editLamppost.vue b/src/views/deviceManage/editLamppost.vue
index 67a3a6f..a384319 100644
--- a/src/views/deviceManage/editLamppost.vue
+++ b/src/views/deviceManage/editLamppost.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="postForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="postForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="路灯杆编号" prop="lamppostCode">
diff --git a/src/views/deviceManage/listLog.vue b/src/views/deviceManage/listLog.vue
index 1d00e1c..5ab9a95 100644
--- a/src/views/deviceManage/listLog.vue
+++ b/src/views/deviceManage/listLog.vue
@@ -1,36 +1,32 @@
 <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-form-item>
-              <el-input v-model.trim="listQuery.devcode" placeholder="设备编号" clearable/>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.status" placeholder="下发状态" filterable clearable>
-                <el-option v-for="item in statusList" :key="item.name" :label="item.name" :value="item.name"/>
-              </el-select>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button class="edit_btn" size="small" @click="sendAll">全部设备下发</el-button>
-          <el-button class="edit_btn" size="small" @click="send">设备下发</el-button>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" :row-style="{height: '47px'}" class="table" border @selection-change="handleSelectionChange">
-        <el-table-column align="center" type="selection" width="55"/>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.devcode" size="small" placeholder="设备编号" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" placeholder="下发状态" filterable clearable>
+          <el-option v-for="item in statusList" :key="item.name" :label="item.name" :value="item.name"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button class="edit_btn" size="small" @click="sendAll">全部设备下发</el-button>
+        <el-button class="edit_btn" size="small" @click="send">设备下发</el-button>
+      </template>
+      <template slot="columns">
         <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">
             <div v-if="column.value === 'channel1'">
@@ -50,22 +46,9 @@
             </div>
           </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>
-  </div>
+      </template>
+    </normal-table>
+  </app-container>
 </template>
 
 <script>
@@ -151,7 +134,21 @@
       alarmStatusList: [{ name: '正在报警', value: '1' }, { name: '已取消', value: '2' }], // 报警状态列表
       statusList: [{ name: '未下发' }, { name: '已下发' }],
       alarmTypeList: [],
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -262,18 +259,13 @@
       this.timeRange = []
       this.fetchData(false)
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/example/tableExample.vue b/src/views/example/tableExample.vue
index 2d54fad..e8cd106 100644
--- a/src/views/example/tableExample.vue
+++ b/src/views/example/tableExample.vue
@@ -139,7 +139,7 @@
           text: '数据列表' // 标题名称
         },
         options: {
-          needIndex: false // 是否需要序号列
+          needIndex: true // 是否需要序号列
         },
         toolsOption: {
           selectColumns: false, // 是否需要筛选列
diff --git a/src/views/report/boxData.vue b/src/views/report/boxData.vue
index 2e04e4b..5faeff7 100644
--- a/src/views/report/boxData.vue
+++ b/src/views/report/boxData.vue
@@ -1,25 +1,50 @@
 <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-form-item class="selectForm-container-item">
-              <el-input v-model.trim="listQuery.keyword" placeholder="灯箱编号/灯箱名称" clearable/>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item">
-              <el-select v-model="listQuery.groupId" placeholder="设备组" clearable>
-                <el-option v-for="item in groupList" :key="item.id" :label="item.groupName" :value="item.id"/>
-              </el-select>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-      <div class="clearfloat"/>
-    </div>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="灯箱编号/灯箱名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.groupId" size="small" placeholder="设备组" clearable>
+          <el-option v-for="item in groupList" :key="item.id" :label="item.groupName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
+        <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">
+            <div v-if="column.value === 'A'">
+              <span v-html="allNum(scope.row.electricityA,scope.row.voltageA,scope.row.powerA)"/>
+            </div>
+            <div v-else-if="column.value === 'B'">
+              <span v-html="allNum(scope.row.electricityB,scope.row.voltageA,scope.row.powerB)"/>
+            </div>
+            <div v-else-if="column.value === 'C'">
+              <span v-html="allNum(scope.row.electricityC,scope.row.voltageA,scope.row.powerC)"/>
+            </div>
+            <div v-else>
+              <span>{{ scope.row[column.value] }}</span>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" width="130">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click="showHistory(scope.row)">查看历史</el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
     <!--查询结果Table显示-->
     <div>
       <el-row class="table-title">
@@ -43,29 +68,10 @@
             </div>
           </template>
         </el-table-column>
-        <el-table-column label="操作" align="center" width="130">
-          <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
-            <el-button type="text" size="small" @click="showHistory(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>
     <box-history v-show="dialogFormVisible" ref="boxhistory"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -121,7 +127,21 @@
       listLoading: true, // 列表加载
       dialogFormVisible: false,
       alarmReasonList: [], // 报警原因列表
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -177,18 +197,13 @@
         this.groupList = response.data
       })
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }
diff --git a/src/views/report/boxHistory.vue b/src/views/report/boxHistory.vue
index e63fb94..c5cf8ca 100644
--- a/src/views/report/boxHistory.vue
+++ b/src/views/report/boxHistory.vue
@@ -2,7 +2,7 @@
   <div class="app-container">
     <!--筛选条件-->
     <el-dialog :visible.sync="dialogFormVisible" :title="title" append-to-body>
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
+      <el-form ref="selectForm" :inline="true" :model="listQuery" size="small" class="form-container">
         <el-form-item class="selectForm-container-item" prop="startTime">
           <el-date-picker
             v-model="timeRange"
@@ -19,7 +19,7 @@
         <el-row class="table-title">
           <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
         </el-row>
-        <el-table v-loading="listLoading" :data="list" class="table" height="300px" border>
+        <el-table v-loading="listLoading" :data="list" class="table" size="small" height="300px" border>
           <el-table-column :index="indexMethod" label="序号" align="center" type="index" width="55" ></el-table-column>
           <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">
diff --git a/src/views/report/controllerData.vue b/src/views/report/controllerData.vue
index 5b7c360..ee81ba7 100644
--- a/src/views/report/controllerData.vue
+++ b/src/views/report/controllerData.vue
@@ -1,63 +1,40 @@
 <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-form-item class="selectForm-container-item">
-              <el-input v-model.trim="listQuery.keyword" placeholder="路灯编号/路灯名称" clearable/>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item">
-              <el-input v-model.trim="listQuery.controllerCode" placeholder="控制器编号" clearable/>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item">
-              <el-select v-model="listQuery.groupId" placeholder="设备组" clearable>
-                <el-option v-for="item in groupList" :key="item.id" :label="item.groupName" :value="item.id"/>
-              </el-select>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-      <div class="clearfloat"/>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="序号" width="55" align="center" type="index" />
-        <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>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="路灯编号/路灯名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.controllerCode" size="small" placeholder="控制器编号" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.groupId" size="small" placeholder="设备组" clearable>
+          <el-option v-for="item in groupList" :key="item.id" :label="item.groupName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="130">
           <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
             <el-button type="text" size="small" @click="showHistory(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>
     <history-data v-show="dialogFormVisible" ref="historydata"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -131,7 +108,21 @@
       listLoading: true, // 列表加载
       dialogFormVisible: false,
       alarmReasonList: [], // 报警原因列表
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -197,6 +188,15 @@
     handleCurrentChange(val) {
       this.listQuery.offset = val
       this.fetchData()
+    },
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
     }
   }
 }
diff --git a/src/views/report/historyData.vue b/src/views/report/historyData.vue
index 17e66de..9ba326e 100644
--- a/src/views/report/historyData.vue
+++ b/src/views/report/historyData.vue
@@ -2,7 +2,7 @@
   <div class="app-container">
     <!--筛选条件-->
     <el-dialog :visible.sync="dialogFormVisible" :title="title" append-to-body>
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
+      <el-form ref="selectForm" :inline="true" :model="listQuery" size="small" class="form-container">
         <el-form-item class="selectForm-container-item" prop="startTime">
           <el-date-picker
             v-model="timeRange"
@@ -12,14 +12,14 @@
             start-placeholder="查询开始时间"
             end-placeholder="查询结束时间"/>
         </el-form-item>
-        <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
+        <el-button class="filter-item" type="primary" icon="el-icon-search" size="small" @click="search">搜索</el-button>
       </el-form>
       <!--查询结果Table显示-->
       <div>
         <el-row class="table-title">
           <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
         </el-row>
-        <el-table v-loading="listLoading" :data="list" class="table" height="300px" border>
+        <el-table v-loading="listLoading" :data="list" class="table" size="small" height="300px" border>
           <el-table-column :index="indexMethod" label="序号" align="center" type="index" width="55" ></el-table-column>
           <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">
diff --git a/src/views/report/quantityData.vue b/src/views/report/quantityData.vue
index a4bd607..88a4d4d 100644
--- a/src/views/report/quantityData.vue
+++ b/src/views/report/quantityData.vue
@@ -1,46 +1,35 @@
 <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-form-item class="selectForm-container-item">
-              <el-date-picker
-                v-model="timeRange"
-                :picker-options="pickerOptions"
-                :clearable="false"
-                type="daterange"
-                value-format="yyyy-MM-dd"
-                align="right"
-                unlink-panels
-                range-separator="至"
-                start-placeholder="开始日期"
-                end-placeholder="结束日期"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-      <div class="clearfloat"/>
-    </div>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          :picker-options="pickerOptions"
+          :clearable="false"
+          type="daterange"
+          value-format="yyyy-MM-dd"
+          align="right"
+          unlink-panels
+          range-separator="至"
+          size="small"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"/>
+      </search-item>
+    </search-area>
     <div ref="chart" class="chart-body" style="padding-top: 20px;"/>
-    <!--查询结果Table显示-->
-    <div style="margin-bottom: 50px">
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" :row-style="{height: '47px'}" class="table" border>
-        <el-table-column :index="indexMethod" label="序号" width="55" align="center" type="index" />
-        <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>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-  </div>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage"/>
+  </app-container>
 </template>
 
 <script>
@@ -104,7 +93,21 @@
       list: [], // 报警列表
       chart: '',
       staticsList: [], // 报警列表
-      listLoading: true // 列表加载
+      listLoading: true, // 列表加载
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   watch: {
@@ -202,6 +205,15 @@
     handleCurrentChange(val) {
       this.listQuery.offset = val
       this.fetchData()
+    },
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
     }
   }
 }
diff --git a/src/views/report/statics.vue b/src/views/report/statics.vue
index 8a16fbd..005a41e 100644
--- a/src/views/report/statics.vue
+++ b/src/views/report/statics.vue
@@ -1,31 +1,24 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <!--筛选条件-->
-    <div class="search-div">
-      <div class="search-left">
-        <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
-          <el-row>
-            <el-form-item class="selectForm-container-item">
-              <el-date-picker
-                v-model="timeRange"
-                :picker-options="pickerOptions"
-                :clearable="false"
-                type="daterange"
-                value-format="yyyy-MM-dd"
-                align="right"
-                unlink-panels
-                range-separator="至"
-                start-placeholder="开始日期"
-                end-placeholder="结束日期"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-      <div class="clearfloat"/>
-    </div>
-    <el-tabs v-model="tab" type="border-card">
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          :picker-options="pickerOptions"
+          :clearable="false"
+          size="small"
+          type="daterange"
+          value-format="yyyy-MM-dd"
+          align="right"
+          unlink-panels
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"/>
+      </search-item>
+    </search-area>
+    <el-tabs v-model="tab" type="border-card" style="border-top: 12px solid #ebebeb !important;">
       <el-tab-pane label="街道统计" name="street">
         <el-row v-if="tab === 'street'" style="padding-top: 20px;">
           <el-col :span="12" >
@@ -68,7 +61,7 @@
         <div ref="chart" class="chart-body"/>
       </el-col>
     </el-row>
-  </div>
+  </app-container>
 </template>
 
 <script>
diff --git a/src/views/strategy/components/editStrategy.vue b/src/views/strategy/components/editStrategy.vue
index c396b81..ae64c77 100644
--- a/src/views/strategy/components/editStrategy.vue
+++ b/src/views/strategy/components/editStrategy.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="strategyInfo.strategyInfo" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="strategyInfo.strategyInfo" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="策略名称" prop="strategyName">
@@ -52,7 +52,7 @@
     </el-form>
     <el-tabs v-model="tab" type="border-card" >
       <el-tab-pane label="开灯命令" name="open">
-        <el-form ref="openForm" :rules="rules1" :model="openForm" label-well-code="right" label-width="110px">
+        <el-form ref="openForm" :rules="rules1" :model="openForm" size="small" label-well-code="right" label-width="110px">
           <el-row :gutter="20">
             <el-col :span="12">
               <el-form-item label="策略类型" prop="strategyType">
@@ -98,7 +98,7 @@
         </el-form>
       </el-tab-pane>
       <el-tab-pane label="关灯命令" name="close">
-        <el-form ref="closeForm" :rules="rules2" :model="closeForm" label-well-code="right" label-width="110px">
+        <el-form ref="closeForm" :rules="rules2" :model="closeForm" size="small" label-well-code="right" label-width="110px">
           <el-row :gutter="20">
             <el-col :span="12">
               <el-form-item label="策略类型" prop="strategyType">
diff --git a/src/views/strategy/components/editThreshold.vue b/src/views/strategy/components/editThreshold.vue
index e1037e4..499f827 100644
--- a/src/views/strategy/components/editThreshold.vue
+++ b/src/views/strategy/components/editThreshold.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" append-to-body width="700px">
+  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" size="small" append-to-body width="700px">
     <el-form ref="dataForm" :rules="rules" :model="thresholdForm" label-position="right" label-width="180px">
       <el-row :gutter="20">
         <el-col :span="16" offset="4">
diff --git a/src/views/strategy/components/editTime.vue b/src/views/strategy/components/editTime.vue
index a2d132f..54b2f2b 100644
--- a/src/views/strategy/components/editTime.vue
+++ b/src/views/strategy/components/editTime.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" append-to-body width="700px">
+  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" size="small" append-to-body width="700px">
     <el-row class="table-title" style="margin-top: -20px;margin-bottom: 20px">
       <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>控制器采集设置</div>
       </el-col>
diff --git a/src/views/strategy/deviceData.vue b/src/views/strategy/deviceData.vue
index 63c5a6c..df200aa 100644
--- a/src/views/strategy/deviceData.vue
+++ b/src/views/strategy/deviceData.vue
@@ -1,58 +1,38 @@
 <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-form-item class="selectForm-container-item">
-              <el-input v-model.trim="listQuery.deviceName" placeholder="设备名称" clearable/>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item">
-              <el-select v-model="listQuery.deviceType" placeholder="设备类型" clearable @change="fetchData">
-                <el-option v-for="item in groupList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-          </el-row>
-        </el-form>
-      </div>
-      <div class="clearfloat"/>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="序号" width="55" align="center" type="index" />
-        <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>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" align="center" width="100">
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.deviceName" size="small" placeholder="设备名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.deviceType" size="small" placeholder="设备类型" clearable @change="fetchData">
+          <el-option v-for="item in groupList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="130">
           <template slot-scope="scope">
             <el-button type="text" size="small" @click="showHistory(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>
     <device-history v-show="dialogFormVisible" ref="devicehistory"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -134,7 +114,21 @@
       listLoading: true, // 列表加载
       dialogFormVisible: false,
       alarmReasonList: [], // 报警原因列表
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
diff --git a/src/views/strategy/deviceHistory.vue b/src/views/strategy/deviceHistory.vue
index 89fb7c1..a2a2f00 100644
--- a/src/views/strategy/deviceHistory.vue
+++ b/src/views/strategy/deviceHistory.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <!--筛选条件-->
     <el-dialog :visible.sync="dialogFormVisible" :title="title" append-to-body width="1100px">
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
+      <el-form ref="selectForm" :inline="true" :model="listQuery" size="small" class="form-container">
         <el-form-item class="selectForm-container-item" prop="startTime">
           <el-date-picker
             v-model="timeRange"
@@ -42,7 +42,7 @@
           @current-change="handleCurrentChange"/>
       </div>
     </el-dialog>
-  </div>
+  </app-container>
 </template>
 
 <script>
diff --git a/src/views/strategy/listExeLog.vue b/src/views/strategy/listExeLog.vue
index 1a236dd..5faf067 100644
--- a/src/views/strategy/listExeLog.vue
+++ b/src/views/strategy/listExeLog.vue
@@ -1,50 +1,26 @@
 <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-form-item class="selectForm-container-item">
-              <el-input v-model.trim="listQuery.strategyName" placeholder="策略名称" clearable/>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item">
-              <el-input v-model.trim="listQuery.groupName" placeholder="分组名称" clearable/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-          </el-row>
-        </el-form>
-      </div>
-      <div class="clearfloat"/>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" :row-style="{height: '47px'}" class="table" border>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
-        <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>{{ scope.row[column.value] }}</span>
-          </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>
-  </div>
+  <app-container>
+    <search-area :need-clear="false" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.strategyName" size="small" placeholder="策略名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.groupName" size="small" placeholder="分组名称" clearable/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage"/>
+  </app-container>
 </template>
 
 <script>
@@ -107,7 +83,21 @@
       total: 0, // 数据总数
       list: [], // 报警列表
       listLoading: true, // 列表加载
-      dialogFormVisible: ''
+      dialogFormVisible: '',
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -136,18 +126,13 @@
     search() {
       this.fetchData(false)
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }

diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 5077bef..3fd3f33 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -58,6 +58,8 @@
       <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns"/>
+        <!--复选框列-->
+        <el-table-column v-if="options && options.needMultSelect" align="center" type="selection" width="55"/>
         <!--序号列-->
         <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
         <!--内容列, 若columns存在且长度大于0-->
@@ -140,7 +142,8 @@
       type: Object,
       default: function() {
         return {
-          needIndex: true // 是否需要序号列
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
         }
       }
     }, // 配置项
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
index 1175911..b5e8442 100644
--- a/src/components/SearchArea/SearchArea.vue
+++ b/src/components/SearchArea/SearchArea.vue
@@ -16,6 +16,7 @@
       <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
       <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
       <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns-seperate"/>
     </div>
     <!-- 弹出框式高级检索 -->
     <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
index 84bdb9f..c192d79 100644
--- a/src/layout/components/AppHeader.vue
+++ b/src/layout/components/AppHeader.vue
@@ -1,6 +1,14 @@
 <template>
   <el-header class="app-header">
     <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown v-if="showChangeSys" class="systemSelect" size="medium" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
     <el-dropdown class="dropdown-container" trigger="click">
       <div class="dropdown-wrapper">
         <span style="line-height:50px;">欢迎您，{{ name }}</span>
@@ -33,6 +41,7 @@
   data() {
     return {
       title: this.baseConfig.title, // 标题
+      showChangeSys: !this.baseConfig.singleSys, // 是否显示切换系统菜单
       name: this.$store.getters.name, // 用户姓名
       showSetPwd: false // 是否显示修改密码按钮
     }
@@ -40,7 +49,9 @@
   computed: {
     ...mapGetters([
       'sidebar',
-      'avatar'
+      'avatar',
+      'currentSystem',
+      'systems'
     ])
   },
   methods: {
@@ -55,6 +66,38 @@
     resetPwd() {
       this.showSetPwd = true
       this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      const url = this.baseConfig.mainPage
+      window.location.href = url
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      const params1 = `?token=${this.$store.getters.token}`
+      const params = `?sys=${command.name}&url=${command.url}&code=${command.code}&token=${this.$store.getters.token}`
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params1
+        } else {
+          window.open(command.url + params1, '_blank')
+        }
+      } else {
+        // 取token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = this.baseConfig.mainPage + command.url + params
+        } else {
+          window.open(this.baseConfig.mainPage + command.url + params, '_blank')
+        }
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
     }
   }
 }
diff --git a/src/permission.js b/src/permission.js
index 69e8233..637373e 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -26,20 +26,13 @@
           // 设置当前子系统为基础资源子系统
           const currentSys = {
             code: 'baseResourse',
-            id: '1189107859077373285',
-            ismenu: '0',
-            levels: 1,
-            name: '智慧照明子系统',
-            num: 0,
-            parentId: '0',
-            resourceType: '02',
-            url: '/baseResourse'
+            name: '智慧照明子系统'
           }
           // 将当前系统信息保存在localStorage中
           store.commit('SET_SYSTEM', currentSys)
           // 远程访问获取权限列表（菜单&按钮）
           store.dispatch('GetMenus', currentSys).then(() => {
-            store.commit('SET_CHANGEFLAG', '0')
+            // store.commit('SET_CHANGEFLAG', '0')
             router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
             next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
           })
diff --git a/src/router/index.js b/src/router/index.js
index 32f93ef..b558038 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -49,21 +49,22 @@
   // 404错误页面
   { path: '/404', component: () => import('@/views/errorPage/404'), hidden: true },
   // 401 错误页面
-  { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
-  // 主页
-  {
-    path: '/',
-    component: Layout,
-    redirect: 'dashboard',
-    name: 'Dashboard',
-    // hidden: true,
-    children: [{
-      path: 'dashboard',
-      name: 'Dashboard',
-      component: () => import('@/views/dashboard/index'),
-      meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
-    }]
-  }
+  { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true }
+  // { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
+  // // 主页
+  // {
+  //   path: '/',
+  //   component: Layout,
+  //   redirect: 'dashboard',
+  //   name: 'Dashboard',
+  //   // hidden: true,
+  //   children: [{
+  //     path: 'dashboard',
+  //     name: 'Dashboard',
+  //     component: () => import('@/views/dashboard/index'),
+  //     meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
+  //   }]
+  // }
 ]
 // 实例化vue的时候直挂载constantRouter
 export default new Router({
diff --git a/src/views/alarmManage/alarmRule.vue b/src/views/alarmManage/alarmRule.vue
index 888a4d1..11469a2 100644
--- a/src/views/alarmManage/alarmRule.vue
+++ b/src/views/alarmManage/alarmRule.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
       <el-tab-pane label="路灯" name="lamp">
         <lamp-type-list ref="lamp"/>
@@ -8,7 +8,7 @@
         <lampbox-type-list ref="box"/>
       </el-tab-pane>
     </el-tabs>
-  </div>
+  </app-container>
 </template>
 
 <script>
diff --git a/src/views/alarmManage/components/alarmDetail.vue b/src/views/alarmManage/components/alarmDetail.vue
index 9c68377..d598779 100644
--- a/src/views/alarmManage/components/alarmDetail.vue
+++ b/src/views/alarmManage/components/alarmDetail.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :close-on-click-modal="false" :visible.sync="dialogFormVisible" title="报警详情" append-to-body>
-    <el-form ref="dataForm" :model="alarmForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :model="alarmForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="10">
           <el-form-item label="设备名称" prop="deviceName">
diff --git a/src/views/alarmManage/lampType/editLampType.vue b/src/views/alarmManage/lampType/editLampType.vue
index 8c3e37a..8e5fc23 100644
--- a/src/views/alarmManage/lampType/editLampType.vue
+++ b/src/views/alarmManage/lampType/editLampType.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="typeForm" label-well-code="right" label-width="200px">
+    <el-form ref="dataForm" :rules="rules" :model="typeForm" size="small" label-well-code="right" label-width="200px">
       <el-row :gutter="20">
         <el-col :span="20">
           <el-form-item label="路灯类型" prop="typeName">
diff --git a/src/views/alarmManage/lampType/lampTypeList.vue b/src/views/alarmManage/lampType/lampTypeList.vue
index f8547ed..f10c63b 100644
--- a/src/views/alarmManage/lampType/lampTypeList.vue
+++ b/src/views/alarmManage/lampType/lampTypeList.vue
@@ -8,12 +8,11 @@
           <el-row>
             <el-col :span="4">
               <el-form-item class="selectForm-container-item">
-                <el-input v-model.trim="listQuery.typeName" placeholder="类型名称" clearable />
+                <el-input v-model.trim="listQuery.typeName" size="small" placeholder="类型名称" clearable />
               </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-button class="filter-item" type="primary" icon="el-icon-search" size="small" style="margin-top: 2px" @click="search">搜索</el-button>
             </el-col>
           </el-row>
         </el-form>
@@ -28,7 +27,7 @@
           <el-button class="edit_btn" size="small" @click="add">新增</el-button>
         </el-col>
       </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
+      <el-table v-loading="listLoading" :data="list" class="table" size="small" border @selection-change="handleSelectionChange">
         <!--拥有删除权限则显示复选框-->
         <el-table-column v-if="hasPerm('/lampType/delete')" align="center" type="selection" width="55"/>
         <!--序号列-->
diff --git a/src/views/alarmManage/lampboxType/editLampboxType.vue b/src/views/alarmManage/lampboxType/editLampboxType.vue
index 1b94960..ae3a7c1 100644
--- a/src/views/alarmManage/lampboxType/editLampboxType.vue
+++ b/src/views/alarmManage/lampboxType/editLampboxType.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="typeForm" label-well-code="right" label-width="200px">
+    <el-form ref="dataForm" :rules="rules" :model="typeForm" size="small" label-well-code="right" label-width="200px">
       <el-row :gutter="20">
         <el-col :span="20">
           <el-form-item label="灯箱类型" prop="typeName">
diff --git a/src/views/alarmManage/lampboxType/lampboxTypeList.vue b/src/views/alarmManage/lampboxType/lampboxTypeList.vue
index 7b68f20..f33dcbf 100644
--- a/src/views/alarmManage/lampboxType/lampboxTypeList.vue
+++ b/src/views/alarmManage/lampboxType/lampboxTypeList.vue
@@ -8,7 +8,7 @@
           <el-row>
             <el-col :span="4">
               <el-form-item class="selectForm-container-item">
-                <el-input v-model.trim="listQuery.typeName" placeholder="类型名称" clearable />
+                <el-input v-model.trim="listQuery.typeName" size="small" placeholder="类型名称" clearable />
               </el-form-item>
             </el-col>
 
diff --git a/src/views/alarmManage/listAlarm.vue b/src/views/alarmManage/listAlarm.vue
index 7571a0e..fe3e359 100644
--- a/src/views/alarmManage/listAlarm.vue
+++ b/src/views/alarmManage/listAlarm.vue
@@ -1,73 +1,52 @@
 <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-form-item>
-              <el-input v-model.trim="listQuery.keyword" placeholder="设备编号/设备名称" clearable/>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmType" placeholder="报警类型" clearable>
-                <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmStatus" placeholder="报警状态" clearable>
-                <el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item" prop="startTime">
-              <el-date-picker
-                v-model="timeRange"
-                type="datetimerange"
-                range-separator="至"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                start-placeholder="报警开始时间"
-                end-placeholder="报警结束时间"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
-        <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>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="设备编号/设备名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmType" size="small" placeholder="报警类型" clearable>
+          <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmStatus" size="small" placeholder="报警状态" clearable>
+          <el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          size="small"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="报警开始时间"
+          end-placeholder="报警结束时间"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="130">
           <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
             <el-button type="text" size="small" @click="showDetail(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>
     <alarm-detail v-show="dialogFormVisible" ref="alarmdetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -123,7 +102,21 @@
       dialogFormVisible: false,
       alarmStatusList: [{ name: '正在报警', value: '1' }, { name: '已取消', value: '2' }], // 报警状态列表
       alarmTypeList: [],
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   watch: {
@@ -171,19 +164,15 @@
     },
     clearInput() {
       this.listQuery = {
-        name: '', // 姓名
-        sex: '', // 性别
-        nation: '', // 民族
-        collReason: '', // 采集原因
-        cardType: '', // 证件类型
-        idCardNo: '', // 证件号码
-        alarmReason: '', // 报警原因
-        startTime: '', // 开始时间
-        endTime: '', // 结束时间
+        keyword: '', // 设备编号/设备名称
+        alarmType: '', // 报警类型
+        alarmStatus: '', // 报警状态
+        startTime: '', // 报警开始时间
+        endTime: '', // 报警结束时间
         offset: 1,
         limit: 20,
-        sort: '',
-        order: ''
+        sort: 'alarmTime',
+        order: 'desc'
       }
       this.timeRange = []
       this.fetchData(false)
@@ -194,18 +183,13 @@
         this.alarmTypeList = response.data
       })
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }
diff --git a/src/views/alarmManage/listAlarmNow.vue b/src/views/alarmManage/listAlarmNow.vue
index c48b60a..d98b641 100644
--- a/src/views/alarmManage/listAlarmNow.vue
+++ b/src/views/alarmManage/listAlarmNow.vue
@@ -1,73 +1,47 @@
 <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-form-item>
-              <el-input v-model.trim="listQuery.keyword" placeholder="设备编号/设备名称" clearable/>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmType" placeholder="报警类型" clearable>
-                <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <!--<el-form-item>-->
-            <!--<el-select v-model="listQuery.alarmStatus" placeholder="报警状态" clearable>-->
-            <!--<el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>-->
-            <!--</el-select>-->
-            <!--</el-form-item>-->
-            <el-form-item class="selectForm-container-item" prop="startTime">
-              <el-date-picker
-                v-model="timeRange"
-                type="datetimerange"
-                range-separator="至"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                start-placeholder="报警开始时间"
-                end-placeholder="报警结束时间"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
-        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="设备编号/设备名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmType" size="small" placeholder="报警类型" clearable>
+          <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          size="small"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="报警开始时间"
+          end-placeholder="报警结束时间"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
-            <span>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" align="center" width="130">
-          <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
             <el-button type="text" size="small" @click="showDetail(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>
     <alarm-detail v-show="dialogFormVisible" ref="alarmdetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -123,7 +97,21 @@
       dialogFormVisible: false,
       alarmStatusList: [{ name: '正在报警', value: '1' }, { name: '已取消', value: '2' }], // 报警状态列表
       alarmTypeList: [],
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   watch: {
@@ -171,15 +159,11 @@
     },
     clearInput() {
       this.listQuery = {
-        name: '', // 姓名
-        sex: '', // 性别
-        nation: '', // 民族
-        collReason: '', // 采集原因
-        cardType: '', // 证件类型
-        idCardNo: '', // 证件号码
-        alarmReason: '', // 报警原因
-        startTime: '', // 开始时间
-        endTime: '', // 结束时间
+        keyword: '', // 设备编号/设备名称
+        alarmType: '', // 报警类型
+        alarmStatus: '1', // 报警状态
+        startTime: '', // 报警开始时间
+        endTime: '', // 报警结束时间
         offset: 1,
         limit: 20,
         sort: '',
@@ -194,18 +178,13 @@
         this.alarmTypeList = response.data
       })
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }
diff --git a/src/views/deviceManage/busCircuit.vue b/src/views/deviceManage/busCircuit.vue
index 2e1f872..7c9c804 100644
--- a/src/views/deviceManage/busCircuit.vue
+++ b/src/views/deviceManage/busCircuit.vue
@@ -1,77 +1,48 @@
 <!--回路列表-->
 <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-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.lampboxId" placeholder="所属灯箱" filterable clearable>
-                  <el-option v-for="item in boxList" :key="item.id" :label="item.lampboxName" :value="item.id"/>
-                </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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/circuit/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-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/circuit/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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.lampboxId" size="small" placeholder="所属灯箱" filterable clearable>
+          <el-option v-for="item in boxList" :key="item.id" :label="item.lampboxName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <!--<template slot="preColumns">-->
+      <!--<el-table-column align="center" type="selection" width="55"/>-->
+      <!--</template>-->
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <el-table-column label="操作" align="center" width="160">
-          <template slot-scope="scope">
-            <el-button v-if="hasPerm('/circuit/edit')" type="text" size="small" @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-circuit ref="editCircuit" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -128,7 +99,21 @@
       multipleSelection: [], // 多选选中项
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -253,17 +238,13 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/busController.vue b/src/views/deviceManage/busController.vue
index 49789c4..4646bf2 100644
--- a/src/views/deviceManage/busController.vue
+++ b/src/views/deviceManage/busController.vue
@@ -1,98 +1,67 @@
 <!--设备列表-->
 <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>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.controllerCode" size="small" placeholder="控制器编号" clearable />
+      </search-item>
+      <search-item/>
+      <search-item>
+        <el-select v-model="listQuery.controllerType" size="small" 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" size="small" placeholder="所属组织"/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" 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
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="selectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <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>
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <!--<template slot="preColumns">-->
+      <!--<el-table-column align="center" type="selection" width="55"/>-->
+      <!--</template>-->
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <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>
@@ -152,7 +121,21 @@
       statusList: [{ value: '1', name: '在线' }, { value: '0', name: '离线' }],
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -303,21 +286,17 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
-    handleSelectionChange(val) {
+    selectionChange(val) {
       this.multipleSelection = val
     }
   }
diff --git a/src/views/deviceManage/busGroup.vue b/src/views/deviceManage/busGroup.vue
index 9f85789..a35646b 100644
--- a/src/views/deviceManage/busGroup.vue
+++ b/src/views/deviceManage/busGroup.vue
@@ -1,80 +1,48 @@
 <!--灯箱列表-->
 <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.keyword" placeholder="分组名称" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.deviceType" placeholder="设备类型" clearable @change="fetchData">
-                  <el-option v-for="item in groupList" :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="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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/lampbox/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-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column 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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="分组名称" clearable />
+      </search-item>
+      <search-item/>
+      <search-item>
+        <el-select v-model="listQuery.deviceType" size="small" placeholder="设备类型" clearable @change="fetchData">
+          <el-option v-for="item in groupList" :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" size="small" placeholder="所属组织"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <el-table-column label="操作" align="center" width="160">
-          <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>-->
-            <el-button type="text" size="small" @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-Group ref="editGroup" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -132,7 +100,21 @@
       multipleSelection: [], // 多选选中项
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -249,17 +231,13 @@
         this.listLoading = false
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/busLamp.vue b/src/views/deviceManage/busLamp.vue
index 3450479..c480b30 100644
--- a/src/views/deviceManage/busLamp.vue
+++ b/src/views/deviceManage/busLamp.vue
@@ -1,104 +1,68 @@
 <!--路灯列表-->
 <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.keyword" placeholder="关键词" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.lampType" placeholder="路灯类型" clearable>
-                  <el-option v-for="item in typeList" :key="item.id" :label="item.typeName" :value="item.id"/>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </el-select>
-              </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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/lamp/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>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/lamp/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>
-        <!--操作列-->
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="关键词" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.lampType" size="small" placeholder="路灯类型" clearable>
+          <el-option v-for="item in typeList" :key="item.id" :label="item.typeName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" 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
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <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>
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
             <el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>
-            <el-button v-if="hasPerm('/lamp/edit')" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
-
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
             <el-button v-if="hasPerm('/lamp/remoteOn')" type="text" size="small">开灯</el-button>
             <el-button v-if="hasPerm('/lamp/remoteOff')" type="text" size="small">关灯</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-Lamp ref="editLamp" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -175,7 +139,21 @@
       statusList: [{ value: '1', name: '开灯' }, { value: '2', name: '关灯' }, { value: '3', name: '报警' }, { value: '4', name: '离线' }],
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -338,17 +316,13 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/busLampbox.vue b/src/views/deviceManage/busLampbox.vue
index 292c3a5..7763fac 100644
--- a/src/views/deviceManage/busLampbox.vue
+++ b/src/views/deviceManage/busLampbox.vue
@@ -1,46 +1,34 @@
 <!--灯箱列表-->
 <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.boxName" placeholder="灯箱名称" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/lampbox/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-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/lampbox/delete')" align="center" type="selection" width="55"/>
-        <!--序号列-->
-        <el-table-column :index="indexMethod" align="center" type="index" label="#" width="55"/>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.boxName" size="small" placeholder="灯箱名称" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
         <!--内容列-->
         <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">
@@ -55,30 +43,18 @@
             </div>
           </template>
         </el-table-column>
-        <!--操作列-->
+      </template>
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
             <el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>
-            <el-button v-if="hasPerm('/lampbox/edit')" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
+            <el-button type="text" size="small" @click.stop="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-Lampbox ref="editLampbox" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -144,7 +120,21 @@
       multipleSelection: [], // 多选选中项
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -277,6 +267,15 @@
       this.listQuery.limit = val
       this.fetchData()
     },
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
+    },
     // 改变当前页
     handleCurrentChange(val) {
       this.listQuery.offset = val
diff --git a/src/views/deviceManage/busLamppost.vue b/src/views/deviceManage/busLamppost.vue
index 92833a0..c193813 100644
--- a/src/views/deviceManage/busLamppost.vue
+++ b/src/views/deviceManage/busLamppost.vue
@@ -1,100 +1,65 @@
 <!--灯杆列表-->
 <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.keyword" placeholder="关键词" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.lamppostType" placeholder="路灯杆类型" clearable>
-                  <el-option v-for="item in typeList" :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">
-                <el-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </el-select>
-              </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('/lamppost/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>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/lamppost/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>
-        <!--操作列-->
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="关键词" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.lamppostType" size="small" placeholder="路灯杆类型" clearable>
+          <el-option v-for="item in typeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" 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
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <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>
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
-            <el-button v-if="hasPerm('/lamppost/edit')" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
+            <el-button type="text" size="small" @click.stop="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-Lamppost ref="editLamppost" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -161,7 +126,21 @@
       statusList: [{ value: '1', name: '开灯' }, { value: '2', name: '关灯' }, { value: '3', name: '报警' }, { value: '4', name: '离线' }],
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -320,17 +299,13 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/editCircuit.vue b/src/views/deviceManage/editCircuit.vue
index 9e9dd03..a362483 100644
--- a/src/views/deviceManage/editCircuit.vue
+++ b/src/views/deviceManage/editCircuit.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="cirForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="cirForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="回路编号" prop="circuitCode">
diff --git a/src/views/deviceManage/editController.vue b/src/views/deviceManage/editController.vue
index 7bc786f..444c835 100644
--- a/src/views/deviceManage/editController.vue
+++ b/src/views/deviceManage/editController.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="controllerForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="controllerForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="控制器编号" prop="controllerCode">
diff --git a/src/views/deviceManage/editGroup.vue b/src/views/deviceManage/editGroup.vue
index de9b88b..403d605 100644
--- a/src/views/deviceManage/editGroup.vue
+++ b/src/views/deviceManage/editGroup.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="groupForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="groupForm" size="small" label-well-code="right" label-width="110px">
       <el-row :span="24">
         <el-form-item label="分组名称" prop="groupName">
           <el-input v-model.trim="groupForm.groupName" :readonly="!isEditMode" clearable type="text" />
diff --git a/src/views/deviceManage/editLamp.vue b/src/views/deviceManage/editLamp.vue
index 3d45138..faf37d5 100644
--- a/src/views/deviceManage/editLamp.vue
+++ b/src/views/deviceManage/editLamp.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="lampForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="lampForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="路灯编号" prop="lampCode">
diff --git a/src/views/deviceManage/editLampbox.vue b/src/views/deviceManage/editLampbox.vue
index bd3a537..a4a8ea7 100644
--- a/src/views/deviceManage/editLampbox.vue
+++ b/src/views/deviceManage/editLampbox.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="boxForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="boxForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="灯箱编号" prop="lampboxCode">
diff --git a/src/views/deviceManage/editLamppost.vue b/src/views/deviceManage/editLamppost.vue
index 67a3a6f..a384319 100644
--- a/src/views/deviceManage/editLamppost.vue
+++ b/src/views/deviceManage/editLamppost.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="postForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="postForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="路灯杆编号" prop="lamppostCode">
diff --git a/src/views/deviceManage/listLog.vue b/src/views/deviceManage/listLog.vue
index 1d00e1c..5ab9a95 100644
--- a/src/views/deviceManage/listLog.vue
+++ b/src/views/deviceManage/listLog.vue
@@ -1,36 +1,32 @@
 <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-form-item>
-              <el-input v-model.trim="listQuery.devcode" placeholder="设备编号" clearable/>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.status" placeholder="下发状态" filterable clearable>
-                <el-option v-for="item in statusList" :key="item.name" :label="item.name" :value="item.name"/>
-              </el-select>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button class="edit_btn" size="small" @click="sendAll">全部设备下发</el-button>
-          <el-button class="edit_btn" size="small" @click="send">设备下发</el-button>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" :row-style="{height: '47px'}" class="table" border @selection-change="handleSelectionChange">
-        <el-table-column align="center" type="selection" width="55"/>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.devcode" size="small" placeholder="设备编号" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" placeholder="下发状态" filterable clearable>
+          <el-option v-for="item in statusList" :key="item.name" :label="item.name" :value="item.name"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button class="edit_btn" size="small" @click="sendAll">全部设备下发</el-button>
+        <el-button class="edit_btn" size="small" @click="send">设备下发</el-button>
+      </template>
+      <template slot="columns">
         <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">
             <div v-if="column.value === 'channel1'">
@@ -50,22 +46,9 @@
             </div>
           </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>
-  </div>
+      </template>
+    </normal-table>
+  </app-container>
 </template>
 
 <script>
@@ -151,7 +134,21 @@
       alarmStatusList: [{ name: '正在报警', value: '1' }, { name: '已取消', value: '2' }], // 报警状态列表
       statusList: [{ name: '未下发' }, { name: '已下发' }],
       alarmTypeList: [],
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -262,18 +259,13 @@
       this.timeRange = []
       this.fetchData(false)
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/example/tableExample.vue b/src/views/example/tableExample.vue
index 2d54fad..e8cd106 100644
--- a/src/views/example/tableExample.vue
+++ b/src/views/example/tableExample.vue
@@ -139,7 +139,7 @@
           text: '数据列表' // 标题名称
         },
         options: {
-          needIndex: false // 是否需要序号列
+          needIndex: true // 是否需要序号列
         },
         toolsOption: {
           selectColumns: false, // 是否需要筛选列
diff --git a/src/views/report/boxData.vue b/src/views/report/boxData.vue
index 2e04e4b..5faeff7 100644
--- a/src/views/report/boxData.vue
+++ b/src/views/report/boxData.vue
@@ -1,25 +1,50 @@
 <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-form-item class="selectForm-container-item">
-              <el-input v-model.trim="listQuery.keyword" placeholder="灯箱编号/灯箱名称" clearable/>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item">
-              <el-select v-model="listQuery.groupId" placeholder="设备组" clearable>
-                <el-option v-for="item in groupList" :key="item.id" :label="item.groupName" :value="item.id"/>
-              </el-select>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-      <div class="clearfloat"/>
-    </div>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="灯箱编号/灯箱名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.groupId" size="small" placeholder="设备组" clearable>
+          <el-option v-for="item in groupList" :key="item.id" :label="item.groupName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
+        <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">
+            <div v-if="column.value === 'A'">
+              <span v-html="allNum(scope.row.electricityA,scope.row.voltageA,scope.row.powerA)"/>
+            </div>
+            <div v-else-if="column.value === 'B'">
+              <span v-html="allNum(scope.row.electricityB,scope.row.voltageA,scope.row.powerB)"/>
+            </div>
+            <div v-else-if="column.value === 'C'">
+              <span v-html="allNum(scope.row.electricityC,scope.row.voltageA,scope.row.powerC)"/>
+            </div>
+            <div v-else>
+              <span>{{ scope.row[column.value] }}</span>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" width="130">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click="showHistory(scope.row)">查看历史</el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
     <!--查询结果Table显示-->
     <div>
       <el-row class="table-title">
@@ -43,29 +68,10 @@
             </div>
           </template>
         </el-table-column>
-        <el-table-column label="操作" align="center" width="130">
-          <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
-            <el-button type="text" size="small" @click="showHistory(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>
     <box-history v-show="dialogFormVisible" ref="boxhistory"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -121,7 +127,21 @@
       listLoading: true, // 列表加载
       dialogFormVisible: false,
       alarmReasonList: [], // 报警原因列表
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -177,18 +197,13 @@
         this.groupList = response.data
       })
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }
diff --git a/src/views/report/boxHistory.vue b/src/views/report/boxHistory.vue
index e63fb94..c5cf8ca 100644
--- a/src/views/report/boxHistory.vue
+++ b/src/views/report/boxHistory.vue
@@ -2,7 +2,7 @@
   <div class="app-container">
     <!--筛选条件-->
     <el-dialog :visible.sync="dialogFormVisible" :title="title" append-to-body>
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
+      <el-form ref="selectForm" :inline="true" :model="listQuery" size="small" class="form-container">
         <el-form-item class="selectForm-container-item" prop="startTime">
           <el-date-picker
             v-model="timeRange"
@@ -19,7 +19,7 @@
         <el-row class="table-title">
           <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
         </el-row>
-        <el-table v-loading="listLoading" :data="list" class="table" height="300px" border>
+        <el-table v-loading="listLoading" :data="list" class="table" size="small" height="300px" border>
           <el-table-column :index="indexMethod" label="序号" align="center" type="index" width="55" ></el-table-column>
           <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">
diff --git a/src/views/report/controllerData.vue b/src/views/report/controllerData.vue
index 5b7c360..ee81ba7 100644
--- a/src/views/report/controllerData.vue
+++ b/src/views/report/controllerData.vue
@@ -1,63 +1,40 @@
 <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-form-item class="selectForm-container-item">
-              <el-input v-model.trim="listQuery.keyword" placeholder="路灯编号/路灯名称" clearable/>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item">
-              <el-input v-model.trim="listQuery.controllerCode" placeholder="控制器编号" clearable/>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item">
-              <el-select v-model="listQuery.groupId" placeholder="设备组" clearable>
-                <el-option v-for="item in groupList" :key="item.id" :label="item.groupName" :value="item.id"/>
-              </el-select>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-      <div class="clearfloat"/>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="序号" width="55" align="center" type="index" />
-        <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>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="路灯编号/路灯名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.controllerCode" size="small" placeholder="控制器编号" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.groupId" size="small" placeholder="设备组" clearable>
+          <el-option v-for="item in groupList" :key="item.id" :label="item.groupName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="130">
           <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
             <el-button type="text" size="small" @click="showHistory(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>
     <history-data v-show="dialogFormVisible" ref="historydata"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -131,7 +108,21 @@
       listLoading: true, // 列表加载
       dialogFormVisible: false,
       alarmReasonList: [], // 报警原因列表
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -197,6 +188,15 @@
     handleCurrentChange(val) {
       this.listQuery.offset = val
       this.fetchData()
+    },
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
     }
   }
 }
diff --git a/src/views/report/historyData.vue b/src/views/report/historyData.vue
index 17e66de..9ba326e 100644
--- a/src/views/report/historyData.vue
+++ b/src/views/report/historyData.vue
@@ -2,7 +2,7 @@
   <div class="app-container">
     <!--筛选条件-->
     <el-dialog :visible.sync="dialogFormVisible" :title="title" append-to-body>
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
+      <el-form ref="selectForm" :inline="true" :model="listQuery" size="small" class="form-container">
         <el-form-item class="selectForm-container-item" prop="startTime">
           <el-date-picker
             v-model="timeRange"
@@ -12,14 +12,14 @@
             start-placeholder="查询开始时间"
             end-placeholder="查询结束时间"/>
         </el-form-item>
-        <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
+        <el-button class="filter-item" type="primary" icon="el-icon-search" size="small" @click="search">搜索</el-button>
       </el-form>
       <!--查询结果Table显示-->
       <div>
         <el-row class="table-title">
           <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
         </el-row>
-        <el-table v-loading="listLoading" :data="list" class="table" height="300px" border>
+        <el-table v-loading="listLoading" :data="list" class="table" size="small" height="300px" border>
           <el-table-column :index="indexMethod" label="序号" align="center" type="index" width="55" ></el-table-column>
           <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">
diff --git a/src/views/report/quantityData.vue b/src/views/report/quantityData.vue
index a4bd607..88a4d4d 100644
--- a/src/views/report/quantityData.vue
+++ b/src/views/report/quantityData.vue
@@ -1,46 +1,35 @@
 <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-form-item class="selectForm-container-item">
-              <el-date-picker
-                v-model="timeRange"
-                :picker-options="pickerOptions"
-                :clearable="false"
-                type="daterange"
-                value-format="yyyy-MM-dd"
-                align="right"
-                unlink-panels
-                range-separator="至"
-                start-placeholder="开始日期"
-                end-placeholder="结束日期"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-      <div class="clearfloat"/>
-    </div>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          :picker-options="pickerOptions"
+          :clearable="false"
+          type="daterange"
+          value-format="yyyy-MM-dd"
+          align="right"
+          unlink-panels
+          range-separator="至"
+          size="small"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"/>
+      </search-item>
+    </search-area>
     <div ref="chart" class="chart-body" style="padding-top: 20px;"/>
-    <!--查询结果Table显示-->
-    <div style="margin-bottom: 50px">
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" :row-style="{height: '47px'}" class="table" border>
-        <el-table-column :index="indexMethod" label="序号" width="55" align="center" type="index" />
-        <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>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-  </div>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage"/>
+  </app-container>
 </template>
 
 <script>
@@ -104,7 +93,21 @@
       list: [], // 报警列表
       chart: '',
       staticsList: [], // 报警列表
-      listLoading: true // 列表加载
+      listLoading: true, // 列表加载
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   watch: {
@@ -202,6 +205,15 @@
     handleCurrentChange(val) {
       this.listQuery.offset = val
       this.fetchData()
+    },
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
     }
   }
 }
diff --git a/src/views/report/statics.vue b/src/views/report/statics.vue
index 8a16fbd..005a41e 100644
--- a/src/views/report/statics.vue
+++ b/src/views/report/statics.vue
@@ -1,31 +1,24 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <!--筛选条件-->
-    <div class="search-div">
-      <div class="search-left">
-        <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
-          <el-row>
-            <el-form-item class="selectForm-container-item">
-              <el-date-picker
-                v-model="timeRange"
-                :picker-options="pickerOptions"
-                :clearable="false"
-                type="daterange"
-                value-format="yyyy-MM-dd"
-                align="right"
-                unlink-panels
-                range-separator="至"
-                start-placeholder="开始日期"
-                end-placeholder="结束日期"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-      <div class="clearfloat"/>
-    </div>
-    <el-tabs v-model="tab" type="border-card">
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          :picker-options="pickerOptions"
+          :clearable="false"
+          size="small"
+          type="daterange"
+          value-format="yyyy-MM-dd"
+          align="right"
+          unlink-panels
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"/>
+      </search-item>
+    </search-area>
+    <el-tabs v-model="tab" type="border-card" style="border-top: 12px solid #ebebeb !important;">
       <el-tab-pane label="街道统计" name="street">
         <el-row v-if="tab === 'street'" style="padding-top: 20px;">
           <el-col :span="12" >
@@ -68,7 +61,7 @@
         <div ref="chart" class="chart-body"/>
       </el-col>
     </el-row>
-  </div>
+  </app-container>
 </template>
 
 <script>
diff --git a/src/views/strategy/components/editStrategy.vue b/src/views/strategy/components/editStrategy.vue
index c396b81..ae64c77 100644
--- a/src/views/strategy/components/editStrategy.vue
+++ b/src/views/strategy/components/editStrategy.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="strategyInfo.strategyInfo" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="strategyInfo.strategyInfo" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="策略名称" prop="strategyName">
@@ -52,7 +52,7 @@
     </el-form>
     <el-tabs v-model="tab" type="border-card" >
       <el-tab-pane label="开灯命令" name="open">
-        <el-form ref="openForm" :rules="rules1" :model="openForm" label-well-code="right" label-width="110px">
+        <el-form ref="openForm" :rules="rules1" :model="openForm" size="small" label-well-code="right" label-width="110px">
           <el-row :gutter="20">
             <el-col :span="12">
               <el-form-item label="策略类型" prop="strategyType">
@@ -98,7 +98,7 @@
         </el-form>
       </el-tab-pane>
       <el-tab-pane label="关灯命令" name="close">
-        <el-form ref="closeForm" :rules="rules2" :model="closeForm" label-well-code="right" label-width="110px">
+        <el-form ref="closeForm" :rules="rules2" :model="closeForm" size="small" label-well-code="right" label-width="110px">
           <el-row :gutter="20">
             <el-col :span="12">
               <el-form-item label="策略类型" prop="strategyType">
diff --git a/src/views/strategy/components/editThreshold.vue b/src/views/strategy/components/editThreshold.vue
index e1037e4..499f827 100644
--- a/src/views/strategy/components/editThreshold.vue
+++ b/src/views/strategy/components/editThreshold.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" append-to-body width="700px">
+  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" size="small" append-to-body width="700px">
     <el-form ref="dataForm" :rules="rules" :model="thresholdForm" label-position="right" label-width="180px">
       <el-row :gutter="20">
         <el-col :span="16" offset="4">
diff --git a/src/views/strategy/components/editTime.vue b/src/views/strategy/components/editTime.vue
index a2d132f..54b2f2b 100644
--- a/src/views/strategy/components/editTime.vue
+++ b/src/views/strategy/components/editTime.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" append-to-body width="700px">
+  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" size="small" append-to-body width="700px">
     <el-row class="table-title" style="margin-top: -20px;margin-bottom: 20px">
       <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>控制器采集设置</div>
       </el-col>
diff --git a/src/views/strategy/deviceData.vue b/src/views/strategy/deviceData.vue
index 63c5a6c..df200aa 100644
--- a/src/views/strategy/deviceData.vue
+++ b/src/views/strategy/deviceData.vue
@@ -1,58 +1,38 @@
 <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-form-item class="selectForm-container-item">
-              <el-input v-model.trim="listQuery.deviceName" placeholder="设备名称" clearable/>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item">
-              <el-select v-model="listQuery.deviceType" placeholder="设备类型" clearable @change="fetchData">
-                <el-option v-for="item in groupList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-          </el-row>
-        </el-form>
-      </div>
-      <div class="clearfloat"/>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="序号" width="55" align="center" type="index" />
-        <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>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" align="center" width="100">
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.deviceName" size="small" placeholder="设备名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.deviceType" size="small" placeholder="设备类型" clearable @change="fetchData">
+          <el-option v-for="item in groupList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="130">
           <template slot-scope="scope">
             <el-button type="text" size="small" @click="showHistory(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>
     <device-history v-show="dialogFormVisible" ref="devicehistory"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -134,7 +114,21 @@
       listLoading: true, // 列表加载
       dialogFormVisible: false,
       alarmReasonList: [], // 报警原因列表
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
diff --git a/src/views/strategy/deviceHistory.vue b/src/views/strategy/deviceHistory.vue
index 89fb7c1..a2a2f00 100644
--- a/src/views/strategy/deviceHistory.vue
+++ b/src/views/strategy/deviceHistory.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <!--筛选条件-->
     <el-dialog :visible.sync="dialogFormVisible" :title="title" append-to-body width="1100px">
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
+      <el-form ref="selectForm" :inline="true" :model="listQuery" size="small" class="form-container">
         <el-form-item class="selectForm-container-item" prop="startTime">
           <el-date-picker
             v-model="timeRange"
@@ -42,7 +42,7 @@
           @current-change="handleCurrentChange"/>
       </div>
     </el-dialog>
-  </div>
+  </app-container>
 </template>
 
 <script>
diff --git a/src/views/strategy/listExeLog.vue b/src/views/strategy/listExeLog.vue
index 1a236dd..5faf067 100644
--- a/src/views/strategy/listExeLog.vue
+++ b/src/views/strategy/listExeLog.vue
@@ -1,50 +1,26 @@
 <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-form-item class="selectForm-container-item">
-              <el-input v-model.trim="listQuery.strategyName" placeholder="策略名称" clearable/>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item">
-              <el-input v-model.trim="listQuery.groupName" placeholder="分组名称" clearable/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-          </el-row>
-        </el-form>
-      </div>
-      <div class="clearfloat"/>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" :row-style="{height: '47px'}" class="table" border>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
-        <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>{{ scope.row[column.value] }}</span>
-          </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>
-  </div>
+  <app-container>
+    <search-area :need-clear="false" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.strategyName" size="small" placeholder="策略名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.groupName" size="small" placeholder="分组名称" clearable/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage"/>
+  </app-container>
 </template>
 
 <script>
@@ -107,7 +83,21 @@
       total: 0, // 数据总数
       list: [], // 报警列表
       listLoading: true, // 列表加载
-      dialogFormVisible: ''
+      dialogFormVisible: '',
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -136,18 +126,13 @@
     search() {
       this.fetchData(false)
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }
diff --git a/src/views/strategy/listOperationLog.vue b/src/views/strategy/listOperationLog.vue
index 0007432..bfc109f 100644
--- a/src/views/strategy/listOperationLog.vue
+++ b/src/views/strategy/listOperationLog.vue
@@ -1,56 +1,34 @@
 <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-form-item class="selectForm-container-item">
-              <el-input v-model.trim="listQuery.operationType" placeholder="操作名称" clearable/>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item">
-              <el-date-picker
-                v-model="timeRange"
-                type="datetimerange"
-                range-separator="至"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                start-placeholder="开始时间"
-                end-placeholder="结束时间"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-          </el-row>
-        </el-form>
-      </div>
-      <div class="clearfloat"/>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
-        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" >
-          <template slot-scope="scope">
-            <span>{{ scope.row[column.value] }}</span>
-          </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>
-  </div>
+  <app-container>
+    <search-area :need-clear="false" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.operationType" size="small" placeholder="操作名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          size="small"
+          start-placeholder="开始时间"
+          end-placeholder="结束时间"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage"/>
+  </app-container>
 </template>
 
 <script>
@@ -98,7 +76,21 @@
       total: 0, // 数据总数
       list: [], // 报警列表
       listLoading: true, // 列表加载
-      dialogFormVisible: ''
+      dialogFormVisible: '',
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   watch: {

diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 5077bef..3fd3f33 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -58,6 +58,8 @@
       <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns"/>
+        <!--复选框列-->
+        <el-table-column v-if="options && options.needMultSelect" align="center" type="selection" width="55"/>
         <!--序号列-->
         <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
         <!--内容列, 若columns存在且长度大于0-->
@@ -140,7 +142,8 @@
       type: Object,
       default: function() {
         return {
-          needIndex: true // 是否需要序号列
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
         }
       }
     }, // 配置项
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
index 1175911..b5e8442 100644
--- a/src/components/SearchArea/SearchArea.vue
+++ b/src/components/SearchArea/SearchArea.vue
@@ -16,6 +16,7 @@
       <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
       <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
       <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns-seperate"/>
     </div>
     <!-- 弹出框式高级检索 -->
     <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
index 84bdb9f..c192d79 100644
--- a/src/layout/components/AppHeader.vue
+++ b/src/layout/components/AppHeader.vue
@@ -1,6 +1,14 @@
 <template>
   <el-header class="app-header">
     <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown v-if="showChangeSys" class="systemSelect" size="medium" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
     <el-dropdown class="dropdown-container" trigger="click">
       <div class="dropdown-wrapper">
         <span style="line-height:50px;">欢迎您，{{ name }}</span>
@@ -33,6 +41,7 @@
   data() {
     return {
       title: this.baseConfig.title, // 标题
+      showChangeSys: !this.baseConfig.singleSys, // 是否显示切换系统菜单
       name: this.$store.getters.name, // 用户姓名
       showSetPwd: false // 是否显示修改密码按钮
     }
@@ -40,7 +49,9 @@
   computed: {
     ...mapGetters([
       'sidebar',
-      'avatar'
+      'avatar',
+      'currentSystem',
+      'systems'
     ])
   },
   methods: {
@@ -55,6 +66,38 @@
     resetPwd() {
       this.showSetPwd = true
       this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      const url = this.baseConfig.mainPage
+      window.location.href = url
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      const params1 = `?token=${this.$store.getters.token}`
+      const params = `?sys=${command.name}&url=${command.url}&code=${command.code}&token=${this.$store.getters.token}`
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params1
+        } else {
+          window.open(command.url + params1, '_blank')
+        }
+      } else {
+        // 取token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = this.baseConfig.mainPage + command.url + params
+        } else {
+          window.open(this.baseConfig.mainPage + command.url + params, '_blank')
+        }
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
     }
   }
 }
diff --git a/src/permission.js b/src/permission.js
index 69e8233..637373e 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -26,20 +26,13 @@
           // 设置当前子系统为基础资源子系统
           const currentSys = {
             code: 'baseResourse',
-            id: '1189107859077373285',
-            ismenu: '0',
-            levels: 1,
-            name: '智慧照明子系统',
-            num: 0,
-            parentId: '0',
-            resourceType: '02',
-            url: '/baseResourse'
+            name: '智慧照明子系统'
           }
           // 将当前系统信息保存在localStorage中
           store.commit('SET_SYSTEM', currentSys)
           // 远程访问获取权限列表（菜单&按钮）
           store.dispatch('GetMenus', currentSys).then(() => {
-            store.commit('SET_CHANGEFLAG', '0')
+            // store.commit('SET_CHANGEFLAG', '0')
             router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
             next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
           })
diff --git a/src/router/index.js b/src/router/index.js
index 32f93ef..b558038 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -49,21 +49,22 @@
   // 404错误页面
   { path: '/404', component: () => import('@/views/errorPage/404'), hidden: true },
   // 401 错误页面
-  { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
-  // 主页
-  {
-    path: '/',
-    component: Layout,
-    redirect: 'dashboard',
-    name: 'Dashboard',
-    // hidden: true,
-    children: [{
-      path: 'dashboard',
-      name: 'Dashboard',
-      component: () => import('@/views/dashboard/index'),
-      meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
-    }]
-  }
+  { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true }
+  // { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
+  // // 主页
+  // {
+  //   path: '/',
+  //   component: Layout,
+  //   redirect: 'dashboard',
+  //   name: 'Dashboard',
+  //   // hidden: true,
+  //   children: [{
+  //     path: 'dashboard',
+  //     name: 'Dashboard',
+  //     component: () => import('@/views/dashboard/index'),
+  //     meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
+  //   }]
+  // }
 ]
 // 实例化vue的时候直挂载constantRouter
 export default new Router({
diff --git a/src/views/alarmManage/alarmRule.vue b/src/views/alarmManage/alarmRule.vue
index 888a4d1..11469a2 100644
--- a/src/views/alarmManage/alarmRule.vue
+++ b/src/views/alarmManage/alarmRule.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
       <el-tab-pane label="路灯" name="lamp">
         <lamp-type-list ref="lamp"/>
@@ -8,7 +8,7 @@
         <lampbox-type-list ref="box"/>
       </el-tab-pane>
     </el-tabs>
-  </div>
+  </app-container>
 </template>
 
 <script>
diff --git a/src/views/alarmManage/components/alarmDetail.vue b/src/views/alarmManage/components/alarmDetail.vue
index 9c68377..d598779 100644
--- a/src/views/alarmManage/components/alarmDetail.vue
+++ b/src/views/alarmManage/components/alarmDetail.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :close-on-click-modal="false" :visible.sync="dialogFormVisible" title="报警详情" append-to-body>
-    <el-form ref="dataForm" :model="alarmForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :model="alarmForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="10">
           <el-form-item label="设备名称" prop="deviceName">
diff --git a/src/views/alarmManage/lampType/editLampType.vue b/src/views/alarmManage/lampType/editLampType.vue
index 8c3e37a..8e5fc23 100644
--- a/src/views/alarmManage/lampType/editLampType.vue
+++ b/src/views/alarmManage/lampType/editLampType.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="typeForm" label-well-code="right" label-width="200px">
+    <el-form ref="dataForm" :rules="rules" :model="typeForm" size="small" label-well-code="right" label-width="200px">
       <el-row :gutter="20">
         <el-col :span="20">
           <el-form-item label="路灯类型" prop="typeName">
diff --git a/src/views/alarmManage/lampType/lampTypeList.vue b/src/views/alarmManage/lampType/lampTypeList.vue
index f8547ed..f10c63b 100644
--- a/src/views/alarmManage/lampType/lampTypeList.vue
+++ b/src/views/alarmManage/lampType/lampTypeList.vue
@@ -8,12 +8,11 @@
           <el-row>
             <el-col :span="4">
               <el-form-item class="selectForm-container-item">
-                <el-input v-model.trim="listQuery.typeName" placeholder="类型名称" clearable />
+                <el-input v-model.trim="listQuery.typeName" size="small" placeholder="类型名称" clearable />
               </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-button class="filter-item" type="primary" icon="el-icon-search" size="small" style="margin-top: 2px" @click="search">搜索</el-button>
             </el-col>
           </el-row>
         </el-form>
@@ -28,7 +27,7 @@
           <el-button class="edit_btn" size="small" @click="add">新增</el-button>
         </el-col>
       </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
+      <el-table v-loading="listLoading" :data="list" class="table" size="small" border @selection-change="handleSelectionChange">
         <!--拥有删除权限则显示复选框-->
         <el-table-column v-if="hasPerm('/lampType/delete')" align="center" type="selection" width="55"/>
         <!--序号列-->
diff --git a/src/views/alarmManage/lampboxType/editLampboxType.vue b/src/views/alarmManage/lampboxType/editLampboxType.vue
index 1b94960..ae3a7c1 100644
--- a/src/views/alarmManage/lampboxType/editLampboxType.vue
+++ b/src/views/alarmManage/lampboxType/editLampboxType.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="typeForm" label-well-code="right" label-width="200px">
+    <el-form ref="dataForm" :rules="rules" :model="typeForm" size="small" label-well-code="right" label-width="200px">
       <el-row :gutter="20">
         <el-col :span="20">
           <el-form-item label="灯箱类型" prop="typeName">
diff --git a/src/views/alarmManage/lampboxType/lampboxTypeList.vue b/src/views/alarmManage/lampboxType/lampboxTypeList.vue
index 7b68f20..f33dcbf 100644
--- a/src/views/alarmManage/lampboxType/lampboxTypeList.vue
+++ b/src/views/alarmManage/lampboxType/lampboxTypeList.vue
@@ -8,7 +8,7 @@
           <el-row>
             <el-col :span="4">
               <el-form-item class="selectForm-container-item">
-                <el-input v-model.trim="listQuery.typeName" placeholder="类型名称" clearable />
+                <el-input v-model.trim="listQuery.typeName" size="small" placeholder="类型名称" clearable />
               </el-form-item>
             </el-col>
 
diff --git a/src/views/alarmManage/listAlarm.vue b/src/views/alarmManage/listAlarm.vue
index 7571a0e..fe3e359 100644
--- a/src/views/alarmManage/listAlarm.vue
+++ b/src/views/alarmManage/listAlarm.vue
@@ -1,73 +1,52 @@
 <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-form-item>
-              <el-input v-model.trim="listQuery.keyword" placeholder="设备编号/设备名称" clearable/>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmType" placeholder="报警类型" clearable>
-                <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmStatus" placeholder="报警状态" clearable>
-                <el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item" prop="startTime">
-              <el-date-picker
-                v-model="timeRange"
-                type="datetimerange"
-                range-separator="至"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                start-placeholder="报警开始时间"
-                end-placeholder="报警结束时间"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
-        <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>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="设备编号/设备名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmType" size="small" placeholder="报警类型" clearable>
+          <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmStatus" size="small" placeholder="报警状态" clearable>
+          <el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          size="small"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="报警开始时间"
+          end-placeholder="报警结束时间"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="130">
           <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
             <el-button type="text" size="small" @click="showDetail(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>
     <alarm-detail v-show="dialogFormVisible" ref="alarmdetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -123,7 +102,21 @@
       dialogFormVisible: false,
       alarmStatusList: [{ name: '正在报警', value: '1' }, { name: '已取消', value: '2' }], // 报警状态列表
       alarmTypeList: [],
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   watch: {
@@ -171,19 +164,15 @@
     },
     clearInput() {
       this.listQuery = {
-        name: '', // 姓名
-        sex: '', // 性别
-        nation: '', // 民族
-        collReason: '', // 采集原因
-        cardType: '', // 证件类型
-        idCardNo: '', // 证件号码
-        alarmReason: '', // 报警原因
-        startTime: '', // 开始时间
-        endTime: '', // 结束时间
+        keyword: '', // 设备编号/设备名称
+        alarmType: '', // 报警类型
+        alarmStatus: '', // 报警状态
+        startTime: '', // 报警开始时间
+        endTime: '', // 报警结束时间
         offset: 1,
         limit: 20,
-        sort: '',
-        order: ''
+        sort: 'alarmTime',
+        order: 'desc'
       }
       this.timeRange = []
       this.fetchData(false)
@@ -194,18 +183,13 @@
         this.alarmTypeList = response.data
       })
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }
diff --git a/src/views/alarmManage/listAlarmNow.vue b/src/views/alarmManage/listAlarmNow.vue
index c48b60a..d98b641 100644
--- a/src/views/alarmManage/listAlarmNow.vue
+++ b/src/views/alarmManage/listAlarmNow.vue
@@ -1,73 +1,47 @@
 <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-form-item>
-              <el-input v-model.trim="listQuery.keyword" placeholder="设备编号/设备名称" clearable/>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmType" placeholder="报警类型" clearable>
-                <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <!--<el-form-item>-->
-            <!--<el-select v-model="listQuery.alarmStatus" placeholder="报警状态" clearable>-->
-            <!--<el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>-->
-            <!--</el-select>-->
-            <!--</el-form-item>-->
-            <el-form-item class="selectForm-container-item" prop="startTime">
-              <el-date-picker
-                v-model="timeRange"
-                type="datetimerange"
-                range-separator="至"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                start-placeholder="报警开始时间"
-                end-placeholder="报警结束时间"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
-        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="设备编号/设备名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmType" size="small" placeholder="报警类型" clearable>
+          <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          size="small"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="报警开始时间"
+          end-placeholder="报警结束时间"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
-            <span>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" align="center" width="130">
-          <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
             <el-button type="text" size="small" @click="showDetail(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>
     <alarm-detail v-show="dialogFormVisible" ref="alarmdetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -123,7 +97,21 @@
       dialogFormVisible: false,
       alarmStatusList: [{ name: '正在报警', value: '1' }, { name: '已取消', value: '2' }], // 报警状态列表
       alarmTypeList: [],
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   watch: {
@@ -171,15 +159,11 @@
     },
     clearInput() {
       this.listQuery = {
-        name: '', // 姓名
-        sex: '', // 性别
-        nation: '', // 民族
-        collReason: '', // 采集原因
-        cardType: '', // 证件类型
-        idCardNo: '', // 证件号码
-        alarmReason: '', // 报警原因
-        startTime: '', // 开始时间
-        endTime: '', // 结束时间
+        keyword: '', // 设备编号/设备名称
+        alarmType: '', // 报警类型
+        alarmStatus: '1', // 报警状态
+        startTime: '', // 报警开始时间
+        endTime: '', // 报警结束时间
         offset: 1,
         limit: 20,
         sort: '',
@@ -194,18 +178,13 @@
         this.alarmTypeList = response.data
       })
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }
diff --git a/src/views/deviceManage/busCircuit.vue b/src/views/deviceManage/busCircuit.vue
index 2e1f872..7c9c804 100644
--- a/src/views/deviceManage/busCircuit.vue
+++ b/src/views/deviceManage/busCircuit.vue
@@ -1,77 +1,48 @@
 <!--回路列表-->
 <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-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.lampboxId" placeholder="所属灯箱" filterable clearable>
-                  <el-option v-for="item in boxList" :key="item.id" :label="item.lampboxName" :value="item.id"/>
-                </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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/circuit/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-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/circuit/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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.lampboxId" size="small" placeholder="所属灯箱" filterable clearable>
+          <el-option v-for="item in boxList" :key="item.id" :label="item.lampboxName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <!--<template slot="preColumns">-->
+      <!--<el-table-column align="center" type="selection" width="55"/>-->
+      <!--</template>-->
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <el-table-column label="操作" align="center" width="160">
-          <template slot-scope="scope">
-            <el-button v-if="hasPerm('/circuit/edit')" type="text" size="small" @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-circuit ref="editCircuit" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -128,7 +99,21 @@
       multipleSelection: [], // 多选选中项
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -253,17 +238,13 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/busController.vue b/src/views/deviceManage/busController.vue
index 49789c4..4646bf2 100644
--- a/src/views/deviceManage/busController.vue
+++ b/src/views/deviceManage/busController.vue
@@ -1,98 +1,67 @@
 <!--设备列表-->
 <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>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.controllerCode" size="small" placeholder="控制器编号" clearable />
+      </search-item>
+      <search-item/>
+      <search-item>
+        <el-select v-model="listQuery.controllerType" size="small" 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" size="small" placeholder="所属组织"/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" 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
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="selectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <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>
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <!--<template slot="preColumns">-->
+      <!--<el-table-column align="center" type="selection" width="55"/>-->
+      <!--</template>-->
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <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>
@@ -152,7 +121,21 @@
       statusList: [{ value: '1', name: '在线' }, { value: '0', name: '离线' }],
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -303,21 +286,17 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
-    handleSelectionChange(val) {
+    selectionChange(val) {
       this.multipleSelection = val
     }
   }
diff --git a/src/views/deviceManage/busGroup.vue b/src/views/deviceManage/busGroup.vue
index 9f85789..a35646b 100644
--- a/src/views/deviceManage/busGroup.vue
+++ b/src/views/deviceManage/busGroup.vue
@@ -1,80 +1,48 @@
 <!--灯箱列表-->
 <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.keyword" placeholder="分组名称" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.deviceType" placeholder="设备类型" clearable @change="fetchData">
-                  <el-option v-for="item in groupList" :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="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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/lampbox/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-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column 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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="分组名称" clearable />
+      </search-item>
+      <search-item/>
+      <search-item>
+        <el-select v-model="listQuery.deviceType" size="small" placeholder="设备类型" clearable @change="fetchData">
+          <el-option v-for="item in groupList" :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" size="small" placeholder="所属组织"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <el-table-column label="操作" align="center" width="160">
-          <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>-->
-            <el-button type="text" size="small" @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-Group ref="editGroup" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -132,7 +100,21 @@
       multipleSelection: [], // 多选选中项
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -249,17 +231,13 @@
         this.listLoading = false
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/busLamp.vue b/src/views/deviceManage/busLamp.vue
index 3450479..c480b30 100644
--- a/src/views/deviceManage/busLamp.vue
+++ b/src/views/deviceManage/busLamp.vue
@@ -1,104 +1,68 @@
 <!--路灯列表-->
 <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.keyword" placeholder="关键词" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.lampType" placeholder="路灯类型" clearable>
-                  <el-option v-for="item in typeList" :key="item.id" :label="item.typeName" :value="item.id"/>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </el-select>
-              </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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/lamp/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>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/lamp/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>
-        <!--操作列-->
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="关键词" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.lampType" size="small" placeholder="路灯类型" clearable>
+          <el-option v-for="item in typeList" :key="item.id" :label="item.typeName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" 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
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <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>
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
             <el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>
-            <el-button v-if="hasPerm('/lamp/edit')" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
-
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
             <el-button v-if="hasPerm('/lamp/remoteOn')" type="text" size="small">开灯</el-button>
             <el-button v-if="hasPerm('/lamp/remoteOff')" type="text" size="small">关灯</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-Lamp ref="editLamp" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -175,7 +139,21 @@
       statusList: [{ value: '1', name: '开灯' }, { value: '2', name: '关灯' }, { value: '3', name: '报警' }, { value: '4', name: '离线' }],
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -338,17 +316,13 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/busLampbox.vue b/src/views/deviceManage/busLampbox.vue
index 292c3a5..7763fac 100644
--- a/src/views/deviceManage/busLampbox.vue
+++ b/src/views/deviceManage/busLampbox.vue
@@ -1,46 +1,34 @@
 <!--灯箱列表-->
 <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.boxName" placeholder="灯箱名称" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/lampbox/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-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/lampbox/delete')" align="center" type="selection" width="55"/>
-        <!--序号列-->
-        <el-table-column :index="indexMethod" align="center" type="index" label="#" width="55"/>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.boxName" size="small" placeholder="灯箱名称" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
         <!--内容列-->
         <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">
@@ -55,30 +43,18 @@
             </div>
           </template>
         </el-table-column>
-        <!--操作列-->
+      </template>
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
             <el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>
-            <el-button v-if="hasPerm('/lampbox/edit')" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
+            <el-button type="text" size="small" @click.stop="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-Lampbox ref="editLampbox" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -144,7 +120,21 @@
       multipleSelection: [], // 多选选中项
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -277,6 +267,15 @@
       this.listQuery.limit = val
       this.fetchData()
     },
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
+    },
     // 改变当前页
     handleCurrentChange(val) {
       this.listQuery.offset = val
diff --git a/src/views/deviceManage/busLamppost.vue b/src/views/deviceManage/busLamppost.vue
index 92833a0..c193813 100644
--- a/src/views/deviceManage/busLamppost.vue
+++ b/src/views/deviceManage/busLamppost.vue
@@ -1,100 +1,65 @@
 <!--灯杆列表-->
 <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.keyword" placeholder="关键词" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.lamppostType" placeholder="路灯杆类型" clearable>
-                  <el-option v-for="item in typeList" :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">
-                <el-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </el-select>
-              </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('/lamppost/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>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/lamppost/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>
-        <!--操作列-->
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="关键词" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.lamppostType" size="small" placeholder="路灯杆类型" clearable>
+          <el-option v-for="item in typeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" 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
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <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>
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
-            <el-button v-if="hasPerm('/lamppost/edit')" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
+            <el-button type="text" size="small" @click.stop="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-Lamppost ref="editLamppost" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -161,7 +126,21 @@
       statusList: [{ value: '1', name: '开灯' }, { value: '2', name: '关灯' }, { value: '3', name: '报警' }, { value: '4', name: '离线' }],
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -320,17 +299,13 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/editCircuit.vue b/src/views/deviceManage/editCircuit.vue
index 9e9dd03..a362483 100644
--- a/src/views/deviceManage/editCircuit.vue
+++ b/src/views/deviceManage/editCircuit.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="cirForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="cirForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="回路编号" prop="circuitCode">
diff --git a/src/views/deviceManage/editController.vue b/src/views/deviceManage/editController.vue
index 7bc786f..444c835 100644
--- a/src/views/deviceManage/editController.vue
+++ b/src/views/deviceManage/editController.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="controllerForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="controllerForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="控制器编号" prop="controllerCode">
diff --git a/src/views/deviceManage/editGroup.vue b/src/views/deviceManage/editGroup.vue
index de9b88b..403d605 100644
--- a/src/views/deviceManage/editGroup.vue
+++ b/src/views/deviceManage/editGroup.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="groupForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="groupForm" size="small" label-well-code="right" label-width="110px">
       <el-row :span="24">
         <el-form-item label="分组名称" prop="groupName">
           <el-input v-model.trim="groupForm.groupName" :readonly="!isEditMode" clearable type="text" />
diff --git a/src/views/deviceManage/editLamp.vue b/src/views/deviceManage/editLamp.vue
index 3d45138..faf37d5 100644
--- a/src/views/deviceManage/editLamp.vue
+++ b/src/views/deviceManage/editLamp.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="lampForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="lampForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="路灯编号" prop="lampCode">
diff --git a/src/views/deviceManage/editLampbox.vue b/src/views/deviceManage/editLampbox.vue
index bd3a537..a4a8ea7 100644
--- a/src/views/deviceManage/editLampbox.vue
+++ b/src/views/deviceManage/editLampbox.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="boxForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="boxForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="灯箱编号" prop="lampboxCode">
diff --git a/src/views/deviceManage/editLamppost.vue b/src/views/deviceManage/editLamppost.vue
index 67a3a6f..a384319 100644
--- a/src/views/deviceManage/editLamppost.vue
+++ b/src/views/deviceManage/editLamppost.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="postForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="postForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="路灯杆编号" prop="lamppostCode">
diff --git a/src/views/deviceManage/listLog.vue b/src/views/deviceManage/listLog.vue
index 1d00e1c..5ab9a95 100644
--- a/src/views/deviceManage/listLog.vue
+++ b/src/views/deviceManage/listLog.vue
@@ -1,36 +1,32 @@
 <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-form-item>
-              <el-input v-model.trim="listQuery.devcode" placeholder="设备编号" clearable/>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.status" placeholder="下发状态" filterable clearable>
-                <el-option v-for="item in statusList" :key="item.name" :label="item.name" :value="item.name"/>
-              </el-select>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button class="edit_btn" size="small" @click="sendAll">全部设备下发</el-button>
-          <el-button class="edit_btn" size="small" @click="send">设备下发</el-button>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" :row-style="{height: '47px'}" class="table" border @selection-change="handleSelectionChange">
-        <el-table-column align="center" type="selection" width="55"/>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.devcode" size="small" placeholder="设备编号" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" placeholder="下发状态" filterable clearable>
+          <el-option v-for="item in statusList" :key="item.name" :label="item.name" :value="item.name"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button class="edit_btn" size="small" @click="sendAll">全部设备下发</el-button>
+        <el-button class="edit_btn" size="small" @click="send">设备下发</el-button>
+      </template>
+      <template slot="columns">
         <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">
             <div v-if="column.value === 'channel1'">
@@ -50,22 +46,9 @@
             </div>
           </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>
-  </div>
+      </template>
+    </normal-table>
+  </app-container>
 </template>
 
 <script>
@@ -151,7 +134,21 @@
       alarmStatusList: [{ name: '正在报警', value: '1' }, { name: '已取消', value: '2' }], // 报警状态列表
       statusList: [{ name: '未下发' }, { name: '已下发' }],
       alarmTypeList: [],
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -262,18 +259,13 @@
       this.timeRange = []
       this.fetchData(false)
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/example/tableExample.vue b/src/views/example/tableExample.vue
index 2d54fad..e8cd106 100644
--- a/src/views/example/tableExample.vue
+++ b/src/views/example/tableExample.vue
@@ -139,7 +139,7 @@
           text: '数据列表' // 标题名称
         },
         options: {
-          needIndex: false // 是否需要序号列
+          needIndex: true // 是否需要序号列
         },
         toolsOption: {
           selectColumns: false, // 是否需要筛选列
diff --git a/src/views/report/boxData.vue b/src/views/report/boxData.vue
index 2e04e4b..5faeff7 100644
--- a/src/views/report/boxData.vue
+++ b/src/views/report/boxData.vue
@@ -1,25 +1,50 @@
 <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-form-item class="selectForm-container-item">
-              <el-input v-model.trim="listQuery.keyword" placeholder="灯箱编号/灯箱名称" clearable/>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item">
-              <el-select v-model="listQuery.groupId" placeholder="设备组" clearable>
-                <el-option v-for="item in groupList" :key="item.id" :label="item.groupName" :value="item.id"/>
-              </el-select>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-      <div class="clearfloat"/>
-    </div>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="灯箱编号/灯箱名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.groupId" size="small" placeholder="设备组" clearable>
+          <el-option v-for="item in groupList" :key="item.id" :label="item.groupName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
+        <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">
+            <div v-if="column.value === 'A'">
+              <span v-html="allNum(scope.row.electricityA,scope.row.voltageA,scope.row.powerA)"/>
+            </div>
+            <div v-else-if="column.value === 'B'">
+              <span v-html="allNum(scope.row.electricityB,scope.row.voltageA,scope.row.powerB)"/>
+            </div>
+            <div v-else-if="column.value === 'C'">
+              <span v-html="allNum(scope.row.electricityC,scope.row.voltageA,scope.row.powerC)"/>
+            </div>
+            <div v-else>
+              <span>{{ scope.row[column.value] }}</span>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" width="130">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click="showHistory(scope.row)">查看历史</el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
     <!--查询结果Table显示-->
     <div>
       <el-row class="table-title">
@@ -43,29 +68,10 @@
             </div>
           </template>
         </el-table-column>
-        <el-table-column label="操作" align="center" width="130">
-          <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
-            <el-button type="text" size="small" @click="showHistory(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>
     <box-history v-show="dialogFormVisible" ref="boxhistory"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -121,7 +127,21 @@
       listLoading: true, // 列表加载
       dialogFormVisible: false,
       alarmReasonList: [], // 报警原因列表
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -177,18 +197,13 @@
         this.groupList = response.data
       })
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }
diff --git a/src/views/report/boxHistory.vue b/src/views/report/boxHistory.vue
index e63fb94..c5cf8ca 100644
--- a/src/views/report/boxHistory.vue
+++ b/src/views/report/boxHistory.vue
@@ -2,7 +2,7 @@
   <div class="app-container">
     <!--筛选条件-->
     <el-dialog :visible.sync="dialogFormVisible" :title="title" append-to-body>
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
+      <el-form ref="selectForm" :inline="true" :model="listQuery" size="small" class="form-container">
         <el-form-item class="selectForm-container-item" prop="startTime">
           <el-date-picker
             v-model="timeRange"
@@ -19,7 +19,7 @@
         <el-row class="table-title">
           <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
         </el-row>
-        <el-table v-loading="listLoading" :data="list" class="table" height="300px" border>
+        <el-table v-loading="listLoading" :data="list" class="table" size="small" height="300px" border>
           <el-table-column :index="indexMethod" label="序号" align="center" type="index" width="55" ></el-table-column>
           <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">
diff --git a/src/views/report/controllerData.vue b/src/views/report/controllerData.vue
index 5b7c360..ee81ba7 100644
--- a/src/views/report/controllerData.vue
+++ b/src/views/report/controllerData.vue
@@ -1,63 +1,40 @@
 <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-form-item class="selectForm-container-item">
-              <el-input v-model.trim="listQuery.keyword" placeholder="路灯编号/路灯名称" clearable/>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item">
-              <el-input v-model.trim="listQuery.controllerCode" placeholder="控制器编号" clearable/>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item">
-              <el-select v-model="listQuery.groupId" placeholder="设备组" clearable>
-                <el-option v-for="item in groupList" :key="item.id" :label="item.groupName" :value="item.id"/>
-              </el-select>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-      <div class="clearfloat"/>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="序号" width="55" align="center" type="index" />
-        <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>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="路灯编号/路灯名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.controllerCode" size="small" placeholder="控制器编号" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.groupId" size="small" placeholder="设备组" clearable>
+          <el-option v-for="item in groupList" :key="item.id" :label="item.groupName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="130">
           <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
             <el-button type="text" size="small" @click="showHistory(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>
     <history-data v-show="dialogFormVisible" ref="historydata"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -131,7 +108,21 @@
       listLoading: true, // 列表加载
       dialogFormVisible: false,
       alarmReasonList: [], // 报警原因列表
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -197,6 +188,15 @@
     handleCurrentChange(val) {
       this.listQuery.offset = val
       this.fetchData()
+    },
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
     }
   }
 }
diff --git a/src/views/report/historyData.vue b/src/views/report/historyData.vue
index 17e66de..9ba326e 100644
--- a/src/views/report/historyData.vue
+++ b/src/views/report/historyData.vue
@@ -2,7 +2,7 @@
   <div class="app-container">
     <!--筛选条件-->
     <el-dialog :visible.sync="dialogFormVisible" :title="title" append-to-body>
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
+      <el-form ref="selectForm" :inline="true" :model="listQuery" size="small" class="form-container">
         <el-form-item class="selectForm-container-item" prop="startTime">
           <el-date-picker
             v-model="timeRange"
@@ -12,14 +12,14 @@
             start-placeholder="查询开始时间"
             end-placeholder="查询结束时间"/>
         </el-form-item>
-        <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
+        <el-button class="filter-item" type="primary" icon="el-icon-search" size="small" @click="search">搜索</el-button>
       </el-form>
       <!--查询结果Table显示-->
       <div>
         <el-row class="table-title">
           <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
         </el-row>
-        <el-table v-loading="listLoading" :data="list" class="table" height="300px" border>
+        <el-table v-loading="listLoading" :data="list" class="table" size="small" height="300px" border>
           <el-table-column :index="indexMethod" label="序号" align="center" type="index" width="55" ></el-table-column>
           <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">
diff --git a/src/views/report/quantityData.vue b/src/views/report/quantityData.vue
index a4bd607..88a4d4d 100644
--- a/src/views/report/quantityData.vue
+++ b/src/views/report/quantityData.vue
@@ -1,46 +1,35 @@
 <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-form-item class="selectForm-container-item">
-              <el-date-picker
-                v-model="timeRange"
-                :picker-options="pickerOptions"
-                :clearable="false"
-                type="daterange"
-                value-format="yyyy-MM-dd"
-                align="right"
-                unlink-panels
-                range-separator="至"
-                start-placeholder="开始日期"
-                end-placeholder="结束日期"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-      <div class="clearfloat"/>
-    </div>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          :picker-options="pickerOptions"
+          :clearable="false"
+          type="daterange"
+          value-format="yyyy-MM-dd"
+          align="right"
+          unlink-panels
+          range-separator="至"
+          size="small"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"/>
+      </search-item>
+    </search-area>
     <div ref="chart" class="chart-body" style="padding-top: 20px;"/>
-    <!--查询结果Table显示-->
-    <div style="margin-bottom: 50px">
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" :row-style="{height: '47px'}" class="table" border>
-        <el-table-column :index="indexMethod" label="序号" width="55" align="center" type="index" />
-        <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>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-  </div>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage"/>
+  </app-container>
 </template>
 
 <script>
@@ -104,7 +93,21 @@
       list: [], // 报警列表
       chart: '',
       staticsList: [], // 报警列表
-      listLoading: true // 列表加载
+      listLoading: true, // 列表加载
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   watch: {
@@ -202,6 +205,15 @@
     handleCurrentChange(val) {
       this.listQuery.offset = val
       this.fetchData()
+    },
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
     }
   }
 }
diff --git a/src/views/report/statics.vue b/src/views/report/statics.vue
index 8a16fbd..005a41e 100644
--- a/src/views/report/statics.vue
+++ b/src/views/report/statics.vue
@@ -1,31 +1,24 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <!--筛选条件-->
-    <div class="search-div">
-      <div class="search-left">
-        <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
-          <el-row>
-            <el-form-item class="selectForm-container-item">
-              <el-date-picker
-                v-model="timeRange"
-                :picker-options="pickerOptions"
-                :clearable="false"
-                type="daterange"
-                value-format="yyyy-MM-dd"
-                align="right"
-                unlink-panels
-                range-separator="至"
-                start-placeholder="开始日期"
-                end-placeholder="结束日期"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-      <div class="clearfloat"/>
-    </div>
-    <el-tabs v-model="tab" type="border-card">
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          :picker-options="pickerOptions"
+          :clearable="false"
+          size="small"
+          type="daterange"
+          value-format="yyyy-MM-dd"
+          align="right"
+          unlink-panels
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"/>
+      </search-item>
+    </search-area>
+    <el-tabs v-model="tab" type="border-card" style="border-top: 12px solid #ebebeb !important;">
       <el-tab-pane label="街道统计" name="street">
         <el-row v-if="tab === 'street'" style="padding-top: 20px;">
           <el-col :span="12" >
@@ -68,7 +61,7 @@
         <div ref="chart" class="chart-body"/>
       </el-col>
     </el-row>
-  </div>
+  </app-container>
 </template>
 
 <script>
diff --git a/src/views/strategy/components/editStrategy.vue b/src/views/strategy/components/editStrategy.vue
index c396b81..ae64c77 100644
--- a/src/views/strategy/components/editStrategy.vue
+++ b/src/views/strategy/components/editStrategy.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="strategyInfo.strategyInfo" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="strategyInfo.strategyInfo" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="策略名称" prop="strategyName">
@@ -52,7 +52,7 @@
     </el-form>
     <el-tabs v-model="tab" type="border-card" >
       <el-tab-pane label="开灯命令" name="open">
-        <el-form ref="openForm" :rules="rules1" :model="openForm" label-well-code="right" label-width="110px">
+        <el-form ref="openForm" :rules="rules1" :model="openForm" size="small" label-well-code="right" label-width="110px">
           <el-row :gutter="20">
             <el-col :span="12">
               <el-form-item label="策略类型" prop="strategyType">
@@ -98,7 +98,7 @@
         </el-form>
       </el-tab-pane>
       <el-tab-pane label="关灯命令" name="close">
-        <el-form ref="closeForm" :rules="rules2" :model="closeForm" label-well-code="right" label-width="110px">
+        <el-form ref="closeForm" :rules="rules2" :model="closeForm" size="small" label-well-code="right" label-width="110px">
           <el-row :gutter="20">
             <el-col :span="12">
               <el-form-item label="策略类型" prop="strategyType">
diff --git a/src/views/strategy/components/editThreshold.vue b/src/views/strategy/components/editThreshold.vue
index e1037e4..499f827 100644
--- a/src/views/strategy/components/editThreshold.vue
+++ b/src/views/strategy/components/editThreshold.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" append-to-body width="700px">
+  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" size="small" append-to-body width="700px">
     <el-form ref="dataForm" :rules="rules" :model="thresholdForm" label-position="right" label-width="180px">
       <el-row :gutter="20">
         <el-col :span="16" offset="4">
diff --git a/src/views/strategy/components/editTime.vue b/src/views/strategy/components/editTime.vue
index a2d132f..54b2f2b 100644
--- a/src/views/strategy/components/editTime.vue
+++ b/src/views/strategy/components/editTime.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" append-to-body width="700px">
+  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" size="small" append-to-body width="700px">
     <el-row class="table-title" style="margin-top: -20px;margin-bottom: 20px">
       <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>控制器采集设置</div>
       </el-col>
diff --git a/src/views/strategy/deviceData.vue b/src/views/strategy/deviceData.vue
index 63c5a6c..df200aa 100644
--- a/src/views/strategy/deviceData.vue
+++ b/src/views/strategy/deviceData.vue
@@ -1,58 +1,38 @@
 <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-form-item class="selectForm-container-item">
-              <el-input v-model.trim="listQuery.deviceName" placeholder="设备名称" clearable/>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item">
-              <el-select v-model="listQuery.deviceType" placeholder="设备类型" clearable @change="fetchData">
-                <el-option v-for="item in groupList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-          </el-row>
-        </el-form>
-      </div>
-      <div class="clearfloat"/>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="序号" width="55" align="center" type="index" />
-        <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>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" align="center" width="100">
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.deviceName" size="small" placeholder="设备名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.deviceType" size="small" placeholder="设备类型" clearable @change="fetchData">
+          <el-option v-for="item in groupList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="130">
           <template slot-scope="scope">
             <el-button type="text" size="small" @click="showHistory(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>
     <device-history v-show="dialogFormVisible" ref="devicehistory"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -134,7 +114,21 @@
       listLoading: true, // 列表加载
       dialogFormVisible: false,
       alarmReasonList: [], // 报警原因列表
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
diff --git a/src/views/strategy/deviceHistory.vue b/src/views/strategy/deviceHistory.vue
index 89fb7c1..a2a2f00 100644
--- a/src/views/strategy/deviceHistory.vue
+++ b/src/views/strategy/deviceHistory.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <!--筛选条件-->
     <el-dialog :visible.sync="dialogFormVisible" :title="title" append-to-body width="1100px">
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
+      <el-form ref="selectForm" :inline="true" :model="listQuery" size="small" class="form-container">
         <el-form-item class="selectForm-container-item" prop="startTime">
           <el-date-picker
             v-model="timeRange"
@@ -42,7 +42,7 @@
           @current-change="handleCurrentChange"/>
       </div>
     </el-dialog>
-  </div>
+  </app-container>
 </template>
 
 <script>
diff --git a/src/views/strategy/listExeLog.vue b/src/views/strategy/listExeLog.vue
index 1a236dd..5faf067 100644
--- a/src/views/strategy/listExeLog.vue
+++ b/src/views/strategy/listExeLog.vue
@@ -1,50 +1,26 @@
 <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-form-item class="selectForm-container-item">
-              <el-input v-model.trim="listQuery.strategyName" placeholder="策略名称" clearable/>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item">
-              <el-input v-model.trim="listQuery.groupName" placeholder="分组名称" clearable/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-          </el-row>
-        </el-form>
-      </div>
-      <div class="clearfloat"/>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" :row-style="{height: '47px'}" class="table" border>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
-        <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>{{ scope.row[column.value] }}</span>
-          </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>
-  </div>
+  <app-container>
+    <search-area :need-clear="false" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.strategyName" size="small" placeholder="策略名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.groupName" size="small" placeholder="分组名称" clearable/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage"/>
+  </app-container>
 </template>
 
 <script>
@@ -107,7 +83,21 @@
       total: 0, // 数据总数
       list: [], // 报警列表
       listLoading: true, // 列表加载
-      dialogFormVisible: ''
+      dialogFormVisible: '',
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -136,18 +126,13 @@
     search() {
       this.fetchData(false)
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }
diff --git a/src/views/strategy/listOperationLog.vue b/src/views/strategy/listOperationLog.vue
index 0007432..bfc109f 100644
--- a/src/views/strategy/listOperationLog.vue
+++ b/src/views/strategy/listOperationLog.vue
@@ -1,56 +1,34 @@
 <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-form-item class="selectForm-container-item">
-              <el-input v-model.trim="listQuery.operationType" placeholder="操作名称" clearable/>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item">
-              <el-date-picker
-                v-model="timeRange"
-                type="datetimerange"
-                range-separator="至"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                start-placeholder="开始时间"
-                end-placeholder="结束时间"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-          </el-row>
-        </el-form>
-      </div>
-      <div class="clearfloat"/>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
-        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" >
-          <template slot-scope="scope">
-            <span>{{ scope.row[column.value] }}</span>
-          </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>
-  </div>
+  <app-container>
+    <search-area :need-clear="false" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.operationType" size="small" placeholder="操作名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          size="small"
+          start-placeholder="开始时间"
+          end-placeholder="结束时间"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage"/>
+  </app-container>
 </template>
 
 <script>
@@ -98,7 +76,21 @@
       total: 0, // 数据总数
       list: [], // 报警列表
       listLoading: true, // 列表加载
-      dialogFormVisible: ''
+      dialogFormVisible: '',
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   watch: {
diff --git a/src/views/strategy/listStrategy.vue b/src/views/strategy/listStrategy.vue
index a484c43..39c1a4c 100644
--- a/src/views/strategy/listStrategy.vue
+++ b/src/views/strategy/listStrategy.vue
@@ -1,65 +1,45 @@
 <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-form-item class="selectForm-container-item">
-              <el-input v-model.trim="listQuery.strategyName" placeholder="策略名称" clearable/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="primary" icon="el-icon-edit" @click="editthreshold">阈值设置</el-button>
-            <el-button class="filter-item" type="primary" icon="el-icon-edit" @click="edittime">采集设置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-      <div class="clearfloat"/>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div>
-        </el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button class="edit_btn" size="small" @click="del">删除</el-button>
-          <el-button class="edit_btn" size="small" @click="check">下发</el-button>
-          <el-button class="edit_btn" size="small" @click="add">新增</el-button>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <el-table-column align="center" type="selection" width="55"/>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
-        <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>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" align="center" width="120">
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.strategyName" size="small" placeholder="策略名称" clearable/>
+      </search-item>
+      <template slot="btns-seperate">
+        <el-button class="filter-item" type="primary" icon="el-icon-edit" size="small" @click="editthreshold">阈值设置</el-button>
+        <el-button class="filter-item" type="primary" icon="el-icon-edit" size="small" @click="edittime">采集设置</el-button>
+      </template>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button class="edit_btn" size="small" @click="del">删除</el-button>
+        <el-button class="edit_btn" size="small" @click="check">下发</el-button>
+        <el-button class="edit_btn" size="small" @click="add">新增</el-button>
+      </template>
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="130">
           <template slot-scope="scope">
             <el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
             <el-button type="text" size="small" @click="detail(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-strategy v-show="dialogFormVisible" ref="editstrategy" @watchChild="fetchData"/>
     <edit-threshold v-show="dialogFormVisible1" ref="editthreshold"/>
     <edit-time v-show="dialogFormVisible2" ref="edittime"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -123,7 +103,21 @@
       multipleSelection: [], // 多选选中项
       dialogFormVisible: false,
       dialogFormVisible1: false,
-      dialogFormVisible2: false
+      dialogFormVisible2: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -236,18 +230,13 @@
       this.dialogFormVisible2 = true
       this.$refs.edittime.initDialog('update', this.dialogFormVisible2, null)
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }

diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index 5077bef..3fd3f33 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -58,6 +58,8 @@
       <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange">
         <!--需要加在表最前方的插槽-->
         <slot name="preColumns"/>
+        <!--复选框列-->
+        <el-table-column v-if="options && options.needMultSelect" align="center" type="selection" width="55"/>
         <!--序号列-->
         <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
         <!--内容列, 若columns存在且长度大于0-->
@@ -140,7 +142,8 @@
       type: Object,
       default: function() {
         return {
-          needIndex: true // 是否需要序号列
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
         }
       }
     }, // 配置项
diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
index 1175911..b5e8442 100644
--- a/src/components/SearchArea/SearchArea.vue
+++ b/src/components/SearchArea/SearchArea.vue
@@ -16,6 +16,7 @@
       <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
       <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
       <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+      <slot name="btns-seperate"/>
     </div>
     <!-- 弹出框式高级检索 -->
     <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
index 84bdb9f..c192d79 100644
--- a/src/layout/components/AppHeader.vue
+++ b/src/layout/components/AppHeader.vue
@@ -1,6 +1,14 @@
 <template>
   <el-header class="app-header">
     <h3>{{ title }}</h3>
+    <!--子系统选项-->
+    <el-dropdown v-if="showChangeSys" class="systemSelect" size="medium" @command="handleCommand">
+      <span class="el-dropdown-link">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="system in systems" :command="system" :key="system.id">{{ system.name }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
     <el-dropdown class="dropdown-container" trigger="click">
       <div class="dropdown-wrapper">
         <span style="line-height:50px;">欢迎您，{{ name }}</span>
@@ -33,6 +41,7 @@
   data() {
     return {
       title: this.baseConfig.title, // 标题
+      showChangeSys: !this.baseConfig.singleSys, // 是否显示切换系统菜单
       name: this.$store.getters.name, // 用户姓名
       showSetPwd: false // 是否显示修改密码按钮
     }
@@ -40,7 +49,9 @@
   computed: {
     ...mapGetters([
       'sidebar',
-      'avatar'
+      'avatar',
+      'currentSystem',
+      'systems'
     ])
   },
   methods: {
@@ -55,6 +66,38 @@
     resetPwd() {
       this.showSetPwd = true
       this.$refs.retPwd.initDialog(true)
+    },
+    backToIndex() {
+      const url = this.baseConfig.mainPage
+      window.location.href = url
+    },
+    // 切换子系统
+    handleCommand(command) {
+      console.log('切换子系统:' + command.name)
+      const params1 = `?token=${this.$store.getters.token}`
+      const params = `?sys=${command.name}&url=${command.url}&code=${command.code}&token=${this.$store.getters.token}`
+      // 判断系统是不是http的，如果是则打开新窗口
+      if (command.url.indexOf('http') > -1) {
+        // 取token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = command.url + params1
+        } else {
+          window.open(command.url + params1, '_blank')
+        }
+      } else {
+        // 取token
+        if (this.baseConfig.sameWindow) {
+          window.location.href = this.baseConfig.mainPage + command.url + params
+        } else {
+          window.open(this.baseConfig.mainPage + command.url + params, '_blank')
+        }
+      }
+    },
+    // 获取子系统
+    getSystems() {
+      this.$store.dispatch('GetSystems').then(() => {
+        console.log('获取子系统列表成功-appHeader')
+      })
     }
   }
 }
diff --git a/src/permission.js b/src/permission.js
index 69e8233..637373e 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -26,20 +26,13 @@
           // 设置当前子系统为基础资源子系统
           const currentSys = {
             code: 'baseResourse',
-            id: '1189107859077373285',
-            ismenu: '0',
-            levels: 1,
-            name: '智慧照明子系统',
-            num: 0,
-            parentId: '0',
-            resourceType: '02',
-            url: '/baseResourse'
+            name: '智慧照明子系统'
           }
           // 将当前系统信息保存在localStorage中
           store.commit('SET_SYSTEM', currentSys)
           // 远程访问获取权限列表（菜单&按钮）
           store.dispatch('GetMenus', currentSys).then(() => {
-            store.commit('SET_CHANGEFLAG', '0')
+            // store.commit('SET_CHANGEFLAG', '0')
             router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
             next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
           })
diff --git a/src/router/index.js b/src/router/index.js
index 32f93ef..b558038 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -49,21 +49,22 @@
   // 404错误页面
   { path: '/404', component: () => import('@/views/errorPage/404'), hidden: true },
   // 401 错误页面
-  { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
-  // 主页
-  {
-    path: '/',
-    component: Layout,
-    redirect: 'dashboard',
-    name: 'Dashboard',
-    // hidden: true,
-    children: [{
-      path: 'dashboard',
-      name: 'Dashboard',
-      component: () => import('@/views/dashboard/index'),
-      meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
-    }]
-  }
+  { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true }
+  // { path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
+  // // 主页
+  // {
+  //   path: '/',
+  //   component: Layout,
+  //   redirect: 'dashboard',
+  //   name: 'Dashboard',
+  //   // hidden: true,
+  //   children: [{
+  //     path: 'dashboard',
+  //     name: 'Dashboard',
+  //     component: () => import('@/views/dashboard/index'),
+  //     meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
+  //   }]
+  // }
 ]
 // 实例化vue的时候直挂载constantRouter
 export default new Router({
diff --git a/src/views/alarmManage/alarmRule.vue b/src/views/alarmManage/alarmRule.vue
index 888a4d1..11469a2 100644
--- a/src/views/alarmManage/alarmRule.vue
+++ b/src/views/alarmManage/alarmRule.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
       <el-tab-pane label="路灯" name="lamp">
         <lamp-type-list ref="lamp"/>
@@ -8,7 +8,7 @@
         <lampbox-type-list ref="box"/>
       </el-tab-pane>
     </el-tabs>
-  </div>
+  </app-container>
 </template>
 
 <script>
diff --git a/src/views/alarmManage/components/alarmDetail.vue b/src/views/alarmManage/components/alarmDetail.vue
index 9c68377..d598779 100644
--- a/src/views/alarmManage/components/alarmDetail.vue
+++ b/src/views/alarmManage/components/alarmDetail.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :close-on-click-modal="false" :visible.sync="dialogFormVisible" title="报警详情" append-to-body>
-    <el-form ref="dataForm" :model="alarmForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :model="alarmForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="10">
           <el-form-item label="设备名称" prop="deviceName">
diff --git a/src/views/alarmManage/lampType/editLampType.vue b/src/views/alarmManage/lampType/editLampType.vue
index 8c3e37a..8e5fc23 100644
--- a/src/views/alarmManage/lampType/editLampType.vue
+++ b/src/views/alarmManage/lampType/editLampType.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="typeForm" label-well-code="right" label-width="200px">
+    <el-form ref="dataForm" :rules="rules" :model="typeForm" size="small" label-well-code="right" label-width="200px">
       <el-row :gutter="20">
         <el-col :span="20">
           <el-form-item label="路灯类型" prop="typeName">
diff --git a/src/views/alarmManage/lampType/lampTypeList.vue b/src/views/alarmManage/lampType/lampTypeList.vue
index f8547ed..f10c63b 100644
--- a/src/views/alarmManage/lampType/lampTypeList.vue
+++ b/src/views/alarmManage/lampType/lampTypeList.vue
@@ -8,12 +8,11 @@
           <el-row>
             <el-col :span="4">
               <el-form-item class="selectForm-container-item">
-                <el-input v-model.trim="listQuery.typeName" placeholder="类型名称" clearable />
+                <el-input v-model.trim="listQuery.typeName" size="small" placeholder="类型名称" clearable />
               </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-button class="filter-item" type="primary" icon="el-icon-search" size="small" style="margin-top: 2px" @click="search">搜索</el-button>
             </el-col>
           </el-row>
         </el-form>
@@ -28,7 +27,7 @@
           <el-button class="edit_btn" size="small" @click="add">新增</el-button>
         </el-col>
       </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
+      <el-table v-loading="listLoading" :data="list" class="table" size="small" border @selection-change="handleSelectionChange">
         <!--拥有删除权限则显示复选框-->
         <el-table-column v-if="hasPerm('/lampType/delete')" align="center" type="selection" width="55"/>
         <!--序号列-->
diff --git a/src/views/alarmManage/lampboxType/editLampboxType.vue b/src/views/alarmManage/lampboxType/editLampboxType.vue
index 1b94960..ae3a7c1 100644
--- a/src/views/alarmManage/lampboxType/editLampboxType.vue
+++ b/src/views/alarmManage/lampboxType/editLampboxType.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="typeForm" label-well-code="right" label-width="200px">
+    <el-form ref="dataForm" :rules="rules" :model="typeForm" size="small" label-well-code="right" label-width="200px">
       <el-row :gutter="20">
         <el-col :span="20">
           <el-form-item label="灯箱类型" prop="typeName">
diff --git a/src/views/alarmManage/lampboxType/lampboxTypeList.vue b/src/views/alarmManage/lampboxType/lampboxTypeList.vue
index 7b68f20..f33dcbf 100644
--- a/src/views/alarmManage/lampboxType/lampboxTypeList.vue
+++ b/src/views/alarmManage/lampboxType/lampboxTypeList.vue
@@ -8,7 +8,7 @@
           <el-row>
             <el-col :span="4">
               <el-form-item class="selectForm-container-item">
-                <el-input v-model.trim="listQuery.typeName" placeholder="类型名称" clearable />
+                <el-input v-model.trim="listQuery.typeName" size="small" placeholder="类型名称" clearable />
               </el-form-item>
             </el-col>
 
diff --git a/src/views/alarmManage/listAlarm.vue b/src/views/alarmManage/listAlarm.vue
index 7571a0e..fe3e359 100644
--- a/src/views/alarmManage/listAlarm.vue
+++ b/src/views/alarmManage/listAlarm.vue
@@ -1,73 +1,52 @@
 <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-form-item>
-              <el-input v-model.trim="listQuery.keyword" placeholder="设备编号/设备名称" clearable/>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmType" placeholder="报警类型" clearable>
-                <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmStatus" placeholder="报警状态" clearable>
-                <el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item" prop="startTime">
-              <el-date-picker
-                v-model="timeRange"
-                type="datetimerange"
-                range-separator="至"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                start-placeholder="报警开始时间"
-                end-placeholder="报警结束时间"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
-        <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>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="设备编号/设备名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmType" size="small" placeholder="报警类型" clearable>
+          <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmStatus" size="small" placeholder="报警状态" clearable>
+          <el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          size="small"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="报警开始时间"
+          end-placeholder="报警结束时间"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="130">
           <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
             <el-button type="text" size="small" @click="showDetail(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>
     <alarm-detail v-show="dialogFormVisible" ref="alarmdetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -123,7 +102,21 @@
       dialogFormVisible: false,
       alarmStatusList: [{ name: '正在报警', value: '1' }, { name: '已取消', value: '2' }], // 报警状态列表
       alarmTypeList: [],
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   watch: {
@@ -171,19 +164,15 @@
     },
     clearInput() {
       this.listQuery = {
-        name: '', // 姓名
-        sex: '', // 性别
-        nation: '', // 民族
-        collReason: '', // 采集原因
-        cardType: '', // 证件类型
-        idCardNo: '', // 证件号码
-        alarmReason: '', // 报警原因
-        startTime: '', // 开始时间
-        endTime: '', // 结束时间
+        keyword: '', // 设备编号/设备名称
+        alarmType: '', // 报警类型
+        alarmStatus: '', // 报警状态
+        startTime: '', // 报警开始时间
+        endTime: '', // 报警结束时间
         offset: 1,
         limit: 20,
-        sort: '',
-        order: ''
+        sort: 'alarmTime',
+        order: 'desc'
       }
       this.timeRange = []
       this.fetchData(false)
@@ -194,18 +183,13 @@
         this.alarmTypeList = response.data
       })
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }
diff --git a/src/views/alarmManage/listAlarmNow.vue b/src/views/alarmManage/listAlarmNow.vue
index c48b60a..d98b641 100644
--- a/src/views/alarmManage/listAlarmNow.vue
+++ b/src/views/alarmManage/listAlarmNow.vue
@@ -1,73 +1,47 @@
 <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-form-item>
-              <el-input v-model.trim="listQuery.keyword" placeholder="设备编号/设备名称" clearable/>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.alarmType" placeholder="报警类型" clearable>
-                <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <!--<el-form-item>-->
-            <!--<el-select v-model="listQuery.alarmStatus" placeholder="报警状态" clearable>-->
-            <!--<el-option v-for="item in alarmStatusList" :key="item.value" :label="item.name" :value="item.value"/>-->
-            <!--</el-select>-->
-            <!--</el-form-item>-->
-            <el-form-item class="selectForm-container-item" prop="startTime">
-              <el-date-picker
-                v-model="timeRange"
-                type="datetimerange"
-                range-separator="至"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                start-placeholder="报警开始时间"
-                end-placeholder="报警结束时间"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
-        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="设备编号/设备名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.alarmType" size="small" placeholder="报警类型" clearable>
+          <el-option v-for="item in alarmTypeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          size="small"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="报警开始时间"
+          end-placeholder="报警结束时间"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
-            <span>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" align="center" width="130">
-          <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
             <el-button type="text" size="small" @click="showDetail(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>
     <alarm-detail v-show="dialogFormVisible" ref="alarmdetail"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -123,7 +97,21 @@
       dialogFormVisible: false,
       alarmStatusList: [{ name: '正在报警', value: '1' }, { name: '已取消', value: '2' }], // 报警状态列表
       alarmTypeList: [],
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   watch: {
@@ -171,15 +159,11 @@
     },
     clearInput() {
       this.listQuery = {
-        name: '', // 姓名
-        sex: '', // 性别
-        nation: '', // 民族
-        collReason: '', // 采集原因
-        cardType: '', // 证件类型
-        idCardNo: '', // 证件号码
-        alarmReason: '', // 报警原因
-        startTime: '', // 开始时间
-        endTime: '', // 结束时间
+        keyword: '', // 设备编号/设备名称
+        alarmType: '', // 报警类型
+        alarmStatus: '1', // 报警状态
+        startTime: '', // 报警开始时间
+        endTime: '', // 报警结束时间
         offset: 1,
         limit: 20,
         sort: '',
@@ -194,18 +178,13 @@
         this.alarmTypeList = response.data
       })
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }
diff --git a/src/views/deviceManage/busCircuit.vue b/src/views/deviceManage/busCircuit.vue
index 2e1f872..7c9c804 100644
--- a/src/views/deviceManage/busCircuit.vue
+++ b/src/views/deviceManage/busCircuit.vue
@@ -1,77 +1,48 @@
 <!--回路列表-->
 <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-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.lampboxId" placeholder="所属灯箱" filterable clearable>
-                  <el-option v-for="item in boxList" :key="item.id" :label="item.lampboxName" :value="item.id"/>
-                </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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/circuit/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-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/circuit/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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.lampboxId" size="small" placeholder="所属灯箱" filterable clearable>
+          <el-option v-for="item in boxList" :key="item.id" :label="item.lampboxName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <!--<template slot="preColumns">-->
+      <!--<el-table-column align="center" type="selection" width="55"/>-->
+      <!--</template>-->
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <el-table-column label="操作" align="center" width="160">
-          <template slot-scope="scope">
-            <el-button v-if="hasPerm('/circuit/edit')" type="text" size="small" @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-circuit ref="editCircuit" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -128,7 +99,21 @@
       multipleSelection: [], // 多选选中项
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -253,17 +238,13 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/busController.vue b/src/views/deviceManage/busController.vue
index 49789c4..4646bf2 100644
--- a/src/views/deviceManage/busController.vue
+++ b/src/views/deviceManage/busController.vue
@@ -1,98 +1,67 @@
 <!--设备列表-->
 <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>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.controllerCode" size="small" placeholder="控制器编号" clearable />
+      </search-item>
+      <search-item/>
+      <search-item>
+        <el-select v-model="listQuery.controllerType" size="small" 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" size="small" placeholder="所属组织"/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" 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
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="selectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <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>
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <!--<template slot="preColumns">-->
+      <!--<el-table-column align="center" type="selection" width="55"/>-->
+      <!--</template>-->
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <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>
@@ -152,7 +121,21 @@
       statusList: [{ value: '1', name: '在线' }, { value: '0', name: '离线' }],
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -303,21 +286,17 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
-    handleSelectionChange(val) {
+    selectionChange(val) {
       this.multipleSelection = val
     }
   }
diff --git a/src/views/deviceManage/busGroup.vue b/src/views/deviceManage/busGroup.vue
index 9f85789..a35646b 100644
--- a/src/views/deviceManage/busGroup.vue
+++ b/src/views/deviceManage/busGroup.vue
@@ -1,80 +1,48 @@
 <!--灯箱列表-->
 <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.keyword" placeholder="分组名称" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.deviceType" placeholder="设备类型" clearable @change="fetchData">
-                  <el-option v-for="item in groupList" :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="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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/lampbox/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-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column 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>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="分组名称" clearable />
+      </search-item>
+      <search-item/>
+      <search-item>
+        <el-select v-model="listQuery.deviceType" size="small" placeholder="设备类型" clearable @change="fetchData">
+          <el-option v-for="item in groupList" :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" size="small" placeholder="所属组织"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="120">
           <template slot-scope="scope">
-            <span :class="column.class">{{ scope.row[column.value] }}</span>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
           </template>
         </el-table-column>
-        <!--操作列-->
-        <el-table-column label="操作" align="center" width="160">
-          <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>-->
-            <el-button type="text" size="small" @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-Group ref="editGroup" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -132,7 +100,21 @@
       multipleSelection: [], // 多选选中项
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -249,17 +231,13 @@
         this.listLoading = false
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/busLamp.vue b/src/views/deviceManage/busLamp.vue
index 3450479..c480b30 100644
--- a/src/views/deviceManage/busLamp.vue
+++ b/src/views/deviceManage/busLamp.vue
@@ -1,104 +1,68 @@
 <!--路灯列表-->
 <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.keyword" placeholder="关键词" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.lampType" placeholder="路灯类型" clearable>
-                  <el-option v-for="item in typeList" :key="item.id" :label="item.typeName" :value="item.id"/>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </el-select>
-              </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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/lamp/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>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/lamp/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>
-        <!--操作列-->
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="关键词" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.lampType" size="small" placeholder="路灯类型" clearable>
+          <el-option v-for="item in typeList" :key="item.id" :label="item.typeName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" 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
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <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>
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
             <el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>
-            <el-button v-if="hasPerm('/lamp/edit')" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
-
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
             <el-button v-if="hasPerm('/lamp/remoteOn')" type="text" size="small">开灯</el-button>
             <el-button v-if="hasPerm('/lamp/remoteOff')" type="text" size="small">关灯</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-Lamp ref="editLamp" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -175,7 +139,21 @@
       statusList: [{ value: '1', name: '开灯' }, { value: '2', name: '关灯' }, { value: '3', name: '报警' }, { value: '4', name: '离线' }],
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -338,17 +316,13 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/busLampbox.vue b/src/views/deviceManage/busLampbox.vue
index 292c3a5..7763fac 100644
--- a/src/views/deviceManage/busLampbox.vue
+++ b/src/views/deviceManage/busLampbox.vue
@@ -1,46 +1,34 @@
 <!--灯箱列表-->
 <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.boxName" placeholder="灯箱名称" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </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="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/lampbox/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-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/lampbox/delete')" align="center" type="selection" width="55"/>
-        <!--序号列-->
-        <el-table-column :index="indexMethod" align="center" type="index" label="#" width="55"/>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.boxName" size="small" placeholder="灯箱名称" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
         <!--内容列-->
         <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">
@@ -55,30 +43,18 @@
             </div>
           </template>
         </el-table-column>
-        <!--操作列-->
+      </template>
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
             <el-button type="text" size="small" @click="detail(scope.row)">详情</el-button>
-            <el-button v-if="hasPerm('/lampbox/edit')" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
+            <el-button type="text" size="small" @click.stop="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-Lampbox ref="editLampbox" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -144,7 +120,21 @@
       multipleSelection: [], // 多选选中项
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -277,6 +267,15 @@
       this.listQuery.limit = val
       this.fetchData()
     },
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
+    },
     // 改变当前页
     handleCurrentChange(val) {
       this.listQuery.offset = val
diff --git a/src/views/deviceManage/busLamppost.vue b/src/views/deviceManage/busLamppost.vue
index 92833a0..c193813 100644
--- a/src/views/deviceManage/busLamppost.vue
+++ b/src/views/deviceManage/busLamppost.vue
@@ -1,100 +1,65 @@
 <!--灯杆列表-->
 <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.keyword" placeholder="关键词" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-form-item class="selectForm-container-item">
-                <el-select v-model="listQuery.lamppostType" placeholder="路灯杆类型" clearable>
-                  <el-option v-for="item in typeList" :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">
-                <el-select v-model="listQuery.streetId" placeholder="所在道路" filterable clearable>
-                  <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
-                </el-select>
-              </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('/lamppost/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>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--拥有删除权限则显示复选框-->
-        <el-table-column v-if="hasPerm('/lamppost/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>
-        <!--操作列-->
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="关键词" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.lamppostType" size="small" placeholder="路灯杆类型" clearable>
+          <el-option v-for="item in typeList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.streetId" size="small" placeholder="所在道路" filterable clearable>
+          <el-option v-for="item in streetList" :key="item.id" :label="item.streetName" :value="item.id"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" 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
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <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>
+        <el-button size="small" class="edit_btn" @click="batchExport">导出</el-button>
+        <el-button size="small" class="edit_btn" @click="add">新增</el-button>
+        <el-button size="small" class="edit_btn" @click="del">删除</el-button>
+      </template>
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
-            <el-button v-if="hasPerm('/lamppost/edit')" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
+            <el-button type="text" size="small" @click.stop="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-Lamppost ref="editLamppost" @watchChild="fetchData"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -161,7 +126,21 @@
       statusList: [{ value: '1', name: '开灯' }, { value: '2', name: '关灯' }, { value: '3', name: '报警' }, { value: '4', name: '离线' }],
       listLoading: false, // 加载动画
       fullscreenLoading: false, // 全屏加载动画
-      dialogFormVisible: false
+      dialogFormVisible: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -320,17 +299,13 @@
         }
       })
     },
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/deviceManage/editCircuit.vue b/src/views/deviceManage/editCircuit.vue
index 9e9dd03..a362483 100644
--- a/src/views/deviceManage/editCircuit.vue
+++ b/src/views/deviceManage/editCircuit.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="cirForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="cirForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="回路编号" prop="circuitCode">
diff --git a/src/views/deviceManage/editController.vue b/src/views/deviceManage/editController.vue
index 7bc786f..444c835 100644
--- a/src/views/deviceManage/editController.vue
+++ b/src/views/deviceManage/editController.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="controllerForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="controllerForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="控制器编号" prop="controllerCode">
diff --git a/src/views/deviceManage/editGroup.vue b/src/views/deviceManage/editGroup.vue
index de9b88b..403d605 100644
--- a/src/views/deviceManage/editGroup.vue
+++ b/src/views/deviceManage/editGroup.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="groupForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="groupForm" size="small" label-well-code="right" label-width="110px">
       <el-row :span="24">
         <el-form-item label="分组名称" prop="groupName">
           <el-input v-model.trim="groupForm.groupName" :readonly="!isEditMode" clearable type="text" />
diff --git a/src/views/deviceManage/editLamp.vue b/src/views/deviceManage/editLamp.vue
index 3d45138..faf37d5 100644
--- a/src/views/deviceManage/editLamp.vue
+++ b/src/views/deviceManage/editLamp.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="lampForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="lampForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="路灯编号" prop="lampCode">
diff --git a/src/views/deviceManage/editLampbox.vue b/src/views/deviceManage/editLampbox.vue
index bd3a537..a4a8ea7 100644
--- a/src/views/deviceManage/editLampbox.vue
+++ b/src/views/deviceManage/editLampbox.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="boxForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="boxForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="灯箱编号" prop="lampboxCode">
diff --git a/src/views/deviceManage/editLamppost.vue b/src/views/deviceManage/editLamppost.vue
index 67a3a6f..a384319 100644
--- a/src/views/deviceManage/editLamppost.vue
+++ b/src/views/deviceManage/editLamppost.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="postForm" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="postForm" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="路灯杆编号" prop="lamppostCode">
diff --git a/src/views/deviceManage/listLog.vue b/src/views/deviceManage/listLog.vue
index 1d00e1c..5ab9a95 100644
--- a/src/views/deviceManage/listLog.vue
+++ b/src/views/deviceManage/listLog.vue
@@ -1,36 +1,32 @@
 <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-form-item>
-              <el-input v-model.trim="listQuery.devcode" placeholder="设备编号" clearable/>
-            </el-form-item>
-            <el-form-item>
-              <el-select v-model="listQuery.status" placeholder="下发状态" filterable clearable>
-                <el-option v-for="item in statusList" :key="item.name" :label="item.name" :value="item.name"/>
-              </el-select>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button class="edit_btn" size="small" @click="sendAll">全部设备下发</el-button>
-          <el-button class="edit_btn" size="small" @click="send">设备下发</el-button>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" :row-style="{height: '47px'}" class="table" border @selection-change="handleSelectionChange">
-        <el-table-column align="center" type="selection" width="55"/>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.devcode" size="small" placeholder="设备编号" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.status" size="small" placeholder="下发状态" filterable clearable>
+          <el-option v-for="item in statusList" :key="item.name" :label="item.name" :value="item.name"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button class="edit_btn" size="small" @click="sendAll">全部设备下发</el-button>
+        <el-button class="edit_btn" size="small" @click="send">设备下发</el-button>
+      </template>
+      <template slot="columns">
         <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">
             <div v-if="column.value === 'channel1'">
@@ -50,22 +46,9 @@
             </div>
           </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>
-  </div>
+      </template>
+    </normal-table>
+  </app-container>
 </template>
 
 <script>
@@ -151,7 +134,21 @@
       alarmStatusList: [{ name: '正在报警', value: '1' }, { name: '已取消', value: '2' }], // 报警状态列表
       statusList: [{ name: '未下发' }, { name: '已下发' }],
       alarmTypeList: [],
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -262,18 +259,13 @@
       this.timeRange = []
       this.fetchData(false)
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     },
     // 多选触发方法
diff --git a/src/views/example/tableExample.vue b/src/views/example/tableExample.vue
index 2d54fad..e8cd106 100644
--- a/src/views/example/tableExample.vue
+++ b/src/views/example/tableExample.vue
@@ -139,7 +139,7 @@
           text: '数据列表' // 标题名称
         },
         options: {
-          needIndex: false // 是否需要序号列
+          needIndex: true // 是否需要序号列
         },
         toolsOption: {
           selectColumns: false, // 是否需要筛选列
diff --git a/src/views/report/boxData.vue b/src/views/report/boxData.vue
index 2e04e4b..5faeff7 100644
--- a/src/views/report/boxData.vue
+++ b/src/views/report/boxData.vue
@@ -1,25 +1,50 @@
 <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-form-item class="selectForm-container-item">
-              <el-input v-model.trim="listQuery.keyword" placeholder="灯箱编号/灯箱名称" clearable/>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item">
-              <el-select v-model="listQuery.groupId" placeholder="设备组" clearable>
-                <el-option v-for="item in groupList" :key="item.id" :label="item.groupName" :value="item.id"/>
-              </el-select>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-      <div class="clearfloat"/>
-    </div>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="灯箱编号/灯箱名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.groupId" size="small" placeholder="设备组" clearable>
+          <el-option v-for="item in groupList" :key="item.id" :label="item.groupName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
+        <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">
+            <div v-if="column.value === 'A'">
+              <span v-html="allNum(scope.row.electricityA,scope.row.voltageA,scope.row.powerA)"/>
+            </div>
+            <div v-else-if="column.value === 'B'">
+              <span v-html="allNum(scope.row.electricityB,scope.row.voltageA,scope.row.powerB)"/>
+            </div>
+            <div v-else-if="column.value === 'C'">
+              <span v-html="allNum(scope.row.electricityC,scope.row.voltageA,scope.row.powerC)"/>
+            </div>
+            <div v-else>
+              <span>{{ scope.row[column.value] }}</span>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" width="130">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click="showHistory(scope.row)">查看历史</el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
     <!--查询结果Table显示-->
     <div>
       <el-row class="table-title">
@@ -43,29 +68,10 @@
             </div>
           </template>
         </el-table-column>
-        <el-table-column label="操作" align="center" width="130">
-          <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
-            <el-button type="text" size="small" @click="showHistory(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>
     <box-history v-show="dialogFormVisible" ref="boxhistory"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -121,7 +127,21 @@
       listLoading: true, // 列表加载
       dialogFormVisible: false,
       alarmReasonList: [], // 报警原因列表
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -177,18 +197,13 @@
         this.groupList = response.data
       })
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }
diff --git a/src/views/report/boxHistory.vue b/src/views/report/boxHistory.vue
index e63fb94..c5cf8ca 100644
--- a/src/views/report/boxHistory.vue
+++ b/src/views/report/boxHistory.vue
@@ -2,7 +2,7 @@
   <div class="app-container">
     <!--筛选条件-->
     <el-dialog :visible.sync="dialogFormVisible" :title="title" append-to-body>
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
+      <el-form ref="selectForm" :inline="true" :model="listQuery" size="small" class="form-container">
         <el-form-item class="selectForm-container-item" prop="startTime">
           <el-date-picker
             v-model="timeRange"
@@ -19,7 +19,7 @@
         <el-row class="table-title">
           <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
         </el-row>
-        <el-table v-loading="listLoading" :data="list" class="table" height="300px" border>
+        <el-table v-loading="listLoading" :data="list" class="table" size="small" height="300px" border>
           <el-table-column :index="indexMethod" label="序号" align="center" type="index" width="55" ></el-table-column>
           <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">
diff --git a/src/views/report/controllerData.vue b/src/views/report/controllerData.vue
index 5b7c360..ee81ba7 100644
--- a/src/views/report/controllerData.vue
+++ b/src/views/report/controllerData.vue
@@ -1,63 +1,40 @@
 <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-form-item class="selectForm-container-item">
-              <el-input v-model.trim="listQuery.keyword" placeholder="路灯编号/路灯名称" clearable/>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item">
-              <el-input v-model.trim="listQuery.controllerCode" placeholder="控制器编号" clearable/>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item">
-              <el-select v-model="listQuery.groupId" placeholder="设备组" clearable>
-                <el-option v-for="item in groupList" :key="item.id" :label="item.groupName" :value="item.id"/>
-              </el-select>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-      <div class="clearfloat"/>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="序号" width="55" align="center" type="index" />
-        <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>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keyword" size="small" placeholder="路灯编号/路灯名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.controllerCode" size="small" placeholder="控制器编号" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.groupId" size="small" placeholder="设备组" clearable>
+          <el-option v-for="item in groupList" :key="item.id" :label="item.groupName" :value="item.id"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage">
+      <template slot="columns">
         <el-table-column label="操作" align="center" width="130">
           <template slot-scope="scope">
-            <!--<el-button type="text" size="small" @click="showCompare(scope.row)">生成工单</el-button>-->
             <el-button type="text" size="small" @click="showHistory(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>
     <history-data v-show="dialogFormVisible" ref="historydata"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -131,7 +108,21 @@
       listLoading: true, // 列表加载
       dialogFormVisible: false,
       alarmReasonList: [], // 报警原因列表
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -197,6 +188,15 @@
     handleCurrentChange(val) {
       this.listQuery.offset = val
       this.fetchData()
+    },
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
     }
   }
 }
diff --git a/src/views/report/historyData.vue b/src/views/report/historyData.vue
index 17e66de..9ba326e 100644
--- a/src/views/report/historyData.vue
+++ b/src/views/report/historyData.vue
@@ -2,7 +2,7 @@
   <div class="app-container">
     <!--筛选条件-->
     <el-dialog :visible.sync="dialogFormVisible" :title="title" append-to-body>
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
+      <el-form ref="selectForm" :inline="true" :model="listQuery" size="small" class="form-container">
         <el-form-item class="selectForm-container-item" prop="startTime">
           <el-date-picker
             v-model="timeRange"
@@ -12,14 +12,14 @@
             start-placeholder="查询开始时间"
             end-placeholder="查询结束时间"/>
         </el-form-item>
-        <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
+        <el-button class="filter-item" type="primary" icon="el-icon-search" size="small" @click="search">搜索</el-button>
       </el-form>
       <!--查询结果Table显示-->
       <div>
         <el-row class="table-title">
           <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
         </el-row>
-        <el-table v-loading="listLoading" :data="list" class="table" height="300px" border>
+        <el-table v-loading="listLoading" :data="list" class="table" size="small" height="300px" border>
           <el-table-column :index="indexMethod" label="序号" align="center" type="index" width="55" ></el-table-column>
           <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">
diff --git a/src/views/report/quantityData.vue b/src/views/report/quantityData.vue
index a4bd607..88a4d4d 100644
--- a/src/views/report/quantityData.vue
+++ b/src/views/report/quantityData.vue
@@ -1,46 +1,35 @@
 <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-form-item class="selectForm-container-item">
-              <el-date-picker
-                v-model="timeRange"
-                :picker-options="pickerOptions"
-                :clearable="false"
-                type="daterange"
-                value-format="yyyy-MM-dd"
-                align="right"
-                unlink-panels
-                range-separator="至"
-                start-placeholder="开始日期"
-                end-placeholder="结束日期"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-      <div class="clearfloat"/>
-    </div>
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          :picker-options="pickerOptions"
+          :clearable="false"
+          type="daterange"
+          value-format="yyyy-MM-dd"
+          align="right"
+          unlink-panels
+          range-separator="至"
+          size="small"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"/>
+      </search-item>
+    </search-area>
     <div ref="chart" class="chart-body" style="padding-top: 20px;"/>
-    <!--查询结果Table显示-->
-    <div style="margin-bottom: 50px">
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" :row-style="{height: '47px'}" class="table" border>
-        <el-table-column :index="indexMethod" label="序号" width="55" align="center" type="index" />
-        <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>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-  </div>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage"/>
+  </app-container>
 </template>
 
 <script>
@@ -104,7 +93,21 @@
       list: [], // 报警列表
       chart: '',
       staticsList: [], // 报警列表
-      listLoading: true // 列表加载
+      listLoading: true, // 列表加载
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   watch: {
@@ -202,6 +205,15 @@
     handleCurrentChange(val) {
       this.listQuery.offset = val
       this.fetchData()
+    },
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
     }
   }
 }
diff --git a/src/views/report/statics.vue b/src/views/report/statics.vue
index 8a16fbd..005a41e 100644
--- a/src/views/report/statics.vue
+++ b/src/views/report/statics.vue
@@ -1,31 +1,24 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <!--筛选条件-->
-    <div class="search-div">
-      <div class="search-left">
-        <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
-          <el-row>
-            <el-form-item class="selectForm-container-item">
-              <el-date-picker
-                v-model="timeRange"
-                :picker-options="pickerOptions"
-                :clearable="false"
-                type="daterange"
-                value-format="yyyy-MM-dd"
-                align="right"
-                unlink-panels
-                range-separator="至"
-                start-placeholder="开始日期"
-                end-placeholder="结束日期"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-      <div class="clearfloat"/>
-    </div>
-    <el-tabs v-model="tab" type="border-card">
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          :picker-options="pickerOptions"
+          :clearable="false"
+          size="small"
+          type="daterange"
+          value-format="yyyy-MM-dd"
+          align="right"
+          unlink-panels
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"/>
+      </search-item>
+    </search-area>
+    <el-tabs v-model="tab" type="border-card" style="border-top: 12px solid #ebebeb !important;">
       <el-tab-pane label="街道统计" name="street">
         <el-row v-if="tab === 'street'" style="padding-top: 20px;">
           <el-col :span="12" >
@@ -68,7 +61,7 @@
         <div ref="chart" class="chart-body"/>
       </el-col>
     </el-row>
-  </div>
+  </app-container>
 </template>
 
 <script>
diff --git a/src/views/strategy/components/editStrategy.vue b/src/views/strategy/components/editStrategy.vue
index c396b81..ae64c77 100644
--- a/src/views/strategy/components/editStrategy.vue
+++ b/src/views/strategy/components/editStrategy.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :rules="rules" :model="strategyInfo.strategyInfo" label-well-code="right" label-width="110px">
+    <el-form ref="dataForm" :rules="rules" :model="strategyInfo.strategyInfo" size="small" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="策略名称" prop="strategyName">
@@ -52,7 +52,7 @@
     </el-form>
     <el-tabs v-model="tab" type="border-card" >
       <el-tab-pane label="开灯命令" name="open">
-        <el-form ref="openForm" :rules="rules1" :model="openForm" label-well-code="right" label-width="110px">
+        <el-form ref="openForm" :rules="rules1" :model="openForm" size="small" label-well-code="right" label-width="110px">
           <el-row :gutter="20">
             <el-col :span="12">
               <el-form-item label="策略类型" prop="strategyType">
@@ -98,7 +98,7 @@
         </el-form>
       </el-tab-pane>
       <el-tab-pane label="关灯命令" name="close">
-        <el-form ref="closeForm" :rules="rules2" :model="closeForm" label-well-code="right" label-width="110px">
+        <el-form ref="closeForm" :rules="rules2" :model="closeForm" size="small" label-well-code="right" label-width="110px">
           <el-row :gutter="20">
             <el-col :span="12">
               <el-form-item label="策略类型" prop="strategyType">
diff --git a/src/views/strategy/components/editThreshold.vue b/src/views/strategy/components/editThreshold.vue
index e1037e4..499f827 100644
--- a/src/views/strategy/components/editThreshold.vue
+++ b/src/views/strategy/components/editThreshold.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" append-to-body width="700px">
+  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" size="small" append-to-body width="700px">
     <el-form ref="dataForm" :rules="rules" :model="thresholdForm" label-position="right" label-width="180px">
       <el-row :gutter="20">
         <el-col :span="16" offset="4">
diff --git a/src/views/strategy/components/editTime.vue b/src/views/strategy/components/editTime.vue
index a2d132f..54b2f2b 100644
--- a/src/views/strategy/components/editTime.vue
+++ b/src/views/strategy/components/editTime.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" append-to-body width="700px">
+  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" size="small" append-to-body width="700px">
     <el-row class="table-title" style="margin-top: -20px;margin-bottom: 20px">
       <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>控制器采集设置</div>
       </el-col>
diff --git a/src/views/strategy/deviceData.vue b/src/views/strategy/deviceData.vue
index 63c5a6c..df200aa 100644
--- a/src/views/strategy/deviceData.vue
+++ b/src/views/strategy/deviceData.vue
@@ -1,58 +1,38 @@
 <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-form-item class="selectForm-container-item">
-              <el-input v-model.trim="listQuery.deviceName" placeholder="设备名称" clearable/>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item">
-              <el-select v-model="listQuery.deviceType" placeholder="设备类型" clearable @change="fetchData">
-                <el-option v-for="item in groupList" :key="item.value" :label="item.name" :value="item.value"/>
-              </el-select>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-          </el-row>
-        </el-form>
-      </div>
-      <div class="clearfloat"/>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="序号" width="55" align="center" type="index" />
-        <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>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" align="center" width="100">
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.deviceName" size="small" placeholder="设备名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.deviceType" size="small" placeholder="设备类型" clearable @change="fetchData">
+          <el-option v-for="item in groupList" :key="item.value" :label="item.name" :value="item.value"/>
+        </el-select>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="130">
           <template slot-scope="scope">
             <el-button type="text" size="small" @click="showHistory(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>
     <device-history v-show="dialogFormVisible" ref="devicehistory"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -134,7 +114,21 @@
       listLoading: true, // 列表加载
       dialogFormVisible: false,
       alarmReasonList: [], // 报警原因列表
-      timeRange: [] // 时间范围
+      timeRange: [], // 时间范围
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
diff --git a/src/views/strategy/deviceHistory.vue b/src/views/strategy/deviceHistory.vue
index 89fb7c1..a2a2f00 100644
--- a/src/views/strategy/deviceHistory.vue
+++ b/src/views/strategy/deviceHistory.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="app-container">
+  <app-container>
     <!--筛选条件-->
     <el-dialog :visible.sync="dialogFormVisible" :title="title" append-to-body width="1100px">
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
+      <el-form ref="selectForm" :inline="true" :model="listQuery" size="small" class="form-container">
         <el-form-item class="selectForm-container-item" prop="startTime">
           <el-date-picker
             v-model="timeRange"
@@ -42,7 +42,7 @@
           @current-change="handleCurrentChange"/>
       </div>
     </el-dialog>
-  </div>
+  </app-container>
 </template>
 
 <script>
diff --git a/src/views/strategy/listExeLog.vue b/src/views/strategy/listExeLog.vue
index 1a236dd..5faf067 100644
--- a/src/views/strategy/listExeLog.vue
+++ b/src/views/strategy/listExeLog.vue
@@ -1,50 +1,26 @@
 <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-form-item class="selectForm-container-item">
-              <el-input v-model.trim="listQuery.strategyName" placeholder="策略名称" clearable/>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item">
-              <el-input v-model.trim="listQuery.groupName" placeholder="分组名称" clearable/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-          </el-row>
-        </el-form>
-      </div>
-      <div class="clearfloat"/>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" :row-style="{height: '47px'}" class="table" border>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
-        <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>{{ scope.row[column.value] }}</span>
-          </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>
-  </div>
+  <app-container>
+    <search-area :need-clear="false" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.strategyName" size="small" placeholder="策略名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.groupName" size="small" placeholder="分组名称" clearable/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @change="changePage"/>
+  </app-container>
 </template>
 
 <script>
@@ -107,7 +83,21 @@
       total: 0, // 数据总数
       list: [], // 报警列表
       listLoading: true, // 列表加载
-      dialogFormVisible: ''
+      dialogFormVisible: '',
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -136,18 +126,13 @@
     search() {
       this.fetchData(false)
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }
diff --git a/src/views/strategy/listOperationLog.vue b/src/views/strategy/listOperationLog.vue
index 0007432..bfc109f 100644
--- a/src/views/strategy/listOperationLog.vue
+++ b/src/views/strategy/listOperationLog.vue
@@ -1,56 +1,34 @@
 <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-form-item class="selectForm-container-item">
-              <el-input v-model.trim="listQuery.operationType" placeholder="操作名称" clearable/>
-            </el-form-item>
-            <el-form-item class="selectForm-container-item">
-              <el-date-picker
-                v-model="timeRange"
-                type="datetimerange"
-                range-separator="至"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                start-placeholder="开始时间"
-                end-placeholder="结束时间"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-          </el-row>
-        </el-form>
-      </div>
-      <div class="clearfloat"/>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
-        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" >
-          <template slot-scope="scope">
-            <span>{{ scope.row[column.value] }}</span>
-          </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>
-  </div>
+  <app-container>
+    <search-area :need-clear="false" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.operationType" size="small" placeholder="操作名称" clearable/>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          size="small"
+          start-placeholder="开始时间"
+          end-placeholder="结束时间"/>
+      </search-item>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage"/>
+  </app-container>
 </template>
 
 <script>
@@ -98,7 +76,21 @@
       total: 0, // 数据总数
       list: [], // 报警列表
       listLoading: true, // 列表加载
-      dialogFormVisible: ''
+      dialogFormVisible: '',
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: false
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   watch: {
diff --git a/src/views/strategy/listStrategy.vue b/src/views/strategy/listStrategy.vue
index a484c43..39c1a4c 100644
--- a/src/views/strategy/listStrategy.vue
+++ b/src/views/strategy/listStrategy.vue
@@ -1,65 +1,45 @@
 <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-form-item class="selectForm-container-item">
-              <el-input v-model.trim="listQuery.strategyName" placeholder="策略名称" clearable/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <el-button class="filter-item" type="primary" icon="el-icon-edit" @click="editthreshold">阈值设置</el-button>
-            <el-button class="filter-item" type="primary" icon="el-icon-edit" @click="edittime">采集设置</el-button>
-          </el-row>
-        </el-form>
-      </div>
-      <div class="clearfloat"/>
-    </div>
-    <!--查询结果Table显示-->
-    <div>
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div>
-        </el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button class="edit_btn" size="small" @click="del">删除</el-button>
-          <el-button class="edit_btn" size="small" @click="check">下发</el-button>
-          <el-button class="edit_btn" size="small" @click="add">新增</el-button>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <el-table-column align="center" type="selection" width="55"/>
-        <el-table-column :index="indexMethod" label="#" align="center" type="index" />
-        <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>{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" align="center" width="120">
+  <app-container>
+    <search-area :need-clear="true" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.strategyName" size="small" placeholder="策略名称" clearable/>
+      </search-item>
+      <template slot="btns-seperate">
+        <el-button class="filter-item" type="primary" icon="el-icon-edit" size="small" @click="editthreshold">阈值设置</el-button>
+        <el-button class="filter-item" type="primary" icon="el-icon-edit" size="small" @click="edittime">采集设置</el-button>
+      </template>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      size="small"
+      @selectionChange="handleSelectionChange"
+      @change="changePage">
+      <template slot="btns">
+        <el-button class="edit_btn" size="small" @click="del">删除</el-button>
+        <el-button class="edit_btn" size="small" @click="check">下发</el-button>
+        <el-button class="edit_btn" size="small" @click="add">新增</el-button>
+      </template>
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="130">
           <template slot-scope="scope">
             <el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
             <el-button type="text" size="small" @click="detail(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-strategy v-show="dialogFormVisible" ref="editstrategy" @watchChild="fetchData"/>
     <edit-threshold v-show="dialogFormVisible1" ref="editthreshold"/>
     <edit-time v-show="dialogFormVisible2" ref="edittime"/>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -123,7 +103,21 @@
       multipleSelection: [], // 多选选中项
       dialogFormVisible: false,
       dialogFormVisible1: false,
-      dialogFormVisible2: false
+      dialogFormVisible2: false,
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultSelect: true
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -236,18 +230,13 @@
       this.dialogFormVisible2 = true
       this.$refs.edittime.initDialog('update', this.dialogFormVisible2, null)
     },
-    // 序号计算
-    indexMethod(index) {
-      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
-    },
-    // 改变页容量
-    handleSizeChange(val) {
-      this.listQuery.limit = val
-      this.fetchData()
-    },
-    // 改变当前页
-    handleCurrentChange(val) {
-      this.listQuery.offset = val
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
       this.fetchData()
     }
   }
diff --git a/static/project.config.json b/static/project.config.json
index 3f253f7..6e21f24 100644
--- a/static/project.config.json
+++ b/static/project.config.json
@@ -2,8 +2,8 @@
   "title": "智慧照明子系统",
   "baseUrl": "http://111.198.10.15:11415/lamp/",
   "lampBasePath": "",
-  "mainPage": "http://111.198.10.15:11404/dcms/",
-  "singleSys": true,
+  "mainPage": "http://111.198.10.15:11404/dcms/#",
+  "singleSys": false,
   "city":"崇仁县",
   "mapUrl":"https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8",
   "labelUrl":"https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8",