diff --git a/src/router/modules/doorSys.js b/src/router/modules/doorSys.js
index 8017e4b..6bd1506 100644
--- a/src/router/modules/doorSys.js
+++ b/src/router/modules/doorSys.js
@@ -87,6 +87,20 @@
         name: 'DoorAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/door/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/door/alarm/position',
+        name: 'DoorAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/door/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/door/alarm/video',
+        name: 'DoorAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/door/alarm/video'], keepAlive: true }
       }
     ]
   },
@@ -262,5 +276,26 @@
         meta: { title: '营门出入次数统计', icon: '', permission: ['/door/statistics/doorCount'], keepAlive: true }
       }
     ]
+  },
+  {
+    path: '/door/area',
+    component: Layout,
+    redirect: '/door/area',
+    name: 'DoorArea',
+    alwaysShow: true,
+    meta: {
+      title: '区域管理',
+      icon: 'icon-area', // 图标
+      permission: ['/door/area'], // 权限名称
+      sys: '/door'
+    },
+    children: [
+      {
+        path: '/door/area/list',
+        name: 'DoorAreaList',
+        component: () => import('@/views/area/areaList'),
+        meta: { title: '区域列表', icon: '', permission: ['/door/area/list'], keepAlive: true }
+      }
+    ]
   }
 ]

diff --git a/src/router/modules/doorSys.js b/src/router/modules/doorSys.js
index 8017e4b..6bd1506 100644
--- a/src/router/modules/doorSys.js
+++ b/src/router/modules/doorSys.js
@@ -87,6 +87,20 @@
         name: 'DoorAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/door/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/door/alarm/position',
+        name: 'DoorAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/door/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/door/alarm/video',
+        name: 'DoorAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/door/alarm/video'], keepAlive: true }
       }
     ]
   },
@@ -262,5 +276,26 @@
         meta: { title: '营门出入次数统计', icon: '', permission: ['/door/statistics/doorCount'], keepAlive: true }
       }
     ]
+  },
+  {
+    path: '/door/area',
+    component: Layout,
+    redirect: '/door/area',
+    name: 'DoorArea',
+    alwaysShow: true,
+    meta: {
+      title: '区域管理',
+      icon: 'icon-area', // 图标
+      permission: ['/door/area'], // 权限名称
+      sys: '/door'
+    },
+    children: [
+      {
+        path: '/door/area/list',
+        name: 'DoorAreaList',
+        component: () => import('@/views/area/areaList'),
+        meta: { title: '区域列表', icon: '', permission: ['/door/area/list'], keepAlive: true }
+      }
+    ]
   }
 ]
diff --git a/src/router/modules/fenceSys.js b/src/router/modules/fenceSys.js
index 0d784b0..e2962bd 100644
--- a/src/router/modules/fenceSys.js
+++ b/src/router/modules/fenceSys.js
@@ -85,6 +85,20 @@
         name: 'FenceAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/fence/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/fence/alarm/position',
+        name: 'FenceAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/fence/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/fence/alarm/video',
+        name: 'FenceAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/fence/alarm/video'], keepAlive: true }
       }
     ]
   },

diff --git a/src/router/modules/doorSys.js b/src/router/modules/doorSys.js
index 8017e4b..6bd1506 100644
--- a/src/router/modules/doorSys.js
+++ b/src/router/modules/doorSys.js
@@ -87,6 +87,20 @@
         name: 'DoorAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/door/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/door/alarm/position',
+        name: 'DoorAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/door/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/door/alarm/video',
+        name: 'DoorAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/door/alarm/video'], keepAlive: true }
       }
     ]
   },
@@ -262,5 +276,26 @@
         meta: { title: '营门出入次数统计', icon: '', permission: ['/door/statistics/doorCount'], keepAlive: true }
       }
     ]
+  },
+  {
+    path: '/door/area',
+    component: Layout,
+    redirect: '/door/area',
+    name: 'DoorArea',
+    alwaysShow: true,
+    meta: {
+      title: '区域管理',
+      icon: 'icon-area', // 图标
+      permission: ['/door/area'], // 权限名称
+      sys: '/door'
+    },
+    children: [
+      {
+        path: '/door/area/list',
+        name: 'DoorAreaList',
+        component: () => import('@/views/area/areaList'),
+        meta: { title: '区域列表', icon: '', permission: ['/door/area/list'], keepAlive: true }
+      }
+    ]
   }
 ]
diff --git a/src/router/modules/fenceSys.js b/src/router/modules/fenceSys.js
index 0d784b0..e2962bd 100644
--- a/src/router/modules/fenceSys.js
+++ b/src/router/modules/fenceSys.js
@@ -85,6 +85,20 @@
         name: 'FenceAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/fence/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/fence/alarm/position',
+        name: 'FenceAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/fence/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/fence/alarm/video',
+        name: 'FenceAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/fence/alarm/video'], keepAlive: true }
       }
     ]
   },
diff --git a/src/router/modules/keySys.js b/src/router/modules/keySys.js
index f3a027b..832744b 100644
--- a/src/router/modules/keySys.js
+++ b/src/router/modules/keySys.js
@@ -85,6 +85,20 @@
         name: 'KeyAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/key/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/key/alarm/position',
+        name: 'KeyAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/key/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/key/alarm/video',
+        name: 'KeyAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/key/alarm/video'], keepAlive: true }
       }
     ]
   },

diff --git a/src/router/modules/doorSys.js b/src/router/modules/doorSys.js
index 8017e4b..6bd1506 100644
--- a/src/router/modules/doorSys.js
+++ b/src/router/modules/doorSys.js
@@ -87,6 +87,20 @@
         name: 'DoorAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/door/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/door/alarm/position',
+        name: 'DoorAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/door/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/door/alarm/video',
+        name: 'DoorAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/door/alarm/video'], keepAlive: true }
       }
     ]
   },
@@ -262,5 +276,26 @@
         meta: { title: '营门出入次数统计', icon: '', permission: ['/door/statistics/doorCount'], keepAlive: true }
       }
     ]
+  },
+  {
+    path: '/door/area',
+    component: Layout,
+    redirect: '/door/area',
+    name: 'DoorArea',
+    alwaysShow: true,
+    meta: {
+      title: '区域管理',
+      icon: 'icon-area', // 图标
+      permission: ['/door/area'], // 权限名称
+      sys: '/door'
+    },
+    children: [
+      {
+        path: '/door/area/list',
+        name: 'DoorAreaList',
+        component: () => import('@/views/area/areaList'),
+        meta: { title: '区域列表', icon: '', permission: ['/door/area/list'], keepAlive: true }
+      }
+    ]
   }
 ]
diff --git a/src/router/modules/fenceSys.js b/src/router/modules/fenceSys.js
index 0d784b0..e2962bd 100644
--- a/src/router/modules/fenceSys.js
+++ b/src/router/modules/fenceSys.js
@@ -85,6 +85,20 @@
         name: 'FenceAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/fence/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/fence/alarm/position',
+        name: 'FenceAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/fence/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/fence/alarm/video',
+        name: 'FenceAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/fence/alarm/video'], keepAlive: true }
       }
     ]
   },
diff --git a/src/router/modules/keySys.js b/src/router/modules/keySys.js
index f3a027b..832744b 100644
--- a/src/router/modules/keySys.js
+++ b/src/router/modules/keySys.js
@@ -85,6 +85,20 @@
         name: 'KeyAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/key/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/key/alarm/position',
+        name: 'KeyAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/key/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/key/alarm/video',
+        name: 'KeyAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/key/alarm/video'], keepAlive: true }
       }
     ]
   },
diff --git a/src/router/modules/regionSys.js b/src/router/modules/regionSys.js
index 9b4613a..43b8c38 100644
--- a/src/router/modules/regionSys.js
+++ b/src/router/modules/regionSys.js
@@ -85,6 +85,20 @@
         name: 'RegionAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/region/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/region/alarm/position',
+        name: 'RegionAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/region/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/region/alarm/video',
+        name: 'RegionAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/region/alarm/video'], keepAlive: true }
       }
     ]
   },
@@ -102,6 +116,20 @@
     },
     children: [
       {
+        path: '/region/staff/add',
+        name: 'RegionStaffAdd',
+        component: () => import('@/views/staff/staffAdd'),
+        hidden: true,
+        meta: { title: '人员登记', icon: '', permission: ['/region/staff/add'], keepAlive: true }
+      },
+      {
+        path: '/region/staff/edit',
+        name: 'RegionStaffEdit',
+        component: () => import('@/views/staff/staffEdit'),
+        hidden: true,
+        meta: { title: '人员编辑', icon: '', permission: ['/region/staff/edit'], keepAlive: true }
+      },
+      {
         path: '/region/staff/list',
         name: 'RegionStaffList',
         component: () => import('@/views/staff/staffList'),

diff --git a/src/router/modules/doorSys.js b/src/router/modules/doorSys.js
index 8017e4b..6bd1506 100644
--- a/src/router/modules/doorSys.js
+++ b/src/router/modules/doorSys.js
@@ -87,6 +87,20 @@
         name: 'DoorAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/door/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/door/alarm/position',
+        name: 'DoorAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/door/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/door/alarm/video',
+        name: 'DoorAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/door/alarm/video'], keepAlive: true }
       }
     ]
   },
@@ -262,5 +276,26 @@
         meta: { title: '营门出入次数统计', icon: '', permission: ['/door/statistics/doorCount'], keepAlive: true }
       }
     ]
+  },
+  {
+    path: '/door/area',
+    component: Layout,
+    redirect: '/door/area',
+    name: 'DoorArea',
+    alwaysShow: true,
+    meta: {
+      title: '区域管理',
+      icon: 'icon-area', // 图标
+      permission: ['/door/area'], // 权限名称
+      sys: '/door'
+    },
+    children: [
+      {
+        path: '/door/area/list',
+        name: 'DoorAreaList',
+        component: () => import('@/views/area/areaList'),
+        meta: { title: '区域列表', icon: '', permission: ['/door/area/list'], keepAlive: true }
+      }
+    ]
   }
 ]
diff --git a/src/router/modules/fenceSys.js b/src/router/modules/fenceSys.js
index 0d784b0..e2962bd 100644
--- a/src/router/modules/fenceSys.js
+++ b/src/router/modules/fenceSys.js
@@ -85,6 +85,20 @@
         name: 'FenceAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/fence/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/fence/alarm/position',
+        name: 'FenceAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/fence/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/fence/alarm/video',
+        name: 'FenceAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/fence/alarm/video'], keepAlive: true }
       }
     ]
   },
diff --git a/src/router/modules/keySys.js b/src/router/modules/keySys.js
index f3a027b..832744b 100644
--- a/src/router/modules/keySys.js
+++ b/src/router/modules/keySys.js
@@ -85,6 +85,20 @@
         name: 'KeyAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/key/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/key/alarm/position',
+        name: 'KeyAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/key/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/key/alarm/video',
+        name: 'KeyAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/key/alarm/video'], keepAlive: true }
       }
     ]
   },
diff --git a/src/router/modules/regionSys.js b/src/router/modules/regionSys.js
index 9b4613a..43b8c38 100644
--- a/src/router/modules/regionSys.js
+++ b/src/router/modules/regionSys.js
@@ -85,6 +85,20 @@
         name: 'RegionAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/region/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/region/alarm/position',
+        name: 'RegionAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/region/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/region/alarm/video',
+        name: 'RegionAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/region/alarm/video'], keepAlive: true }
       }
     ]
   },
@@ -102,6 +116,20 @@
     },
     children: [
       {
+        path: '/region/staff/add',
+        name: 'RegionStaffAdd',
+        component: () => import('@/views/staff/staffAdd'),
+        hidden: true,
+        meta: { title: '人员登记', icon: '', permission: ['/region/staff/add'], keepAlive: true }
+      },
+      {
+        path: '/region/staff/edit',
+        name: 'RegionStaffEdit',
+        component: () => import('@/views/staff/staffEdit'),
+        hidden: true,
+        meta: { title: '人员编辑', icon: '', permission: ['/region/staff/edit'], keepAlive: true }
+      },
+      {
         path: '/region/staff/list',
         name: 'RegionStaffList',
         component: () => import('@/views/staff/staffList'),
diff --git a/src/views/alarm/alarmList.vue b/src/views/alarm/alarmList.vue
index 704f797..91967a0 100644
--- a/src/views/alarm/alarmList.vue
+++ b/src/views/alarm/alarmList.vue
@@ -37,7 +37,7 @@
             </el-col>
 
             <el-col :span="4" 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" @click="fetchData()">搜索</el-button>
             </el-col>
           </el-row>
         </el-form>
@@ -48,7 +48,7 @@
       <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="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>
@@ -66,8 +66,8 @@
         <!--操作列-->
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
-            <el-button type="text" @click="detail(scope.row)">位置</el-button>
-            <el-button v-if="hasPerm('/car/update')" type="text" @click="edit(scope.row)">视频</el-button>
+            <el-button type="text" @click="position(scope.row)">位置</el-button>
+            <el-button v-if="hasPerm('/car/update')" type="text" @click="video(scope.row)">视频</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -185,6 +185,14 @@
     this.fetchData() // 获取数据
   },
   methods: {
+    video(row){
+      const code = this.$store.getters.currentSystem.code
+      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId }})
+    },
+    position(row){
+      const code = this.$store.getters.currentSystem.code
+      this.$router.push({ path: '/' + code + '/alarm/position', query: {  id: row.deviceId }})
+    },
     batchExport() {
       // 全屏加载动画
       const loading = this.$loading({
@@ -254,6 +262,8 @@
       getAlarmList(this.listQuery).then(response => {
         if (response.code === 200) {
           this.list = response.data.rows
+          console.log('&&&')
+          console.log(this.list)
           this.total = parseInt(response.data.total)
         } else {
           this.$message.error(response.message)

diff --git a/src/router/modules/doorSys.js b/src/router/modules/doorSys.js
index 8017e4b..6bd1506 100644
--- a/src/router/modules/doorSys.js
+++ b/src/router/modules/doorSys.js
@@ -87,6 +87,20 @@
         name: 'DoorAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/door/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/door/alarm/position',
+        name: 'DoorAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/door/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/door/alarm/video',
+        name: 'DoorAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/door/alarm/video'], keepAlive: true }
       }
     ]
   },
@@ -262,5 +276,26 @@
         meta: { title: '营门出入次数统计', icon: '', permission: ['/door/statistics/doorCount'], keepAlive: true }
       }
     ]
+  },
+  {
+    path: '/door/area',
+    component: Layout,
+    redirect: '/door/area',
+    name: 'DoorArea',
+    alwaysShow: true,
+    meta: {
+      title: '区域管理',
+      icon: 'icon-area', // 图标
+      permission: ['/door/area'], // 权限名称
+      sys: '/door'
+    },
+    children: [
+      {
+        path: '/door/area/list',
+        name: 'DoorAreaList',
+        component: () => import('@/views/area/areaList'),
+        meta: { title: '区域列表', icon: '', permission: ['/door/area/list'], keepAlive: true }
+      }
+    ]
   }
 ]
diff --git a/src/router/modules/fenceSys.js b/src/router/modules/fenceSys.js
index 0d784b0..e2962bd 100644
--- a/src/router/modules/fenceSys.js
+++ b/src/router/modules/fenceSys.js
@@ -85,6 +85,20 @@
         name: 'FenceAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/fence/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/fence/alarm/position',
+        name: 'FenceAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/fence/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/fence/alarm/video',
+        name: 'FenceAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/fence/alarm/video'], keepAlive: true }
       }
     ]
   },
diff --git a/src/router/modules/keySys.js b/src/router/modules/keySys.js
index f3a027b..832744b 100644
--- a/src/router/modules/keySys.js
+++ b/src/router/modules/keySys.js
@@ -85,6 +85,20 @@
         name: 'KeyAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/key/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/key/alarm/position',
+        name: 'KeyAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/key/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/key/alarm/video',
+        name: 'KeyAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/key/alarm/video'], keepAlive: true }
       }
     ]
   },
diff --git a/src/router/modules/regionSys.js b/src/router/modules/regionSys.js
index 9b4613a..43b8c38 100644
--- a/src/router/modules/regionSys.js
+++ b/src/router/modules/regionSys.js
@@ -85,6 +85,20 @@
         name: 'RegionAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/region/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/region/alarm/position',
+        name: 'RegionAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/region/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/region/alarm/video',
+        name: 'RegionAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/region/alarm/video'], keepAlive: true }
       }
     ]
   },
@@ -102,6 +116,20 @@
     },
     children: [
       {
+        path: '/region/staff/add',
+        name: 'RegionStaffAdd',
+        component: () => import('@/views/staff/staffAdd'),
+        hidden: true,
+        meta: { title: '人员登记', icon: '', permission: ['/region/staff/add'], keepAlive: true }
+      },
+      {
+        path: '/region/staff/edit',
+        name: 'RegionStaffEdit',
+        component: () => import('@/views/staff/staffEdit'),
+        hidden: true,
+        meta: { title: '人员编辑', icon: '', permission: ['/region/staff/edit'], keepAlive: true }
+      },
+      {
         path: '/region/staff/list',
         name: 'RegionStaffList',
         component: () => import('@/views/staff/staffList'),
diff --git a/src/views/alarm/alarmList.vue b/src/views/alarm/alarmList.vue
index 704f797..91967a0 100644
--- a/src/views/alarm/alarmList.vue
+++ b/src/views/alarm/alarmList.vue
@@ -37,7 +37,7 @@
             </el-col>
 
             <el-col :span="4" 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" @click="fetchData()">搜索</el-button>
             </el-col>
           </el-row>
         </el-form>
@@ -48,7 +48,7 @@
       <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="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>
@@ -66,8 +66,8 @@
         <!--操作列-->
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
-            <el-button type="text" @click="detail(scope.row)">位置</el-button>
-            <el-button v-if="hasPerm('/car/update')" type="text" @click="edit(scope.row)">视频</el-button>
+            <el-button type="text" @click="position(scope.row)">位置</el-button>
+            <el-button v-if="hasPerm('/car/update')" type="text" @click="video(scope.row)">视频</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -185,6 +185,14 @@
     this.fetchData() // 获取数据
   },
   methods: {
+    video(row){
+      const code = this.$store.getters.currentSystem.code
+      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId }})
+    },
+    position(row){
+      const code = this.$store.getters.currentSystem.code
+      this.$router.push({ path: '/' + code + '/alarm/position', query: {  id: row.deviceId }})
+    },
     batchExport() {
       // 全屏加载动画
       const loading = this.$loading({
@@ -254,6 +262,8 @@
       getAlarmList(this.listQuery).then(response => {
         if (response.code === 200) {
           this.list = response.data.rows
+          console.log('&&&')
+          console.log(this.list)
           this.total = parseInt(response.data.total)
         } else {
           this.$message.error(response.message)
diff --git a/src/views/alarm/alarmMonitor.vue b/src/views/alarm/alarmMonitor.vue
new file mode 100644
index 0000000..517d6e9
--- /dev/null
+++ b/src/views/alarm/alarmMonitor.vue
@@ -0,0 +1,80 @@
+<template>
+  <div>
+    <el-row>
+      <!--<el-col :span="6">-->
+        <!--&lt;!&ndash;<video-tree @click="handleCameraClicked"/>&ndash;&gt;-->
+      <!--</el-col>-->
+
+      <el-col :span="18" :offset="3">
+        <web-play ref="webCtrl" />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+// import VideoTree from './videoTree'
+import WebPlay from './webPlay'
+import { getDetailDevice } from '@/api/device'
+export default {
+  name: 'VideoMonitor',
+  components: { WebPlay },
+  data() {
+    return {
+      camera:{
+        ip:'',
+        port:'',
+        username:'',
+        password:''
+      }
+    }
+  },
+  mounted() {
+
+  },
+  activated() {
+    if (this.$route.query && this.$route.query.id) {
+      const id = this.$route.query.id
+      getDetailDevice(id).then(response => {
+          if (response.code === 200) {
+            console.log(response.data)
+            this.camera.ip = response.data.ip
+            this.camera.port = response.data.port
+            this.camera.username = response.data.username
+            this.camera.password = response.data.password
+            this.handleCamera()
+          }
+      })
+    }
+  },
+  methods: {
+    handleCamera(){
+      if (typeof this.camera.ip === 'undefined' || this.camera.ip === '') {
+        console.log('ip is null')
+        return false
+      }
+      if (typeof this.camera.port === 'undefined' || this.camera.port === '') {
+        console.log('port is null')
+        return false
+      }else{
+        this.camera.ip += (':'+ this.camera.port)
+      }
+      if (typeof this.camera.username === 'undefined' || this.camera.username === '') {
+        console.log('username is null')
+        return false
+      }
+      if (typeof this.camera.password === 'undefined' || this.camera.password === '') {
+        console.log('password is null')
+        return false
+      }
+
+      // 开始预览
+      this.$refs.webCtrl.$refs.play.contentWindow.startPlayReal(this.camera)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

diff --git a/src/router/modules/doorSys.js b/src/router/modules/doorSys.js
index 8017e4b..6bd1506 100644
--- a/src/router/modules/doorSys.js
+++ b/src/router/modules/doorSys.js
@@ -87,6 +87,20 @@
         name: 'DoorAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/door/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/door/alarm/position',
+        name: 'DoorAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/door/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/door/alarm/video',
+        name: 'DoorAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/door/alarm/video'], keepAlive: true }
       }
     ]
   },
@@ -262,5 +276,26 @@
         meta: { title: '营门出入次数统计', icon: '', permission: ['/door/statistics/doorCount'], keepAlive: true }
       }
     ]
+  },
+  {
+    path: '/door/area',
+    component: Layout,
+    redirect: '/door/area',
+    name: 'DoorArea',
+    alwaysShow: true,
+    meta: {
+      title: '区域管理',
+      icon: 'icon-area', // 图标
+      permission: ['/door/area'], // 权限名称
+      sys: '/door'
+    },
+    children: [
+      {
+        path: '/door/area/list',
+        name: 'DoorAreaList',
+        component: () => import('@/views/area/areaList'),
+        meta: { title: '区域列表', icon: '', permission: ['/door/area/list'], keepAlive: true }
+      }
+    ]
   }
 ]
diff --git a/src/router/modules/fenceSys.js b/src/router/modules/fenceSys.js
index 0d784b0..e2962bd 100644
--- a/src/router/modules/fenceSys.js
+++ b/src/router/modules/fenceSys.js
@@ -85,6 +85,20 @@
         name: 'FenceAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/fence/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/fence/alarm/position',
+        name: 'FenceAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/fence/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/fence/alarm/video',
+        name: 'FenceAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/fence/alarm/video'], keepAlive: true }
       }
     ]
   },
diff --git a/src/router/modules/keySys.js b/src/router/modules/keySys.js
index f3a027b..832744b 100644
--- a/src/router/modules/keySys.js
+++ b/src/router/modules/keySys.js
@@ -85,6 +85,20 @@
         name: 'KeyAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/key/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/key/alarm/position',
+        name: 'KeyAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/key/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/key/alarm/video',
+        name: 'KeyAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/key/alarm/video'], keepAlive: true }
       }
     ]
   },
diff --git a/src/router/modules/regionSys.js b/src/router/modules/regionSys.js
index 9b4613a..43b8c38 100644
--- a/src/router/modules/regionSys.js
+++ b/src/router/modules/regionSys.js
@@ -85,6 +85,20 @@
         name: 'RegionAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/region/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/region/alarm/position',
+        name: 'RegionAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/region/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/region/alarm/video',
+        name: 'RegionAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/region/alarm/video'], keepAlive: true }
       }
     ]
   },
@@ -102,6 +116,20 @@
     },
     children: [
       {
+        path: '/region/staff/add',
+        name: 'RegionStaffAdd',
+        component: () => import('@/views/staff/staffAdd'),
+        hidden: true,
+        meta: { title: '人员登记', icon: '', permission: ['/region/staff/add'], keepAlive: true }
+      },
+      {
+        path: '/region/staff/edit',
+        name: 'RegionStaffEdit',
+        component: () => import('@/views/staff/staffEdit'),
+        hidden: true,
+        meta: { title: '人员编辑', icon: '', permission: ['/region/staff/edit'], keepAlive: true }
+      },
+      {
         path: '/region/staff/list',
         name: 'RegionStaffList',
         component: () => import('@/views/staff/staffList'),
diff --git a/src/views/alarm/alarmList.vue b/src/views/alarm/alarmList.vue
index 704f797..91967a0 100644
--- a/src/views/alarm/alarmList.vue
+++ b/src/views/alarm/alarmList.vue
@@ -37,7 +37,7 @@
             </el-col>
 
             <el-col :span="4" 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" @click="fetchData()">搜索</el-button>
             </el-col>
           </el-row>
         </el-form>
@@ -48,7 +48,7 @@
       <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="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>
@@ -66,8 +66,8 @@
         <!--操作列-->
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
-            <el-button type="text" @click="detail(scope.row)">位置</el-button>
-            <el-button v-if="hasPerm('/car/update')" type="text" @click="edit(scope.row)">视频</el-button>
+            <el-button type="text" @click="position(scope.row)">位置</el-button>
+            <el-button v-if="hasPerm('/car/update')" type="text" @click="video(scope.row)">视频</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -185,6 +185,14 @@
     this.fetchData() // 获取数据
   },
   methods: {
+    video(row){
+      const code = this.$store.getters.currentSystem.code
+      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId }})
+    },
+    position(row){
+      const code = this.$store.getters.currentSystem.code
+      this.$router.push({ path: '/' + code + '/alarm/position', query: {  id: row.deviceId }})
+    },
     batchExport() {
       // 全屏加载动画
       const loading = this.$loading({
@@ -254,6 +262,8 @@
       getAlarmList(this.listQuery).then(response => {
         if (response.code === 200) {
           this.list = response.data.rows
+          console.log('&&&')
+          console.log(this.list)
           this.total = parseInt(response.data.total)
         } else {
           this.$message.error(response.message)
diff --git a/src/views/alarm/alarmMonitor.vue b/src/views/alarm/alarmMonitor.vue
new file mode 100644
index 0000000..517d6e9
--- /dev/null
+++ b/src/views/alarm/alarmMonitor.vue
@@ -0,0 +1,80 @@
+<template>
+  <div>
+    <el-row>
+      <!--<el-col :span="6">-->
+        <!--&lt;!&ndash;<video-tree @click="handleCameraClicked"/>&ndash;&gt;-->
+      <!--</el-col>-->
+
+      <el-col :span="18" :offset="3">
+        <web-play ref="webCtrl" />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+// import VideoTree from './videoTree'
+import WebPlay from './webPlay'
+import { getDetailDevice } from '@/api/device'
+export default {
+  name: 'VideoMonitor',
+  components: { WebPlay },
+  data() {
+    return {
+      camera:{
+        ip:'',
+        port:'',
+        username:'',
+        password:''
+      }
+    }
+  },
+  mounted() {
+
+  },
+  activated() {
+    if (this.$route.query && this.$route.query.id) {
+      const id = this.$route.query.id
+      getDetailDevice(id).then(response => {
+          if (response.code === 200) {
+            console.log(response.data)
+            this.camera.ip = response.data.ip
+            this.camera.port = response.data.port
+            this.camera.username = response.data.username
+            this.camera.password = response.data.password
+            this.handleCamera()
+          }
+      })
+    }
+  },
+  methods: {
+    handleCamera(){
+      if (typeof this.camera.ip === 'undefined' || this.camera.ip === '') {
+        console.log('ip is null')
+        return false
+      }
+      if (typeof this.camera.port === 'undefined' || this.camera.port === '') {
+        console.log('port is null')
+        return false
+      }else{
+        this.camera.ip += (':'+ this.camera.port)
+      }
+      if (typeof this.camera.username === 'undefined' || this.camera.username === '') {
+        console.log('username is null')
+        return false
+      }
+      if (typeof this.camera.password === 'undefined' || this.camera.password === '') {
+        console.log('password is null')
+        return false
+      }
+
+      // 开始预览
+      this.$refs.webCtrl.$refs.play.contentWindow.startPlayReal(this.camera)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/alarm/alarmNow.vue b/src/views/alarm/alarmNow.vue
index 03bb5ea..66055b1 100644
--- a/src/views/alarm/alarmNow.vue
+++ b/src/views/alarm/alarmNow.vue
@@ -48,7 +48,7 @@
       <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="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>
@@ -66,8 +66,8 @@
         <el-table-column label="操作" align="center" width="180">
           <template slot-scope="scope">
             <el-button v-if="hasPerm('/alarm/cancel')" type="text" @click="alarmCancel(scope.row)">取消报警</el-button>
-            <el-button type="text" @click="detail(scope.row)">位置</el-button>
-            <el-button type="text" @click="edit(scope.row)">视频</el-button>
+            <el-button type="text" @click="position(scope.row)">位置</el-button>
+            <el-button v-if="hasPerm('/car/update')" type="text" @click="video(scope.row)">视频</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -183,6 +183,14 @@
     this.fetchData() // 获取数据
   },
   methods: {
+    video(row){
+      const code = this.$store.getters.currentSystem.code
+      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId }})
+    },
+    position(row){
+      const code = this.$store.getters.currentSystem.code
+      this.$router.push({ path: '/' + code + '/alarm/position', query: {  id: row.deviceId }})
+    },
     batchExport() {
       // 全屏加载动画
       const loading = this.$loading({

diff --git a/src/router/modules/doorSys.js b/src/router/modules/doorSys.js
index 8017e4b..6bd1506 100644
--- a/src/router/modules/doorSys.js
+++ b/src/router/modules/doorSys.js
@@ -87,6 +87,20 @@
         name: 'DoorAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/door/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/door/alarm/position',
+        name: 'DoorAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/door/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/door/alarm/video',
+        name: 'DoorAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/door/alarm/video'], keepAlive: true }
       }
     ]
   },
@@ -262,5 +276,26 @@
         meta: { title: '营门出入次数统计', icon: '', permission: ['/door/statistics/doorCount'], keepAlive: true }
       }
     ]
+  },
+  {
+    path: '/door/area',
+    component: Layout,
+    redirect: '/door/area',
+    name: 'DoorArea',
+    alwaysShow: true,
+    meta: {
+      title: '区域管理',
+      icon: 'icon-area', // 图标
+      permission: ['/door/area'], // 权限名称
+      sys: '/door'
+    },
+    children: [
+      {
+        path: '/door/area/list',
+        name: 'DoorAreaList',
+        component: () => import('@/views/area/areaList'),
+        meta: { title: '区域列表', icon: '', permission: ['/door/area/list'], keepAlive: true }
+      }
+    ]
   }
 ]
diff --git a/src/router/modules/fenceSys.js b/src/router/modules/fenceSys.js
index 0d784b0..e2962bd 100644
--- a/src/router/modules/fenceSys.js
+++ b/src/router/modules/fenceSys.js
@@ -85,6 +85,20 @@
         name: 'FenceAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/fence/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/fence/alarm/position',
+        name: 'FenceAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/fence/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/fence/alarm/video',
+        name: 'FenceAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/fence/alarm/video'], keepAlive: true }
       }
     ]
   },
diff --git a/src/router/modules/keySys.js b/src/router/modules/keySys.js
index f3a027b..832744b 100644
--- a/src/router/modules/keySys.js
+++ b/src/router/modules/keySys.js
@@ -85,6 +85,20 @@
         name: 'KeyAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/key/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/key/alarm/position',
+        name: 'KeyAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/key/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/key/alarm/video',
+        name: 'KeyAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/key/alarm/video'], keepAlive: true }
       }
     ]
   },
diff --git a/src/router/modules/regionSys.js b/src/router/modules/regionSys.js
index 9b4613a..43b8c38 100644
--- a/src/router/modules/regionSys.js
+++ b/src/router/modules/regionSys.js
@@ -85,6 +85,20 @@
         name: 'RegionAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/region/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/region/alarm/position',
+        name: 'RegionAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/region/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/region/alarm/video',
+        name: 'RegionAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/region/alarm/video'], keepAlive: true }
       }
     ]
   },
@@ -102,6 +116,20 @@
     },
     children: [
       {
+        path: '/region/staff/add',
+        name: 'RegionStaffAdd',
+        component: () => import('@/views/staff/staffAdd'),
+        hidden: true,
+        meta: { title: '人员登记', icon: '', permission: ['/region/staff/add'], keepAlive: true }
+      },
+      {
+        path: '/region/staff/edit',
+        name: 'RegionStaffEdit',
+        component: () => import('@/views/staff/staffEdit'),
+        hidden: true,
+        meta: { title: '人员编辑', icon: '', permission: ['/region/staff/edit'], keepAlive: true }
+      },
+      {
         path: '/region/staff/list',
         name: 'RegionStaffList',
         component: () => import('@/views/staff/staffList'),
diff --git a/src/views/alarm/alarmList.vue b/src/views/alarm/alarmList.vue
index 704f797..91967a0 100644
--- a/src/views/alarm/alarmList.vue
+++ b/src/views/alarm/alarmList.vue
@@ -37,7 +37,7 @@
             </el-col>
 
             <el-col :span="4" 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" @click="fetchData()">搜索</el-button>
             </el-col>
           </el-row>
         </el-form>
@@ -48,7 +48,7 @@
       <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="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>
@@ -66,8 +66,8 @@
         <!--操作列-->
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
-            <el-button type="text" @click="detail(scope.row)">位置</el-button>
-            <el-button v-if="hasPerm('/car/update')" type="text" @click="edit(scope.row)">视频</el-button>
+            <el-button type="text" @click="position(scope.row)">位置</el-button>
+            <el-button v-if="hasPerm('/car/update')" type="text" @click="video(scope.row)">视频</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -185,6 +185,14 @@
     this.fetchData() // 获取数据
   },
   methods: {
+    video(row){
+      const code = this.$store.getters.currentSystem.code
+      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId }})
+    },
+    position(row){
+      const code = this.$store.getters.currentSystem.code
+      this.$router.push({ path: '/' + code + '/alarm/position', query: {  id: row.deviceId }})
+    },
     batchExport() {
       // 全屏加载动画
       const loading = this.$loading({
@@ -254,6 +262,8 @@
       getAlarmList(this.listQuery).then(response => {
         if (response.code === 200) {
           this.list = response.data.rows
+          console.log('&&&')
+          console.log(this.list)
           this.total = parseInt(response.data.total)
         } else {
           this.$message.error(response.message)
diff --git a/src/views/alarm/alarmMonitor.vue b/src/views/alarm/alarmMonitor.vue
new file mode 100644
index 0000000..517d6e9
--- /dev/null
+++ b/src/views/alarm/alarmMonitor.vue
@@ -0,0 +1,80 @@
+<template>
+  <div>
+    <el-row>
+      <!--<el-col :span="6">-->
+        <!--&lt;!&ndash;<video-tree @click="handleCameraClicked"/>&ndash;&gt;-->
+      <!--</el-col>-->
+
+      <el-col :span="18" :offset="3">
+        <web-play ref="webCtrl" />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+// import VideoTree from './videoTree'
+import WebPlay from './webPlay'
+import { getDetailDevice } from '@/api/device'
+export default {
+  name: 'VideoMonitor',
+  components: { WebPlay },
+  data() {
+    return {
+      camera:{
+        ip:'',
+        port:'',
+        username:'',
+        password:''
+      }
+    }
+  },
+  mounted() {
+
+  },
+  activated() {
+    if (this.$route.query && this.$route.query.id) {
+      const id = this.$route.query.id
+      getDetailDevice(id).then(response => {
+          if (response.code === 200) {
+            console.log(response.data)
+            this.camera.ip = response.data.ip
+            this.camera.port = response.data.port
+            this.camera.username = response.data.username
+            this.camera.password = response.data.password
+            this.handleCamera()
+          }
+      })
+    }
+  },
+  methods: {
+    handleCamera(){
+      if (typeof this.camera.ip === 'undefined' || this.camera.ip === '') {
+        console.log('ip is null')
+        return false
+      }
+      if (typeof this.camera.port === 'undefined' || this.camera.port === '') {
+        console.log('port is null')
+        return false
+      }else{
+        this.camera.ip += (':'+ this.camera.port)
+      }
+      if (typeof this.camera.username === 'undefined' || this.camera.username === '') {
+        console.log('username is null')
+        return false
+      }
+      if (typeof this.camera.password === 'undefined' || this.camera.password === '') {
+        console.log('password is null')
+        return false
+      }
+
+      // 开始预览
+      this.$refs.webCtrl.$refs.play.contentWindow.startPlayReal(this.camera)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/alarm/alarmNow.vue b/src/views/alarm/alarmNow.vue
index 03bb5ea..66055b1 100644
--- a/src/views/alarm/alarmNow.vue
+++ b/src/views/alarm/alarmNow.vue
@@ -48,7 +48,7 @@
       <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="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>
@@ -66,8 +66,8 @@
         <el-table-column label="操作" align="center" width="180">
           <template slot-scope="scope">
             <el-button v-if="hasPerm('/alarm/cancel')" type="text" @click="alarmCancel(scope.row)">取消报警</el-button>
-            <el-button type="text" @click="detail(scope.row)">位置</el-button>
-            <el-button type="text" @click="edit(scope.row)">视频</el-button>
+            <el-button type="text" @click="position(scope.row)">位置</el-button>
+            <el-button v-if="hasPerm('/car/update')" type="text" @click="video(scope.row)">视频</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -183,6 +183,14 @@
     this.fetchData() // 获取数据
   },
   methods: {
+    video(row){
+      const code = this.$store.getters.currentSystem.code
+      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId }})
+    },
+    position(row){
+      const code = this.$store.getters.currentSystem.code
+      this.$router.push({ path: '/' + code + '/alarm/position', query: {  id: row.deviceId }})
+    },
     batchExport() {
       // 全屏加载动画
       const loading = this.$loading({
diff --git a/src/views/alarm/alarmPosition.vue b/src/views/alarm/alarmPosition.vue
new file mode 100644
index 0000000..51f915e
--- /dev/null
+++ b/src/views/alarm/alarmPosition.vue
@@ -0,0 +1,786 @@
+<template>
+  <div class="main-page">
+    <!-- 中间平面图区域 -->
+    <div class="map-overview">
+      <img ref="bgImg" :src="bgImageSrc" height="100%" @load="backgroundImageReady">
+
+      <div
+        v-for="item in devList"
+        :id="item.id"
+        :key="item.id"
+        :style="{ position: 'absolute', top: item.y * imgSize.height / imgSizeOriginal.height + 'px', left: (item.x * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
+        class="point-camera"
+        @click="detailDev(item, $event)" />
+    </div>
+    <!-- 右侧设备详情及操作区域 -->
+    <div v-show="showDevDetail" ref="dev-detail-block" class="dev-detail-block">
+      <span class="dev-detail-close" @click="showDevDetail=false" />
+      <el-row style="margin-top: -25px;">
+        <el-col :span="24">设备名称
+          <span class="dev-detail-span">{{ dataForm.name }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">设备编号
+          <span class="dev-detail-span">{{ dataForm.devcode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">设备类型
+          <span class="dev-detail-span">{{ dataForm.typeName }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">在线状态
+          <span class="dev-detail-span">{{ dataForm.onlineStatusName }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">安装日期
+          <span class="dev-detail-span">{{ dataForm.installDate }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">安装位置
+          <span class="dev-detail-span">{{ dataForm.position }}</span>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getProject } from '@/utils/baseConfig'
+import DeviceDetail from '@/views/deviceManage/deviceDetail'
+import tg_main from '../../assets/overview_images/tg/mapOverviewTg.jpg'
+import tg_3_1 from '../../assets/overview_images/tg/mapOverviewTg-3-1.jpg'
+import tg_4_1 from '../../assets/overview_images/tg/mapOverviewTg-4-1.jpg'
+import tg_4_5 from '../../assets/overview_images/tg/mapOverviewTg-4-5.jpg'
+import { getDetailDevice } from '@/api/device'
+
+// const cameraTypes = [4, 5, 8, 9, 10, 11]
+export default {
+  name: 'AlarmPosition',
+  components: { DeviceDetail },
+  data() {
+    return {
+      title: getProject().title,
+      bgImageSrc: tg_main,
+      devListParams: {
+        picture: '1',
+        areaTypeId: 1,
+        deviceTypes: []
+      },
+      dev: {
+        alarm: 0,
+        onLine: 0,
+        closed: 0,
+        offLine: 0
+      },
+      imgSizeOriginal: {
+        width: 2245,
+        height: 1586
+      }, // 图片原尺寸
+      imgSize: {
+        width: 2245,
+        height: 1586
+      }, // 图片显示尺寸
+      winSize: {
+        width: 1440,
+        height: 789
+      }, // 屏幕窗口尺寸
+      halfLeft: 0,
+      showDevDetail: false, // 是否显示设备详情
+      alarmList: [], // 报警列表
+      alarmColumns: [
+        {
+          text: '设备编号',
+          value: 'devcode',
+          align: 'center'
+        },
+        {
+          text: '报警内容',
+          value: 'alarmContent',
+          align: 'center'
+        },
+        {
+          text: '报警时间',
+          value: 'alarmTime',
+          align: 'center',
+          width: 165
+        }
+      ], // 报警列表显示列
+      tableShow: true, // 是否显示告警列表
+      devList: [], // 设备列表（在地图上显示）
+      dataForm: {
+        id: '', // id
+        name: '', // 设备名
+        devcode: '', // 设备编号
+        typeName: '', // 设备类型
+        model: '', // 设备型号
+        onlineStatusName: '', // 在线状态
+        deviceStatusName: '', // 设备状态
+        position: '', // 安装位置
+        installDate: '', // 安装日期
+        inOutName: '' // 进出营
+      }, // 设备详情表单
+      devPosition:{
+        picture: '',
+        x: '',
+        y: ''
+      },
+      checkDevType: [true, false] // 选中设备类型
+    }
+  },
+  mounted() {
+    this.initWindowSize()
+    if (this.$route.query && this.$route.query.id) {
+      const id = this.$route.query.id
+      getDetailDevice(id).then(response => {
+        if (response.code === 200) {
+          console.log(response.data)
+          this.devPosition.picture = response.data.picture
+          this.devPosition.x = response.data.x
+          this.devPosition.y = response.data.y
+          if(this.devPosition.picture === '1'){
+            this.bgImageSrc = tg_main
+          }else if(this.devPosition.picture === '2'){
+            this.bgImageSrc = tg_3_1
+          }else if(this.devPosition.picture === '3'){
+            this.bgImageSrc = tg_4_1
+          }else if(this.devPosition.picture === '4'){
+            this.bgImageSrc = tg_4_5
+          }else{
+            this.$message.warning('该设备暂无位置信息')
+            return
+          }
+          this.devList = []
+          if (this.devPosition.x !== '' && this.devPosition.y !== '') {
+            this.devList.push(response.data)
+          }
+        }
+      })
+    }
+    const that = this
+    window.onresize = function() {
+      that.initWindowSize()
+      that.getBgImageSize()
+    }
+  },
+  methods: {
+    // 获取窗口大小
+    initWindowSize() {
+      // 获取窗体尺寸
+      this.winSize = {
+        width: document.documentElement.clientWidth,
+        height: document.documentElement.clientHeight
+      }
+    },
+    // 获取图像大小
+    getBgImageSize() {
+      // 获取图片尺寸
+      this.imgSize = {
+        width: this.$refs['bgImg'].width,
+        height: this.$refs['bgImg'].height
+      }
+      this.halfLeft = (this.winSize.width - this.imgSize.width) / 2
+    },
+    // 重新绘制设备点位
+    reDrawDevs() {
+      const halfLeft = (this.winSize.width - this.imgSize.width) / 2
+
+      // 调整球机的设备位置
+      const that = this
+      this.devList.forEach(function(item) {
+        const point = document.getElementById(item.id)
+
+        if (point !== null) {
+          if (item.x !== '' && item.y !== '') {
+            point.style.position = 'absolute'
+            point.style.top = item.y * that.imgSize.height / that.imgSizeOriginal.height + 'px'
+            point.style.left = (item.x * that.imgSize.width / that.imgSizeOriginal.width + halfLeft) + 'px'
+          } else {
+            point.style.display = 'none'
+          }
+        }
+      })
+    },
+    // 平面图就绪时执行函数
+    backgroundImageReady() {
+      this.getBgImageSize()
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    },
+    backToIndex() {
+      this.$router.push('/door/alarm/now')
+    },
+    // 查询并显示设备详情
+    detailDev(dev, event) {
+      this.resetDevDetail()
+      getDetailDevice(dev.id).then(response => {
+        if (response.code === 200) {
+          this.dataForm = {
+            id: dev.id,
+            name: dev.name,
+            devcode: dev.devcode,
+            typeName: response.data.typeName,
+            model: dev.model,
+            onlineStatusName: response.data.onlineStatusName,
+            position: dev.position,
+            installDate: dev.installDate,
+            inOutName: response.data.inOutName,
+            deviceStatusName: response.data.deviceStatusName
+          }
+        } else {
+          this.$message.error(response.message)
+        }
+      })
+
+      // 弹窗显示设备详情
+      const targetDev = event.currentTarget // 取到点击到的设备图标div
+
+      this.showDevDetail = true
+      let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+      top = top + 100
+      this.$refs['dev-detail-block'].style.position = 'absolute'
+      this.$refs['dev-detail-block'].style.top = top + 'px'
+      this.$refs['dev-detail-block'].style.left = targetDev.style.left
+    },
+    // 点击报警列表
+    alarmRowClick(dev, column, event) {
+
+    },
+    // 清除设备详情
+    resetDevDetail() {
+      this.dataForm = {
+        id: '', // id
+        name: '', // 设备名
+        devcode: '', // 设备编号
+        typeName: '', // 设备类型
+        model: '', // 设备型号
+        onlineStatusName: '', // 在线状态
+        deviceStatusName: '', // 设备状态
+        position: '', // 安装位置
+        installDate: '', // 安装日期
+        inOutName: '' // 进出营
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+  .main-page {
+    background-size: cover;
+    background-color: #023d83;
+    height: 100vh;
+  }
+
+  .main-header {
+    width: 100vw;
+  }
+  .main-title {
+    height: 90px;
+    text-align: center;
+    padding-top: 20px;
+    background: url("../../assets/overview_images/title-background-1920.png");
+  }
+
+  .main-title img {
+    display: inline-block;
+    margin-right: 15px;
+    width: 52px;
+    height: 32px;
+    vertical-align: text-bottom;
+  }
+
+  .home-icon {
+    width: 26px;
+    height: 26px;
+    position: fixed;
+    left: 20px;
+    top: 20px;
+  }
+  .exit-icon {
+    width: 26px;
+    height: 26px;
+    position: fixed;
+    right: 20px;
+    top: 20px;
+  }
+  .home-icon img, .exit-icon img {
+    width: 26px;
+    height: 26px;
+  }
+
+  .main-title span {
+    color: #FFFFFF;
+    font-size: 32px;
+    font-weight: bold;
+    font-family: 'Microsoft YaHei';
+  }
+
+  .map-overview {
+    /*margin-top: 50px;*/
+    /*width: 1100px;*/
+    height: calc(90vh - 200px);
+    text-align: center;
+    position: relative;
+  }
+  .point {
+    width: 24px;
+    height: 24px;
+    position: relative;
+    display: inline-block;
+    cursor: pointer;
+  }
+  .point-camera {
+    background: url("../../assets/overview_images/icons/icon-camera-point.png");
+    background-size: contain;
+    @extend .point;
+  }
+  .point-fence {
+    background: url("../../assets/overview_images/icons/icon-fence-unchecked.png");
+    background-size: contain;
+    @extend .point;
+  }
+
+  .statis-block {
+    text-align: center;
+    margin-top: 20px;
+    font-size: 48px;
+  }
+  .sub-title {
+    text-align: center;
+    font-size: 32px;
+  }
+  .sub-data-block {
+    width: 122px;
+    height: 155px;
+  }
+  .dev-normal {
+    background: url("../../assets/overview_images/normal.png");
+    background-size: contain;
+    color: #00ff0c;
+  }
+  .dev-alarm {
+    background: url("../../assets/overview_images/alarm.png");
+    background-size: contain;
+    color: #ff0000;
+  }
+  .dev-offline {
+    background: url("../../assets/overview_images/offline.png");
+    background-size: contain;
+    color: #fff000;
+  }
+  .dev-closed {
+    background: url("../../assets/overview_images/closed.png");
+    background-size: contain;
+    color: #00fff6;
+  }
+
+  .dev-status-block {
+    position: absolute;
+    top: 100px;
+    left: 20px;
+    color: #ffffff;
+  }
+
+  .alarm-now-block {
+    position: absolute;
+    z-index: 500;
+    top: 300px;
+    left: 20px;
+    width: 480px;
+    .map-alarm-div-header {
+      line-height: 40px;
+      padding-left: 10px;
+      color: #00fff6;
+      font-size: 24px;
+      .icon-right {
+        cursor: pointer;
+        margin-left: 20px;
+      }
+    }
+    .el-scrollbar {
+      /*height: 200px;*/
+      width: 100%;
+    }
+    .moredatascollor {
+      height: 200px;
+    }
+    .el-scrollbar__wrap {
+      overflow-y: auto;
+      overflow-x: hidden;
+      margin-bottom: 0px !important;
+    }
+    .el-table {
+      font-size: 12px;
+    }
+    .transition-box {
+      margin-bottom: 10px;
+      width: 200px;
+      height: 100px;
+      border-radius: 4px;
+      background-color: #409EFF;
+      text-align: center;
+      color: #fff;
+      padding: 40px 20px;
+      box-sizing: border-box;
+      margin-right: 20px;
+    }
+  }
+
+  .alarm-now-block /deep/ .el-table th {
+    background-color: #0757A0;
+    padding: 12px 0px;
+    font-size: 16px;
+    color: #00fff6;
+    font-weight: normal;
+  }
+
+  .alarm-now-block /deep/ .el-table td {
+    /*background-color: #0757A0;*/
+    padding: 10px 0px;
+    font-size: 15px;
+    color: #FFFFFF;
+    font-weight: normal;
+  }
+
+  .alarm-now-block /deep/ .el-table__row td {
+    background-color: #023D83;
+  }
+  .alarm-now-block /deep/ .el-table__body tr:hover > td {
+    background-color: #0757A0;
+  }
+  .alarm-now-block /deep/ tr.el-table__row--striped td {
+    background-color: #0757A0;
+  }
+
+  .map-tab {
+    position: absolute;
+    right: 20px;
+    top: 100px;
+    width: 300px;
+    button {
+      margin: 5px 0px;
+    }
+  }
+
+  .tab-top {
+    position: relative;
+    width: 284px;
+    height: 24px;
+    background: url("../../assets/overview_images/tab-top-bg.png");
+  }
+  .tab-bottom {
+    position: relative;
+    width: 284px;
+    height: 24px;
+    background: url("../../assets/overview_images/tab-bottom-bg.png");
+  }
+  .map-index-button {
+    position: relative;
+    width: 284px;
+    height: 74px;
+    background: url("../../assets/overview_images/tab-index-unchecked.png");
+    font-size: 32px;
+    line-height: 74px;
+    text-align: center;
+    color: #FFFFFF;
+    cursor: pointer;
+  }
+  .index-selected {
+    background: url("../../assets/overview_images/tab-index-checked.png");
+  }
+  .sub-tab-guider {
+    width: 149px;
+    height: 50px;
+    background: url("../../assets/overview_images/sub-tab-guider.png");
+  }
+  .sub-tab-border {
+    width: 204px;
+    height: 253px;
+    background: url("../../assets/overview_images/sub-tab-border.png");
+  }
+  .sub-tab-content {
+    text-align: center;
+    color: #FFFFFF;
+    font-size: 28px;
+    cursor: pointer;
+    width: 200px;
+  }
+
+  .dev-detail-block {
+    /*position: absolute;*/
+    /*right: 20px;*/
+    /*bottom: 100px;*/
+    width: 520px;
+    height: 335px;
+    color: #00FFFF;
+    font-size: 24px;
+    font-family: "Microsoft YaHei";
+    padding: 45px 60px;
+    line-height: 35px;
+    background: url("../../assets/overview_images/dev-info.png");
+    .dev-detail-span {
+      margin-left: 20px;
+    }
+    .dev-detail-close::before {
+      content: "\2716";
+      position: relative;
+      top: -20px;
+      right: -410px;
+      cursor: pointer;
+    }
+  }
+
+  .dev-footer {
+    position: absolute;
+    bottom: 25px;
+  }
+
+  .dev-icon {
+    width: 195px;
+    height: 105px;
+    vertical-align: middle;
+    line-height: 65px;
+    padding: 20px 30px !important;
+    margin-left: 15px;
+    cursor: pointer;
+    background: url("../../assets/overview_images/dev-type-border-unchecked.png");
+  }
+
+  .dev-icon img {
+    height: 40px;
+    vertical-align:middle;
+  }
+  .dev-icon span {
+    font-size: 20px;
+    color: #00D2FF;
+    line-height: 65px;
+    height: 65px;
+    vertical-align:middle;
+    float: right;
+  }
+
+  .dev-type-selected {
+    background: url("../../assets/overview_images/dev-type-border-checked.png");
+  }
+  .dev-type-selected span {
+    color: #f58a88 !important;
+  }
+
+  /*@media(max-width: 1440px) {*/
+  /*  .main-title {*/
+  /*    height: 68px;*/
+  /*    padding-top: 20px;*/
+  /*    background: url("../../assets/overview_images/title-background-1440.png");*/
+  /*  }*/
+  /*  .main-title span {*/
+  /*    font-size: 24px;*/
+  /*  }*/
+  /*  .main-title img {*/
+  /*    margin-right: 15px;*/
+  /*    width: 32px;*/
+  /*    height: 32px;*/
+  /*  }*/
+
+  /*  .home-icon {*/
+  /*    left: 18px;*/
+  /*    width: 18px;*/
+  /*    height: 18px;*/
+  /*  }*/
+  /*  .exit-icon {*/
+  /*    right: 18px;*/
+  /*    width: 18px;*/
+  /*    height: 18px;*/
+  /*  }*/
+
+  /*  .home-icon img, .exit-icon img {*/
+  /*    width: 18px;*/
+  /*    height: 18px;*/
+  /*  }*/
+
+  /*  .dev-icon span {*/
+  /*    font-size: 12px;*/
+  /*  }*/
+  /*}*/
+
+  @media(max-width: 1440px) {
+    .main-title {
+      height: 65px;
+      padding-top: 16px;
+      background: url("../../assets/overview_images/title-background-1366.png");
+    }
+    .main-title span {
+      font-size: 24px;
+    }
+    .main-title img {
+      margin-right: 15px;
+      width: 32px;
+      height: 32px;
+    }
+
+    .home-icon {
+      left: 16px;
+      width: 16px;
+      height: 16px;
+    }
+    .exit-icon {
+      right: 16px;
+      width: 16px;
+      height: 16px;
+    }
+
+    .home-icon img, .exit-icon img {
+      width: 20px;
+      height: 20px;
+    }
+
+    .map-overview {
+      margin-top: 35px;
+      height: calc(90vh - 150px);
+    }
+
+    .point {
+      width: 16px;
+      height: 16px;
+    }
+
+    .statis-block {
+      margin-top: 16px;
+      font-size: 36px;
+    }
+    .sub-title {
+      font-size: 24px;
+    }
+    .sub-data-block {
+      width: 90px;
+      height: 114px;
+    }
+
+    .dev-normal {
+      background: url("../../assets/overview_images/normal-1366.png");
+    }
+    .dev-alarm {
+      background: url("../../assets/overview_images/alarm-1366.png");
+    }
+    .dev-offline {
+      background: url("../../assets/overview_images/offline-1366.png");
+    }
+    .dev-closed {
+      background: url("../../assets/overview_images/closed-1366.png");
+    }
+
+    .dev-status-block {
+      top: 90px;
+      left: 16px;
+    }
+
+    .alarm-now-block {
+      top: 220px;
+      left: 16px;
+      width: 360px;
+      .map-alarm-div-header {
+        line-height: 32px;
+        font-size: 20px;
+      }
+    }
+
+    .alarm-now-block /deep/ .el-table th {
+      padding: 8px 0px;
+      font-size: 16px;
+    }
+    .alarm-now-block /deep/ .el-table td {
+      padding: 5px 0px;
+      font-size: 12px;
+    }
+
+    .map-tab {
+      right: 16px;
+      top: 90px;
+      width: 215px;
+      button {
+        margin: 5px 0px;
+      }
+    }
+    .tab-top {
+      width: 213px;
+      height: 18px;
+      background: url("../../assets/overview_images/tab-top-bg-1366.png");
+    }
+    .tab-bottom {
+      width: 213px;
+      height: 18px;
+      background: url("../../assets/overview_images/tab-bottom-bg-1366.png");
+    }
+    .map-index-button {
+      width: 210px;
+      height: 56px;
+      background: url("../../assets/overview_images/tab-index-unchecked-1366.png");
+      font-size: 24px;
+      line-height: 56px;
+    }
+    .index-selected {
+      background: url("../../assets/overview_images/tab-index-checked-1366.png");
+    }
+
+    .sub-tab-guider {
+      width: 110px;
+      height: 37px;
+      background: url("../../assets/overview_images/sub-tab-guider-1366.png");
+    }
+    .sub-tab-border {
+      width: 150px;
+      height: 186px;
+      background: url("../../assets/overview_images/sub-tab-border-1366.png");
+    }
+    .sub-tab-content {
+      font-size: 20px;
+      cursor: pointer;
+      width: 145px;
+    }
+
+    .dev-detail-block {
+      width: 390px;
+      height: 251px;
+      font-size: 16px;
+      padding: 30px 40px;
+      line-height: 28px;
+      background: url("../../assets/overview_images/dev-info-1366.png");
+      .dev-detail-close::before {
+        top: -12px;
+        right: -312px;
+      }
+    }
+
+    .dev-footer {
+      bottom: 20px;
+    }
+    .dev-icon {
+      width: 140px;
+      height: 76px;
+      line-height: 56px;
+      padding: 10px 16px !important;
+      margin-left: 15px;
+      background: url("../../assets/overview_images/dev-type-border-unchecked-1366.png");
+    }
+    .dev-icon img {
+      height: 32px;
+    }
+    .dev-icon span {
+      font-size: 16px;
+      line-height: 56px;
+      height: 56px;
+    }
+    .dev-type-selected {
+      background: url("../../assets/overview_images/dev-type-border-checked-1366.png");
+    }
+  }
+
+</style>

diff --git a/src/router/modules/doorSys.js b/src/router/modules/doorSys.js
index 8017e4b..6bd1506 100644
--- a/src/router/modules/doorSys.js
+++ b/src/router/modules/doorSys.js
@@ -87,6 +87,20 @@
         name: 'DoorAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/door/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/door/alarm/position',
+        name: 'DoorAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/door/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/door/alarm/video',
+        name: 'DoorAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/door/alarm/video'], keepAlive: true }
       }
     ]
   },
@@ -262,5 +276,26 @@
         meta: { title: '营门出入次数统计', icon: '', permission: ['/door/statistics/doorCount'], keepAlive: true }
       }
     ]
+  },
+  {
+    path: '/door/area',
+    component: Layout,
+    redirect: '/door/area',
+    name: 'DoorArea',
+    alwaysShow: true,
+    meta: {
+      title: '区域管理',
+      icon: 'icon-area', // 图标
+      permission: ['/door/area'], // 权限名称
+      sys: '/door'
+    },
+    children: [
+      {
+        path: '/door/area/list',
+        name: 'DoorAreaList',
+        component: () => import('@/views/area/areaList'),
+        meta: { title: '区域列表', icon: '', permission: ['/door/area/list'], keepAlive: true }
+      }
+    ]
   }
 ]
diff --git a/src/router/modules/fenceSys.js b/src/router/modules/fenceSys.js
index 0d784b0..e2962bd 100644
--- a/src/router/modules/fenceSys.js
+++ b/src/router/modules/fenceSys.js
@@ -85,6 +85,20 @@
         name: 'FenceAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/fence/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/fence/alarm/position',
+        name: 'FenceAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/fence/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/fence/alarm/video',
+        name: 'FenceAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/fence/alarm/video'], keepAlive: true }
       }
     ]
   },
diff --git a/src/router/modules/keySys.js b/src/router/modules/keySys.js
index f3a027b..832744b 100644
--- a/src/router/modules/keySys.js
+++ b/src/router/modules/keySys.js
@@ -85,6 +85,20 @@
         name: 'KeyAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/key/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/key/alarm/position',
+        name: 'KeyAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/key/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/key/alarm/video',
+        name: 'KeyAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/key/alarm/video'], keepAlive: true }
       }
     ]
   },
diff --git a/src/router/modules/regionSys.js b/src/router/modules/regionSys.js
index 9b4613a..43b8c38 100644
--- a/src/router/modules/regionSys.js
+++ b/src/router/modules/regionSys.js
@@ -85,6 +85,20 @@
         name: 'RegionAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/region/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/region/alarm/position',
+        name: 'RegionAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/region/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/region/alarm/video',
+        name: 'RegionAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/region/alarm/video'], keepAlive: true }
       }
     ]
   },
@@ -102,6 +116,20 @@
     },
     children: [
       {
+        path: '/region/staff/add',
+        name: 'RegionStaffAdd',
+        component: () => import('@/views/staff/staffAdd'),
+        hidden: true,
+        meta: { title: '人员登记', icon: '', permission: ['/region/staff/add'], keepAlive: true }
+      },
+      {
+        path: '/region/staff/edit',
+        name: 'RegionStaffEdit',
+        component: () => import('@/views/staff/staffEdit'),
+        hidden: true,
+        meta: { title: '人员编辑', icon: '', permission: ['/region/staff/edit'], keepAlive: true }
+      },
+      {
         path: '/region/staff/list',
         name: 'RegionStaffList',
         component: () => import('@/views/staff/staffList'),
diff --git a/src/views/alarm/alarmList.vue b/src/views/alarm/alarmList.vue
index 704f797..91967a0 100644
--- a/src/views/alarm/alarmList.vue
+++ b/src/views/alarm/alarmList.vue
@@ -37,7 +37,7 @@
             </el-col>
 
             <el-col :span="4" 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" @click="fetchData()">搜索</el-button>
             </el-col>
           </el-row>
         </el-form>
@@ -48,7 +48,7 @@
       <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="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>
@@ -66,8 +66,8 @@
         <!--操作列-->
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
-            <el-button type="text" @click="detail(scope.row)">位置</el-button>
-            <el-button v-if="hasPerm('/car/update')" type="text" @click="edit(scope.row)">视频</el-button>
+            <el-button type="text" @click="position(scope.row)">位置</el-button>
+            <el-button v-if="hasPerm('/car/update')" type="text" @click="video(scope.row)">视频</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -185,6 +185,14 @@
     this.fetchData() // 获取数据
   },
   methods: {
+    video(row){
+      const code = this.$store.getters.currentSystem.code
+      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId }})
+    },
+    position(row){
+      const code = this.$store.getters.currentSystem.code
+      this.$router.push({ path: '/' + code + '/alarm/position', query: {  id: row.deviceId }})
+    },
     batchExport() {
       // 全屏加载动画
       const loading = this.$loading({
@@ -254,6 +262,8 @@
       getAlarmList(this.listQuery).then(response => {
         if (response.code === 200) {
           this.list = response.data.rows
+          console.log('&&&')
+          console.log(this.list)
           this.total = parseInt(response.data.total)
         } else {
           this.$message.error(response.message)
diff --git a/src/views/alarm/alarmMonitor.vue b/src/views/alarm/alarmMonitor.vue
new file mode 100644
index 0000000..517d6e9
--- /dev/null
+++ b/src/views/alarm/alarmMonitor.vue
@@ -0,0 +1,80 @@
+<template>
+  <div>
+    <el-row>
+      <!--<el-col :span="6">-->
+        <!--&lt;!&ndash;<video-tree @click="handleCameraClicked"/>&ndash;&gt;-->
+      <!--</el-col>-->
+
+      <el-col :span="18" :offset="3">
+        <web-play ref="webCtrl" />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+// import VideoTree from './videoTree'
+import WebPlay from './webPlay'
+import { getDetailDevice } from '@/api/device'
+export default {
+  name: 'VideoMonitor',
+  components: { WebPlay },
+  data() {
+    return {
+      camera:{
+        ip:'',
+        port:'',
+        username:'',
+        password:''
+      }
+    }
+  },
+  mounted() {
+
+  },
+  activated() {
+    if (this.$route.query && this.$route.query.id) {
+      const id = this.$route.query.id
+      getDetailDevice(id).then(response => {
+          if (response.code === 200) {
+            console.log(response.data)
+            this.camera.ip = response.data.ip
+            this.camera.port = response.data.port
+            this.camera.username = response.data.username
+            this.camera.password = response.data.password
+            this.handleCamera()
+          }
+      })
+    }
+  },
+  methods: {
+    handleCamera(){
+      if (typeof this.camera.ip === 'undefined' || this.camera.ip === '') {
+        console.log('ip is null')
+        return false
+      }
+      if (typeof this.camera.port === 'undefined' || this.camera.port === '') {
+        console.log('port is null')
+        return false
+      }else{
+        this.camera.ip += (':'+ this.camera.port)
+      }
+      if (typeof this.camera.username === 'undefined' || this.camera.username === '') {
+        console.log('username is null')
+        return false
+      }
+      if (typeof this.camera.password === 'undefined' || this.camera.password === '') {
+        console.log('password is null')
+        return false
+      }
+
+      // 开始预览
+      this.$refs.webCtrl.$refs.play.contentWindow.startPlayReal(this.camera)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/alarm/alarmNow.vue b/src/views/alarm/alarmNow.vue
index 03bb5ea..66055b1 100644
--- a/src/views/alarm/alarmNow.vue
+++ b/src/views/alarm/alarmNow.vue
@@ -48,7 +48,7 @@
       <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="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>
@@ -66,8 +66,8 @@
         <el-table-column label="操作" align="center" width="180">
           <template slot-scope="scope">
             <el-button v-if="hasPerm('/alarm/cancel')" type="text" @click="alarmCancel(scope.row)">取消报警</el-button>
-            <el-button type="text" @click="detail(scope.row)">位置</el-button>
-            <el-button type="text" @click="edit(scope.row)">视频</el-button>
+            <el-button type="text" @click="position(scope.row)">位置</el-button>
+            <el-button v-if="hasPerm('/car/update')" type="text" @click="video(scope.row)">视频</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -183,6 +183,14 @@
     this.fetchData() // 获取数据
   },
   methods: {
+    video(row){
+      const code = this.$store.getters.currentSystem.code
+      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId }})
+    },
+    position(row){
+      const code = this.$store.getters.currentSystem.code
+      this.$router.push({ path: '/' + code + '/alarm/position', query: {  id: row.deviceId }})
+    },
     batchExport() {
       // 全屏加载动画
       const loading = this.$loading({
diff --git a/src/views/alarm/alarmPosition.vue b/src/views/alarm/alarmPosition.vue
new file mode 100644
index 0000000..51f915e
--- /dev/null
+++ b/src/views/alarm/alarmPosition.vue
@@ -0,0 +1,786 @@
+<template>
+  <div class="main-page">
+    <!-- 中间平面图区域 -->
+    <div class="map-overview">
+      <img ref="bgImg" :src="bgImageSrc" height="100%" @load="backgroundImageReady">
+
+      <div
+        v-for="item in devList"
+        :id="item.id"
+        :key="item.id"
+        :style="{ position: 'absolute', top: item.y * imgSize.height / imgSizeOriginal.height + 'px', left: (item.x * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
+        class="point-camera"
+        @click="detailDev(item, $event)" />
+    </div>
+    <!-- 右侧设备详情及操作区域 -->
+    <div v-show="showDevDetail" ref="dev-detail-block" class="dev-detail-block">
+      <span class="dev-detail-close" @click="showDevDetail=false" />
+      <el-row style="margin-top: -25px;">
+        <el-col :span="24">设备名称
+          <span class="dev-detail-span">{{ dataForm.name }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">设备编号
+          <span class="dev-detail-span">{{ dataForm.devcode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">设备类型
+          <span class="dev-detail-span">{{ dataForm.typeName }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">在线状态
+          <span class="dev-detail-span">{{ dataForm.onlineStatusName }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">安装日期
+          <span class="dev-detail-span">{{ dataForm.installDate }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">安装位置
+          <span class="dev-detail-span">{{ dataForm.position }}</span>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getProject } from '@/utils/baseConfig'
+import DeviceDetail from '@/views/deviceManage/deviceDetail'
+import tg_main from '../../assets/overview_images/tg/mapOverviewTg.jpg'
+import tg_3_1 from '../../assets/overview_images/tg/mapOverviewTg-3-1.jpg'
+import tg_4_1 from '../../assets/overview_images/tg/mapOverviewTg-4-1.jpg'
+import tg_4_5 from '../../assets/overview_images/tg/mapOverviewTg-4-5.jpg'
+import { getDetailDevice } from '@/api/device'
+
+// const cameraTypes = [4, 5, 8, 9, 10, 11]
+export default {
+  name: 'AlarmPosition',
+  components: { DeviceDetail },
+  data() {
+    return {
+      title: getProject().title,
+      bgImageSrc: tg_main,
+      devListParams: {
+        picture: '1',
+        areaTypeId: 1,
+        deviceTypes: []
+      },
+      dev: {
+        alarm: 0,
+        onLine: 0,
+        closed: 0,
+        offLine: 0
+      },
+      imgSizeOriginal: {
+        width: 2245,
+        height: 1586
+      }, // 图片原尺寸
+      imgSize: {
+        width: 2245,
+        height: 1586
+      }, // 图片显示尺寸
+      winSize: {
+        width: 1440,
+        height: 789
+      }, // 屏幕窗口尺寸
+      halfLeft: 0,
+      showDevDetail: false, // 是否显示设备详情
+      alarmList: [], // 报警列表
+      alarmColumns: [
+        {
+          text: '设备编号',
+          value: 'devcode',
+          align: 'center'
+        },
+        {
+          text: '报警内容',
+          value: 'alarmContent',
+          align: 'center'
+        },
+        {
+          text: '报警时间',
+          value: 'alarmTime',
+          align: 'center',
+          width: 165
+        }
+      ], // 报警列表显示列
+      tableShow: true, // 是否显示告警列表
+      devList: [], // 设备列表（在地图上显示）
+      dataForm: {
+        id: '', // id
+        name: '', // 设备名
+        devcode: '', // 设备编号
+        typeName: '', // 设备类型
+        model: '', // 设备型号
+        onlineStatusName: '', // 在线状态
+        deviceStatusName: '', // 设备状态
+        position: '', // 安装位置
+        installDate: '', // 安装日期
+        inOutName: '' // 进出营
+      }, // 设备详情表单
+      devPosition:{
+        picture: '',
+        x: '',
+        y: ''
+      },
+      checkDevType: [true, false] // 选中设备类型
+    }
+  },
+  mounted() {
+    this.initWindowSize()
+    if (this.$route.query && this.$route.query.id) {
+      const id = this.$route.query.id
+      getDetailDevice(id).then(response => {
+        if (response.code === 200) {
+          console.log(response.data)
+          this.devPosition.picture = response.data.picture
+          this.devPosition.x = response.data.x
+          this.devPosition.y = response.data.y
+          if(this.devPosition.picture === '1'){
+            this.bgImageSrc = tg_main
+          }else if(this.devPosition.picture === '2'){
+            this.bgImageSrc = tg_3_1
+          }else if(this.devPosition.picture === '3'){
+            this.bgImageSrc = tg_4_1
+          }else if(this.devPosition.picture === '4'){
+            this.bgImageSrc = tg_4_5
+          }else{
+            this.$message.warning('该设备暂无位置信息')
+            return
+          }
+          this.devList = []
+          if (this.devPosition.x !== '' && this.devPosition.y !== '') {
+            this.devList.push(response.data)
+          }
+        }
+      })
+    }
+    const that = this
+    window.onresize = function() {
+      that.initWindowSize()
+      that.getBgImageSize()
+    }
+  },
+  methods: {
+    // 获取窗口大小
+    initWindowSize() {
+      // 获取窗体尺寸
+      this.winSize = {
+        width: document.documentElement.clientWidth,
+        height: document.documentElement.clientHeight
+      }
+    },
+    // 获取图像大小
+    getBgImageSize() {
+      // 获取图片尺寸
+      this.imgSize = {
+        width: this.$refs['bgImg'].width,
+        height: this.$refs['bgImg'].height
+      }
+      this.halfLeft = (this.winSize.width - this.imgSize.width) / 2
+    },
+    // 重新绘制设备点位
+    reDrawDevs() {
+      const halfLeft = (this.winSize.width - this.imgSize.width) / 2
+
+      // 调整球机的设备位置
+      const that = this
+      this.devList.forEach(function(item) {
+        const point = document.getElementById(item.id)
+
+        if (point !== null) {
+          if (item.x !== '' && item.y !== '') {
+            point.style.position = 'absolute'
+            point.style.top = item.y * that.imgSize.height / that.imgSizeOriginal.height + 'px'
+            point.style.left = (item.x * that.imgSize.width / that.imgSizeOriginal.width + halfLeft) + 'px'
+          } else {
+            point.style.display = 'none'
+          }
+        }
+      })
+    },
+    // 平面图就绪时执行函数
+    backgroundImageReady() {
+      this.getBgImageSize()
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    },
+    backToIndex() {
+      this.$router.push('/door/alarm/now')
+    },
+    // 查询并显示设备详情
+    detailDev(dev, event) {
+      this.resetDevDetail()
+      getDetailDevice(dev.id).then(response => {
+        if (response.code === 200) {
+          this.dataForm = {
+            id: dev.id,
+            name: dev.name,
+            devcode: dev.devcode,
+            typeName: response.data.typeName,
+            model: dev.model,
+            onlineStatusName: response.data.onlineStatusName,
+            position: dev.position,
+            installDate: dev.installDate,
+            inOutName: response.data.inOutName,
+            deviceStatusName: response.data.deviceStatusName
+          }
+        } else {
+          this.$message.error(response.message)
+        }
+      })
+
+      // 弹窗显示设备详情
+      const targetDev = event.currentTarget // 取到点击到的设备图标div
+
+      this.showDevDetail = true
+      let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+      top = top + 100
+      this.$refs['dev-detail-block'].style.position = 'absolute'
+      this.$refs['dev-detail-block'].style.top = top + 'px'
+      this.$refs['dev-detail-block'].style.left = targetDev.style.left
+    },
+    // 点击报警列表
+    alarmRowClick(dev, column, event) {
+
+    },
+    // 清除设备详情
+    resetDevDetail() {
+      this.dataForm = {
+        id: '', // id
+        name: '', // 设备名
+        devcode: '', // 设备编号
+        typeName: '', // 设备类型
+        model: '', // 设备型号
+        onlineStatusName: '', // 在线状态
+        deviceStatusName: '', // 设备状态
+        position: '', // 安装位置
+        installDate: '', // 安装日期
+        inOutName: '' // 进出营
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+  .main-page {
+    background-size: cover;
+    background-color: #023d83;
+    height: 100vh;
+  }
+
+  .main-header {
+    width: 100vw;
+  }
+  .main-title {
+    height: 90px;
+    text-align: center;
+    padding-top: 20px;
+    background: url("../../assets/overview_images/title-background-1920.png");
+  }
+
+  .main-title img {
+    display: inline-block;
+    margin-right: 15px;
+    width: 52px;
+    height: 32px;
+    vertical-align: text-bottom;
+  }
+
+  .home-icon {
+    width: 26px;
+    height: 26px;
+    position: fixed;
+    left: 20px;
+    top: 20px;
+  }
+  .exit-icon {
+    width: 26px;
+    height: 26px;
+    position: fixed;
+    right: 20px;
+    top: 20px;
+  }
+  .home-icon img, .exit-icon img {
+    width: 26px;
+    height: 26px;
+  }
+
+  .main-title span {
+    color: #FFFFFF;
+    font-size: 32px;
+    font-weight: bold;
+    font-family: 'Microsoft YaHei';
+  }
+
+  .map-overview {
+    /*margin-top: 50px;*/
+    /*width: 1100px;*/
+    height: calc(90vh - 200px);
+    text-align: center;
+    position: relative;
+  }
+  .point {
+    width: 24px;
+    height: 24px;
+    position: relative;
+    display: inline-block;
+    cursor: pointer;
+  }
+  .point-camera {
+    background: url("../../assets/overview_images/icons/icon-camera-point.png");
+    background-size: contain;
+    @extend .point;
+  }
+  .point-fence {
+    background: url("../../assets/overview_images/icons/icon-fence-unchecked.png");
+    background-size: contain;
+    @extend .point;
+  }
+
+  .statis-block {
+    text-align: center;
+    margin-top: 20px;
+    font-size: 48px;
+  }
+  .sub-title {
+    text-align: center;
+    font-size: 32px;
+  }
+  .sub-data-block {
+    width: 122px;
+    height: 155px;
+  }
+  .dev-normal {
+    background: url("../../assets/overview_images/normal.png");
+    background-size: contain;
+    color: #00ff0c;
+  }
+  .dev-alarm {
+    background: url("../../assets/overview_images/alarm.png");
+    background-size: contain;
+    color: #ff0000;
+  }
+  .dev-offline {
+    background: url("../../assets/overview_images/offline.png");
+    background-size: contain;
+    color: #fff000;
+  }
+  .dev-closed {
+    background: url("../../assets/overview_images/closed.png");
+    background-size: contain;
+    color: #00fff6;
+  }
+
+  .dev-status-block {
+    position: absolute;
+    top: 100px;
+    left: 20px;
+    color: #ffffff;
+  }
+
+  .alarm-now-block {
+    position: absolute;
+    z-index: 500;
+    top: 300px;
+    left: 20px;
+    width: 480px;
+    .map-alarm-div-header {
+      line-height: 40px;
+      padding-left: 10px;
+      color: #00fff6;
+      font-size: 24px;
+      .icon-right {
+        cursor: pointer;
+        margin-left: 20px;
+      }
+    }
+    .el-scrollbar {
+      /*height: 200px;*/
+      width: 100%;
+    }
+    .moredatascollor {
+      height: 200px;
+    }
+    .el-scrollbar__wrap {
+      overflow-y: auto;
+      overflow-x: hidden;
+      margin-bottom: 0px !important;
+    }
+    .el-table {
+      font-size: 12px;
+    }
+    .transition-box {
+      margin-bottom: 10px;
+      width: 200px;
+      height: 100px;
+      border-radius: 4px;
+      background-color: #409EFF;
+      text-align: center;
+      color: #fff;
+      padding: 40px 20px;
+      box-sizing: border-box;
+      margin-right: 20px;
+    }
+  }
+
+  .alarm-now-block /deep/ .el-table th {
+    background-color: #0757A0;
+    padding: 12px 0px;
+    font-size: 16px;
+    color: #00fff6;
+    font-weight: normal;
+  }
+
+  .alarm-now-block /deep/ .el-table td {
+    /*background-color: #0757A0;*/
+    padding: 10px 0px;
+    font-size: 15px;
+    color: #FFFFFF;
+    font-weight: normal;
+  }
+
+  .alarm-now-block /deep/ .el-table__row td {
+    background-color: #023D83;
+  }
+  .alarm-now-block /deep/ .el-table__body tr:hover > td {
+    background-color: #0757A0;
+  }
+  .alarm-now-block /deep/ tr.el-table__row--striped td {
+    background-color: #0757A0;
+  }
+
+  .map-tab {
+    position: absolute;
+    right: 20px;
+    top: 100px;
+    width: 300px;
+    button {
+      margin: 5px 0px;
+    }
+  }
+
+  .tab-top {
+    position: relative;
+    width: 284px;
+    height: 24px;
+    background: url("../../assets/overview_images/tab-top-bg.png");
+  }
+  .tab-bottom {
+    position: relative;
+    width: 284px;
+    height: 24px;
+    background: url("../../assets/overview_images/tab-bottom-bg.png");
+  }
+  .map-index-button {
+    position: relative;
+    width: 284px;
+    height: 74px;
+    background: url("../../assets/overview_images/tab-index-unchecked.png");
+    font-size: 32px;
+    line-height: 74px;
+    text-align: center;
+    color: #FFFFFF;
+    cursor: pointer;
+  }
+  .index-selected {
+    background: url("../../assets/overview_images/tab-index-checked.png");
+  }
+  .sub-tab-guider {
+    width: 149px;
+    height: 50px;
+    background: url("../../assets/overview_images/sub-tab-guider.png");
+  }
+  .sub-tab-border {
+    width: 204px;
+    height: 253px;
+    background: url("../../assets/overview_images/sub-tab-border.png");
+  }
+  .sub-tab-content {
+    text-align: center;
+    color: #FFFFFF;
+    font-size: 28px;
+    cursor: pointer;
+    width: 200px;
+  }
+
+  .dev-detail-block {
+    /*position: absolute;*/
+    /*right: 20px;*/
+    /*bottom: 100px;*/
+    width: 520px;
+    height: 335px;
+    color: #00FFFF;
+    font-size: 24px;
+    font-family: "Microsoft YaHei";
+    padding: 45px 60px;
+    line-height: 35px;
+    background: url("../../assets/overview_images/dev-info.png");
+    .dev-detail-span {
+      margin-left: 20px;
+    }
+    .dev-detail-close::before {
+      content: "\2716";
+      position: relative;
+      top: -20px;
+      right: -410px;
+      cursor: pointer;
+    }
+  }
+
+  .dev-footer {
+    position: absolute;
+    bottom: 25px;
+  }
+
+  .dev-icon {
+    width: 195px;
+    height: 105px;
+    vertical-align: middle;
+    line-height: 65px;
+    padding: 20px 30px !important;
+    margin-left: 15px;
+    cursor: pointer;
+    background: url("../../assets/overview_images/dev-type-border-unchecked.png");
+  }
+
+  .dev-icon img {
+    height: 40px;
+    vertical-align:middle;
+  }
+  .dev-icon span {
+    font-size: 20px;
+    color: #00D2FF;
+    line-height: 65px;
+    height: 65px;
+    vertical-align:middle;
+    float: right;
+  }
+
+  .dev-type-selected {
+    background: url("../../assets/overview_images/dev-type-border-checked.png");
+  }
+  .dev-type-selected span {
+    color: #f58a88 !important;
+  }
+
+  /*@media(max-width: 1440px) {*/
+  /*  .main-title {*/
+  /*    height: 68px;*/
+  /*    padding-top: 20px;*/
+  /*    background: url("../../assets/overview_images/title-background-1440.png");*/
+  /*  }*/
+  /*  .main-title span {*/
+  /*    font-size: 24px;*/
+  /*  }*/
+  /*  .main-title img {*/
+  /*    margin-right: 15px;*/
+  /*    width: 32px;*/
+  /*    height: 32px;*/
+  /*  }*/
+
+  /*  .home-icon {*/
+  /*    left: 18px;*/
+  /*    width: 18px;*/
+  /*    height: 18px;*/
+  /*  }*/
+  /*  .exit-icon {*/
+  /*    right: 18px;*/
+  /*    width: 18px;*/
+  /*    height: 18px;*/
+  /*  }*/
+
+  /*  .home-icon img, .exit-icon img {*/
+  /*    width: 18px;*/
+  /*    height: 18px;*/
+  /*  }*/
+
+  /*  .dev-icon span {*/
+  /*    font-size: 12px;*/
+  /*  }*/
+  /*}*/
+
+  @media(max-width: 1440px) {
+    .main-title {
+      height: 65px;
+      padding-top: 16px;
+      background: url("../../assets/overview_images/title-background-1366.png");
+    }
+    .main-title span {
+      font-size: 24px;
+    }
+    .main-title img {
+      margin-right: 15px;
+      width: 32px;
+      height: 32px;
+    }
+
+    .home-icon {
+      left: 16px;
+      width: 16px;
+      height: 16px;
+    }
+    .exit-icon {
+      right: 16px;
+      width: 16px;
+      height: 16px;
+    }
+
+    .home-icon img, .exit-icon img {
+      width: 20px;
+      height: 20px;
+    }
+
+    .map-overview {
+      margin-top: 35px;
+      height: calc(90vh - 150px);
+    }
+
+    .point {
+      width: 16px;
+      height: 16px;
+    }
+
+    .statis-block {
+      margin-top: 16px;
+      font-size: 36px;
+    }
+    .sub-title {
+      font-size: 24px;
+    }
+    .sub-data-block {
+      width: 90px;
+      height: 114px;
+    }
+
+    .dev-normal {
+      background: url("../../assets/overview_images/normal-1366.png");
+    }
+    .dev-alarm {
+      background: url("../../assets/overview_images/alarm-1366.png");
+    }
+    .dev-offline {
+      background: url("../../assets/overview_images/offline-1366.png");
+    }
+    .dev-closed {
+      background: url("../../assets/overview_images/closed-1366.png");
+    }
+
+    .dev-status-block {
+      top: 90px;
+      left: 16px;
+    }
+
+    .alarm-now-block {
+      top: 220px;
+      left: 16px;
+      width: 360px;
+      .map-alarm-div-header {
+        line-height: 32px;
+        font-size: 20px;
+      }
+    }
+
+    .alarm-now-block /deep/ .el-table th {
+      padding: 8px 0px;
+      font-size: 16px;
+    }
+    .alarm-now-block /deep/ .el-table td {
+      padding: 5px 0px;
+      font-size: 12px;
+    }
+
+    .map-tab {
+      right: 16px;
+      top: 90px;
+      width: 215px;
+      button {
+        margin: 5px 0px;
+      }
+    }
+    .tab-top {
+      width: 213px;
+      height: 18px;
+      background: url("../../assets/overview_images/tab-top-bg-1366.png");
+    }
+    .tab-bottom {
+      width: 213px;
+      height: 18px;
+      background: url("../../assets/overview_images/tab-bottom-bg-1366.png");
+    }
+    .map-index-button {
+      width: 210px;
+      height: 56px;
+      background: url("../../assets/overview_images/tab-index-unchecked-1366.png");
+      font-size: 24px;
+      line-height: 56px;
+    }
+    .index-selected {
+      background: url("../../assets/overview_images/tab-index-checked-1366.png");
+    }
+
+    .sub-tab-guider {
+      width: 110px;
+      height: 37px;
+      background: url("../../assets/overview_images/sub-tab-guider-1366.png");
+    }
+    .sub-tab-border {
+      width: 150px;
+      height: 186px;
+      background: url("../../assets/overview_images/sub-tab-border-1366.png");
+    }
+    .sub-tab-content {
+      font-size: 20px;
+      cursor: pointer;
+      width: 145px;
+    }
+
+    .dev-detail-block {
+      width: 390px;
+      height: 251px;
+      font-size: 16px;
+      padding: 30px 40px;
+      line-height: 28px;
+      background: url("../../assets/overview_images/dev-info-1366.png");
+      .dev-detail-close::before {
+        top: -12px;
+        right: -312px;
+      }
+    }
+
+    .dev-footer {
+      bottom: 20px;
+    }
+    .dev-icon {
+      width: 140px;
+      height: 76px;
+      line-height: 56px;
+      padding: 10px 16px !important;
+      margin-left: 15px;
+      background: url("../../assets/overview_images/dev-type-border-unchecked-1366.png");
+    }
+    .dev-icon img {
+      height: 32px;
+    }
+    .dev-icon span {
+      font-size: 16px;
+      line-height: 56px;
+      height: 56px;
+    }
+    .dev-type-selected {
+      background: url("../../assets/overview_images/dev-type-border-checked-1366.png");
+    }
+  }
+
+</style>
diff --git a/src/views/alarm/webPlay.vue b/src/views/alarm/webPlay.vue
new file mode 100644
index 0000000..97e5ed2
--- /dev/null
+++ b/src/views/alarm/webPlay.vue
@@ -0,0 +1,21 @@
+<template>
+  <div class="play-window-block">
+    <div style="height: 100%">
+      <iframe ref="play" src="/static/webCtrl/demo-easy.html" width="100%" height="100%" style="border: 0px; overflow: hidden;" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'WebPlay'
+}
+</script>
+
+<style scoped>
+  .play-window-block {
+    margin: 15px 15px 15px 0px;
+    box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
+    height: calc(100vh - 175px);
+  }
+</style>

diff --git a/src/router/modules/doorSys.js b/src/router/modules/doorSys.js
index 8017e4b..6bd1506 100644
--- a/src/router/modules/doorSys.js
+++ b/src/router/modules/doorSys.js
@@ -87,6 +87,20 @@
         name: 'DoorAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/door/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/door/alarm/position',
+        name: 'DoorAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/door/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/door/alarm/video',
+        name: 'DoorAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/door/alarm/video'], keepAlive: true }
       }
     ]
   },
@@ -262,5 +276,26 @@
         meta: { title: '营门出入次数统计', icon: '', permission: ['/door/statistics/doorCount'], keepAlive: true }
       }
     ]
+  },
+  {
+    path: '/door/area',
+    component: Layout,
+    redirect: '/door/area',
+    name: 'DoorArea',
+    alwaysShow: true,
+    meta: {
+      title: '区域管理',
+      icon: 'icon-area', // 图标
+      permission: ['/door/area'], // 权限名称
+      sys: '/door'
+    },
+    children: [
+      {
+        path: '/door/area/list',
+        name: 'DoorAreaList',
+        component: () => import('@/views/area/areaList'),
+        meta: { title: '区域列表', icon: '', permission: ['/door/area/list'], keepAlive: true }
+      }
+    ]
   }
 ]
diff --git a/src/router/modules/fenceSys.js b/src/router/modules/fenceSys.js
index 0d784b0..e2962bd 100644
--- a/src/router/modules/fenceSys.js
+++ b/src/router/modules/fenceSys.js
@@ -85,6 +85,20 @@
         name: 'FenceAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/fence/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/fence/alarm/position',
+        name: 'FenceAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/fence/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/fence/alarm/video',
+        name: 'FenceAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/fence/alarm/video'], keepAlive: true }
       }
     ]
   },
diff --git a/src/router/modules/keySys.js b/src/router/modules/keySys.js
index f3a027b..832744b 100644
--- a/src/router/modules/keySys.js
+++ b/src/router/modules/keySys.js
@@ -85,6 +85,20 @@
         name: 'KeyAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/key/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/key/alarm/position',
+        name: 'KeyAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/key/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/key/alarm/video',
+        name: 'KeyAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/key/alarm/video'], keepAlive: true }
       }
     ]
   },
diff --git a/src/router/modules/regionSys.js b/src/router/modules/regionSys.js
index 9b4613a..43b8c38 100644
--- a/src/router/modules/regionSys.js
+++ b/src/router/modules/regionSys.js
@@ -85,6 +85,20 @@
         name: 'RegionAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/region/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/region/alarm/position',
+        name: 'RegionAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/region/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/region/alarm/video',
+        name: 'RegionAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/region/alarm/video'], keepAlive: true }
       }
     ]
   },
@@ -102,6 +116,20 @@
     },
     children: [
       {
+        path: '/region/staff/add',
+        name: 'RegionStaffAdd',
+        component: () => import('@/views/staff/staffAdd'),
+        hidden: true,
+        meta: { title: '人员登记', icon: '', permission: ['/region/staff/add'], keepAlive: true }
+      },
+      {
+        path: '/region/staff/edit',
+        name: 'RegionStaffEdit',
+        component: () => import('@/views/staff/staffEdit'),
+        hidden: true,
+        meta: { title: '人员编辑', icon: '', permission: ['/region/staff/edit'], keepAlive: true }
+      },
+      {
         path: '/region/staff/list',
         name: 'RegionStaffList',
         component: () => import('@/views/staff/staffList'),
diff --git a/src/views/alarm/alarmList.vue b/src/views/alarm/alarmList.vue
index 704f797..91967a0 100644
--- a/src/views/alarm/alarmList.vue
+++ b/src/views/alarm/alarmList.vue
@@ -37,7 +37,7 @@
             </el-col>
 
             <el-col :span="4" 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" @click="fetchData()">搜索</el-button>
             </el-col>
           </el-row>
         </el-form>
@@ -48,7 +48,7 @@
       <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="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>
@@ -66,8 +66,8 @@
         <!--操作列-->
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
-            <el-button type="text" @click="detail(scope.row)">位置</el-button>
-            <el-button v-if="hasPerm('/car/update')" type="text" @click="edit(scope.row)">视频</el-button>
+            <el-button type="text" @click="position(scope.row)">位置</el-button>
+            <el-button v-if="hasPerm('/car/update')" type="text" @click="video(scope.row)">视频</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -185,6 +185,14 @@
     this.fetchData() // 获取数据
   },
   methods: {
+    video(row){
+      const code = this.$store.getters.currentSystem.code
+      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId }})
+    },
+    position(row){
+      const code = this.$store.getters.currentSystem.code
+      this.$router.push({ path: '/' + code + '/alarm/position', query: {  id: row.deviceId }})
+    },
     batchExport() {
       // 全屏加载动画
       const loading = this.$loading({
@@ -254,6 +262,8 @@
       getAlarmList(this.listQuery).then(response => {
         if (response.code === 200) {
           this.list = response.data.rows
+          console.log('&&&')
+          console.log(this.list)
           this.total = parseInt(response.data.total)
         } else {
           this.$message.error(response.message)
diff --git a/src/views/alarm/alarmMonitor.vue b/src/views/alarm/alarmMonitor.vue
new file mode 100644
index 0000000..517d6e9
--- /dev/null
+++ b/src/views/alarm/alarmMonitor.vue
@@ -0,0 +1,80 @@
+<template>
+  <div>
+    <el-row>
+      <!--<el-col :span="6">-->
+        <!--&lt;!&ndash;<video-tree @click="handleCameraClicked"/>&ndash;&gt;-->
+      <!--</el-col>-->
+
+      <el-col :span="18" :offset="3">
+        <web-play ref="webCtrl" />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+// import VideoTree from './videoTree'
+import WebPlay from './webPlay'
+import { getDetailDevice } from '@/api/device'
+export default {
+  name: 'VideoMonitor',
+  components: { WebPlay },
+  data() {
+    return {
+      camera:{
+        ip:'',
+        port:'',
+        username:'',
+        password:''
+      }
+    }
+  },
+  mounted() {
+
+  },
+  activated() {
+    if (this.$route.query && this.$route.query.id) {
+      const id = this.$route.query.id
+      getDetailDevice(id).then(response => {
+          if (response.code === 200) {
+            console.log(response.data)
+            this.camera.ip = response.data.ip
+            this.camera.port = response.data.port
+            this.camera.username = response.data.username
+            this.camera.password = response.data.password
+            this.handleCamera()
+          }
+      })
+    }
+  },
+  methods: {
+    handleCamera(){
+      if (typeof this.camera.ip === 'undefined' || this.camera.ip === '') {
+        console.log('ip is null')
+        return false
+      }
+      if (typeof this.camera.port === 'undefined' || this.camera.port === '') {
+        console.log('port is null')
+        return false
+      }else{
+        this.camera.ip += (':'+ this.camera.port)
+      }
+      if (typeof this.camera.username === 'undefined' || this.camera.username === '') {
+        console.log('username is null')
+        return false
+      }
+      if (typeof this.camera.password === 'undefined' || this.camera.password === '') {
+        console.log('password is null')
+        return false
+      }
+
+      // 开始预览
+      this.$refs.webCtrl.$refs.play.contentWindow.startPlayReal(this.camera)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/alarm/alarmNow.vue b/src/views/alarm/alarmNow.vue
index 03bb5ea..66055b1 100644
--- a/src/views/alarm/alarmNow.vue
+++ b/src/views/alarm/alarmNow.vue
@@ -48,7 +48,7 @@
       <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="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>
@@ -66,8 +66,8 @@
         <el-table-column label="操作" align="center" width="180">
           <template slot-scope="scope">
             <el-button v-if="hasPerm('/alarm/cancel')" type="text" @click="alarmCancel(scope.row)">取消报警</el-button>
-            <el-button type="text" @click="detail(scope.row)">位置</el-button>
-            <el-button type="text" @click="edit(scope.row)">视频</el-button>
+            <el-button type="text" @click="position(scope.row)">位置</el-button>
+            <el-button v-if="hasPerm('/car/update')" type="text" @click="video(scope.row)">视频</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -183,6 +183,14 @@
     this.fetchData() // 获取数据
   },
   methods: {
+    video(row){
+      const code = this.$store.getters.currentSystem.code
+      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId }})
+    },
+    position(row){
+      const code = this.$store.getters.currentSystem.code
+      this.$router.push({ path: '/' + code + '/alarm/position', query: {  id: row.deviceId }})
+    },
     batchExport() {
       // 全屏加载动画
       const loading = this.$loading({
diff --git a/src/views/alarm/alarmPosition.vue b/src/views/alarm/alarmPosition.vue
new file mode 100644
index 0000000..51f915e
--- /dev/null
+++ b/src/views/alarm/alarmPosition.vue
@@ -0,0 +1,786 @@
+<template>
+  <div class="main-page">
+    <!-- 中间平面图区域 -->
+    <div class="map-overview">
+      <img ref="bgImg" :src="bgImageSrc" height="100%" @load="backgroundImageReady">
+
+      <div
+        v-for="item in devList"
+        :id="item.id"
+        :key="item.id"
+        :style="{ position: 'absolute', top: item.y * imgSize.height / imgSizeOriginal.height + 'px', left: (item.x * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
+        class="point-camera"
+        @click="detailDev(item, $event)" />
+    </div>
+    <!-- 右侧设备详情及操作区域 -->
+    <div v-show="showDevDetail" ref="dev-detail-block" class="dev-detail-block">
+      <span class="dev-detail-close" @click="showDevDetail=false" />
+      <el-row style="margin-top: -25px;">
+        <el-col :span="24">设备名称
+          <span class="dev-detail-span">{{ dataForm.name }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">设备编号
+          <span class="dev-detail-span">{{ dataForm.devcode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">设备类型
+          <span class="dev-detail-span">{{ dataForm.typeName }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">在线状态
+          <span class="dev-detail-span">{{ dataForm.onlineStatusName }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">安装日期
+          <span class="dev-detail-span">{{ dataForm.installDate }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">安装位置
+          <span class="dev-detail-span">{{ dataForm.position }}</span>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getProject } from '@/utils/baseConfig'
+import DeviceDetail from '@/views/deviceManage/deviceDetail'
+import tg_main from '../../assets/overview_images/tg/mapOverviewTg.jpg'
+import tg_3_1 from '../../assets/overview_images/tg/mapOverviewTg-3-1.jpg'
+import tg_4_1 from '../../assets/overview_images/tg/mapOverviewTg-4-1.jpg'
+import tg_4_5 from '../../assets/overview_images/tg/mapOverviewTg-4-5.jpg'
+import { getDetailDevice } from '@/api/device'
+
+// const cameraTypes = [4, 5, 8, 9, 10, 11]
+export default {
+  name: 'AlarmPosition',
+  components: { DeviceDetail },
+  data() {
+    return {
+      title: getProject().title,
+      bgImageSrc: tg_main,
+      devListParams: {
+        picture: '1',
+        areaTypeId: 1,
+        deviceTypes: []
+      },
+      dev: {
+        alarm: 0,
+        onLine: 0,
+        closed: 0,
+        offLine: 0
+      },
+      imgSizeOriginal: {
+        width: 2245,
+        height: 1586
+      }, // 图片原尺寸
+      imgSize: {
+        width: 2245,
+        height: 1586
+      }, // 图片显示尺寸
+      winSize: {
+        width: 1440,
+        height: 789
+      }, // 屏幕窗口尺寸
+      halfLeft: 0,
+      showDevDetail: false, // 是否显示设备详情
+      alarmList: [], // 报警列表
+      alarmColumns: [
+        {
+          text: '设备编号',
+          value: 'devcode',
+          align: 'center'
+        },
+        {
+          text: '报警内容',
+          value: 'alarmContent',
+          align: 'center'
+        },
+        {
+          text: '报警时间',
+          value: 'alarmTime',
+          align: 'center',
+          width: 165
+        }
+      ], // 报警列表显示列
+      tableShow: true, // 是否显示告警列表
+      devList: [], // 设备列表（在地图上显示）
+      dataForm: {
+        id: '', // id
+        name: '', // 设备名
+        devcode: '', // 设备编号
+        typeName: '', // 设备类型
+        model: '', // 设备型号
+        onlineStatusName: '', // 在线状态
+        deviceStatusName: '', // 设备状态
+        position: '', // 安装位置
+        installDate: '', // 安装日期
+        inOutName: '' // 进出营
+      }, // 设备详情表单
+      devPosition:{
+        picture: '',
+        x: '',
+        y: ''
+      },
+      checkDevType: [true, false] // 选中设备类型
+    }
+  },
+  mounted() {
+    this.initWindowSize()
+    if (this.$route.query && this.$route.query.id) {
+      const id = this.$route.query.id
+      getDetailDevice(id).then(response => {
+        if (response.code === 200) {
+          console.log(response.data)
+          this.devPosition.picture = response.data.picture
+          this.devPosition.x = response.data.x
+          this.devPosition.y = response.data.y
+          if(this.devPosition.picture === '1'){
+            this.bgImageSrc = tg_main
+          }else if(this.devPosition.picture === '2'){
+            this.bgImageSrc = tg_3_1
+          }else if(this.devPosition.picture === '3'){
+            this.bgImageSrc = tg_4_1
+          }else if(this.devPosition.picture === '4'){
+            this.bgImageSrc = tg_4_5
+          }else{
+            this.$message.warning('该设备暂无位置信息')
+            return
+          }
+          this.devList = []
+          if (this.devPosition.x !== '' && this.devPosition.y !== '') {
+            this.devList.push(response.data)
+          }
+        }
+      })
+    }
+    const that = this
+    window.onresize = function() {
+      that.initWindowSize()
+      that.getBgImageSize()
+    }
+  },
+  methods: {
+    // 获取窗口大小
+    initWindowSize() {
+      // 获取窗体尺寸
+      this.winSize = {
+        width: document.documentElement.clientWidth,
+        height: document.documentElement.clientHeight
+      }
+    },
+    // 获取图像大小
+    getBgImageSize() {
+      // 获取图片尺寸
+      this.imgSize = {
+        width: this.$refs['bgImg'].width,
+        height: this.$refs['bgImg'].height
+      }
+      this.halfLeft = (this.winSize.width - this.imgSize.width) / 2
+    },
+    // 重新绘制设备点位
+    reDrawDevs() {
+      const halfLeft = (this.winSize.width - this.imgSize.width) / 2
+
+      // 调整球机的设备位置
+      const that = this
+      this.devList.forEach(function(item) {
+        const point = document.getElementById(item.id)
+
+        if (point !== null) {
+          if (item.x !== '' && item.y !== '') {
+            point.style.position = 'absolute'
+            point.style.top = item.y * that.imgSize.height / that.imgSizeOriginal.height + 'px'
+            point.style.left = (item.x * that.imgSize.width / that.imgSizeOriginal.width + halfLeft) + 'px'
+          } else {
+            point.style.display = 'none'
+          }
+        }
+      })
+    },
+    // 平面图就绪时执行函数
+    backgroundImageReady() {
+      this.getBgImageSize()
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    },
+    backToIndex() {
+      this.$router.push('/door/alarm/now')
+    },
+    // 查询并显示设备详情
+    detailDev(dev, event) {
+      this.resetDevDetail()
+      getDetailDevice(dev.id).then(response => {
+        if (response.code === 200) {
+          this.dataForm = {
+            id: dev.id,
+            name: dev.name,
+            devcode: dev.devcode,
+            typeName: response.data.typeName,
+            model: dev.model,
+            onlineStatusName: response.data.onlineStatusName,
+            position: dev.position,
+            installDate: dev.installDate,
+            inOutName: response.data.inOutName,
+            deviceStatusName: response.data.deviceStatusName
+          }
+        } else {
+          this.$message.error(response.message)
+        }
+      })
+
+      // 弹窗显示设备详情
+      const targetDev = event.currentTarget // 取到点击到的设备图标div
+
+      this.showDevDetail = true
+      let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+      top = top + 100
+      this.$refs['dev-detail-block'].style.position = 'absolute'
+      this.$refs['dev-detail-block'].style.top = top + 'px'
+      this.$refs['dev-detail-block'].style.left = targetDev.style.left
+    },
+    // 点击报警列表
+    alarmRowClick(dev, column, event) {
+
+    },
+    // 清除设备详情
+    resetDevDetail() {
+      this.dataForm = {
+        id: '', // id
+        name: '', // 设备名
+        devcode: '', // 设备编号
+        typeName: '', // 设备类型
+        model: '', // 设备型号
+        onlineStatusName: '', // 在线状态
+        deviceStatusName: '', // 设备状态
+        position: '', // 安装位置
+        installDate: '', // 安装日期
+        inOutName: '' // 进出营
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+  .main-page {
+    background-size: cover;
+    background-color: #023d83;
+    height: 100vh;
+  }
+
+  .main-header {
+    width: 100vw;
+  }
+  .main-title {
+    height: 90px;
+    text-align: center;
+    padding-top: 20px;
+    background: url("../../assets/overview_images/title-background-1920.png");
+  }
+
+  .main-title img {
+    display: inline-block;
+    margin-right: 15px;
+    width: 52px;
+    height: 32px;
+    vertical-align: text-bottom;
+  }
+
+  .home-icon {
+    width: 26px;
+    height: 26px;
+    position: fixed;
+    left: 20px;
+    top: 20px;
+  }
+  .exit-icon {
+    width: 26px;
+    height: 26px;
+    position: fixed;
+    right: 20px;
+    top: 20px;
+  }
+  .home-icon img, .exit-icon img {
+    width: 26px;
+    height: 26px;
+  }
+
+  .main-title span {
+    color: #FFFFFF;
+    font-size: 32px;
+    font-weight: bold;
+    font-family: 'Microsoft YaHei';
+  }
+
+  .map-overview {
+    /*margin-top: 50px;*/
+    /*width: 1100px;*/
+    height: calc(90vh - 200px);
+    text-align: center;
+    position: relative;
+  }
+  .point {
+    width: 24px;
+    height: 24px;
+    position: relative;
+    display: inline-block;
+    cursor: pointer;
+  }
+  .point-camera {
+    background: url("../../assets/overview_images/icons/icon-camera-point.png");
+    background-size: contain;
+    @extend .point;
+  }
+  .point-fence {
+    background: url("../../assets/overview_images/icons/icon-fence-unchecked.png");
+    background-size: contain;
+    @extend .point;
+  }
+
+  .statis-block {
+    text-align: center;
+    margin-top: 20px;
+    font-size: 48px;
+  }
+  .sub-title {
+    text-align: center;
+    font-size: 32px;
+  }
+  .sub-data-block {
+    width: 122px;
+    height: 155px;
+  }
+  .dev-normal {
+    background: url("../../assets/overview_images/normal.png");
+    background-size: contain;
+    color: #00ff0c;
+  }
+  .dev-alarm {
+    background: url("../../assets/overview_images/alarm.png");
+    background-size: contain;
+    color: #ff0000;
+  }
+  .dev-offline {
+    background: url("../../assets/overview_images/offline.png");
+    background-size: contain;
+    color: #fff000;
+  }
+  .dev-closed {
+    background: url("../../assets/overview_images/closed.png");
+    background-size: contain;
+    color: #00fff6;
+  }
+
+  .dev-status-block {
+    position: absolute;
+    top: 100px;
+    left: 20px;
+    color: #ffffff;
+  }
+
+  .alarm-now-block {
+    position: absolute;
+    z-index: 500;
+    top: 300px;
+    left: 20px;
+    width: 480px;
+    .map-alarm-div-header {
+      line-height: 40px;
+      padding-left: 10px;
+      color: #00fff6;
+      font-size: 24px;
+      .icon-right {
+        cursor: pointer;
+        margin-left: 20px;
+      }
+    }
+    .el-scrollbar {
+      /*height: 200px;*/
+      width: 100%;
+    }
+    .moredatascollor {
+      height: 200px;
+    }
+    .el-scrollbar__wrap {
+      overflow-y: auto;
+      overflow-x: hidden;
+      margin-bottom: 0px !important;
+    }
+    .el-table {
+      font-size: 12px;
+    }
+    .transition-box {
+      margin-bottom: 10px;
+      width: 200px;
+      height: 100px;
+      border-radius: 4px;
+      background-color: #409EFF;
+      text-align: center;
+      color: #fff;
+      padding: 40px 20px;
+      box-sizing: border-box;
+      margin-right: 20px;
+    }
+  }
+
+  .alarm-now-block /deep/ .el-table th {
+    background-color: #0757A0;
+    padding: 12px 0px;
+    font-size: 16px;
+    color: #00fff6;
+    font-weight: normal;
+  }
+
+  .alarm-now-block /deep/ .el-table td {
+    /*background-color: #0757A0;*/
+    padding: 10px 0px;
+    font-size: 15px;
+    color: #FFFFFF;
+    font-weight: normal;
+  }
+
+  .alarm-now-block /deep/ .el-table__row td {
+    background-color: #023D83;
+  }
+  .alarm-now-block /deep/ .el-table__body tr:hover > td {
+    background-color: #0757A0;
+  }
+  .alarm-now-block /deep/ tr.el-table__row--striped td {
+    background-color: #0757A0;
+  }
+
+  .map-tab {
+    position: absolute;
+    right: 20px;
+    top: 100px;
+    width: 300px;
+    button {
+      margin: 5px 0px;
+    }
+  }
+
+  .tab-top {
+    position: relative;
+    width: 284px;
+    height: 24px;
+    background: url("../../assets/overview_images/tab-top-bg.png");
+  }
+  .tab-bottom {
+    position: relative;
+    width: 284px;
+    height: 24px;
+    background: url("../../assets/overview_images/tab-bottom-bg.png");
+  }
+  .map-index-button {
+    position: relative;
+    width: 284px;
+    height: 74px;
+    background: url("../../assets/overview_images/tab-index-unchecked.png");
+    font-size: 32px;
+    line-height: 74px;
+    text-align: center;
+    color: #FFFFFF;
+    cursor: pointer;
+  }
+  .index-selected {
+    background: url("../../assets/overview_images/tab-index-checked.png");
+  }
+  .sub-tab-guider {
+    width: 149px;
+    height: 50px;
+    background: url("../../assets/overview_images/sub-tab-guider.png");
+  }
+  .sub-tab-border {
+    width: 204px;
+    height: 253px;
+    background: url("../../assets/overview_images/sub-tab-border.png");
+  }
+  .sub-tab-content {
+    text-align: center;
+    color: #FFFFFF;
+    font-size: 28px;
+    cursor: pointer;
+    width: 200px;
+  }
+
+  .dev-detail-block {
+    /*position: absolute;*/
+    /*right: 20px;*/
+    /*bottom: 100px;*/
+    width: 520px;
+    height: 335px;
+    color: #00FFFF;
+    font-size: 24px;
+    font-family: "Microsoft YaHei";
+    padding: 45px 60px;
+    line-height: 35px;
+    background: url("../../assets/overview_images/dev-info.png");
+    .dev-detail-span {
+      margin-left: 20px;
+    }
+    .dev-detail-close::before {
+      content: "\2716";
+      position: relative;
+      top: -20px;
+      right: -410px;
+      cursor: pointer;
+    }
+  }
+
+  .dev-footer {
+    position: absolute;
+    bottom: 25px;
+  }
+
+  .dev-icon {
+    width: 195px;
+    height: 105px;
+    vertical-align: middle;
+    line-height: 65px;
+    padding: 20px 30px !important;
+    margin-left: 15px;
+    cursor: pointer;
+    background: url("../../assets/overview_images/dev-type-border-unchecked.png");
+  }
+
+  .dev-icon img {
+    height: 40px;
+    vertical-align:middle;
+  }
+  .dev-icon span {
+    font-size: 20px;
+    color: #00D2FF;
+    line-height: 65px;
+    height: 65px;
+    vertical-align:middle;
+    float: right;
+  }
+
+  .dev-type-selected {
+    background: url("../../assets/overview_images/dev-type-border-checked.png");
+  }
+  .dev-type-selected span {
+    color: #f58a88 !important;
+  }
+
+  /*@media(max-width: 1440px) {*/
+  /*  .main-title {*/
+  /*    height: 68px;*/
+  /*    padding-top: 20px;*/
+  /*    background: url("../../assets/overview_images/title-background-1440.png");*/
+  /*  }*/
+  /*  .main-title span {*/
+  /*    font-size: 24px;*/
+  /*  }*/
+  /*  .main-title img {*/
+  /*    margin-right: 15px;*/
+  /*    width: 32px;*/
+  /*    height: 32px;*/
+  /*  }*/
+
+  /*  .home-icon {*/
+  /*    left: 18px;*/
+  /*    width: 18px;*/
+  /*    height: 18px;*/
+  /*  }*/
+  /*  .exit-icon {*/
+  /*    right: 18px;*/
+  /*    width: 18px;*/
+  /*    height: 18px;*/
+  /*  }*/
+
+  /*  .home-icon img, .exit-icon img {*/
+  /*    width: 18px;*/
+  /*    height: 18px;*/
+  /*  }*/
+
+  /*  .dev-icon span {*/
+  /*    font-size: 12px;*/
+  /*  }*/
+  /*}*/
+
+  @media(max-width: 1440px) {
+    .main-title {
+      height: 65px;
+      padding-top: 16px;
+      background: url("../../assets/overview_images/title-background-1366.png");
+    }
+    .main-title span {
+      font-size: 24px;
+    }
+    .main-title img {
+      margin-right: 15px;
+      width: 32px;
+      height: 32px;
+    }
+
+    .home-icon {
+      left: 16px;
+      width: 16px;
+      height: 16px;
+    }
+    .exit-icon {
+      right: 16px;
+      width: 16px;
+      height: 16px;
+    }
+
+    .home-icon img, .exit-icon img {
+      width: 20px;
+      height: 20px;
+    }
+
+    .map-overview {
+      margin-top: 35px;
+      height: calc(90vh - 150px);
+    }
+
+    .point {
+      width: 16px;
+      height: 16px;
+    }
+
+    .statis-block {
+      margin-top: 16px;
+      font-size: 36px;
+    }
+    .sub-title {
+      font-size: 24px;
+    }
+    .sub-data-block {
+      width: 90px;
+      height: 114px;
+    }
+
+    .dev-normal {
+      background: url("../../assets/overview_images/normal-1366.png");
+    }
+    .dev-alarm {
+      background: url("../../assets/overview_images/alarm-1366.png");
+    }
+    .dev-offline {
+      background: url("../../assets/overview_images/offline-1366.png");
+    }
+    .dev-closed {
+      background: url("../../assets/overview_images/closed-1366.png");
+    }
+
+    .dev-status-block {
+      top: 90px;
+      left: 16px;
+    }
+
+    .alarm-now-block {
+      top: 220px;
+      left: 16px;
+      width: 360px;
+      .map-alarm-div-header {
+        line-height: 32px;
+        font-size: 20px;
+      }
+    }
+
+    .alarm-now-block /deep/ .el-table th {
+      padding: 8px 0px;
+      font-size: 16px;
+    }
+    .alarm-now-block /deep/ .el-table td {
+      padding: 5px 0px;
+      font-size: 12px;
+    }
+
+    .map-tab {
+      right: 16px;
+      top: 90px;
+      width: 215px;
+      button {
+        margin: 5px 0px;
+      }
+    }
+    .tab-top {
+      width: 213px;
+      height: 18px;
+      background: url("../../assets/overview_images/tab-top-bg-1366.png");
+    }
+    .tab-bottom {
+      width: 213px;
+      height: 18px;
+      background: url("../../assets/overview_images/tab-bottom-bg-1366.png");
+    }
+    .map-index-button {
+      width: 210px;
+      height: 56px;
+      background: url("../../assets/overview_images/tab-index-unchecked-1366.png");
+      font-size: 24px;
+      line-height: 56px;
+    }
+    .index-selected {
+      background: url("../../assets/overview_images/tab-index-checked-1366.png");
+    }
+
+    .sub-tab-guider {
+      width: 110px;
+      height: 37px;
+      background: url("../../assets/overview_images/sub-tab-guider-1366.png");
+    }
+    .sub-tab-border {
+      width: 150px;
+      height: 186px;
+      background: url("../../assets/overview_images/sub-tab-border-1366.png");
+    }
+    .sub-tab-content {
+      font-size: 20px;
+      cursor: pointer;
+      width: 145px;
+    }
+
+    .dev-detail-block {
+      width: 390px;
+      height: 251px;
+      font-size: 16px;
+      padding: 30px 40px;
+      line-height: 28px;
+      background: url("../../assets/overview_images/dev-info-1366.png");
+      .dev-detail-close::before {
+        top: -12px;
+        right: -312px;
+      }
+    }
+
+    .dev-footer {
+      bottom: 20px;
+    }
+    .dev-icon {
+      width: 140px;
+      height: 76px;
+      line-height: 56px;
+      padding: 10px 16px !important;
+      margin-left: 15px;
+      background: url("../../assets/overview_images/dev-type-border-unchecked-1366.png");
+    }
+    .dev-icon img {
+      height: 32px;
+    }
+    .dev-icon span {
+      font-size: 16px;
+      line-height: 56px;
+      height: 56px;
+    }
+    .dev-type-selected {
+      background: url("../../assets/overview_images/dev-type-border-checked-1366.png");
+    }
+  }
+
+</style>
diff --git a/src/views/alarm/webPlay.vue b/src/views/alarm/webPlay.vue
new file mode 100644
index 0000000..97e5ed2
--- /dev/null
+++ b/src/views/alarm/webPlay.vue
@@ -0,0 +1,21 @@
+<template>
+  <div class="play-window-block">
+    <div style="height: 100%">
+      <iframe ref="play" src="/static/webCtrl/demo-easy.html" width="100%" height="100%" style="border: 0px; overflow: hidden;" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'WebPlay'
+}
+</script>
+
+<style scoped>
+  .play-window-block {
+    margin: 15px 15px 15px 0px;
+    box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
+    height: calc(100vh - 175px);
+  }
+</style>
diff --git a/src/views/area/areaList.vue b/src/views/area/areaList.vue
index 1950028..11dc51f 100644
--- a/src/views/area/areaList.vue
+++ b/src/views/area/areaList.vue
@@ -31,7 +31,7 @@
       <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="batchExport">导出</el-button>-->
+          <!--<el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>-->
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>

diff --git a/src/router/modules/doorSys.js b/src/router/modules/doorSys.js
index 8017e4b..6bd1506 100644
--- a/src/router/modules/doorSys.js
+++ b/src/router/modules/doorSys.js
@@ -87,6 +87,20 @@
         name: 'DoorAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/door/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/door/alarm/position',
+        name: 'DoorAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/door/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/door/alarm/video',
+        name: 'DoorAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/door/alarm/video'], keepAlive: true }
       }
     ]
   },
@@ -262,5 +276,26 @@
         meta: { title: '营门出入次数统计', icon: '', permission: ['/door/statistics/doorCount'], keepAlive: true }
       }
     ]
+  },
+  {
+    path: '/door/area',
+    component: Layout,
+    redirect: '/door/area',
+    name: 'DoorArea',
+    alwaysShow: true,
+    meta: {
+      title: '区域管理',
+      icon: 'icon-area', // 图标
+      permission: ['/door/area'], // 权限名称
+      sys: '/door'
+    },
+    children: [
+      {
+        path: '/door/area/list',
+        name: 'DoorAreaList',
+        component: () => import('@/views/area/areaList'),
+        meta: { title: '区域列表', icon: '', permission: ['/door/area/list'], keepAlive: true }
+      }
+    ]
   }
 ]
diff --git a/src/router/modules/fenceSys.js b/src/router/modules/fenceSys.js
index 0d784b0..e2962bd 100644
--- a/src/router/modules/fenceSys.js
+++ b/src/router/modules/fenceSys.js
@@ -85,6 +85,20 @@
         name: 'FenceAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/fence/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/fence/alarm/position',
+        name: 'FenceAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/fence/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/fence/alarm/video',
+        name: 'FenceAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/fence/alarm/video'], keepAlive: true }
       }
     ]
   },
diff --git a/src/router/modules/keySys.js b/src/router/modules/keySys.js
index f3a027b..832744b 100644
--- a/src/router/modules/keySys.js
+++ b/src/router/modules/keySys.js
@@ -85,6 +85,20 @@
         name: 'KeyAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/key/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/key/alarm/position',
+        name: 'KeyAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/key/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/key/alarm/video',
+        name: 'KeyAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/key/alarm/video'], keepAlive: true }
       }
     ]
   },
diff --git a/src/router/modules/regionSys.js b/src/router/modules/regionSys.js
index 9b4613a..43b8c38 100644
--- a/src/router/modules/regionSys.js
+++ b/src/router/modules/regionSys.js
@@ -85,6 +85,20 @@
         name: 'RegionAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/region/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/region/alarm/position',
+        name: 'RegionAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/region/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/region/alarm/video',
+        name: 'RegionAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/region/alarm/video'], keepAlive: true }
       }
     ]
   },
@@ -102,6 +116,20 @@
     },
     children: [
       {
+        path: '/region/staff/add',
+        name: 'RegionStaffAdd',
+        component: () => import('@/views/staff/staffAdd'),
+        hidden: true,
+        meta: { title: '人员登记', icon: '', permission: ['/region/staff/add'], keepAlive: true }
+      },
+      {
+        path: '/region/staff/edit',
+        name: 'RegionStaffEdit',
+        component: () => import('@/views/staff/staffEdit'),
+        hidden: true,
+        meta: { title: '人员编辑', icon: '', permission: ['/region/staff/edit'], keepAlive: true }
+      },
+      {
         path: '/region/staff/list',
         name: 'RegionStaffList',
         component: () => import('@/views/staff/staffList'),
diff --git a/src/views/alarm/alarmList.vue b/src/views/alarm/alarmList.vue
index 704f797..91967a0 100644
--- a/src/views/alarm/alarmList.vue
+++ b/src/views/alarm/alarmList.vue
@@ -37,7 +37,7 @@
             </el-col>
 
             <el-col :span="4" 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" @click="fetchData()">搜索</el-button>
             </el-col>
           </el-row>
         </el-form>
@@ -48,7 +48,7 @@
       <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="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>
@@ -66,8 +66,8 @@
         <!--操作列-->
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
-            <el-button type="text" @click="detail(scope.row)">位置</el-button>
-            <el-button v-if="hasPerm('/car/update')" type="text" @click="edit(scope.row)">视频</el-button>
+            <el-button type="text" @click="position(scope.row)">位置</el-button>
+            <el-button v-if="hasPerm('/car/update')" type="text" @click="video(scope.row)">视频</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -185,6 +185,14 @@
     this.fetchData() // 获取数据
   },
   methods: {
+    video(row){
+      const code = this.$store.getters.currentSystem.code
+      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId }})
+    },
+    position(row){
+      const code = this.$store.getters.currentSystem.code
+      this.$router.push({ path: '/' + code + '/alarm/position', query: {  id: row.deviceId }})
+    },
     batchExport() {
       // 全屏加载动画
       const loading = this.$loading({
@@ -254,6 +262,8 @@
       getAlarmList(this.listQuery).then(response => {
         if (response.code === 200) {
           this.list = response.data.rows
+          console.log('&&&')
+          console.log(this.list)
           this.total = parseInt(response.data.total)
         } else {
           this.$message.error(response.message)
diff --git a/src/views/alarm/alarmMonitor.vue b/src/views/alarm/alarmMonitor.vue
new file mode 100644
index 0000000..517d6e9
--- /dev/null
+++ b/src/views/alarm/alarmMonitor.vue
@@ -0,0 +1,80 @@
+<template>
+  <div>
+    <el-row>
+      <!--<el-col :span="6">-->
+        <!--&lt;!&ndash;<video-tree @click="handleCameraClicked"/>&ndash;&gt;-->
+      <!--</el-col>-->
+
+      <el-col :span="18" :offset="3">
+        <web-play ref="webCtrl" />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+// import VideoTree from './videoTree'
+import WebPlay from './webPlay'
+import { getDetailDevice } from '@/api/device'
+export default {
+  name: 'VideoMonitor',
+  components: { WebPlay },
+  data() {
+    return {
+      camera:{
+        ip:'',
+        port:'',
+        username:'',
+        password:''
+      }
+    }
+  },
+  mounted() {
+
+  },
+  activated() {
+    if (this.$route.query && this.$route.query.id) {
+      const id = this.$route.query.id
+      getDetailDevice(id).then(response => {
+          if (response.code === 200) {
+            console.log(response.data)
+            this.camera.ip = response.data.ip
+            this.camera.port = response.data.port
+            this.camera.username = response.data.username
+            this.camera.password = response.data.password
+            this.handleCamera()
+          }
+      })
+    }
+  },
+  methods: {
+    handleCamera(){
+      if (typeof this.camera.ip === 'undefined' || this.camera.ip === '') {
+        console.log('ip is null')
+        return false
+      }
+      if (typeof this.camera.port === 'undefined' || this.camera.port === '') {
+        console.log('port is null')
+        return false
+      }else{
+        this.camera.ip += (':'+ this.camera.port)
+      }
+      if (typeof this.camera.username === 'undefined' || this.camera.username === '') {
+        console.log('username is null')
+        return false
+      }
+      if (typeof this.camera.password === 'undefined' || this.camera.password === '') {
+        console.log('password is null')
+        return false
+      }
+
+      // 开始预览
+      this.$refs.webCtrl.$refs.play.contentWindow.startPlayReal(this.camera)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/alarm/alarmNow.vue b/src/views/alarm/alarmNow.vue
index 03bb5ea..66055b1 100644
--- a/src/views/alarm/alarmNow.vue
+++ b/src/views/alarm/alarmNow.vue
@@ -48,7 +48,7 @@
       <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="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>
@@ -66,8 +66,8 @@
         <el-table-column label="操作" align="center" width="180">
           <template slot-scope="scope">
             <el-button v-if="hasPerm('/alarm/cancel')" type="text" @click="alarmCancel(scope.row)">取消报警</el-button>
-            <el-button type="text" @click="detail(scope.row)">位置</el-button>
-            <el-button type="text" @click="edit(scope.row)">视频</el-button>
+            <el-button type="text" @click="position(scope.row)">位置</el-button>
+            <el-button v-if="hasPerm('/car/update')" type="text" @click="video(scope.row)">视频</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -183,6 +183,14 @@
     this.fetchData() // 获取数据
   },
   methods: {
+    video(row){
+      const code = this.$store.getters.currentSystem.code
+      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId }})
+    },
+    position(row){
+      const code = this.$store.getters.currentSystem.code
+      this.$router.push({ path: '/' + code + '/alarm/position', query: {  id: row.deviceId }})
+    },
     batchExport() {
       // 全屏加载动画
       const loading = this.$loading({
diff --git a/src/views/alarm/alarmPosition.vue b/src/views/alarm/alarmPosition.vue
new file mode 100644
index 0000000..51f915e
--- /dev/null
+++ b/src/views/alarm/alarmPosition.vue
@@ -0,0 +1,786 @@
+<template>
+  <div class="main-page">
+    <!-- 中间平面图区域 -->
+    <div class="map-overview">
+      <img ref="bgImg" :src="bgImageSrc" height="100%" @load="backgroundImageReady">
+
+      <div
+        v-for="item in devList"
+        :id="item.id"
+        :key="item.id"
+        :style="{ position: 'absolute', top: item.y * imgSize.height / imgSizeOriginal.height + 'px', left: (item.x * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
+        class="point-camera"
+        @click="detailDev(item, $event)" />
+    </div>
+    <!-- 右侧设备详情及操作区域 -->
+    <div v-show="showDevDetail" ref="dev-detail-block" class="dev-detail-block">
+      <span class="dev-detail-close" @click="showDevDetail=false" />
+      <el-row style="margin-top: -25px;">
+        <el-col :span="24">设备名称
+          <span class="dev-detail-span">{{ dataForm.name }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">设备编号
+          <span class="dev-detail-span">{{ dataForm.devcode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">设备类型
+          <span class="dev-detail-span">{{ dataForm.typeName }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">在线状态
+          <span class="dev-detail-span">{{ dataForm.onlineStatusName }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">安装日期
+          <span class="dev-detail-span">{{ dataForm.installDate }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">安装位置
+          <span class="dev-detail-span">{{ dataForm.position }}</span>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getProject } from '@/utils/baseConfig'
+import DeviceDetail from '@/views/deviceManage/deviceDetail'
+import tg_main from '../../assets/overview_images/tg/mapOverviewTg.jpg'
+import tg_3_1 from '../../assets/overview_images/tg/mapOverviewTg-3-1.jpg'
+import tg_4_1 from '../../assets/overview_images/tg/mapOverviewTg-4-1.jpg'
+import tg_4_5 from '../../assets/overview_images/tg/mapOverviewTg-4-5.jpg'
+import { getDetailDevice } from '@/api/device'
+
+// const cameraTypes = [4, 5, 8, 9, 10, 11]
+export default {
+  name: 'AlarmPosition',
+  components: { DeviceDetail },
+  data() {
+    return {
+      title: getProject().title,
+      bgImageSrc: tg_main,
+      devListParams: {
+        picture: '1',
+        areaTypeId: 1,
+        deviceTypes: []
+      },
+      dev: {
+        alarm: 0,
+        onLine: 0,
+        closed: 0,
+        offLine: 0
+      },
+      imgSizeOriginal: {
+        width: 2245,
+        height: 1586
+      }, // 图片原尺寸
+      imgSize: {
+        width: 2245,
+        height: 1586
+      }, // 图片显示尺寸
+      winSize: {
+        width: 1440,
+        height: 789
+      }, // 屏幕窗口尺寸
+      halfLeft: 0,
+      showDevDetail: false, // 是否显示设备详情
+      alarmList: [], // 报警列表
+      alarmColumns: [
+        {
+          text: '设备编号',
+          value: 'devcode',
+          align: 'center'
+        },
+        {
+          text: '报警内容',
+          value: 'alarmContent',
+          align: 'center'
+        },
+        {
+          text: '报警时间',
+          value: 'alarmTime',
+          align: 'center',
+          width: 165
+        }
+      ], // 报警列表显示列
+      tableShow: true, // 是否显示告警列表
+      devList: [], // 设备列表（在地图上显示）
+      dataForm: {
+        id: '', // id
+        name: '', // 设备名
+        devcode: '', // 设备编号
+        typeName: '', // 设备类型
+        model: '', // 设备型号
+        onlineStatusName: '', // 在线状态
+        deviceStatusName: '', // 设备状态
+        position: '', // 安装位置
+        installDate: '', // 安装日期
+        inOutName: '' // 进出营
+      }, // 设备详情表单
+      devPosition:{
+        picture: '',
+        x: '',
+        y: ''
+      },
+      checkDevType: [true, false] // 选中设备类型
+    }
+  },
+  mounted() {
+    this.initWindowSize()
+    if (this.$route.query && this.$route.query.id) {
+      const id = this.$route.query.id
+      getDetailDevice(id).then(response => {
+        if (response.code === 200) {
+          console.log(response.data)
+          this.devPosition.picture = response.data.picture
+          this.devPosition.x = response.data.x
+          this.devPosition.y = response.data.y
+          if(this.devPosition.picture === '1'){
+            this.bgImageSrc = tg_main
+          }else if(this.devPosition.picture === '2'){
+            this.bgImageSrc = tg_3_1
+          }else if(this.devPosition.picture === '3'){
+            this.bgImageSrc = tg_4_1
+          }else if(this.devPosition.picture === '4'){
+            this.bgImageSrc = tg_4_5
+          }else{
+            this.$message.warning('该设备暂无位置信息')
+            return
+          }
+          this.devList = []
+          if (this.devPosition.x !== '' && this.devPosition.y !== '') {
+            this.devList.push(response.data)
+          }
+        }
+      })
+    }
+    const that = this
+    window.onresize = function() {
+      that.initWindowSize()
+      that.getBgImageSize()
+    }
+  },
+  methods: {
+    // 获取窗口大小
+    initWindowSize() {
+      // 获取窗体尺寸
+      this.winSize = {
+        width: document.documentElement.clientWidth,
+        height: document.documentElement.clientHeight
+      }
+    },
+    // 获取图像大小
+    getBgImageSize() {
+      // 获取图片尺寸
+      this.imgSize = {
+        width: this.$refs['bgImg'].width,
+        height: this.$refs['bgImg'].height
+      }
+      this.halfLeft = (this.winSize.width - this.imgSize.width) / 2
+    },
+    // 重新绘制设备点位
+    reDrawDevs() {
+      const halfLeft = (this.winSize.width - this.imgSize.width) / 2
+
+      // 调整球机的设备位置
+      const that = this
+      this.devList.forEach(function(item) {
+        const point = document.getElementById(item.id)
+
+        if (point !== null) {
+          if (item.x !== '' && item.y !== '') {
+            point.style.position = 'absolute'
+            point.style.top = item.y * that.imgSize.height / that.imgSizeOriginal.height + 'px'
+            point.style.left = (item.x * that.imgSize.width / that.imgSizeOriginal.width + halfLeft) + 'px'
+          } else {
+            point.style.display = 'none'
+          }
+        }
+      })
+    },
+    // 平面图就绪时执行函数
+    backgroundImageReady() {
+      this.getBgImageSize()
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    },
+    backToIndex() {
+      this.$router.push('/door/alarm/now')
+    },
+    // 查询并显示设备详情
+    detailDev(dev, event) {
+      this.resetDevDetail()
+      getDetailDevice(dev.id).then(response => {
+        if (response.code === 200) {
+          this.dataForm = {
+            id: dev.id,
+            name: dev.name,
+            devcode: dev.devcode,
+            typeName: response.data.typeName,
+            model: dev.model,
+            onlineStatusName: response.data.onlineStatusName,
+            position: dev.position,
+            installDate: dev.installDate,
+            inOutName: response.data.inOutName,
+            deviceStatusName: response.data.deviceStatusName
+          }
+        } else {
+          this.$message.error(response.message)
+        }
+      })
+
+      // 弹窗显示设备详情
+      const targetDev = event.currentTarget // 取到点击到的设备图标div
+
+      this.showDevDetail = true
+      let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+      top = top + 100
+      this.$refs['dev-detail-block'].style.position = 'absolute'
+      this.$refs['dev-detail-block'].style.top = top + 'px'
+      this.$refs['dev-detail-block'].style.left = targetDev.style.left
+    },
+    // 点击报警列表
+    alarmRowClick(dev, column, event) {
+
+    },
+    // 清除设备详情
+    resetDevDetail() {
+      this.dataForm = {
+        id: '', // id
+        name: '', // 设备名
+        devcode: '', // 设备编号
+        typeName: '', // 设备类型
+        model: '', // 设备型号
+        onlineStatusName: '', // 在线状态
+        deviceStatusName: '', // 设备状态
+        position: '', // 安装位置
+        installDate: '', // 安装日期
+        inOutName: '' // 进出营
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+  .main-page {
+    background-size: cover;
+    background-color: #023d83;
+    height: 100vh;
+  }
+
+  .main-header {
+    width: 100vw;
+  }
+  .main-title {
+    height: 90px;
+    text-align: center;
+    padding-top: 20px;
+    background: url("../../assets/overview_images/title-background-1920.png");
+  }
+
+  .main-title img {
+    display: inline-block;
+    margin-right: 15px;
+    width: 52px;
+    height: 32px;
+    vertical-align: text-bottom;
+  }
+
+  .home-icon {
+    width: 26px;
+    height: 26px;
+    position: fixed;
+    left: 20px;
+    top: 20px;
+  }
+  .exit-icon {
+    width: 26px;
+    height: 26px;
+    position: fixed;
+    right: 20px;
+    top: 20px;
+  }
+  .home-icon img, .exit-icon img {
+    width: 26px;
+    height: 26px;
+  }
+
+  .main-title span {
+    color: #FFFFFF;
+    font-size: 32px;
+    font-weight: bold;
+    font-family: 'Microsoft YaHei';
+  }
+
+  .map-overview {
+    /*margin-top: 50px;*/
+    /*width: 1100px;*/
+    height: calc(90vh - 200px);
+    text-align: center;
+    position: relative;
+  }
+  .point {
+    width: 24px;
+    height: 24px;
+    position: relative;
+    display: inline-block;
+    cursor: pointer;
+  }
+  .point-camera {
+    background: url("../../assets/overview_images/icons/icon-camera-point.png");
+    background-size: contain;
+    @extend .point;
+  }
+  .point-fence {
+    background: url("../../assets/overview_images/icons/icon-fence-unchecked.png");
+    background-size: contain;
+    @extend .point;
+  }
+
+  .statis-block {
+    text-align: center;
+    margin-top: 20px;
+    font-size: 48px;
+  }
+  .sub-title {
+    text-align: center;
+    font-size: 32px;
+  }
+  .sub-data-block {
+    width: 122px;
+    height: 155px;
+  }
+  .dev-normal {
+    background: url("../../assets/overview_images/normal.png");
+    background-size: contain;
+    color: #00ff0c;
+  }
+  .dev-alarm {
+    background: url("../../assets/overview_images/alarm.png");
+    background-size: contain;
+    color: #ff0000;
+  }
+  .dev-offline {
+    background: url("../../assets/overview_images/offline.png");
+    background-size: contain;
+    color: #fff000;
+  }
+  .dev-closed {
+    background: url("../../assets/overview_images/closed.png");
+    background-size: contain;
+    color: #00fff6;
+  }
+
+  .dev-status-block {
+    position: absolute;
+    top: 100px;
+    left: 20px;
+    color: #ffffff;
+  }
+
+  .alarm-now-block {
+    position: absolute;
+    z-index: 500;
+    top: 300px;
+    left: 20px;
+    width: 480px;
+    .map-alarm-div-header {
+      line-height: 40px;
+      padding-left: 10px;
+      color: #00fff6;
+      font-size: 24px;
+      .icon-right {
+        cursor: pointer;
+        margin-left: 20px;
+      }
+    }
+    .el-scrollbar {
+      /*height: 200px;*/
+      width: 100%;
+    }
+    .moredatascollor {
+      height: 200px;
+    }
+    .el-scrollbar__wrap {
+      overflow-y: auto;
+      overflow-x: hidden;
+      margin-bottom: 0px !important;
+    }
+    .el-table {
+      font-size: 12px;
+    }
+    .transition-box {
+      margin-bottom: 10px;
+      width: 200px;
+      height: 100px;
+      border-radius: 4px;
+      background-color: #409EFF;
+      text-align: center;
+      color: #fff;
+      padding: 40px 20px;
+      box-sizing: border-box;
+      margin-right: 20px;
+    }
+  }
+
+  .alarm-now-block /deep/ .el-table th {
+    background-color: #0757A0;
+    padding: 12px 0px;
+    font-size: 16px;
+    color: #00fff6;
+    font-weight: normal;
+  }
+
+  .alarm-now-block /deep/ .el-table td {
+    /*background-color: #0757A0;*/
+    padding: 10px 0px;
+    font-size: 15px;
+    color: #FFFFFF;
+    font-weight: normal;
+  }
+
+  .alarm-now-block /deep/ .el-table__row td {
+    background-color: #023D83;
+  }
+  .alarm-now-block /deep/ .el-table__body tr:hover > td {
+    background-color: #0757A0;
+  }
+  .alarm-now-block /deep/ tr.el-table__row--striped td {
+    background-color: #0757A0;
+  }
+
+  .map-tab {
+    position: absolute;
+    right: 20px;
+    top: 100px;
+    width: 300px;
+    button {
+      margin: 5px 0px;
+    }
+  }
+
+  .tab-top {
+    position: relative;
+    width: 284px;
+    height: 24px;
+    background: url("../../assets/overview_images/tab-top-bg.png");
+  }
+  .tab-bottom {
+    position: relative;
+    width: 284px;
+    height: 24px;
+    background: url("../../assets/overview_images/tab-bottom-bg.png");
+  }
+  .map-index-button {
+    position: relative;
+    width: 284px;
+    height: 74px;
+    background: url("../../assets/overview_images/tab-index-unchecked.png");
+    font-size: 32px;
+    line-height: 74px;
+    text-align: center;
+    color: #FFFFFF;
+    cursor: pointer;
+  }
+  .index-selected {
+    background: url("../../assets/overview_images/tab-index-checked.png");
+  }
+  .sub-tab-guider {
+    width: 149px;
+    height: 50px;
+    background: url("../../assets/overview_images/sub-tab-guider.png");
+  }
+  .sub-tab-border {
+    width: 204px;
+    height: 253px;
+    background: url("../../assets/overview_images/sub-tab-border.png");
+  }
+  .sub-tab-content {
+    text-align: center;
+    color: #FFFFFF;
+    font-size: 28px;
+    cursor: pointer;
+    width: 200px;
+  }
+
+  .dev-detail-block {
+    /*position: absolute;*/
+    /*right: 20px;*/
+    /*bottom: 100px;*/
+    width: 520px;
+    height: 335px;
+    color: #00FFFF;
+    font-size: 24px;
+    font-family: "Microsoft YaHei";
+    padding: 45px 60px;
+    line-height: 35px;
+    background: url("../../assets/overview_images/dev-info.png");
+    .dev-detail-span {
+      margin-left: 20px;
+    }
+    .dev-detail-close::before {
+      content: "\2716";
+      position: relative;
+      top: -20px;
+      right: -410px;
+      cursor: pointer;
+    }
+  }
+
+  .dev-footer {
+    position: absolute;
+    bottom: 25px;
+  }
+
+  .dev-icon {
+    width: 195px;
+    height: 105px;
+    vertical-align: middle;
+    line-height: 65px;
+    padding: 20px 30px !important;
+    margin-left: 15px;
+    cursor: pointer;
+    background: url("../../assets/overview_images/dev-type-border-unchecked.png");
+  }
+
+  .dev-icon img {
+    height: 40px;
+    vertical-align:middle;
+  }
+  .dev-icon span {
+    font-size: 20px;
+    color: #00D2FF;
+    line-height: 65px;
+    height: 65px;
+    vertical-align:middle;
+    float: right;
+  }
+
+  .dev-type-selected {
+    background: url("../../assets/overview_images/dev-type-border-checked.png");
+  }
+  .dev-type-selected span {
+    color: #f58a88 !important;
+  }
+
+  /*@media(max-width: 1440px) {*/
+  /*  .main-title {*/
+  /*    height: 68px;*/
+  /*    padding-top: 20px;*/
+  /*    background: url("../../assets/overview_images/title-background-1440.png");*/
+  /*  }*/
+  /*  .main-title span {*/
+  /*    font-size: 24px;*/
+  /*  }*/
+  /*  .main-title img {*/
+  /*    margin-right: 15px;*/
+  /*    width: 32px;*/
+  /*    height: 32px;*/
+  /*  }*/
+
+  /*  .home-icon {*/
+  /*    left: 18px;*/
+  /*    width: 18px;*/
+  /*    height: 18px;*/
+  /*  }*/
+  /*  .exit-icon {*/
+  /*    right: 18px;*/
+  /*    width: 18px;*/
+  /*    height: 18px;*/
+  /*  }*/
+
+  /*  .home-icon img, .exit-icon img {*/
+  /*    width: 18px;*/
+  /*    height: 18px;*/
+  /*  }*/
+
+  /*  .dev-icon span {*/
+  /*    font-size: 12px;*/
+  /*  }*/
+  /*}*/
+
+  @media(max-width: 1440px) {
+    .main-title {
+      height: 65px;
+      padding-top: 16px;
+      background: url("../../assets/overview_images/title-background-1366.png");
+    }
+    .main-title span {
+      font-size: 24px;
+    }
+    .main-title img {
+      margin-right: 15px;
+      width: 32px;
+      height: 32px;
+    }
+
+    .home-icon {
+      left: 16px;
+      width: 16px;
+      height: 16px;
+    }
+    .exit-icon {
+      right: 16px;
+      width: 16px;
+      height: 16px;
+    }
+
+    .home-icon img, .exit-icon img {
+      width: 20px;
+      height: 20px;
+    }
+
+    .map-overview {
+      margin-top: 35px;
+      height: calc(90vh - 150px);
+    }
+
+    .point {
+      width: 16px;
+      height: 16px;
+    }
+
+    .statis-block {
+      margin-top: 16px;
+      font-size: 36px;
+    }
+    .sub-title {
+      font-size: 24px;
+    }
+    .sub-data-block {
+      width: 90px;
+      height: 114px;
+    }
+
+    .dev-normal {
+      background: url("../../assets/overview_images/normal-1366.png");
+    }
+    .dev-alarm {
+      background: url("../../assets/overview_images/alarm-1366.png");
+    }
+    .dev-offline {
+      background: url("../../assets/overview_images/offline-1366.png");
+    }
+    .dev-closed {
+      background: url("../../assets/overview_images/closed-1366.png");
+    }
+
+    .dev-status-block {
+      top: 90px;
+      left: 16px;
+    }
+
+    .alarm-now-block {
+      top: 220px;
+      left: 16px;
+      width: 360px;
+      .map-alarm-div-header {
+        line-height: 32px;
+        font-size: 20px;
+      }
+    }
+
+    .alarm-now-block /deep/ .el-table th {
+      padding: 8px 0px;
+      font-size: 16px;
+    }
+    .alarm-now-block /deep/ .el-table td {
+      padding: 5px 0px;
+      font-size: 12px;
+    }
+
+    .map-tab {
+      right: 16px;
+      top: 90px;
+      width: 215px;
+      button {
+        margin: 5px 0px;
+      }
+    }
+    .tab-top {
+      width: 213px;
+      height: 18px;
+      background: url("../../assets/overview_images/tab-top-bg-1366.png");
+    }
+    .tab-bottom {
+      width: 213px;
+      height: 18px;
+      background: url("../../assets/overview_images/tab-bottom-bg-1366.png");
+    }
+    .map-index-button {
+      width: 210px;
+      height: 56px;
+      background: url("../../assets/overview_images/tab-index-unchecked-1366.png");
+      font-size: 24px;
+      line-height: 56px;
+    }
+    .index-selected {
+      background: url("../../assets/overview_images/tab-index-checked-1366.png");
+    }
+
+    .sub-tab-guider {
+      width: 110px;
+      height: 37px;
+      background: url("../../assets/overview_images/sub-tab-guider-1366.png");
+    }
+    .sub-tab-border {
+      width: 150px;
+      height: 186px;
+      background: url("../../assets/overview_images/sub-tab-border-1366.png");
+    }
+    .sub-tab-content {
+      font-size: 20px;
+      cursor: pointer;
+      width: 145px;
+    }
+
+    .dev-detail-block {
+      width: 390px;
+      height: 251px;
+      font-size: 16px;
+      padding: 30px 40px;
+      line-height: 28px;
+      background: url("../../assets/overview_images/dev-info-1366.png");
+      .dev-detail-close::before {
+        top: -12px;
+        right: -312px;
+      }
+    }
+
+    .dev-footer {
+      bottom: 20px;
+    }
+    .dev-icon {
+      width: 140px;
+      height: 76px;
+      line-height: 56px;
+      padding: 10px 16px !important;
+      margin-left: 15px;
+      background: url("../../assets/overview_images/dev-type-border-unchecked-1366.png");
+    }
+    .dev-icon img {
+      height: 32px;
+    }
+    .dev-icon span {
+      font-size: 16px;
+      line-height: 56px;
+      height: 56px;
+    }
+    .dev-type-selected {
+      background: url("../../assets/overview_images/dev-type-border-checked-1366.png");
+    }
+  }
+
+</style>
diff --git a/src/views/alarm/webPlay.vue b/src/views/alarm/webPlay.vue
new file mode 100644
index 0000000..97e5ed2
--- /dev/null
+++ b/src/views/alarm/webPlay.vue
@@ -0,0 +1,21 @@
+<template>
+  <div class="play-window-block">
+    <div style="height: 100%">
+      <iframe ref="play" src="/static/webCtrl/demo-easy.html" width="100%" height="100%" style="border: 0px; overflow: hidden;" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'WebPlay'
+}
+</script>
+
+<style scoped>
+  .play-window-block {
+    margin: 15px 15px 15px 0px;
+    box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
+    height: calc(100vh - 175px);
+  }
+</style>
diff --git a/src/views/area/areaList.vue b/src/views/area/areaList.vue
index 1950028..11dc51f 100644
--- a/src/views/area/areaList.vue
+++ b/src/views/area/areaList.vue
@@ -31,7 +31,7 @@
       <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="batchExport">导出</el-button>-->
+          <!--<el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>-->
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>
diff --git a/src/views/area/defenceDetail.vue b/src/views/area/defenceDetail.vue
index e29a258..703ec7d 100644
--- a/src/views/area/defenceDetail.vue
+++ b/src/views/area/defenceDetail.vue
@@ -4,12 +4,14 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="区域名称">
-            <span>{{ dataForm.name }}</span>
+            <el-input v-model="dataForm.name" disabled type="text"/>
+            <!--<span>{{ dataForm.name }}</span>-->
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="防卫状态">
-            <span>{{ dataForm.areaStatusName }}</span>
+            <el-input v-model="dataForm.areaStatusName" disabled type="text"/>
+            <!--<span>{{ dataForm.areaStatusName }}</span>-->
           </el-form-item>
         </el-col>
       </el-row>
@@ -17,12 +19,14 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="区域类别">
-            <span>{{ dataForm.areaTypeName }}</span>
+            <el-input v-model="dataForm.areaTypeName" disabled type="text"/>
+            <!--<span>{{ dataForm.areaTypeName }}</span>-->
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="区域位置">
-            <span>{{ dataForm.position }}</span>
+            <el-input v-model="dataForm.position" disabled type="text"/>
+            <!--<span>{{ dataForm.position }}</span>-->
           </el-form-item>
         </el-col>
       </el-row>
@@ -38,7 +42,8 @@
       <el-row v-show="isFence" :gutter="20">
         <el-col :span="12">
           <el-form-item label="电子围栏">
-            <span>{{ dataForm.deviceStatusName }}</span>
+            <el-input v-model="dataForm.deviceStatusName" disabled type="text"/>
+            <!--<span>{{ dataForm.deviceStatusName }}</span>-->
           </el-form-item>
         </el-col>
       </el-row>
@@ -46,7 +51,8 @@
       <el-row :gutter="20">
         <el-col :span="24">
           <el-form-item label="备注" prop="remark">
-            <span>{{ dataForm.remark }}</span>
+            <el-input v-model="dataForm.remark" disabled type="text"/>
+            <!--<span>{{ dataForm.remark }}</span>-->
           </el-form-item>
         </el-col>
       </el-row>

diff --git a/src/router/modules/doorSys.js b/src/router/modules/doorSys.js
index 8017e4b..6bd1506 100644
--- a/src/router/modules/doorSys.js
+++ b/src/router/modules/doorSys.js
@@ -87,6 +87,20 @@
         name: 'DoorAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/door/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/door/alarm/position',
+        name: 'DoorAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/door/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/door/alarm/video',
+        name: 'DoorAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/door/alarm/video'], keepAlive: true }
       }
     ]
   },
@@ -262,5 +276,26 @@
         meta: { title: '营门出入次数统计', icon: '', permission: ['/door/statistics/doorCount'], keepAlive: true }
       }
     ]
+  },
+  {
+    path: '/door/area',
+    component: Layout,
+    redirect: '/door/area',
+    name: 'DoorArea',
+    alwaysShow: true,
+    meta: {
+      title: '区域管理',
+      icon: 'icon-area', // 图标
+      permission: ['/door/area'], // 权限名称
+      sys: '/door'
+    },
+    children: [
+      {
+        path: '/door/area/list',
+        name: 'DoorAreaList',
+        component: () => import('@/views/area/areaList'),
+        meta: { title: '区域列表', icon: '', permission: ['/door/area/list'], keepAlive: true }
+      }
+    ]
   }
 ]
diff --git a/src/router/modules/fenceSys.js b/src/router/modules/fenceSys.js
index 0d784b0..e2962bd 100644
--- a/src/router/modules/fenceSys.js
+++ b/src/router/modules/fenceSys.js
@@ -85,6 +85,20 @@
         name: 'FenceAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/fence/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/fence/alarm/position',
+        name: 'FenceAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/fence/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/fence/alarm/video',
+        name: 'FenceAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/fence/alarm/video'], keepAlive: true }
       }
     ]
   },
diff --git a/src/router/modules/keySys.js b/src/router/modules/keySys.js
index f3a027b..832744b 100644
--- a/src/router/modules/keySys.js
+++ b/src/router/modules/keySys.js
@@ -85,6 +85,20 @@
         name: 'KeyAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/key/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/key/alarm/position',
+        name: 'KeyAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/key/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/key/alarm/video',
+        name: 'KeyAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/key/alarm/video'], keepAlive: true }
       }
     ]
   },
diff --git a/src/router/modules/regionSys.js b/src/router/modules/regionSys.js
index 9b4613a..43b8c38 100644
--- a/src/router/modules/regionSys.js
+++ b/src/router/modules/regionSys.js
@@ -85,6 +85,20 @@
         name: 'RegionAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/region/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/region/alarm/position',
+        name: 'RegionAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/region/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/region/alarm/video',
+        name: 'RegionAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/region/alarm/video'], keepAlive: true }
       }
     ]
   },
@@ -102,6 +116,20 @@
     },
     children: [
       {
+        path: '/region/staff/add',
+        name: 'RegionStaffAdd',
+        component: () => import('@/views/staff/staffAdd'),
+        hidden: true,
+        meta: { title: '人员登记', icon: '', permission: ['/region/staff/add'], keepAlive: true }
+      },
+      {
+        path: '/region/staff/edit',
+        name: 'RegionStaffEdit',
+        component: () => import('@/views/staff/staffEdit'),
+        hidden: true,
+        meta: { title: '人员编辑', icon: '', permission: ['/region/staff/edit'], keepAlive: true }
+      },
+      {
         path: '/region/staff/list',
         name: 'RegionStaffList',
         component: () => import('@/views/staff/staffList'),
diff --git a/src/views/alarm/alarmList.vue b/src/views/alarm/alarmList.vue
index 704f797..91967a0 100644
--- a/src/views/alarm/alarmList.vue
+++ b/src/views/alarm/alarmList.vue
@@ -37,7 +37,7 @@
             </el-col>
 
             <el-col :span="4" 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" @click="fetchData()">搜索</el-button>
             </el-col>
           </el-row>
         </el-form>
@@ -48,7 +48,7 @@
       <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="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>
@@ -66,8 +66,8 @@
         <!--操作列-->
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
-            <el-button type="text" @click="detail(scope.row)">位置</el-button>
-            <el-button v-if="hasPerm('/car/update')" type="text" @click="edit(scope.row)">视频</el-button>
+            <el-button type="text" @click="position(scope.row)">位置</el-button>
+            <el-button v-if="hasPerm('/car/update')" type="text" @click="video(scope.row)">视频</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -185,6 +185,14 @@
     this.fetchData() // 获取数据
   },
   methods: {
+    video(row){
+      const code = this.$store.getters.currentSystem.code
+      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId }})
+    },
+    position(row){
+      const code = this.$store.getters.currentSystem.code
+      this.$router.push({ path: '/' + code + '/alarm/position', query: {  id: row.deviceId }})
+    },
     batchExport() {
       // 全屏加载动画
       const loading = this.$loading({
@@ -254,6 +262,8 @@
       getAlarmList(this.listQuery).then(response => {
         if (response.code === 200) {
           this.list = response.data.rows
+          console.log('&&&')
+          console.log(this.list)
           this.total = parseInt(response.data.total)
         } else {
           this.$message.error(response.message)
diff --git a/src/views/alarm/alarmMonitor.vue b/src/views/alarm/alarmMonitor.vue
new file mode 100644
index 0000000..517d6e9
--- /dev/null
+++ b/src/views/alarm/alarmMonitor.vue
@@ -0,0 +1,80 @@
+<template>
+  <div>
+    <el-row>
+      <!--<el-col :span="6">-->
+        <!--&lt;!&ndash;<video-tree @click="handleCameraClicked"/>&ndash;&gt;-->
+      <!--</el-col>-->
+
+      <el-col :span="18" :offset="3">
+        <web-play ref="webCtrl" />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+// import VideoTree from './videoTree'
+import WebPlay from './webPlay'
+import { getDetailDevice } from '@/api/device'
+export default {
+  name: 'VideoMonitor',
+  components: { WebPlay },
+  data() {
+    return {
+      camera:{
+        ip:'',
+        port:'',
+        username:'',
+        password:''
+      }
+    }
+  },
+  mounted() {
+
+  },
+  activated() {
+    if (this.$route.query && this.$route.query.id) {
+      const id = this.$route.query.id
+      getDetailDevice(id).then(response => {
+          if (response.code === 200) {
+            console.log(response.data)
+            this.camera.ip = response.data.ip
+            this.camera.port = response.data.port
+            this.camera.username = response.data.username
+            this.camera.password = response.data.password
+            this.handleCamera()
+          }
+      })
+    }
+  },
+  methods: {
+    handleCamera(){
+      if (typeof this.camera.ip === 'undefined' || this.camera.ip === '') {
+        console.log('ip is null')
+        return false
+      }
+      if (typeof this.camera.port === 'undefined' || this.camera.port === '') {
+        console.log('port is null')
+        return false
+      }else{
+        this.camera.ip += (':'+ this.camera.port)
+      }
+      if (typeof this.camera.username === 'undefined' || this.camera.username === '') {
+        console.log('username is null')
+        return false
+      }
+      if (typeof this.camera.password === 'undefined' || this.camera.password === '') {
+        console.log('password is null')
+        return false
+      }
+
+      // 开始预览
+      this.$refs.webCtrl.$refs.play.contentWindow.startPlayReal(this.camera)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/alarm/alarmNow.vue b/src/views/alarm/alarmNow.vue
index 03bb5ea..66055b1 100644
--- a/src/views/alarm/alarmNow.vue
+++ b/src/views/alarm/alarmNow.vue
@@ -48,7 +48,7 @@
       <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="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>
@@ -66,8 +66,8 @@
         <el-table-column label="操作" align="center" width="180">
           <template slot-scope="scope">
             <el-button v-if="hasPerm('/alarm/cancel')" type="text" @click="alarmCancel(scope.row)">取消报警</el-button>
-            <el-button type="text" @click="detail(scope.row)">位置</el-button>
-            <el-button type="text" @click="edit(scope.row)">视频</el-button>
+            <el-button type="text" @click="position(scope.row)">位置</el-button>
+            <el-button v-if="hasPerm('/car/update')" type="text" @click="video(scope.row)">视频</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -183,6 +183,14 @@
     this.fetchData() // 获取数据
   },
   methods: {
+    video(row){
+      const code = this.$store.getters.currentSystem.code
+      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId }})
+    },
+    position(row){
+      const code = this.$store.getters.currentSystem.code
+      this.$router.push({ path: '/' + code + '/alarm/position', query: {  id: row.deviceId }})
+    },
     batchExport() {
       // 全屏加载动画
       const loading = this.$loading({
diff --git a/src/views/alarm/alarmPosition.vue b/src/views/alarm/alarmPosition.vue
new file mode 100644
index 0000000..51f915e
--- /dev/null
+++ b/src/views/alarm/alarmPosition.vue
@@ -0,0 +1,786 @@
+<template>
+  <div class="main-page">
+    <!-- 中间平面图区域 -->
+    <div class="map-overview">
+      <img ref="bgImg" :src="bgImageSrc" height="100%" @load="backgroundImageReady">
+
+      <div
+        v-for="item in devList"
+        :id="item.id"
+        :key="item.id"
+        :style="{ position: 'absolute', top: item.y * imgSize.height / imgSizeOriginal.height + 'px', left: (item.x * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
+        class="point-camera"
+        @click="detailDev(item, $event)" />
+    </div>
+    <!-- 右侧设备详情及操作区域 -->
+    <div v-show="showDevDetail" ref="dev-detail-block" class="dev-detail-block">
+      <span class="dev-detail-close" @click="showDevDetail=false" />
+      <el-row style="margin-top: -25px;">
+        <el-col :span="24">设备名称
+          <span class="dev-detail-span">{{ dataForm.name }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">设备编号
+          <span class="dev-detail-span">{{ dataForm.devcode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">设备类型
+          <span class="dev-detail-span">{{ dataForm.typeName }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">在线状态
+          <span class="dev-detail-span">{{ dataForm.onlineStatusName }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">安装日期
+          <span class="dev-detail-span">{{ dataForm.installDate }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">安装位置
+          <span class="dev-detail-span">{{ dataForm.position }}</span>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getProject } from '@/utils/baseConfig'
+import DeviceDetail from '@/views/deviceManage/deviceDetail'
+import tg_main from '../../assets/overview_images/tg/mapOverviewTg.jpg'
+import tg_3_1 from '../../assets/overview_images/tg/mapOverviewTg-3-1.jpg'
+import tg_4_1 from '../../assets/overview_images/tg/mapOverviewTg-4-1.jpg'
+import tg_4_5 from '../../assets/overview_images/tg/mapOverviewTg-4-5.jpg'
+import { getDetailDevice } from '@/api/device'
+
+// const cameraTypes = [4, 5, 8, 9, 10, 11]
+export default {
+  name: 'AlarmPosition',
+  components: { DeviceDetail },
+  data() {
+    return {
+      title: getProject().title,
+      bgImageSrc: tg_main,
+      devListParams: {
+        picture: '1',
+        areaTypeId: 1,
+        deviceTypes: []
+      },
+      dev: {
+        alarm: 0,
+        onLine: 0,
+        closed: 0,
+        offLine: 0
+      },
+      imgSizeOriginal: {
+        width: 2245,
+        height: 1586
+      }, // 图片原尺寸
+      imgSize: {
+        width: 2245,
+        height: 1586
+      }, // 图片显示尺寸
+      winSize: {
+        width: 1440,
+        height: 789
+      }, // 屏幕窗口尺寸
+      halfLeft: 0,
+      showDevDetail: false, // 是否显示设备详情
+      alarmList: [], // 报警列表
+      alarmColumns: [
+        {
+          text: '设备编号',
+          value: 'devcode',
+          align: 'center'
+        },
+        {
+          text: '报警内容',
+          value: 'alarmContent',
+          align: 'center'
+        },
+        {
+          text: '报警时间',
+          value: 'alarmTime',
+          align: 'center',
+          width: 165
+        }
+      ], // 报警列表显示列
+      tableShow: true, // 是否显示告警列表
+      devList: [], // 设备列表（在地图上显示）
+      dataForm: {
+        id: '', // id
+        name: '', // 设备名
+        devcode: '', // 设备编号
+        typeName: '', // 设备类型
+        model: '', // 设备型号
+        onlineStatusName: '', // 在线状态
+        deviceStatusName: '', // 设备状态
+        position: '', // 安装位置
+        installDate: '', // 安装日期
+        inOutName: '' // 进出营
+      }, // 设备详情表单
+      devPosition:{
+        picture: '',
+        x: '',
+        y: ''
+      },
+      checkDevType: [true, false] // 选中设备类型
+    }
+  },
+  mounted() {
+    this.initWindowSize()
+    if (this.$route.query && this.$route.query.id) {
+      const id = this.$route.query.id
+      getDetailDevice(id).then(response => {
+        if (response.code === 200) {
+          console.log(response.data)
+          this.devPosition.picture = response.data.picture
+          this.devPosition.x = response.data.x
+          this.devPosition.y = response.data.y
+          if(this.devPosition.picture === '1'){
+            this.bgImageSrc = tg_main
+          }else if(this.devPosition.picture === '2'){
+            this.bgImageSrc = tg_3_1
+          }else if(this.devPosition.picture === '3'){
+            this.bgImageSrc = tg_4_1
+          }else if(this.devPosition.picture === '4'){
+            this.bgImageSrc = tg_4_5
+          }else{
+            this.$message.warning('该设备暂无位置信息')
+            return
+          }
+          this.devList = []
+          if (this.devPosition.x !== '' && this.devPosition.y !== '') {
+            this.devList.push(response.data)
+          }
+        }
+      })
+    }
+    const that = this
+    window.onresize = function() {
+      that.initWindowSize()
+      that.getBgImageSize()
+    }
+  },
+  methods: {
+    // 获取窗口大小
+    initWindowSize() {
+      // 获取窗体尺寸
+      this.winSize = {
+        width: document.documentElement.clientWidth,
+        height: document.documentElement.clientHeight
+      }
+    },
+    // 获取图像大小
+    getBgImageSize() {
+      // 获取图片尺寸
+      this.imgSize = {
+        width: this.$refs['bgImg'].width,
+        height: this.$refs['bgImg'].height
+      }
+      this.halfLeft = (this.winSize.width - this.imgSize.width) / 2
+    },
+    // 重新绘制设备点位
+    reDrawDevs() {
+      const halfLeft = (this.winSize.width - this.imgSize.width) / 2
+
+      // 调整球机的设备位置
+      const that = this
+      this.devList.forEach(function(item) {
+        const point = document.getElementById(item.id)
+
+        if (point !== null) {
+          if (item.x !== '' && item.y !== '') {
+            point.style.position = 'absolute'
+            point.style.top = item.y * that.imgSize.height / that.imgSizeOriginal.height + 'px'
+            point.style.left = (item.x * that.imgSize.width / that.imgSizeOriginal.width + halfLeft) + 'px'
+          } else {
+            point.style.display = 'none'
+          }
+        }
+      })
+    },
+    // 平面图就绪时执行函数
+    backgroundImageReady() {
+      this.getBgImageSize()
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    },
+    backToIndex() {
+      this.$router.push('/door/alarm/now')
+    },
+    // 查询并显示设备详情
+    detailDev(dev, event) {
+      this.resetDevDetail()
+      getDetailDevice(dev.id).then(response => {
+        if (response.code === 200) {
+          this.dataForm = {
+            id: dev.id,
+            name: dev.name,
+            devcode: dev.devcode,
+            typeName: response.data.typeName,
+            model: dev.model,
+            onlineStatusName: response.data.onlineStatusName,
+            position: dev.position,
+            installDate: dev.installDate,
+            inOutName: response.data.inOutName,
+            deviceStatusName: response.data.deviceStatusName
+          }
+        } else {
+          this.$message.error(response.message)
+        }
+      })
+
+      // 弹窗显示设备详情
+      const targetDev = event.currentTarget // 取到点击到的设备图标div
+
+      this.showDevDetail = true
+      let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+      top = top + 100
+      this.$refs['dev-detail-block'].style.position = 'absolute'
+      this.$refs['dev-detail-block'].style.top = top + 'px'
+      this.$refs['dev-detail-block'].style.left = targetDev.style.left
+    },
+    // 点击报警列表
+    alarmRowClick(dev, column, event) {
+
+    },
+    // 清除设备详情
+    resetDevDetail() {
+      this.dataForm = {
+        id: '', // id
+        name: '', // 设备名
+        devcode: '', // 设备编号
+        typeName: '', // 设备类型
+        model: '', // 设备型号
+        onlineStatusName: '', // 在线状态
+        deviceStatusName: '', // 设备状态
+        position: '', // 安装位置
+        installDate: '', // 安装日期
+        inOutName: '' // 进出营
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+  .main-page {
+    background-size: cover;
+    background-color: #023d83;
+    height: 100vh;
+  }
+
+  .main-header {
+    width: 100vw;
+  }
+  .main-title {
+    height: 90px;
+    text-align: center;
+    padding-top: 20px;
+    background: url("../../assets/overview_images/title-background-1920.png");
+  }
+
+  .main-title img {
+    display: inline-block;
+    margin-right: 15px;
+    width: 52px;
+    height: 32px;
+    vertical-align: text-bottom;
+  }
+
+  .home-icon {
+    width: 26px;
+    height: 26px;
+    position: fixed;
+    left: 20px;
+    top: 20px;
+  }
+  .exit-icon {
+    width: 26px;
+    height: 26px;
+    position: fixed;
+    right: 20px;
+    top: 20px;
+  }
+  .home-icon img, .exit-icon img {
+    width: 26px;
+    height: 26px;
+  }
+
+  .main-title span {
+    color: #FFFFFF;
+    font-size: 32px;
+    font-weight: bold;
+    font-family: 'Microsoft YaHei';
+  }
+
+  .map-overview {
+    /*margin-top: 50px;*/
+    /*width: 1100px;*/
+    height: calc(90vh - 200px);
+    text-align: center;
+    position: relative;
+  }
+  .point {
+    width: 24px;
+    height: 24px;
+    position: relative;
+    display: inline-block;
+    cursor: pointer;
+  }
+  .point-camera {
+    background: url("../../assets/overview_images/icons/icon-camera-point.png");
+    background-size: contain;
+    @extend .point;
+  }
+  .point-fence {
+    background: url("../../assets/overview_images/icons/icon-fence-unchecked.png");
+    background-size: contain;
+    @extend .point;
+  }
+
+  .statis-block {
+    text-align: center;
+    margin-top: 20px;
+    font-size: 48px;
+  }
+  .sub-title {
+    text-align: center;
+    font-size: 32px;
+  }
+  .sub-data-block {
+    width: 122px;
+    height: 155px;
+  }
+  .dev-normal {
+    background: url("../../assets/overview_images/normal.png");
+    background-size: contain;
+    color: #00ff0c;
+  }
+  .dev-alarm {
+    background: url("../../assets/overview_images/alarm.png");
+    background-size: contain;
+    color: #ff0000;
+  }
+  .dev-offline {
+    background: url("../../assets/overview_images/offline.png");
+    background-size: contain;
+    color: #fff000;
+  }
+  .dev-closed {
+    background: url("../../assets/overview_images/closed.png");
+    background-size: contain;
+    color: #00fff6;
+  }
+
+  .dev-status-block {
+    position: absolute;
+    top: 100px;
+    left: 20px;
+    color: #ffffff;
+  }
+
+  .alarm-now-block {
+    position: absolute;
+    z-index: 500;
+    top: 300px;
+    left: 20px;
+    width: 480px;
+    .map-alarm-div-header {
+      line-height: 40px;
+      padding-left: 10px;
+      color: #00fff6;
+      font-size: 24px;
+      .icon-right {
+        cursor: pointer;
+        margin-left: 20px;
+      }
+    }
+    .el-scrollbar {
+      /*height: 200px;*/
+      width: 100%;
+    }
+    .moredatascollor {
+      height: 200px;
+    }
+    .el-scrollbar__wrap {
+      overflow-y: auto;
+      overflow-x: hidden;
+      margin-bottom: 0px !important;
+    }
+    .el-table {
+      font-size: 12px;
+    }
+    .transition-box {
+      margin-bottom: 10px;
+      width: 200px;
+      height: 100px;
+      border-radius: 4px;
+      background-color: #409EFF;
+      text-align: center;
+      color: #fff;
+      padding: 40px 20px;
+      box-sizing: border-box;
+      margin-right: 20px;
+    }
+  }
+
+  .alarm-now-block /deep/ .el-table th {
+    background-color: #0757A0;
+    padding: 12px 0px;
+    font-size: 16px;
+    color: #00fff6;
+    font-weight: normal;
+  }
+
+  .alarm-now-block /deep/ .el-table td {
+    /*background-color: #0757A0;*/
+    padding: 10px 0px;
+    font-size: 15px;
+    color: #FFFFFF;
+    font-weight: normal;
+  }
+
+  .alarm-now-block /deep/ .el-table__row td {
+    background-color: #023D83;
+  }
+  .alarm-now-block /deep/ .el-table__body tr:hover > td {
+    background-color: #0757A0;
+  }
+  .alarm-now-block /deep/ tr.el-table__row--striped td {
+    background-color: #0757A0;
+  }
+
+  .map-tab {
+    position: absolute;
+    right: 20px;
+    top: 100px;
+    width: 300px;
+    button {
+      margin: 5px 0px;
+    }
+  }
+
+  .tab-top {
+    position: relative;
+    width: 284px;
+    height: 24px;
+    background: url("../../assets/overview_images/tab-top-bg.png");
+  }
+  .tab-bottom {
+    position: relative;
+    width: 284px;
+    height: 24px;
+    background: url("../../assets/overview_images/tab-bottom-bg.png");
+  }
+  .map-index-button {
+    position: relative;
+    width: 284px;
+    height: 74px;
+    background: url("../../assets/overview_images/tab-index-unchecked.png");
+    font-size: 32px;
+    line-height: 74px;
+    text-align: center;
+    color: #FFFFFF;
+    cursor: pointer;
+  }
+  .index-selected {
+    background: url("../../assets/overview_images/tab-index-checked.png");
+  }
+  .sub-tab-guider {
+    width: 149px;
+    height: 50px;
+    background: url("../../assets/overview_images/sub-tab-guider.png");
+  }
+  .sub-tab-border {
+    width: 204px;
+    height: 253px;
+    background: url("../../assets/overview_images/sub-tab-border.png");
+  }
+  .sub-tab-content {
+    text-align: center;
+    color: #FFFFFF;
+    font-size: 28px;
+    cursor: pointer;
+    width: 200px;
+  }
+
+  .dev-detail-block {
+    /*position: absolute;*/
+    /*right: 20px;*/
+    /*bottom: 100px;*/
+    width: 520px;
+    height: 335px;
+    color: #00FFFF;
+    font-size: 24px;
+    font-family: "Microsoft YaHei";
+    padding: 45px 60px;
+    line-height: 35px;
+    background: url("../../assets/overview_images/dev-info.png");
+    .dev-detail-span {
+      margin-left: 20px;
+    }
+    .dev-detail-close::before {
+      content: "\2716";
+      position: relative;
+      top: -20px;
+      right: -410px;
+      cursor: pointer;
+    }
+  }
+
+  .dev-footer {
+    position: absolute;
+    bottom: 25px;
+  }
+
+  .dev-icon {
+    width: 195px;
+    height: 105px;
+    vertical-align: middle;
+    line-height: 65px;
+    padding: 20px 30px !important;
+    margin-left: 15px;
+    cursor: pointer;
+    background: url("../../assets/overview_images/dev-type-border-unchecked.png");
+  }
+
+  .dev-icon img {
+    height: 40px;
+    vertical-align:middle;
+  }
+  .dev-icon span {
+    font-size: 20px;
+    color: #00D2FF;
+    line-height: 65px;
+    height: 65px;
+    vertical-align:middle;
+    float: right;
+  }
+
+  .dev-type-selected {
+    background: url("../../assets/overview_images/dev-type-border-checked.png");
+  }
+  .dev-type-selected span {
+    color: #f58a88 !important;
+  }
+
+  /*@media(max-width: 1440px) {*/
+  /*  .main-title {*/
+  /*    height: 68px;*/
+  /*    padding-top: 20px;*/
+  /*    background: url("../../assets/overview_images/title-background-1440.png");*/
+  /*  }*/
+  /*  .main-title span {*/
+  /*    font-size: 24px;*/
+  /*  }*/
+  /*  .main-title img {*/
+  /*    margin-right: 15px;*/
+  /*    width: 32px;*/
+  /*    height: 32px;*/
+  /*  }*/
+
+  /*  .home-icon {*/
+  /*    left: 18px;*/
+  /*    width: 18px;*/
+  /*    height: 18px;*/
+  /*  }*/
+  /*  .exit-icon {*/
+  /*    right: 18px;*/
+  /*    width: 18px;*/
+  /*    height: 18px;*/
+  /*  }*/
+
+  /*  .home-icon img, .exit-icon img {*/
+  /*    width: 18px;*/
+  /*    height: 18px;*/
+  /*  }*/
+
+  /*  .dev-icon span {*/
+  /*    font-size: 12px;*/
+  /*  }*/
+  /*}*/
+
+  @media(max-width: 1440px) {
+    .main-title {
+      height: 65px;
+      padding-top: 16px;
+      background: url("../../assets/overview_images/title-background-1366.png");
+    }
+    .main-title span {
+      font-size: 24px;
+    }
+    .main-title img {
+      margin-right: 15px;
+      width: 32px;
+      height: 32px;
+    }
+
+    .home-icon {
+      left: 16px;
+      width: 16px;
+      height: 16px;
+    }
+    .exit-icon {
+      right: 16px;
+      width: 16px;
+      height: 16px;
+    }
+
+    .home-icon img, .exit-icon img {
+      width: 20px;
+      height: 20px;
+    }
+
+    .map-overview {
+      margin-top: 35px;
+      height: calc(90vh - 150px);
+    }
+
+    .point {
+      width: 16px;
+      height: 16px;
+    }
+
+    .statis-block {
+      margin-top: 16px;
+      font-size: 36px;
+    }
+    .sub-title {
+      font-size: 24px;
+    }
+    .sub-data-block {
+      width: 90px;
+      height: 114px;
+    }
+
+    .dev-normal {
+      background: url("../../assets/overview_images/normal-1366.png");
+    }
+    .dev-alarm {
+      background: url("../../assets/overview_images/alarm-1366.png");
+    }
+    .dev-offline {
+      background: url("../../assets/overview_images/offline-1366.png");
+    }
+    .dev-closed {
+      background: url("../../assets/overview_images/closed-1366.png");
+    }
+
+    .dev-status-block {
+      top: 90px;
+      left: 16px;
+    }
+
+    .alarm-now-block {
+      top: 220px;
+      left: 16px;
+      width: 360px;
+      .map-alarm-div-header {
+        line-height: 32px;
+        font-size: 20px;
+      }
+    }
+
+    .alarm-now-block /deep/ .el-table th {
+      padding: 8px 0px;
+      font-size: 16px;
+    }
+    .alarm-now-block /deep/ .el-table td {
+      padding: 5px 0px;
+      font-size: 12px;
+    }
+
+    .map-tab {
+      right: 16px;
+      top: 90px;
+      width: 215px;
+      button {
+        margin: 5px 0px;
+      }
+    }
+    .tab-top {
+      width: 213px;
+      height: 18px;
+      background: url("../../assets/overview_images/tab-top-bg-1366.png");
+    }
+    .tab-bottom {
+      width: 213px;
+      height: 18px;
+      background: url("../../assets/overview_images/tab-bottom-bg-1366.png");
+    }
+    .map-index-button {
+      width: 210px;
+      height: 56px;
+      background: url("../../assets/overview_images/tab-index-unchecked-1366.png");
+      font-size: 24px;
+      line-height: 56px;
+    }
+    .index-selected {
+      background: url("../../assets/overview_images/tab-index-checked-1366.png");
+    }
+
+    .sub-tab-guider {
+      width: 110px;
+      height: 37px;
+      background: url("../../assets/overview_images/sub-tab-guider-1366.png");
+    }
+    .sub-tab-border {
+      width: 150px;
+      height: 186px;
+      background: url("../../assets/overview_images/sub-tab-border-1366.png");
+    }
+    .sub-tab-content {
+      font-size: 20px;
+      cursor: pointer;
+      width: 145px;
+    }
+
+    .dev-detail-block {
+      width: 390px;
+      height: 251px;
+      font-size: 16px;
+      padding: 30px 40px;
+      line-height: 28px;
+      background: url("../../assets/overview_images/dev-info-1366.png");
+      .dev-detail-close::before {
+        top: -12px;
+        right: -312px;
+      }
+    }
+
+    .dev-footer {
+      bottom: 20px;
+    }
+    .dev-icon {
+      width: 140px;
+      height: 76px;
+      line-height: 56px;
+      padding: 10px 16px !important;
+      margin-left: 15px;
+      background: url("../../assets/overview_images/dev-type-border-unchecked-1366.png");
+    }
+    .dev-icon img {
+      height: 32px;
+    }
+    .dev-icon span {
+      font-size: 16px;
+      line-height: 56px;
+      height: 56px;
+    }
+    .dev-type-selected {
+      background: url("../../assets/overview_images/dev-type-border-checked-1366.png");
+    }
+  }
+
+</style>
diff --git a/src/views/alarm/webPlay.vue b/src/views/alarm/webPlay.vue
new file mode 100644
index 0000000..97e5ed2
--- /dev/null
+++ b/src/views/alarm/webPlay.vue
@@ -0,0 +1,21 @@
+<template>
+  <div class="play-window-block">
+    <div style="height: 100%">
+      <iframe ref="play" src="/static/webCtrl/demo-easy.html" width="100%" height="100%" style="border: 0px; overflow: hidden;" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'WebPlay'
+}
+</script>
+
+<style scoped>
+  .play-window-block {
+    margin: 15px 15px 15px 0px;
+    box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
+    height: calc(100vh - 175px);
+  }
+</style>
diff --git a/src/views/area/areaList.vue b/src/views/area/areaList.vue
index 1950028..11dc51f 100644
--- a/src/views/area/areaList.vue
+++ b/src/views/area/areaList.vue
@@ -31,7 +31,7 @@
       <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="batchExport">导出</el-button>-->
+          <!--<el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>-->
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>
diff --git a/src/views/area/defenceDetail.vue b/src/views/area/defenceDetail.vue
index e29a258..703ec7d 100644
--- a/src/views/area/defenceDetail.vue
+++ b/src/views/area/defenceDetail.vue
@@ -4,12 +4,14 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="区域名称">
-            <span>{{ dataForm.name }}</span>
+            <el-input v-model="dataForm.name" disabled type="text"/>
+            <!--<span>{{ dataForm.name }}</span>-->
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="防卫状态">
-            <span>{{ dataForm.areaStatusName }}</span>
+            <el-input v-model="dataForm.areaStatusName" disabled type="text"/>
+            <!--<span>{{ dataForm.areaStatusName }}</span>-->
           </el-form-item>
         </el-col>
       </el-row>
@@ -17,12 +19,14 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="区域类别">
-            <span>{{ dataForm.areaTypeName }}</span>
+            <el-input v-model="dataForm.areaTypeName" disabled type="text"/>
+            <!--<span>{{ dataForm.areaTypeName }}</span>-->
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="区域位置">
-            <span>{{ dataForm.position }}</span>
+            <el-input v-model="dataForm.position" disabled type="text"/>
+            <!--<span>{{ dataForm.position }}</span>-->
           </el-form-item>
         </el-col>
       </el-row>
@@ -38,7 +42,8 @@
       <el-row v-show="isFence" :gutter="20">
         <el-col :span="12">
           <el-form-item label="电子围栏">
-            <span>{{ dataForm.deviceStatusName }}</span>
+            <el-input v-model="dataForm.deviceStatusName" disabled type="text"/>
+            <!--<span>{{ dataForm.deviceStatusName }}</span>-->
           </el-form-item>
         </el-col>
       </el-row>
@@ -46,7 +51,8 @@
       <el-row :gutter="20">
         <el-col :span="24">
           <el-form-item label="备注" prop="remark">
-            <span>{{ dataForm.remark }}</span>
+            <el-input v-model="dataForm.remark" disabled type="text"/>
+            <!--<span>{{ dataForm.remark }}</span>-->
           </el-form-item>
         </el-col>
       </el-row>
diff --git a/src/views/area/defenceList.vue b/src/views/area/defenceList.vue
index 9e2ed68..8649918 100644
--- a/src/views/area/defenceList.vue
+++ b/src/views/area/defenceList.vue
@@ -31,9 +31,9 @@
       <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">批量导入</el-button>
-          <el-button class="edit_btn" size="small">导入模板下载</el-button>
-          <!--<el-button class="edit_btn" size="small" @click="batchExport">导出</el-button>-->
+          <!--<el-button class="edit_btn" size="small">批量导入</el-button>-->
+          <!--<el-button class="edit_btn" size="small">导入模板下载</el-button>-->
+          <!--<el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>-->
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>

diff --git a/src/router/modules/doorSys.js b/src/router/modules/doorSys.js
index 8017e4b..6bd1506 100644
--- a/src/router/modules/doorSys.js
+++ b/src/router/modules/doorSys.js
@@ -87,6 +87,20 @@
         name: 'DoorAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/door/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/door/alarm/position',
+        name: 'DoorAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/door/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/door/alarm/video',
+        name: 'DoorAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/door/alarm/video'], keepAlive: true }
       }
     ]
   },
@@ -262,5 +276,26 @@
         meta: { title: '营门出入次数统计', icon: '', permission: ['/door/statistics/doorCount'], keepAlive: true }
       }
     ]
+  },
+  {
+    path: '/door/area',
+    component: Layout,
+    redirect: '/door/area',
+    name: 'DoorArea',
+    alwaysShow: true,
+    meta: {
+      title: '区域管理',
+      icon: 'icon-area', // 图标
+      permission: ['/door/area'], // 权限名称
+      sys: '/door'
+    },
+    children: [
+      {
+        path: '/door/area/list',
+        name: 'DoorAreaList',
+        component: () => import('@/views/area/areaList'),
+        meta: { title: '区域列表', icon: '', permission: ['/door/area/list'], keepAlive: true }
+      }
+    ]
   }
 ]
diff --git a/src/router/modules/fenceSys.js b/src/router/modules/fenceSys.js
index 0d784b0..e2962bd 100644
--- a/src/router/modules/fenceSys.js
+++ b/src/router/modules/fenceSys.js
@@ -85,6 +85,20 @@
         name: 'FenceAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/fence/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/fence/alarm/position',
+        name: 'FenceAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/fence/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/fence/alarm/video',
+        name: 'FenceAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/fence/alarm/video'], keepAlive: true }
       }
     ]
   },
diff --git a/src/router/modules/keySys.js b/src/router/modules/keySys.js
index f3a027b..832744b 100644
--- a/src/router/modules/keySys.js
+++ b/src/router/modules/keySys.js
@@ -85,6 +85,20 @@
         name: 'KeyAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/key/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/key/alarm/position',
+        name: 'KeyAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/key/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/key/alarm/video',
+        name: 'KeyAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/key/alarm/video'], keepAlive: true }
       }
     ]
   },
diff --git a/src/router/modules/regionSys.js b/src/router/modules/regionSys.js
index 9b4613a..43b8c38 100644
--- a/src/router/modules/regionSys.js
+++ b/src/router/modules/regionSys.js
@@ -85,6 +85,20 @@
         name: 'RegionAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/region/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/region/alarm/position',
+        name: 'RegionAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/region/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/region/alarm/video',
+        name: 'RegionAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/region/alarm/video'], keepAlive: true }
       }
     ]
   },
@@ -102,6 +116,20 @@
     },
     children: [
       {
+        path: '/region/staff/add',
+        name: 'RegionStaffAdd',
+        component: () => import('@/views/staff/staffAdd'),
+        hidden: true,
+        meta: { title: '人员登记', icon: '', permission: ['/region/staff/add'], keepAlive: true }
+      },
+      {
+        path: '/region/staff/edit',
+        name: 'RegionStaffEdit',
+        component: () => import('@/views/staff/staffEdit'),
+        hidden: true,
+        meta: { title: '人员编辑', icon: '', permission: ['/region/staff/edit'], keepAlive: true }
+      },
+      {
         path: '/region/staff/list',
         name: 'RegionStaffList',
         component: () => import('@/views/staff/staffList'),
diff --git a/src/views/alarm/alarmList.vue b/src/views/alarm/alarmList.vue
index 704f797..91967a0 100644
--- a/src/views/alarm/alarmList.vue
+++ b/src/views/alarm/alarmList.vue
@@ -37,7 +37,7 @@
             </el-col>
 
             <el-col :span="4" 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" @click="fetchData()">搜索</el-button>
             </el-col>
           </el-row>
         </el-form>
@@ -48,7 +48,7 @@
       <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="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>
@@ -66,8 +66,8 @@
         <!--操作列-->
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
-            <el-button type="text" @click="detail(scope.row)">位置</el-button>
-            <el-button v-if="hasPerm('/car/update')" type="text" @click="edit(scope.row)">视频</el-button>
+            <el-button type="text" @click="position(scope.row)">位置</el-button>
+            <el-button v-if="hasPerm('/car/update')" type="text" @click="video(scope.row)">视频</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -185,6 +185,14 @@
     this.fetchData() // 获取数据
   },
   methods: {
+    video(row){
+      const code = this.$store.getters.currentSystem.code
+      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId }})
+    },
+    position(row){
+      const code = this.$store.getters.currentSystem.code
+      this.$router.push({ path: '/' + code + '/alarm/position', query: {  id: row.deviceId }})
+    },
     batchExport() {
       // 全屏加载动画
       const loading = this.$loading({
@@ -254,6 +262,8 @@
       getAlarmList(this.listQuery).then(response => {
         if (response.code === 200) {
           this.list = response.data.rows
+          console.log('&&&')
+          console.log(this.list)
           this.total = parseInt(response.data.total)
         } else {
           this.$message.error(response.message)
diff --git a/src/views/alarm/alarmMonitor.vue b/src/views/alarm/alarmMonitor.vue
new file mode 100644
index 0000000..517d6e9
--- /dev/null
+++ b/src/views/alarm/alarmMonitor.vue
@@ -0,0 +1,80 @@
+<template>
+  <div>
+    <el-row>
+      <!--<el-col :span="6">-->
+        <!--&lt;!&ndash;<video-tree @click="handleCameraClicked"/>&ndash;&gt;-->
+      <!--</el-col>-->
+
+      <el-col :span="18" :offset="3">
+        <web-play ref="webCtrl" />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+// import VideoTree from './videoTree'
+import WebPlay from './webPlay'
+import { getDetailDevice } from '@/api/device'
+export default {
+  name: 'VideoMonitor',
+  components: { WebPlay },
+  data() {
+    return {
+      camera:{
+        ip:'',
+        port:'',
+        username:'',
+        password:''
+      }
+    }
+  },
+  mounted() {
+
+  },
+  activated() {
+    if (this.$route.query && this.$route.query.id) {
+      const id = this.$route.query.id
+      getDetailDevice(id).then(response => {
+          if (response.code === 200) {
+            console.log(response.data)
+            this.camera.ip = response.data.ip
+            this.camera.port = response.data.port
+            this.camera.username = response.data.username
+            this.camera.password = response.data.password
+            this.handleCamera()
+          }
+      })
+    }
+  },
+  methods: {
+    handleCamera(){
+      if (typeof this.camera.ip === 'undefined' || this.camera.ip === '') {
+        console.log('ip is null')
+        return false
+      }
+      if (typeof this.camera.port === 'undefined' || this.camera.port === '') {
+        console.log('port is null')
+        return false
+      }else{
+        this.camera.ip += (':'+ this.camera.port)
+      }
+      if (typeof this.camera.username === 'undefined' || this.camera.username === '') {
+        console.log('username is null')
+        return false
+      }
+      if (typeof this.camera.password === 'undefined' || this.camera.password === '') {
+        console.log('password is null')
+        return false
+      }
+
+      // 开始预览
+      this.$refs.webCtrl.$refs.play.contentWindow.startPlayReal(this.camera)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/alarm/alarmNow.vue b/src/views/alarm/alarmNow.vue
index 03bb5ea..66055b1 100644
--- a/src/views/alarm/alarmNow.vue
+++ b/src/views/alarm/alarmNow.vue
@@ -48,7 +48,7 @@
       <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="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>
@@ -66,8 +66,8 @@
         <el-table-column label="操作" align="center" width="180">
           <template slot-scope="scope">
             <el-button v-if="hasPerm('/alarm/cancel')" type="text" @click="alarmCancel(scope.row)">取消报警</el-button>
-            <el-button type="text" @click="detail(scope.row)">位置</el-button>
-            <el-button type="text" @click="edit(scope.row)">视频</el-button>
+            <el-button type="text" @click="position(scope.row)">位置</el-button>
+            <el-button v-if="hasPerm('/car/update')" type="text" @click="video(scope.row)">视频</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -183,6 +183,14 @@
     this.fetchData() // 获取数据
   },
   methods: {
+    video(row){
+      const code = this.$store.getters.currentSystem.code
+      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId }})
+    },
+    position(row){
+      const code = this.$store.getters.currentSystem.code
+      this.$router.push({ path: '/' + code + '/alarm/position', query: {  id: row.deviceId }})
+    },
     batchExport() {
       // 全屏加载动画
       const loading = this.$loading({
diff --git a/src/views/alarm/alarmPosition.vue b/src/views/alarm/alarmPosition.vue
new file mode 100644
index 0000000..51f915e
--- /dev/null
+++ b/src/views/alarm/alarmPosition.vue
@@ -0,0 +1,786 @@
+<template>
+  <div class="main-page">
+    <!-- 中间平面图区域 -->
+    <div class="map-overview">
+      <img ref="bgImg" :src="bgImageSrc" height="100%" @load="backgroundImageReady">
+
+      <div
+        v-for="item in devList"
+        :id="item.id"
+        :key="item.id"
+        :style="{ position: 'absolute', top: item.y * imgSize.height / imgSizeOriginal.height + 'px', left: (item.x * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
+        class="point-camera"
+        @click="detailDev(item, $event)" />
+    </div>
+    <!-- 右侧设备详情及操作区域 -->
+    <div v-show="showDevDetail" ref="dev-detail-block" class="dev-detail-block">
+      <span class="dev-detail-close" @click="showDevDetail=false" />
+      <el-row style="margin-top: -25px;">
+        <el-col :span="24">设备名称
+          <span class="dev-detail-span">{{ dataForm.name }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">设备编号
+          <span class="dev-detail-span">{{ dataForm.devcode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">设备类型
+          <span class="dev-detail-span">{{ dataForm.typeName }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">在线状态
+          <span class="dev-detail-span">{{ dataForm.onlineStatusName }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">安装日期
+          <span class="dev-detail-span">{{ dataForm.installDate }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">安装位置
+          <span class="dev-detail-span">{{ dataForm.position }}</span>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getProject } from '@/utils/baseConfig'
+import DeviceDetail from '@/views/deviceManage/deviceDetail'
+import tg_main from '../../assets/overview_images/tg/mapOverviewTg.jpg'
+import tg_3_1 from '../../assets/overview_images/tg/mapOverviewTg-3-1.jpg'
+import tg_4_1 from '../../assets/overview_images/tg/mapOverviewTg-4-1.jpg'
+import tg_4_5 from '../../assets/overview_images/tg/mapOverviewTg-4-5.jpg'
+import { getDetailDevice } from '@/api/device'
+
+// const cameraTypes = [4, 5, 8, 9, 10, 11]
+export default {
+  name: 'AlarmPosition',
+  components: { DeviceDetail },
+  data() {
+    return {
+      title: getProject().title,
+      bgImageSrc: tg_main,
+      devListParams: {
+        picture: '1',
+        areaTypeId: 1,
+        deviceTypes: []
+      },
+      dev: {
+        alarm: 0,
+        onLine: 0,
+        closed: 0,
+        offLine: 0
+      },
+      imgSizeOriginal: {
+        width: 2245,
+        height: 1586
+      }, // 图片原尺寸
+      imgSize: {
+        width: 2245,
+        height: 1586
+      }, // 图片显示尺寸
+      winSize: {
+        width: 1440,
+        height: 789
+      }, // 屏幕窗口尺寸
+      halfLeft: 0,
+      showDevDetail: false, // 是否显示设备详情
+      alarmList: [], // 报警列表
+      alarmColumns: [
+        {
+          text: '设备编号',
+          value: 'devcode',
+          align: 'center'
+        },
+        {
+          text: '报警内容',
+          value: 'alarmContent',
+          align: 'center'
+        },
+        {
+          text: '报警时间',
+          value: 'alarmTime',
+          align: 'center',
+          width: 165
+        }
+      ], // 报警列表显示列
+      tableShow: true, // 是否显示告警列表
+      devList: [], // 设备列表（在地图上显示）
+      dataForm: {
+        id: '', // id
+        name: '', // 设备名
+        devcode: '', // 设备编号
+        typeName: '', // 设备类型
+        model: '', // 设备型号
+        onlineStatusName: '', // 在线状态
+        deviceStatusName: '', // 设备状态
+        position: '', // 安装位置
+        installDate: '', // 安装日期
+        inOutName: '' // 进出营
+      }, // 设备详情表单
+      devPosition:{
+        picture: '',
+        x: '',
+        y: ''
+      },
+      checkDevType: [true, false] // 选中设备类型
+    }
+  },
+  mounted() {
+    this.initWindowSize()
+    if (this.$route.query && this.$route.query.id) {
+      const id = this.$route.query.id
+      getDetailDevice(id).then(response => {
+        if (response.code === 200) {
+          console.log(response.data)
+          this.devPosition.picture = response.data.picture
+          this.devPosition.x = response.data.x
+          this.devPosition.y = response.data.y
+          if(this.devPosition.picture === '1'){
+            this.bgImageSrc = tg_main
+          }else if(this.devPosition.picture === '2'){
+            this.bgImageSrc = tg_3_1
+          }else if(this.devPosition.picture === '3'){
+            this.bgImageSrc = tg_4_1
+          }else if(this.devPosition.picture === '4'){
+            this.bgImageSrc = tg_4_5
+          }else{
+            this.$message.warning('该设备暂无位置信息')
+            return
+          }
+          this.devList = []
+          if (this.devPosition.x !== '' && this.devPosition.y !== '') {
+            this.devList.push(response.data)
+          }
+        }
+      })
+    }
+    const that = this
+    window.onresize = function() {
+      that.initWindowSize()
+      that.getBgImageSize()
+    }
+  },
+  methods: {
+    // 获取窗口大小
+    initWindowSize() {
+      // 获取窗体尺寸
+      this.winSize = {
+        width: document.documentElement.clientWidth,
+        height: document.documentElement.clientHeight
+      }
+    },
+    // 获取图像大小
+    getBgImageSize() {
+      // 获取图片尺寸
+      this.imgSize = {
+        width: this.$refs['bgImg'].width,
+        height: this.$refs['bgImg'].height
+      }
+      this.halfLeft = (this.winSize.width - this.imgSize.width) / 2
+    },
+    // 重新绘制设备点位
+    reDrawDevs() {
+      const halfLeft = (this.winSize.width - this.imgSize.width) / 2
+
+      // 调整球机的设备位置
+      const that = this
+      this.devList.forEach(function(item) {
+        const point = document.getElementById(item.id)
+
+        if (point !== null) {
+          if (item.x !== '' && item.y !== '') {
+            point.style.position = 'absolute'
+            point.style.top = item.y * that.imgSize.height / that.imgSizeOriginal.height + 'px'
+            point.style.left = (item.x * that.imgSize.width / that.imgSizeOriginal.width + halfLeft) + 'px'
+          } else {
+            point.style.display = 'none'
+          }
+        }
+      })
+    },
+    // 平面图就绪时执行函数
+    backgroundImageReady() {
+      this.getBgImageSize()
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    },
+    backToIndex() {
+      this.$router.push('/door/alarm/now')
+    },
+    // 查询并显示设备详情
+    detailDev(dev, event) {
+      this.resetDevDetail()
+      getDetailDevice(dev.id).then(response => {
+        if (response.code === 200) {
+          this.dataForm = {
+            id: dev.id,
+            name: dev.name,
+            devcode: dev.devcode,
+            typeName: response.data.typeName,
+            model: dev.model,
+            onlineStatusName: response.data.onlineStatusName,
+            position: dev.position,
+            installDate: dev.installDate,
+            inOutName: response.data.inOutName,
+            deviceStatusName: response.data.deviceStatusName
+          }
+        } else {
+          this.$message.error(response.message)
+        }
+      })
+
+      // 弹窗显示设备详情
+      const targetDev = event.currentTarget // 取到点击到的设备图标div
+
+      this.showDevDetail = true
+      let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+      top = top + 100
+      this.$refs['dev-detail-block'].style.position = 'absolute'
+      this.$refs['dev-detail-block'].style.top = top + 'px'
+      this.$refs['dev-detail-block'].style.left = targetDev.style.left
+    },
+    // 点击报警列表
+    alarmRowClick(dev, column, event) {
+
+    },
+    // 清除设备详情
+    resetDevDetail() {
+      this.dataForm = {
+        id: '', // id
+        name: '', // 设备名
+        devcode: '', // 设备编号
+        typeName: '', // 设备类型
+        model: '', // 设备型号
+        onlineStatusName: '', // 在线状态
+        deviceStatusName: '', // 设备状态
+        position: '', // 安装位置
+        installDate: '', // 安装日期
+        inOutName: '' // 进出营
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+  .main-page {
+    background-size: cover;
+    background-color: #023d83;
+    height: 100vh;
+  }
+
+  .main-header {
+    width: 100vw;
+  }
+  .main-title {
+    height: 90px;
+    text-align: center;
+    padding-top: 20px;
+    background: url("../../assets/overview_images/title-background-1920.png");
+  }
+
+  .main-title img {
+    display: inline-block;
+    margin-right: 15px;
+    width: 52px;
+    height: 32px;
+    vertical-align: text-bottom;
+  }
+
+  .home-icon {
+    width: 26px;
+    height: 26px;
+    position: fixed;
+    left: 20px;
+    top: 20px;
+  }
+  .exit-icon {
+    width: 26px;
+    height: 26px;
+    position: fixed;
+    right: 20px;
+    top: 20px;
+  }
+  .home-icon img, .exit-icon img {
+    width: 26px;
+    height: 26px;
+  }
+
+  .main-title span {
+    color: #FFFFFF;
+    font-size: 32px;
+    font-weight: bold;
+    font-family: 'Microsoft YaHei';
+  }
+
+  .map-overview {
+    /*margin-top: 50px;*/
+    /*width: 1100px;*/
+    height: calc(90vh - 200px);
+    text-align: center;
+    position: relative;
+  }
+  .point {
+    width: 24px;
+    height: 24px;
+    position: relative;
+    display: inline-block;
+    cursor: pointer;
+  }
+  .point-camera {
+    background: url("../../assets/overview_images/icons/icon-camera-point.png");
+    background-size: contain;
+    @extend .point;
+  }
+  .point-fence {
+    background: url("../../assets/overview_images/icons/icon-fence-unchecked.png");
+    background-size: contain;
+    @extend .point;
+  }
+
+  .statis-block {
+    text-align: center;
+    margin-top: 20px;
+    font-size: 48px;
+  }
+  .sub-title {
+    text-align: center;
+    font-size: 32px;
+  }
+  .sub-data-block {
+    width: 122px;
+    height: 155px;
+  }
+  .dev-normal {
+    background: url("../../assets/overview_images/normal.png");
+    background-size: contain;
+    color: #00ff0c;
+  }
+  .dev-alarm {
+    background: url("../../assets/overview_images/alarm.png");
+    background-size: contain;
+    color: #ff0000;
+  }
+  .dev-offline {
+    background: url("../../assets/overview_images/offline.png");
+    background-size: contain;
+    color: #fff000;
+  }
+  .dev-closed {
+    background: url("../../assets/overview_images/closed.png");
+    background-size: contain;
+    color: #00fff6;
+  }
+
+  .dev-status-block {
+    position: absolute;
+    top: 100px;
+    left: 20px;
+    color: #ffffff;
+  }
+
+  .alarm-now-block {
+    position: absolute;
+    z-index: 500;
+    top: 300px;
+    left: 20px;
+    width: 480px;
+    .map-alarm-div-header {
+      line-height: 40px;
+      padding-left: 10px;
+      color: #00fff6;
+      font-size: 24px;
+      .icon-right {
+        cursor: pointer;
+        margin-left: 20px;
+      }
+    }
+    .el-scrollbar {
+      /*height: 200px;*/
+      width: 100%;
+    }
+    .moredatascollor {
+      height: 200px;
+    }
+    .el-scrollbar__wrap {
+      overflow-y: auto;
+      overflow-x: hidden;
+      margin-bottom: 0px !important;
+    }
+    .el-table {
+      font-size: 12px;
+    }
+    .transition-box {
+      margin-bottom: 10px;
+      width: 200px;
+      height: 100px;
+      border-radius: 4px;
+      background-color: #409EFF;
+      text-align: center;
+      color: #fff;
+      padding: 40px 20px;
+      box-sizing: border-box;
+      margin-right: 20px;
+    }
+  }
+
+  .alarm-now-block /deep/ .el-table th {
+    background-color: #0757A0;
+    padding: 12px 0px;
+    font-size: 16px;
+    color: #00fff6;
+    font-weight: normal;
+  }
+
+  .alarm-now-block /deep/ .el-table td {
+    /*background-color: #0757A0;*/
+    padding: 10px 0px;
+    font-size: 15px;
+    color: #FFFFFF;
+    font-weight: normal;
+  }
+
+  .alarm-now-block /deep/ .el-table__row td {
+    background-color: #023D83;
+  }
+  .alarm-now-block /deep/ .el-table__body tr:hover > td {
+    background-color: #0757A0;
+  }
+  .alarm-now-block /deep/ tr.el-table__row--striped td {
+    background-color: #0757A0;
+  }
+
+  .map-tab {
+    position: absolute;
+    right: 20px;
+    top: 100px;
+    width: 300px;
+    button {
+      margin: 5px 0px;
+    }
+  }
+
+  .tab-top {
+    position: relative;
+    width: 284px;
+    height: 24px;
+    background: url("../../assets/overview_images/tab-top-bg.png");
+  }
+  .tab-bottom {
+    position: relative;
+    width: 284px;
+    height: 24px;
+    background: url("../../assets/overview_images/tab-bottom-bg.png");
+  }
+  .map-index-button {
+    position: relative;
+    width: 284px;
+    height: 74px;
+    background: url("../../assets/overview_images/tab-index-unchecked.png");
+    font-size: 32px;
+    line-height: 74px;
+    text-align: center;
+    color: #FFFFFF;
+    cursor: pointer;
+  }
+  .index-selected {
+    background: url("../../assets/overview_images/tab-index-checked.png");
+  }
+  .sub-tab-guider {
+    width: 149px;
+    height: 50px;
+    background: url("../../assets/overview_images/sub-tab-guider.png");
+  }
+  .sub-tab-border {
+    width: 204px;
+    height: 253px;
+    background: url("../../assets/overview_images/sub-tab-border.png");
+  }
+  .sub-tab-content {
+    text-align: center;
+    color: #FFFFFF;
+    font-size: 28px;
+    cursor: pointer;
+    width: 200px;
+  }
+
+  .dev-detail-block {
+    /*position: absolute;*/
+    /*right: 20px;*/
+    /*bottom: 100px;*/
+    width: 520px;
+    height: 335px;
+    color: #00FFFF;
+    font-size: 24px;
+    font-family: "Microsoft YaHei";
+    padding: 45px 60px;
+    line-height: 35px;
+    background: url("../../assets/overview_images/dev-info.png");
+    .dev-detail-span {
+      margin-left: 20px;
+    }
+    .dev-detail-close::before {
+      content: "\2716";
+      position: relative;
+      top: -20px;
+      right: -410px;
+      cursor: pointer;
+    }
+  }
+
+  .dev-footer {
+    position: absolute;
+    bottom: 25px;
+  }
+
+  .dev-icon {
+    width: 195px;
+    height: 105px;
+    vertical-align: middle;
+    line-height: 65px;
+    padding: 20px 30px !important;
+    margin-left: 15px;
+    cursor: pointer;
+    background: url("../../assets/overview_images/dev-type-border-unchecked.png");
+  }
+
+  .dev-icon img {
+    height: 40px;
+    vertical-align:middle;
+  }
+  .dev-icon span {
+    font-size: 20px;
+    color: #00D2FF;
+    line-height: 65px;
+    height: 65px;
+    vertical-align:middle;
+    float: right;
+  }
+
+  .dev-type-selected {
+    background: url("../../assets/overview_images/dev-type-border-checked.png");
+  }
+  .dev-type-selected span {
+    color: #f58a88 !important;
+  }
+
+  /*@media(max-width: 1440px) {*/
+  /*  .main-title {*/
+  /*    height: 68px;*/
+  /*    padding-top: 20px;*/
+  /*    background: url("../../assets/overview_images/title-background-1440.png");*/
+  /*  }*/
+  /*  .main-title span {*/
+  /*    font-size: 24px;*/
+  /*  }*/
+  /*  .main-title img {*/
+  /*    margin-right: 15px;*/
+  /*    width: 32px;*/
+  /*    height: 32px;*/
+  /*  }*/
+
+  /*  .home-icon {*/
+  /*    left: 18px;*/
+  /*    width: 18px;*/
+  /*    height: 18px;*/
+  /*  }*/
+  /*  .exit-icon {*/
+  /*    right: 18px;*/
+  /*    width: 18px;*/
+  /*    height: 18px;*/
+  /*  }*/
+
+  /*  .home-icon img, .exit-icon img {*/
+  /*    width: 18px;*/
+  /*    height: 18px;*/
+  /*  }*/
+
+  /*  .dev-icon span {*/
+  /*    font-size: 12px;*/
+  /*  }*/
+  /*}*/
+
+  @media(max-width: 1440px) {
+    .main-title {
+      height: 65px;
+      padding-top: 16px;
+      background: url("../../assets/overview_images/title-background-1366.png");
+    }
+    .main-title span {
+      font-size: 24px;
+    }
+    .main-title img {
+      margin-right: 15px;
+      width: 32px;
+      height: 32px;
+    }
+
+    .home-icon {
+      left: 16px;
+      width: 16px;
+      height: 16px;
+    }
+    .exit-icon {
+      right: 16px;
+      width: 16px;
+      height: 16px;
+    }
+
+    .home-icon img, .exit-icon img {
+      width: 20px;
+      height: 20px;
+    }
+
+    .map-overview {
+      margin-top: 35px;
+      height: calc(90vh - 150px);
+    }
+
+    .point {
+      width: 16px;
+      height: 16px;
+    }
+
+    .statis-block {
+      margin-top: 16px;
+      font-size: 36px;
+    }
+    .sub-title {
+      font-size: 24px;
+    }
+    .sub-data-block {
+      width: 90px;
+      height: 114px;
+    }
+
+    .dev-normal {
+      background: url("../../assets/overview_images/normal-1366.png");
+    }
+    .dev-alarm {
+      background: url("../../assets/overview_images/alarm-1366.png");
+    }
+    .dev-offline {
+      background: url("../../assets/overview_images/offline-1366.png");
+    }
+    .dev-closed {
+      background: url("../../assets/overview_images/closed-1366.png");
+    }
+
+    .dev-status-block {
+      top: 90px;
+      left: 16px;
+    }
+
+    .alarm-now-block {
+      top: 220px;
+      left: 16px;
+      width: 360px;
+      .map-alarm-div-header {
+        line-height: 32px;
+        font-size: 20px;
+      }
+    }
+
+    .alarm-now-block /deep/ .el-table th {
+      padding: 8px 0px;
+      font-size: 16px;
+    }
+    .alarm-now-block /deep/ .el-table td {
+      padding: 5px 0px;
+      font-size: 12px;
+    }
+
+    .map-tab {
+      right: 16px;
+      top: 90px;
+      width: 215px;
+      button {
+        margin: 5px 0px;
+      }
+    }
+    .tab-top {
+      width: 213px;
+      height: 18px;
+      background: url("../../assets/overview_images/tab-top-bg-1366.png");
+    }
+    .tab-bottom {
+      width: 213px;
+      height: 18px;
+      background: url("../../assets/overview_images/tab-bottom-bg-1366.png");
+    }
+    .map-index-button {
+      width: 210px;
+      height: 56px;
+      background: url("../../assets/overview_images/tab-index-unchecked-1366.png");
+      font-size: 24px;
+      line-height: 56px;
+    }
+    .index-selected {
+      background: url("../../assets/overview_images/tab-index-checked-1366.png");
+    }
+
+    .sub-tab-guider {
+      width: 110px;
+      height: 37px;
+      background: url("../../assets/overview_images/sub-tab-guider-1366.png");
+    }
+    .sub-tab-border {
+      width: 150px;
+      height: 186px;
+      background: url("../../assets/overview_images/sub-tab-border-1366.png");
+    }
+    .sub-tab-content {
+      font-size: 20px;
+      cursor: pointer;
+      width: 145px;
+    }
+
+    .dev-detail-block {
+      width: 390px;
+      height: 251px;
+      font-size: 16px;
+      padding: 30px 40px;
+      line-height: 28px;
+      background: url("../../assets/overview_images/dev-info-1366.png");
+      .dev-detail-close::before {
+        top: -12px;
+        right: -312px;
+      }
+    }
+
+    .dev-footer {
+      bottom: 20px;
+    }
+    .dev-icon {
+      width: 140px;
+      height: 76px;
+      line-height: 56px;
+      padding: 10px 16px !important;
+      margin-left: 15px;
+      background: url("../../assets/overview_images/dev-type-border-unchecked-1366.png");
+    }
+    .dev-icon img {
+      height: 32px;
+    }
+    .dev-icon span {
+      font-size: 16px;
+      line-height: 56px;
+      height: 56px;
+    }
+    .dev-type-selected {
+      background: url("../../assets/overview_images/dev-type-border-checked-1366.png");
+    }
+  }
+
+</style>
diff --git a/src/views/alarm/webPlay.vue b/src/views/alarm/webPlay.vue
new file mode 100644
index 0000000..97e5ed2
--- /dev/null
+++ b/src/views/alarm/webPlay.vue
@@ -0,0 +1,21 @@
+<template>
+  <div class="play-window-block">
+    <div style="height: 100%">
+      <iframe ref="play" src="/static/webCtrl/demo-easy.html" width="100%" height="100%" style="border: 0px; overflow: hidden;" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'WebPlay'
+}
+</script>
+
+<style scoped>
+  .play-window-block {
+    margin: 15px 15px 15px 0px;
+    box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
+    height: calc(100vh - 175px);
+  }
+</style>
diff --git a/src/views/area/areaList.vue b/src/views/area/areaList.vue
index 1950028..11dc51f 100644
--- a/src/views/area/areaList.vue
+++ b/src/views/area/areaList.vue
@@ -31,7 +31,7 @@
       <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="batchExport">导出</el-button>-->
+          <!--<el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>-->
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>
diff --git a/src/views/area/defenceDetail.vue b/src/views/area/defenceDetail.vue
index e29a258..703ec7d 100644
--- a/src/views/area/defenceDetail.vue
+++ b/src/views/area/defenceDetail.vue
@@ -4,12 +4,14 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="区域名称">
-            <span>{{ dataForm.name }}</span>
+            <el-input v-model="dataForm.name" disabled type="text"/>
+            <!--<span>{{ dataForm.name }}</span>-->
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="防卫状态">
-            <span>{{ dataForm.areaStatusName }}</span>
+            <el-input v-model="dataForm.areaStatusName" disabled type="text"/>
+            <!--<span>{{ dataForm.areaStatusName }}</span>-->
           </el-form-item>
         </el-col>
       </el-row>
@@ -17,12 +19,14 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="区域类别">
-            <span>{{ dataForm.areaTypeName }}</span>
+            <el-input v-model="dataForm.areaTypeName" disabled type="text"/>
+            <!--<span>{{ dataForm.areaTypeName }}</span>-->
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="区域位置">
-            <span>{{ dataForm.position }}</span>
+            <el-input v-model="dataForm.position" disabled type="text"/>
+            <!--<span>{{ dataForm.position }}</span>-->
           </el-form-item>
         </el-col>
       </el-row>
@@ -38,7 +42,8 @@
       <el-row v-show="isFence" :gutter="20">
         <el-col :span="12">
           <el-form-item label="电子围栏">
-            <span>{{ dataForm.deviceStatusName }}</span>
+            <el-input v-model="dataForm.deviceStatusName" disabled type="text"/>
+            <!--<span>{{ dataForm.deviceStatusName }}</span>-->
           </el-form-item>
         </el-col>
       </el-row>
@@ -46,7 +51,8 @@
       <el-row :gutter="20">
         <el-col :span="24">
           <el-form-item label="备注" prop="remark">
-            <span>{{ dataForm.remark }}</span>
+            <el-input v-model="dataForm.remark" disabled type="text"/>
+            <!--<span>{{ dataForm.remark }}</span>-->
           </el-form-item>
         </el-col>
       </el-row>
diff --git a/src/views/area/defenceList.vue b/src/views/area/defenceList.vue
index 9e2ed68..8649918 100644
--- a/src/views/area/defenceList.vue
+++ b/src/views/area/defenceList.vue
@@ -31,9 +31,9 @@
       <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">批量导入</el-button>
-          <el-button class="edit_btn" size="small">导入模板下载</el-button>
-          <!--<el-button class="edit_btn" size="small" @click="batchExport">导出</el-button>-->
+          <!--<el-button class="edit_btn" size="small">批量导入</el-button>-->
+          <!--<el-button class="edit_btn" size="small">导入模板下载</el-button>-->
+          <!--<el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>-->
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>
diff --git a/src/views/car/carAdd.vue b/src/views/car/carAdd.vue
index 6a35b7d..633e353 100644
--- a/src/views/car/carAdd.vue
+++ b/src/views/car/carAdd.vue
@@ -20,14 +20,14 @@
         <el-col :span="12">
           <el-form-item label="所属部门" prop="deptid">
             <!--<span v-show="isDetailMode">{{ dataForm.deptName }}</span>-->
-            <el-select :disabled="isDetailMode" v-model="dataForm.deptid" placeholder="请选择所属部门" filterable clearable>
+            <el-select :disabled="isDetailMode" v-model="dataForm.deptid" placeholder="请选择所属部门" filterable clearable @change="getStaffList">
               <el-option v-for="item in deptList" :key="item.id" :label="item.name" :value="item.id"/>
             </el-select>
             <!--<dept-select v-show="!isDetailMode" v-model="dataForm.deptid" :dept-show="true" :need-top="true" placeholder="所属组织" @change="fetchStaffList"/>-->
           </el-form-item>
         </el-col>
         <el-col v-if="dataForm.property==='2'" :span="12">
-          <el-form-item label="车主" prop="owner">
+          <el-form-item label="车主" prop="ownerId">
             <!--<span v-show="isDetailMode">{{ dataForm.ownerName }}</span>-->
             <el-select :disabled="isDetailMode" v-model="dataForm.ownerId" placeholder="请选择车主" filterable clearable @change="autoStaffPhone">
               <el-option v-for="item in staffList" :key="item.id" :label="item.name" :value="item.id"/>
@@ -91,7 +91,7 @@
       rules: {
         phone: [{ required: true, trigger: ['blur', 'change'], validator: phoneValidator }],
         plateNumber: [{ required: true, trigger: ['blur', 'change'], validator: plateValidator }],
-        owner: [{ required: true, trigger: ['blur', 'change'], message: '请选择车主' }]
+        ownerId: [{ required: true, trigger: ['blur', 'change'], message: '请选择车主' }]
       }, // 前端校验规则
       carProperties: [], // 车辆性质字典值
       staffList: [], // 车主人员列表
@@ -137,6 +137,7 @@
           phone: row.phone,
           remark: row.remark
         }
+        this.getStaffList()
       } else if (dialogStatus === 'detail') {
         this.isDetailMode = true
         this.isEditMode = false
@@ -151,6 +152,7 @@
           deptName: row.deptName,
           ownerName: row.ownerName
         }
+        this.getStaffList()
       }
     },
     // 清除数据
@@ -180,6 +182,13 @@
       })
       getStaffByDept({ deptId: this.dataForm.deptid }).then(response => {
         this.staffList = response.data
+        console.log(response)
+      })
+    },
+    getStaffList(){
+      getStaffByDept({ deptId: this.dataForm.deptid }).then(response => {
+        this.staffList = response.data
+        console.log(response)
       })
     },
     autoStaffPhone() {
@@ -190,7 +199,6 @@
             return item
           }
         })
-
         this.dataForm.phone = selectedStaff[0].phone
       } else {
         this.dataForm.phone = ''

diff --git a/src/router/modules/doorSys.js b/src/router/modules/doorSys.js
index 8017e4b..6bd1506 100644
--- a/src/router/modules/doorSys.js
+++ b/src/router/modules/doorSys.js
@@ -87,6 +87,20 @@
         name: 'DoorAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/door/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/door/alarm/position',
+        name: 'DoorAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/door/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/door/alarm/video',
+        name: 'DoorAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/door/alarm/video'], keepAlive: true }
       }
     ]
   },
@@ -262,5 +276,26 @@
         meta: { title: '营门出入次数统计', icon: '', permission: ['/door/statistics/doorCount'], keepAlive: true }
       }
     ]
+  },
+  {
+    path: '/door/area',
+    component: Layout,
+    redirect: '/door/area',
+    name: 'DoorArea',
+    alwaysShow: true,
+    meta: {
+      title: '区域管理',
+      icon: 'icon-area', // 图标
+      permission: ['/door/area'], // 权限名称
+      sys: '/door'
+    },
+    children: [
+      {
+        path: '/door/area/list',
+        name: 'DoorAreaList',
+        component: () => import('@/views/area/areaList'),
+        meta: { title: '区域列表', icon: '', permission: ['/door/area/list'], keepAlive: true }
+      }
+    ]
   }
 ]
diff --git a/src/router/modules/fenceSys.js b/src/router/modules/fenceSys.js
index 0d784b0..e2962bd 100644
--- a/src/router/modules/fenceSys.js
+++ b/src/router/modules/fenceSys.js
@@ -85,6 +85,20 @@
         name: 'FenceAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/fence/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/fence/alarm/position',
+        name: 'FenceAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/fence/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/fence/alarm/video',
+        name: 'FenceAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/fence/alarm/video'], keepAlive: true }
       }
     ]
   },
diff --git a/src/router/modules/keySys.js b/src/router/modules/keySys.js
index f3a027b..832744b 100644
--- a/src/router/modules/keySys.js
+++ b/src/router/modules/keySys.js
@@ -85,6 +85,20 @@
         name: 'KeyAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/key/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/key/alarm/position',
+        name: 'KeyAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/key/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/key/alarm/video',
+        name: 'KeyAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/key/alarm/video'], keepAlive: true }
       }
     ]
   },
diff --git a/src/router/modules/regionSys.js b/src/router/modules/regionSys.js
index 9b4613a..43b8c38 100644
--- a/src/router/modules/regionSys.js
+++ b/src/router/modules/regionSys.js
@@ -85,6 +85,20 @@
         name: 'RegionAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/region/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/region/alarm/position',
+        name: 'RegionAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/region/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/region/alarm/video',
+        name: 'RegionAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/region/alarm/video'], keepAlive: true }
       }
     ]
   },
@@ -102,6 +116,20 @@
     },
     children: [
       {
+        path: '/region/staff/add',
+        name: 'RegionStaffAdd',
+        component: () => import('@/views/staff/staffAdd'),
+        hidden: true,
+        meta: { title: '人员登记', icon: '', permission: ['/region/staff/add'], keepAlive: true }
+      },
+      {
+        path: '/region/staff/edit',
+        name: 'RegionStaffEdit',
+        component: () => import('@/views/staff/staffEdit'),
+        hidden: true,
+        meta: { title: '人员编辑', icon: '', permission: ['/region/staff/edit'], keepAlive: true }
+      },
+      {
         path: '/region/staff/list',
         name: 'RegionStaffList',
         component: () => import('@/views/staff/staffList'),
diff --git a/src/views/alarm/alarmList.vue b/src/views/alarm/alarmList.vue
index 704f797..91967a0 100644
--- a/src/views/alarm/alarmList.vue
+++ b/src/views/alarm/alarmList.vue
@@ -37,7 +37,7 @@
             </el-col>
 
             <el-col :span="4" 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" @click="fetchData()">搜索</el-button>
             </el-col>
           </el-row>
         </el-form>
@@ -48,7 +48,7 @@
       <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="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>
@@ -66,8 +66,8 @@
         <!--操作列-->
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
-            <el-button type="text" @click="detail(scope.row)">位置</el-button>
-            <el-button v-if="hasPerm('/car/update')" type="text" @click="edit(scope.row)">视频</el-button>
+            <el-button type="text" @click="position(scope.row)">位置</el-button>
+            <el-button v-if="hasPerm('/car/update')" type="text" @click="video(scope.row)">视频</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -185,6 +185,14 @@
     this.fetchData() // 获取数据
   },
   methods: {
+    video(row){
+      const code = this.$store.getters.currentSystem.code
+      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId }})
+    },
+    position(row){
+      const code = this.$store.getters.currentSystem.code
+      this.$router.push({ path: '/' + code + '/alarm/position', query: {  id: row.deviceId }})
+    },
     batchExport() {
       // 全屏加载动画
       const loading = this.$loading({
@@ -254,6 +262,8 @@
       getAlarmList(this.listQuery).then(response => {
         if (response.code === 200) {
           this.list = response.data.rows
+          console.log('&&&')
+          console.log(this.list)
           this.total = parseInt(response.data.total)
         } else {
           this.$message.error(response.message)
diff --git a/src/views/alarm/alarmMonitor.vue b/src/views/alarm/alarmMonitor.vue
new file mode 100644
index 0000000..517d6e9
--- /dev/null
+++ b/src/views/alarm/alarmMonitor.vue
@@ -0,0 +1,80 @@
+<template>
+  <div>
+    <el-row>
+      <!--<el-col :span="6">-->
+        <!--&lt;!&ndash;<video-tree @click="handleCameraClicked"/>&ndash;&gt;-->
+      <!--</el-col>-->
+
+      <el-col :span="18" :offset="3">
+        <web-play ref="webCtrl" />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+// import VideoTree from './videoTree'
+import WebPlay from './webPlay'
+import { getDetailDevice } from '@/api/device'
+export default {
+  name: 'VideoMonitor',
+  components: { WebPlay },
+  data() {
+    return {
+      camera:{
+        ip:'',
+        port:'',
+        username:'',
+        password:''
+      }
+    }
+  },
+  mounted() {
+
+  },
+  activated() {
+    if (this.$route.query && this.$route.query.id) {
+      const id = this.$route.query.id
+      getDetailDevice(id).then(response => {
+          if (response.code === 200) {
+            console.log(response.data)
+            this.camera.ip = response.data.ip
+            this.camera.port = response.data.port
+            this.camera.username = response.data.username
+            this.camera.password = response.data.password
+            this.handleCamera()
+          }
+      })
+    }
+  },
+  methods: {
+    handleCamera(){
+      if (typeof this.camera.ip === 'undefined' || this.camera.ip === '') {
+        console.log('ip is null')
+        return false
+      }
+      if (typeof this.camera.port === 'undefined' || this.camera.port === '') {
+        console.log('port is null')
+        return false
+      }else{
+        this.camera.ip += (':'+ this.camera.port)
+      }
+      if (typeof this.camera.username === 'undefined' || this.camera.username === '') {
+        console.log('username is null')
+        return false
+      }
+      if (typeof this.camera.password === 'undefined' || this.camera.password === '') {
+        console.log('password is null')
+        return false
+      }
+
+      // 开始预览
+      this.$refs.webCtrl.$refs.play.contentWindow.startPlayReal(this.camera)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/alarm/alarmNow.vue b/src/views/alarm/alarmNow.vue
index 03bb5ea..66055b1 100644
--- a/src/views/alarm/alarmNow.vue
+++ b/src/views/alarm/alarmNow.vue
@@ -48,7 +48,7 @@
       <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="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>
@@ -66,8 +66,8 @@
         <el-table-column label="操作" align="center" width="180">
           <template slot-scope="scope">
             <el-button v-if="hasPerm('/alarm/cancel')" type="text" @click="alarmCancel(scope.row)">取消报警</el-button>
-            <el-button type="text" @click="detail(scope.row)">位置</el-button>
-            <el-button type="text" @click="edit(scope.row)">视频</el-button>
+            <el-button type="text" @click="position(scope.row)">位置</el-button>
+            <el-button v-if="hasPerm('/car/update')" type="text" @click="video(scope.row)">视频</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -183,6 +183,14 @@
     this.fetchData() // 获取数据
   },
   methods: {
+    video(row){
+      const code = this.$store.getters.currentSystem.code
+      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId }})
+    },
+    position(row){
+      const code = this.$store.getters.currentSystem.code
+      this.$router.push({ path: '/' + code + '/alarm/position', query: {  id: row.deviceId }})
+    },
     batchExport() {
       // 全屏加载动画
       const loading = this.$loading({
diff --git a/src/views/alarm/alarmPosition.vue b/src/views/alarm/alarmPosition.vue
new file mode 100644
index 0000000..51f915e
--- /dev/null
+++ b/src/views/alarm/alarmPosition.vue
@@ -0,0 +1,786 @@
+<template>
+  <div class="main-page">
+    <!-- 中间平面图区域 -->
+    <div class="map-overview">
+      <img ref="bgImg" :src="bgImageSrc" height="100%" @load="backgroundImageReady">
+
+      <div
+        v-for="item in devList"
+        :id="item.id"
+        :key="item.id"
+        :style="{ position: 'absolute', top: item.y * imgSize.height / imgSizeOriginal.height + 'px', left: (item.x * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
+        class="point-camera"
+        @click="detailDev(item, $event)" />
+    </div>
+    <!-- 右侧设备详情及操作区域 -->
+    <div v-show="showDevDetail" ref="dev-detail-block" class="dev-detail-block">
+      <span class="dev-detail-close" @click="showDevDetail=false" />
+      <el-row style="margin-top: -25px;">
+        <el-col :span="24">设备名称
+          <span class="dev-detail-span">{{ dataForm.name }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">设备编号
+          <span class="dev-detail-span">{{ dataForm.devcode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">设备类型
+          <span class="dev-detail-span">{{ dataForm.typeName }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">在线状态
+          <span class="dev-detail-span">{{ dataForm.onlineStatusName }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">安装日期
+          <span class="dev-detail-span">{{ dataForm.installDate }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">安装位置
+          <span class="dev-detail-span">{{ dataForm.position }}</span>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getProject } from '@/utils/baseConfig'
+import DeviceDetail from '@/views/deviceManage/deviceDetail'
+import tg_main from '../../assets/overview_images/tg/mapOverviewTg.jpg'
+import tg_3_1 from '../../assets/overview_images/tg/mapOverviewTg-3-1.jpg'
+import tg_4_1 from '../../assets/overview_images/tg/mapOverviewTg-4-1.jpg'
+import tg_4_5 from '../../assets/overview_images/tg/mapOverviewTg-4-5.jpg'
+import { getDetailDevice } from '@/api/device'
+
+// const cameraTypes = [4, 5, 8, 9, 10, 11]
+export default {
+  name: 'AlarmPosition',
+  components: { DeviceDetail },
+  data() {
+    return {
+      title: getProject().title,
+      bgImageSrc: tg_main,
+      devListParams: {
+        picture: '1',
+        areaTypeId: 1,
+        deviceTypes: []
+      },
+      dev: {
+        alarm: 0,
+        onLine: 0,
+        closed: 0,
+        offLine: 0
+      },
+      imgSizeOriginal: {
+        width: 2245,
+        height: 1586
+      }, // 图片原尺寸
+      imgSize: {
+        width: 2245,
+        height: 1586
+      }, // 图片显示尺寸
+      winSize: {
+        width: 1440,
+        height: 789
+      }, // 屏幕窗口尺寸
+      halfLeft: 0,
+      showDevDetail: false, // 是否显示设备详情
+      alarmList: [], // 报警列表
+      alarmColumns: [
+        {
+          text: '设备编号',
+          value: 'devcode',
+          align: 'center'
+        },
+        {
+          text: '报警内容',
+          value: 'alarmContent',
+          align: 'center'
+        },
+        {
+          text: '报警时间',
+          value: 'alarmTime',
+          align: 'center',
+          width: 165
+        }
+      ], // 报警列表显示列
+      tableShow: true, // 是否显示告警列表
+      devList: [], // 设备列表（在地图上显示）
+      dataForm: {
+        id: '', // id
+        name: '', // 设备名
+        devcode: '', // 设备编号
+        typeName: '', // 设备类型
+        model: '', // 设备型号
+        onlineStatusName: '', // 在线状态
+        deviceStatusName: '', // 设备状态
+        position: '', // 安装位置
+        installDate: '', // 安装日期
+        inOutName: '' // 进出营
+      }, // 设备详情表单
+      devPosition:{
+        picture: '',
+        x: '',
+        y: ''
+      },
+      checkDevType: [true, false] // 选中设备类型
+    }
+  },
+  mounted() {
+    this.initWindowSize()
+    if (this.$route.query && this.$route.query.id) {
+      const id = this.$route.query.id
+      getDetailDevice(id).then(response => {
+        if (response.code === 200) {
+          console.log(response.data)
+          this.devPosition.picture = response.data.picture
+          this.devPosition.x = response.data.x
+          this.devPosition.y = response.data.y
+          if(this.devPosition.picture === '1'){
+            this.bgImageSrc = tg_main
+          }else if(this.devPosition.picture === '2'){
+            this.bgImageSrc = tg_3_1
+          }else if(this.devPosition.picture === '3'){
+            this.bgImageSrc = tg_4_1
+          }else if(this.devPosition.picture === '4'){
+            this.bgImageSrc = tg_4_5
+          }else{
+            this.$message.warning('该设备暂无位置信息')
+            return
+          }
+          this.devList = []
+          if (this.devPosition.x !== '' && this.devPosition.y !== '') {
+            this.devList.push(response.data)
+          }
+        }
+      })
+    }
+    const that = this
+    window.onresize = function() {
+      that.initWindowSize()
+      that.getBgImageSize()
+    }
+  },
+  methods: {
+    // 获取窗口大小
+    initWindowSize() {
+      // 获取窗体尺寸
+      this.winSize = {
+        width: document.documentElement.clientWidth,
+        height: document.documentElement.clientHeight
+      }
+    },
+    // 获取图像大小
+    getBgImageSize() {
+      // 获取图片尺寸
+      this.imgSize = {
+        width: this.$refs['bgImg'].width,
+        height: this.$refs['bgImg'].height
+      }
+      this.halfLeft = (this.winSize.width - this.imgSize.width) / 2
+    },
+    // 重新绘制设备点位
+    reDrawDevs() {
+      const halfLeft = (this.winSize.width - this.imgSize.width) / 2
+
+      // 调整球机的设备位置
+      const that = this
+      this.devList.forEach(function(item) {
+        const point = document.getElementById(item.id)
+
+        if (point !== null) {
+          if (item.x !== '' && item.y !== '') {
+            point.style.position = 'absolute'
+            point.style.top = item.y * that.imgSize.height / that.imgSizeOriginal.height + 'px'
+            point.style.left = (item.x * that.imgSize.width / that.imgSizeOriginal.width + halfLeft) + 'px'
+          } else {
+            point.style.display = 'none'
+          }
+        }
+      })
+    },
+    // 平面图就绪时执行函数
+    backgroundImageReady() {
+      this.getBgImageSize()
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    },
+    backToIndex() {
+      this.$router.push('/door/alarm/now')
+    },
+    // 查询并显示设备详情
+    detailDev(dev, event) {
+      this.resetDevDetail()
+      getDetailDevice(dev.id).then(response => {
+        if (response.code === 200) {
+          this.dataForm = {
+            id: dev.id,
+            name: dev.name,
+            devcode: dev.devcode,
+            typeName: response.data.typeName,
+            model: dev.model,
+            onlineStatusName: response.data.onlineStatusName,
+            position: dev.position,
+            installDate: dev.installDate,
+            inOutName: response.data.inOutName,
+            deviceStatusName: response.data.deviceStatusName
+          }
+        } else {
+          this.$message.error(response.message)
+        }
+      })
+
+      // 弹窗显示设备详情
+      const targetDev = event.currentTarget // 取到点击到的设备图标div
+
+      this.showDevDetail = true
+      let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+      top = top + 100
+      this.$refs['dev-detail-block'].style.position = 'absolute'
+      this.$refs['dev-detail-block'].style.top = top + 'px'
+      this.$refs['dev-detail-block'].style.left = targetDev.style.left
+    },
+    // 点击报警列表
+    alarmRowClick(dev, column, event) {
+
+    },
+    // 清除设备详情
+    resetDevDetail() {
+      this.dataForm = {
+        id: '', // id
+        name: '', // 设备名
+        devcode: '', // 设备编号
+        typeName: '', // 设备类型
+        model: '', // 设备型号
+        onlineStatusName: '', // 在线状态
+        deviceStatusName: '', // 设备状态
+        position: '', // 安装位置
+        installDate: '', // 安装日期
+        inOutName: '' // 进出营
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+  .main-page {
+    background-size: cover;
+    background-color: #023d83;
+    height: 100vh;
+  }
+
+  .main-header {
+    width: 100vw;
+  }
+  .main-title {
+    height: 90px;
+    text-align: center;
+    padding-top: 20px;
+    background: url("../../assets/overview_images/title-background-1920.png");
+  }
+
+  .main-title img {
+    display: inline-block;
+    margin-right: 15px;
+    width: 52px;
+    height: 32px;
+    vertical-align: text-bottom;
+  }
+
+  .home-icon {
+    width: 26px;
+    height: 26px;
+    position: fixed;
+    left: 20px;
+    top: 20px;
+  }
+  .exit-icon {
+    width: 26px;
+    height: 26px;
+    position: fixed;
+    right: 20px;
+    top: 20px;
+  }
+  .home-icon img, .exit-icon img {
+    width: 26px;
+    height: 26px;
+  }
+
+  .main-title span {
+    color: #FFFFFF;
+    font-size: 32px;
+    font-weight: bold;
+    font-family: 'Microsoft YaHei';
+  }
+
+  .map-overview {
+    /*margin-top: 50px;*/
+    /*width: 1100px;*/
+    height: calc(90vh - 200px);
+    text-align: center;
+    position: relative;
+  }
+  .point {
+    width: 24px;
+    height: 24px;
+    position: relative;
+    display: inline-block;
+    cursor: pointer;
+  }
+  .point-camera {
+    background: url("../../assets/overview_images/icons/icon-camera-point.png");
+    background-size: contain;
+    @extend .point;
+  }
+  .point-fence {
+    background: url("../../assets/overview_images/icons/icon-fence-unchecked.png");
+    background-size: contain;
+    @extend .point;
+  }
+
+  .statis-block {
+    text-align: center;
+    margin-top: 20px;
+    font-size: 48px;
+  }
+  .sub-title {
+    text-align: center;
+    font-size: 32px;
+  }
+  .sub-data-block {
+    width: 122px;
+    height: 155px;
+  }
+  .dev-normal {
+    background: url("../../assets/overview_images/normal.png");
+    background-size: contain;
+    color: #00ff0c;
+  }
+  .dev-alarm {
+    background: url("../../assets/overview_images/alarm.png");
+    background-size: contain;
+    color: #ff0000;
+  }
+  .dev-offline {
+    background: url("../../assets/overview_images/offline.png");
+    background-size: contain;
+    color: #fff000;
+  }
+  .dev-closed {
+    background: url("../../assets/overview_images/closed.png");
+    background-size: contain;
+    color: #00fff6;
+  }
+
+  .dev-status-block {
+    position: absolute;
+    top: 100px;
+    left: 20px;
+    color: #ffffff;
+  }
+
+  .alarm-now-block {
+    position: absolute;
+    z-index: 500;
+    top: 300px;
+    left: 20px;
+    width: 480px;
+    .map-alarm-div-header {
+      line-height: 40px;
+      padding-left: 10px;
+      color: #00fff6;
+      font-size: 24px;
+      .icon-right {
+        cursor: pointer;
+        margin-left: 20px;
+      }
+    }
+    .el-scrollbar {
+      /*height: 200px;*/
+      width: 100%;
+    }
+    .moredatascollor {
+      height: 200px;
+    }
+    .el-scrollbar__wrap {
+      overflow-y: auto;
+      overflow-x: hidden;
+      margin-bottom: 0px !important;
+    }
+    .el-table {
+      font-size: 12px;
+    }
+    .transition-box {
+      margin-bottom: 10px;
+      width: 200px;
+      height: 100px;
+      border-radius: 4px;
+      background-color: #409EFF;
+      text-align: center;
+      color: #fff;
+      padding: 40px 20px;
+      box-sizing: border-box;
+      margin-right: 20px;
+    }
+  }
+
+  .alarm-now-block /deep/ .el-table th {
+    background-color: #0757A0;
+    padding: 12px 0px;
+    font-size: 16px;
+    color: #00fff6;
+    font-weight: normal;
+  }
+
+  .alarm-now-block /deep/ .el-table td {
+    /*background-color: #0757A0;*/
+    padding: 10px 0px;
+    font-size: 15px;
+    color: #FFFFFF;
+    font-weight: normal;
+  }
+
+  .alarm-now-block /deep/ .el-table__row td {
+    background-color: #023D83;
+  }
+  .alarm-now-block /deep/ .el-table__body tr:hover > td {
+    background-color: #0757A0;
+  }
+  .alarm-now-block /deep/ tr.el-table__row--striped td {
+    background-color: #0757A0;
+  }
+
+  .map-tab {
+    position: absolute;
+    right: 20px;
+    top: 100px;
+    width: 300px;
+    button {
+      margin: 5px 0px;
+    }
+  }
+
+  .tab-top {
+    position: relative;
+    width: 284px;
+    height: 24px;
+    background: url("../../assets/overview_images/tab-top-bg.png");
+  }
+  .tab-bottom {
+    position: relative;
+    width: 284px;
+    height: 24px;
+    background: url("../../assets/overview_images/tab-bottom-bg.png");
+  }
+  .map-index-button {
+    position: relative;
+    width: 284px;
+    height: 74px;
+    background: url("../../assets/overview_images/tab-index-unchecked.png");
+    font-size: 32px;
+    line-height: 74px;
+    text-align: center;
+    color: #FFFFFF;
+    cursor: pointer;
+  }
+  .index-selected {
+    background: url("../../assets/overview_images/tab-index-checked.png");
+  }
+  .sub-tab-guider {
+    width: 149px;
+    height: 50px;
+    background: url("../../assets/overview_images/sub-tab-guider.png");
+  }
+  .sub-tab-border {
+    width: 204px;
+    height: 253px;
+    background: url("../../assets/overview_images/sub-tab-border.png");
+  }
+  .sub-tab-content {
+    text-align: center;
+    color: #FFFFFF;
+    font-size: 28px;
+    cursor: pointer;
+    width: 200px;
+  }
+
+  .dev-detail-block {
+    /*position: absolute;*/
+    /*right: 20px;*/
+    /*bottom: 100px;*/
+    width: 520px;
+    height: 335px;
+    color: #00FFFF;
+    font-size: 24px;
+    font-family: "Microsoft YaHei";
+    padding: 45px 60px;
+    line-height: 35px;
+    background: url("../../assets/overview_images/dev-info.png");
+    .dev-detail-span {
+      margin-left: 20px;
+    }
+    .dev-detail-close::before {
+      content: "\2716";
+      position: relative;
+      top: -20px;
+      right: -410px;
+      cursor: pointer;
+    }
+  }
+
+  .dev-footer {
+    position: absolute;
+    bottom: 25px;
+  }
+
+  .dev-icon {
+    width: 195px;
+    height: 105px;
+    vertical-align: middle;
+    line-height: 65px;
+    padding: 20px 30px !important;
+    margin-left: 15px;
+    cursor: pointer;
+    background: url("../../assets/overview_images/dev-type-border-unchecked.png");
+  }
+
+  .dev-icon img {
+    height: 40px;
+    vertical-align:middle;
+  }
+  .dev-icon span {
+    font-size: 20px;
+    color: #00D2FF;
+    line-height: 65px;
+    height: 65px;
+    vertical-align:middle;
+    float: right;
+  }
+
+  .dev-type-selected {
+    background: url("../../assets/overview_images/dev-type-border-checked.png");
+  }
+  .dev-type-selected span {
+    color: #f58a88 !important;
+  }
+
+  /*@media(max-width: 1440px) {*/
+  /*  .main-title {*/
+  /*    height: 68px;*/
+  /*    padding-top: 20px;*/
+  /*    background: url("../../assets/overview_images/title-background-1440.png");*/
+  /*  }*/
+  /*  .main-title span {*/
+  /*    font-size: 24px;*/
+  /*  }*/
+  /*  .main-title img {*/
+  /*    margin-right: 15px;*/
+  /*    width: 32px;*/
+  /*    height: 32px;*/
+  /*  }*/
+
+  /*  .home-icon {*/
+  /*    left: 18px;*/
+  /*    width: 18px;*/
+  /*    height: 18px;*/
+  /*  }*/
+  /*  .exit-icon {*/
+  /*    right: 18px;*/
+  /*    width: 18px;*/
+  /*    height: 18px;*/
+  /*  }*/
+
+  /*  .home-icon img, .exit-icon img {*/
+  /*    width: 18px;*/
+  /*    height: 18px;*/
+  /*  }*/
+
+  /*  .dev-icon span {*/
+  /*    font-size: 12px;*/
+  /*  }*/
+  /*}*/
+
+  @media(max-width: 1440px) {
+    .main-title {
+      height: 65px;
+      padding-top: 16px;
+      background: url("../../assets/overview_images/title-background-1366.png");
+    }
+    .main-title span {
+      font-size: 24px;
+    }
+    .main-title img {
+      margin-right: 15px;
+      width: 32px;
+      height: 32px;
+    }
+
+    .home-icon {
+      left: 16px;
+      width: 16px;
+      height: 16px;
+    }
+    .exit-icon {
+      right: 16px;
+      width: 16px;
+      height: 16px;
+    }
+
+    .home-icon img, .exit-icon img {
+      width: 20px;
+      height: 20px;
+    }
+
+    .map-overview {
+      margin-top: 35px;
+      height: calc(90vh - 150px);
+    }
+
+    .point {
+      width: 16px;
+      height: 16px;
+    }
+
+    .statis-block {
+      margin-top: 16px;
+      font-size: 36px;
+    }
+    .sub-title {
+      font-size: 24px;
+    }
+    .sub-data-block {
+      width: 90px;
+      height: 114px;
+    }
+
+    .dev-normal {
+      background: url("../../assets/overview_images/normal-1366.png");
+    }
+    .dev-alarm {
+      background: url("../../assets/overview_images/alarm-1366.png");
+    }
+    .dev-offline {
+      background: url("../../assets/overview_images/offline-1366.png");
+    }
+    .dev-closed {
+      background: url("../../assets/overview_images/closed-1366.png");
+    }
+
+    .dev-status-block {
+      top: 90px;
+      left: 16px;
+    }
+
+    .alarm-now-block {
+      top: 220px;
+      left: 16px;
+      width: 360px;
+      .map-alarm-div-header {
+        line-height: 32px;
+        font-size: 20px;
+      }
+    }
+
+    .alarm-now-block /deep/ .el-table th {
+      padding: 8px 0px;
+      font-size: 16px;
+    }
+    .alarm-now-block /deep/ .el-table td {
+      padding: 5px 0px;
+      font-size: 12px;
+    }
+
+    .map-tab {
+      right: 16px;
+      top: 90px;
+      width: 215px;
+      button {
+        margin: 5px 0px;
+      }
+    }
+    .tab-top {
+      width: 213px;
+      height: 18px;
+      background: url("../../assets/overview_images/tab-top-bg-1366.png");
+    }
+    .tab-bottom {
+      width: 213px;
+      height: 18px;
+      background: url("../../assets/overview_images/tab-bottom-bg-1366.png");
+    }
+    .map-index-button {
+      width: 210px;
+      height: 56px;
+      background: url("../../assets/overview_images/tab-index-unchecked-1366.png");
+      font-size: 24px;
+      line-height: 56px;
+    }
+    .index-selected {
+      background: url("../../assets/overview_images/tab-index-checked-1366.png");
+    }
+
+    .sub-tab-guider {
+      width: 110px;
+      height: 37px;
+      background: url("../../assets/overview_images/sub-tab-guider-1366.png");
+    }
+    .sub-tab-border {
+      width: 150px;
+      height: 186px;
+      background: url("../../assets/overview_images/sub-tab-border-1366.png");
+    }
+    .sub-tab-content {
+      font-size: 20px;
+      cursor: pointer;
+      width: 145px;
+    }
+
+    .dev-detail-block {
+      width: 390px;
+      height: 251px;
+      font-size: 16px;
+      padding: 30px 40px;
+      line-height: 28px;
+      background: url("../../assets/overview_images/dev-info-1366.png");
+      .dev-detail-close::before {
+        top: -12px;
+        right: -312px;
+      }
+    }
+
+    .dev-footer {
+      bottom: 20px;
+    }
+    .dev-icon {
+      width: 140px;
+      height: 76px;
+      line-height: 56px;
+      padding: 10px 16px !important;
+      margin-left: 15px;
+      background: url("../../assets/overview_images/dev-type-border-unchecked-1366.png");
+    }
+    .dev-icon img {
+      height: 32px;
+    }
+    .dev-icon span {
+      font-size: 16px;
+      line-height: 56px;
+      height: 56px;
+    }
+    .dev-type-selected {
+      background: url("../../assets/overview_images/dev-type-border-checked-1366.png");
+    }
+  }
+
+</style>
diff --git a/src/views/alarm/webPlay.vue b/src/views/alarm/webPlay.vue
new file mode 100644
index 0000000..97e5ed2
--- /dev/null
+++ b/src/views/alarm/webPlay.vue
@@ -0,0 +1,21 @@
+<template>
+  <div class="play-window-block">
+    <div style="height: 100%">
+      <iframe ref="play" src="/static/webCtrl/demo-easy.html" width="100%" height="100%" style="border: 0px; overflow: hidden;" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'WebPlay'
+}
+</script>
+
+<style scoped>
+  .play-window-block {
+    margin: 15px 15px 15px 0px;
+    box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
+    height: calc(100vh - 175px);
+  }
+</style>
diff --git a/src/views/area/areaList.vue b/src/views/area/areaList.vue
index 1950028..11dc51f 100644
--- a/src/views/area/areaList.vue
+++ b/src/views/area/areaList.vue
@@ -31,7 +31,7 @@
       <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="batchExport">导出</el-button>-->
+          <!--<el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>-->
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>
diff --git a/src/views/area/defenceDetail.vue b/src/views/area/defenceDetail.vue
index e29a258..703ec7d 100644
--- a/src/views/area/defenceDetail.vue
+++ b/src/views/area/defenceDetail.vue
@@ -4,12 +4,14 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="区域名称">
-            <span>{{ dataForm.name }}</span>
+            <el-input v-model="dataForm.name" disabled type="text"/>
+            <!--<span>{{ dataForm.name }}</span>-->
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="防卫状态">
-            <span>{{ dataForm.areaStatusName }}</span>
+            <el-input v-model="dataForm.areaStatusName" disabled type="text"/>
+            <!--<span>{{ dataForm.areaStatusName }}</span>-->
           </el-form-item>
         </el-col>
       </el-row>
@@ -17,12 +19,14 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="区域类别">
-            <span>{{ dataForm.areaTypeName }}</span>
+            <el-input v-model="dataForm.areaTypeName" disabled type="text"/>
+            <!--<span>{{ dataForm.areaTypeName }}</span>-->
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="区域位置">
-            <span>{{ dataForm.position }}</span>
+            <el-input v-model="dataForm.position" disabled type="text"/>
+            <!--<span>{{ dataForm.position }}</span>-->
           </el-form-item>
         </el-col>
       </el-row>
@@ -38,7 +42,8 @@
       <el-row v-show="isFence" :gutter="20">
         <el-col :span="12">
           <el-form-item label="电子围栏">
-            <span>{{ dataForm.deviceStatusName }}</span>
+            <el-input v-model="dataForm.deviceStatusName" disabled type="text"/>
+            <!--<span>{{ dataForm.deviceStatusName }}</span>-->
           </el-form-item>
         </el-col>
       </el-row>
@@ -46,7 +51,8 @@
       <el-row :gutter="20">
         <el-col :span="24">
           <el-form-item label="备注" prop="remark">
-            <span>{{ dataForm.remark }}</span>
+            <el-input v-model="dataForm.remark" disabled type="text"/>
+            <!--<span>{{ dataForm.remark }}</span>-->
           </el-form-item>
         </el-col>
       </el-row>
diff --git a/src/views/area/defenceList.vue b/src/views/area/defenceList.vue
index 9e2ed68..8649918 100644
--- a/src/views/area/defenceList.vue
+++ b/src/views/area/defenceList.vue
@@ -31,9 +31,9 @@
       <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">批量导入</el-button>
-          <el-button class="edit_btn" size="small">导入模板下载</el-button>
-          <!--<el-button class="edit_btn" size="small" @click="batchExport">导出</el-button>-->
+          <!--<el-button class="edit_btn" size="small">批量导入</el-button>-->
+          <!--<el-button class="edit_btn" size="small">导入模板下载</el-button>-->
+          <!--<el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>-->
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>
diff --git a/src/views/car/carAdd.vue b/src/views/car/carAdd.vue
index 6a35b7d..633e353 100644
--- a/src/views/car/carAdd.vue
+++ b/src/views/car/carAdd.vue
@@ -20,14 +20,14 @@
         <el-col :span="12">
           <el-form-item label="所属部门" prop="deptid">
             <!--<span v-show="isDetailMode">{{ dataForm.deptName }}</span>-->
-            <el-select :disabled="isDetailMode" v-model="dataForm.deptid" placeholder="请选择所属部门" filterable clearable>
+            <el-select :disabled="isDetailMode" v-model="dataForm.deptid" placeholder="请选择所属部门" filterable clearable @change="getStaffList">
               <el-option v-for="item in deptList" :key="item.id" :label="item.name" :value="item.id"/>
             </el-select>
             <!--<dept-select v-show="!isDetailMode" v-model="dataForm.deptid" :dept-show="true" :need-top="true" placeholder="所属组织" @change="fetchStaffList"/>-->
           </el-form-item>
         </el-col>
         <el-col v-if="dataForm.property==='2'" :span="12">
-          <el-form-item label="车主" prop="owner">
+          <el-form-item label="车主" prop="ownerId">
             <!--<span v-show="isDetailMode">{{ dataForm.ownerName }}</span>-->
             <el-select :disabled="isDetailMode" v-model="dataForm.ownerId" placeholder="请选择车主" filterable clearable @change="autoStaffPhone">
               <el-option v-for="item in staffList" :key="item.id" :label="item.name" :value="item.id"/>
@@ -91,7 +91,7 @@
       rules: {
         phone: [{ required: true, trigger: ['blur', 'change'], validator: phoneValidator }],
         plateNumber: [{ required: true, trigger: ['blur', 'change'], validator: plateValidator }],
-        owner: [{ required: true, trigger: ['blur', 'change'], message: '请选择车主' }]
+        ownerId: [{ required: true, trigger: ['blur', 'change'], message: '请选择车主' }]
       }, // 前端校验规则
       carProperties: [], // 车辆性质字典值
       staffList: [], // 车主人员列表
@@ -137,6 +137,7 @@
           phone: row.phone,
           remark: row.remark
         }
+        this.getStaffList()
       } else if (dialogStatus === 'detail') {
         this.isDetailMode = true
         this.isEditMode = false
@@ -151,6 +152,7 @@
           deptName: row.deptName,
           ownerName: row.ownerName
         }
+        this.getStaffList()
       }
     },
     // 清除数据
@@ -180,6 +182,13 @@
       })
       getStaffByDept({ deptId: this.dataForm.deptid }).then(response => {
         this.staffList = response.data
+        console.log(response)
+      })
+    },
+    getStaffList(){
+      getStaffByDept({ deptId: this.dataForm.deptid }).then(response => {
+        this.staffList = response.data
+        console.log(response)
       })
     },
     autoStaffPhone() {
@@ -190,7 +199,6 @@
             return item
           }
         })
-
         this.dataForm.phone = selectedStaff[0].phone
       } else {
         this.dataForm.phone = ''
diff --git a/src/views/car/carList.vue b/src/views/car/carList.vue
index ceb77ff..d0c0176 100644
--- a/src/views/car/carList.vue
+++ b/src/views/car/carList.vue
@@ -31,7 +31,7 @@
       <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="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
           <el-button v-if="hasPerm('/door/car/add')" class="edit_btn" size="small" @click="add">新增</el-button>
           <!--          <el-button v-if="hasPerm('/door/car/delete')" v-show="false" class="edit_btn" size="small" @click="batchDel">删除</el-button>-->
         </el-col>

diff --git a/src/router/modules/doorSys.js b/src/router/modules/doorSys.js
index 8017e4b..6bd1506 100644
--- a/src/router/modules/doorSys.js
+++ b/src/router/modules/doorSys.js
@@ -87,6 +87,20 @@
         name: 'DoorAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/door/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/door/alarm/position',
+        name: 'DoorAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/door/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/door/alarm/video',
+        name: 'DoorAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/door/alarm/video'], keepAlive: true }
       }
     ]
   },
@@ -262,5 +276,26 @@
         meta: { title: '营门出入次数统计', icon: '', permission: ['/door/statistics/doorCount'], keepAlive: true }
       }
     ]
+  },
+  {
+    path: '/door/area',
+    component: Layout,
+    redirect: '/door/area',
+    name: 'DoorArea',
+    alwaysShow: true,
+    meta: {
+      title: '区域管理',
+      icon: 'icon-area', // 图标
+      permission: ['/door/area'], // 权限名称
+      sys: '/door'
+    },
+    children: [
+      {
+        path: '/door/area/list',
+        name: 'DoorAreaList',
+        component: () => import('@/views/area/areaList'),
+        meta: { title: '区域列表', icon: '', permission: ['/door/area/list'], keepAlive: true }
+      }
+    ]
   }
 ]
diff --git a/src/router/modules/fenceSys.js b/src/router/modules/fenceSys.js
index 0d784b0..e2962bd 100644
--- a/src/router/modules/fenceSys.js
+++ b/src/router/modules/fenceSys.js
@@ -85,6 +85,20 @@
         name: 'FenceAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/fence/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/fence/alarm/position',
+        name: 'FenceAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/fence/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/fence/alarm/video',
+        name: 'FenceAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/fence/alarm/video'], keepAlive: true }
       }
     ]
   },
diff --git a/src/router/modules/keySys.js b/src/router/modules/keySys.js
index f3a027b..832744b 100644
--- a/src/router/modules/keySys.js
+++ b/src/router/modules/keySys.js
@@ -85,6 +85,20 @@
         name: 'KeyAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/key/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/key/alarm/position',
+        name: 'KeyAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/key/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/key/alarm/video',
+        name: 'KeyAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/key/alarm/video'], keepAlive: true }
       }
     ]
   },
diff --git a/src/router/modules/regionSys.js b/src/router/modules/regionSys.js
index 9b4613a..43b8c38 100644
--- a/src/router/modules/regionSys.js
+++ b/src/router/modules/regionSys.js
@@ -85,6 +85,20 @@
         name: 'RegionAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/region/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/region/alarm/position',
+        name: 'RegionAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/region/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/region/alarm/video',
+        name: 'RegionAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/region/alarm/video'], keepAlive: true }
       }
     ]
   },
@@ -102,6 +116,20 @@
     },
     children: [
       {
+        path: '/region/staff/add',
+        name: 'RegionStaffAdd',
+        component: () => import('@/views/staff/staffAdd'),
+        hidden: true,
+        meta: { title: '人员登记', icon: '', permission: ['/region/staff/add'], keepAlive: true }
+      },
+      {
+        path: '/region/staff/edit',
+        name: 'RegionStaffEdit',
+        component: () => import('@/views/staff/staffEdit'),
+        hidden: true,
+        meta: { title: '人员编辑', icon: '', permission: ['/region/staff/edit'], keepAlive: true }
+      },
+      {
         path: '/region/staff/list',
         name: 'RegionStaffList',
         component: () => import('@/views/staff/staffList'),
diff --git a/src/views/alarm/alarmList.vue b/src/views/alarm/alarmList.vue
index 704f797..91967a0 100644
--- a/src/views/alarm/alarmList.vue
+++ b/src/views/alarm/alarmList.vue
@@ -37,7 +37,7 @@
             </el-col>
 
             <el-col :span="4" 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" @click="fetchData()">搜索</el-button>
             </el-col>
           </el-row>
         </el-form>
@@ -48,7 +48,7 @@
       <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="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>
@@ -66,8 +66,8 @@
         <!--操作列-->
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
-            <el-button type="text" @click="detail(scope.row)">位置</el-button>
-            <el-button v-if="hasPerm('/car/update')" type="text" @click="edit(scope.row)">视频</el-button>
+            <el-button type="text" @click="position(scope.row)">位置</el-button>
+            <el-button v-if="hasPerm('/car/update')" type="text" @click="video(scope.row)">视频</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -185,6 +185,14 @@
     this.fetchData() // 获取数据
   },
   methods: {
+    video(row){
+      const code = this.$store.getters.currentSystem.code
+      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId }})
+    },
+    position(row){
+      const code = this.$store.getters.currentSystem.code
+      this.$router.push({ path: '/' + code + '/alarm/position', query: {  id: row.deviceId }})
+    },
     batchExport() {
       // 全屏加载动画
       const loading = this.$loading({
@@ -254,6 +262,8 @@
       getAlarmList(this.listQuery).then(response => {
         if (response.code === 200) {
           this.list = response.data.rows
+          console.log('&&&')
+          console.log(this.list)
           this.total = parseInt(response.data.total)
         } else {
           this.$message.error(response.message)
diff --git a/src/views/alarm/alarmMonitor.vue b/src/views/alarm/alarmMonitor.vue
new file mode 100644
index 0000000..517d6e9
--- /dev/null
+++ b/src/views/alarm/alarmMonitor.vue
@@ -0,0 +1,80 @@
+<template>
+  <div>
+    <el-row>
+      <!--<el-col :span="6">-->
+        <!--&lt;!&ndash;<video-tree @click="handleCameraClicked"/>&ndash;&gt;-->
+      <!--</el-col>-->
+
+      <el-col :span="18" :offset="3">
+        <web-play ref="webCtrl" />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+// import VideoTree from './videoTree'
+import WebPlay from './webPlay'
+import { getDetailDevice } from '@/api/device'
+export default {
+  name: 'VideoMonitor',
+  components: { WebPlay },
+  data() {
+    return {
+      camera:{
+        ip:'',
+        port:'',
+        username:'',
+        password:''
+      }
+    }
+  },
+  mounted() {
+
+  },
+  activated() {
+    if (this.$route.query && this.$route.query.id) {
+      const id = this.$route.query.id
+      getDetailDevice(id).then(response => {
+          if (response.code === 200) {
+            console.log(response.data)
+            this.camera.ip = response.data.ip
+            this.camera.port = response.data.port
+            this.camera.username = response.data.username
+            this.camera.password = response.data.password
+            this.handleCamera()
+          }
+      })
+    }
+  },
+  methods: {
+    handleCamera(){
+      if (typeof this.camera.ip === 'undefined' || this.camera.ip === '') {
+        console.log('ip is null')
+        return false
+      }
+      if (typeof this.camera.port === 'undefined' || this.camera.port === '') {
+        console.log('port is null')
+        return false
+      }else{
+        this.camera.ip += (':'+ this.camera.port)
+      }
+      if (typeof this.camera.username === 'undefined' || this.camera.username === '') {
+        console.log('username is null')
+        return false
+      }
+      if (typeof this.camera.password === 'undefined' || this.camera.password === '') {
+        console.log('password is null')
+        return false
+      }
+
+      // 开始预览
+      this.$refs.webCtrl.$refs.play.contentWindow.startPlayReal(this.camera)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/alarm/alarmNow.vue b/src/views/alarm/alarmNow.vue
index 03bb5ea..66055b1 100644
--- a/src/views/alarm/alarmNow.vue
+++ b/src/views/alarm/alarmNow.vue
@@ -48,7 +48,7 @@
       <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="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>
@@ -66,8 +66,8 @@
         <el-table-column label="操作" align="center" width="180">
           <template slot-scope="scope">
             <el-button v-if="hasPerm('/alarm/cancel')" type="text" @click="alarmCancel(scope.row)">取消报警</el-button>
-            <el-button type="text" @click="detail(scope.row)">位置</el-button>
-            <el-button type="text" @click="edit(scope.row)">视频</el-button>
+            <el-button type="text" @click="position(scope.row)">位置</el-button>
+            <el-button v-if="hasPerm('/car/update')" type="text" @click="video(scope.row)">视频</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -183,6 +183,14 @@
     this.fetchData() // 获取数据
   },
   methods: {
+    video(row){
+      const code = this.$store.getters.currentSystem.code
+      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId }})
+    },
+    position(row){
+      const code = this.$store.getters.currentSystem.code
+      this.$router.push({ path: '/' + code + '/alarm/position', query: {  id: row.deviceId }})
+    },
     batchExport() {
       // 全屏加载动画
       const loading = this.$loading({
diff --git a/src/views/alarm/alarmPosition.vue b/src/views/alarm/alarmPosition.vue
new file mode 100644
index 0000000..51f915e
--- /dev/null
+++ b/src/views/alarm/alarmPosition.vue
@@ -0,0 +1,786 @@
+<template>
+  <div class="main-page">
+    <!-- 中间平面图区域 -->
+    <div class="map-overview">
+      <img ref="bgImg" :src="bgImageSrc" height="100%" @load="backgroundImageReady">
+
+      <div
+        v-for="item in devList"
+        :id="item.id"
+        :key="item.id"
+        :style="{ position: 'absolute', top: item.y * imgSize.height / imgSizeOriginal.height + 'px', left: (item.x * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
+        class="point-camera"
+        @click="detailDev(item, $event)" />
+    </div>
+    <!-- 右侧设备详情及操作区域 -->
+    <div v-show="showDevDetail" ref="dev-detail-block" class="dev-detail-block">
+      <span class="dev-detail-close" @click="showDevDetail=false" />
+      <el-row style="margin-top: -25px;">
+        <el-col :span="24">设备名称
+          <span class="dev-detail-span">{{ dataForm.name }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">设备编号
+          <span class="dev-detail-span">{{ dataForm.devcode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">设备类型
+          <span class="dev-detail-span">{{ dataForm.typeName }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">在线状态
+          <span class="dev-detail-span">{{ dataForm.onlineStatusName }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">安装日期
+          <span class="dev-detail-span">{{ dataForm.installDate }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">安装位置
+          <span class="dev-detail-span">{{ dataForm.position }}</span>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getProject } from '@/utils/baseConfig'
+import DeviceDetail from '@/views/deviceManage/deviceDetail'
+import tg_main from '../../assets/overview_images/tg/mapOverviewTg.jpg'
+import tg_3_1 from '../../assets/overview_images/tg/mapOverviewTg-3-1.jpg'
+import tg_4_1 from '../../assets/overview_images/tg/mapOverviewTg-4-1.jpg'
+import tg_4_5 from '../../assets/overview_images/tg/mapOverviewTg-4-5.jpg'
+import { getDetailDevice } from '@/api/device'
+
+// const cameraTypes = [4, 5, 8, 9, 10, 11]
+export default {
+  name: 'AlarmPosition',
+  components: { DeviceDetail },
+  data() {
+    return {
+      title: getProject().title,
+      bgImageSrc: tg_main,
+      devListParams: {
+        picture: '1',
+        areaTypeId: 1,
+        deviceTypes: []
+      },
+      dev: {
+        alarm: 0,
+        onLine: 0,
+        closed: 0,
+        offLine: 0
+      },
+      imgSizeOriginal: {
+        width: 2245,
+        height: 1586
+      }, // 图片原尺寸
+      imgSize: {
+        width: 2245,
+        height: 1586
+      }, // 图片显示尺寸
+      winSize: {
+        width: 1440,
+        height: 789
+      }, // 屏幕窗口尺寸
+      halfLeft: 0,
+      showDevDetail: false, // 是否显示设备详情
+      alarmList: [], // 报警列表
+      alarmColumns: [
+        {
+          text: '设备编号',
+          value: 'devcode',
+          align: 'center'
+        },
+        {
+          text: '报警内容',
+          value: 'alarmContent',
+          align: 'center'
+        },
+        {
+          text: '报警时间',
+          value: 'alarmTime',
+          align: 'center',
+          width: 165
+        }
+      ], // 报警列表显示列
+      tableShow: true, // 是否显示告警列表
+      devList: [], // 设备列表（在地图上显示）
+      dataForm: {
+        id: '', // id
+        name: '', // 设备名
+        devcode: '', // 设备编号
+        typeName: '', // 设备类型
+        model: '', // 设备型号
+        onlineStatusName: '', // 在线状态
+        deviceStatusName: '', // 设备状态
+        position: '', // 安装位置
+        installDate: '', // 安装日期
+        inOutName: '' // 进出营
+      }, // 设备详情表单
+      devPosition:{
+        picture: '',
+        x: '',
+        y: ''
+      },
+      checkDevType: [true, false] // 选中设备类型
+    }
+  },
+  mounted() {
+    this.initWindowSize()
+    if (this.$route.query && this.$route.query.id) {
+      const id = this.$route.query.id
+      getDetailDevice(id).then(response => {
+        if (response.code === 200) {
+          console.log(response.data)
+          this.devPosition.picture = response.data.picture
+          this.devPosition.x = response.data.x
+          this.devPosition.y = response.data.y
+          if(this.devPosition.picture === '1'){
+            this.bgImageSrc = tg_main
+          }else if(this.devPosition.picture === '2'){
+            this.bgImageSrc = tg_3_1
+          }else if(this.devPosition.picture === '3'){
+            this.bgImageSrc = tg_4_1
+          }else if(this.devPosition.picture === '4'){
+            this.bgImageSrc = tg_4_5
+          }else{
+            this.$message.warning('该设备暂无位置信息')
+            return
+          }
+          this.devList = []
+          if (this.devPosition.x !== '' && this.devPosition.y !== '') {
+            this.devList.push(response.data)
+          }
+        }
+      })
+    }
+    const that = this
+    window.onresize = function() {
+      that.initWindowSize()
+      that.getBgImageSize()
+    }
+  },
+  methods: {
+    // 获取窗口大小
+    initWindowSize() {
+      // 获取窗体尺寸
+      this.winSize = {
+        width: document.documentElement.clientWidth,
+        height: document.documentElement.clientHeight
+      }
+    },
+    // 获取图像大小
+    getBgImageSize() {
+      // 获取图片尺寸
+      this.imgSize = {
+        width: this.$refs['bgImg'].width,
+        height: this.$refs['bgImg'].height
+      }
+      this.halfLeft = (this.winSize.width - this.imgSize.width) / 2
+    },
+    // 重新绘制设备点位
+    reDrawDevs() {
+      const halfLeft = (this.winSize.width - this.imgSize.width) / 2
+
+      // 调整球机的设备位置
+      const that = this
+      this.devList.forEach(function(item) {
+        const point = document.getElementById(item.id)
+
+        if (point !== null) {
+          if (item.x !== '' && item.y !== '') {
+            point.style.position = 'absolute'
+            point.style.top = item.y * that.imgSize.height / that.imgSizeOriginal.height + 'px'
+            point.style.left = (item.x * that.imgSize.width / that.imgSizeOriginal.width + halfLeft) + 'px'
+          } else {
+            point.style.display = 'none'
+          }
+        }
+      })
+    },
+    // 平面图就绪时执行函数
+    backgroundImageReady() {
+      this.getBgImageSize()
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    },
+    backToIndex() {
+      this.$router.push('/door/alarm/now')
+    },
+    // 查询并显示设备详情
+    detailDev(dev, event) {
+      this.resetDevDetail()
+      getDetailDevice(dev.id).then(response => {
+        if (response.code === 200) {
+          this.dataForm = {
+            id: dev.id,
+            name: dev.name,
+            devcode: dev.devcode,
+            typeName: response.data.typeName,
+            model: dev.model,
+            onlineStatusName: response.data.onlineStatusName,
+            position: dev.position,
+            installDate: dev.installDate,
+            inOutName: response.data.inOutName,
+            deviceStatusName: response.data.deviceStatusName
+          }
+        } else {
+          this.$message.error(response.message)
+        }
+      })
+
+      // 弹窗显示设备详情
+      const targetDev = event.currentTarget // 取到点击到的设备图标div
+
+      this.showDevDetail = true
+      let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+      top = top + 100
+      this.$refs['dev-detail-block'].style.position = 'absolute'
+      this.$refs['dev-detail-block'].style.top = top + 'px'
+      this.$refs['dev-detail-block'].style.left = targetDev.style.left
+    },
+    // 点击报警列表
+    alarmRowClick(dev, column, event) {
+
+    },
+    // 清除设备详情
+    resetDevDetail() {
+      this.dataForm = {
+        id: '', // id
+        name: '', // 设备名
+        devcode: '', // 设备编号
+        typeName: '', // 设备类型
+        model: '', // 设备型号
+        onlineStatusName: '', // 在线状态
+        deviceStatusName: '', // 设备状态
+        position: '', // 安装位置
+        installDate: '', // 安装日期
+        inOutName: '' // 进出营
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+  .main-page {
+    background-size: cover;
+    background-color: #023d83;
+    height: 100vh;
+  }
+
+  .main-header {
+    width: 100vw;
+  }
+  .main-title {
+    height: 90px;
+    text-align: center;
+    padding-top: 20px;
+    background: url("../../assets/overview_images/title-background-1920.png");
+  }
+
+  .main-title img {
+    display: inline-block;
+    margin-right: 15px;
+    width: 52px;
+    height: 32px;
+    vertical-align: text-bottom;
+  }
+
+  .home-icon {
+    width: 26px;
+    height: 26px;
+    position: fixed;
+    left: 20px;
+    top: 20px;
+  }
+  .exit-icon {
+    width: 26px;
+    height: 26px;
+    position: fixed;
+    right: 20px;
+    top: 20px;
+  }
+  .home-icon img, .exit-icon img {
+    width: 26px;
+    height: 26px;
+  }
+
+  .main-title span {
+    color: #FFFFFF;
+    font-size: 32px;
+    font-weight: bold;
+    font-family: 'Microsoft YaHei';
+  }
+
+  .map-overview {
+    /*margin-top: 50px;*/
+    /*width: 1100px;*/
+    height: calc(90vh - 200px);
+    text-align: center;
+    position: relative;
+  }
+  .point {
+    width: 24px;
+    height: 24px;
+    position: relative;
+    display: inline-block;
+    cursor: pointer;
+  }
+  .point-camera {
+    background: url("../../assets/overview_images/icons/icon-camera-point.png");
+    background-size: contain;
+    @extend .point;
+  }
+  .point-fence {
+    background: url("../../assets/overview_images/icons/icon-fence-unchecked.png");
+    background-size: contain;
+    @extend .point;
+  }
+
+  .statis-block {
+    text-align: center;
+    margin-top: 20px;
+    font-size: 48px;
+  }
+  .sub-title {
+    text-align: center;
+    font-size: 32px;
+  }
+  .sub-data-block {
+    width: 122px;
+    height: 155px;
+  }
+  .dev-normal {
+    background: url("../../assets/overview_images/normal.png");
+    background-size: contain;
+    color: #00ff0c;
+  }
+  .dev-alarm {
+    background: url("../../assets/overview_images/alarm.png");
+    background-size: contain;
+    color: #ff0000;
+  }
+  .dev-offline {
+    background: url("../../assets/overview_images/offline.png");
+    background-size: contain;
+    color: #fff000;
+  }
+  .dev-closed {
+    background: url("../../assets/overview_images/closed.png");
+    background-size: contain;
+    color: #00fff6;
+  }
+
+  .dev-status-block {
+    position: absolute;
+    top: 100px;
+    left: 20px;
+    color: #ffffff;
+  }
+
+  .alarm-now-block {
+    position: absolute;
+    z-index: 500;
+    top: 300px;
+    left: 20px;
+    width: 480px;
+    .map-alarm-div-header {
+      line-height: 40px;
+      padding-left: 10px;
+      color: #00fff6;
+      font-size: 24px;
+      .icon-right {
+        cursor: pointer;
+        margin-left: 20px;
+      }
+    }
+    .el-scrollbar {
+      /*height: 200px;*/
+      width: 100%;
+    }
+    .moredatascollor {
+      height: 200px;
+    }
+    .el-scrollbar__wrap {
+      overflow-y: auto;
+      overflow-x: hidden;
+      margin-bottom: 0px !important;
+    }
+    .el-table {
+      font-size: 12px;
+    }
+    .transition-box {
+      margin-bottom: 10px;
+      width: 200px;
+      height: 100px;
+      border-radius: 4px;
+      background-color: #409EFF;
+      text-align: center;
+      color: #fff;
+      padding: 40px 20px;
+      box-sizing: border-box;
+      margin-right: 20px;
+    }
+  }
+
+  .alarm-now-block /deep/ .el-table th {
+    background-color: #0757A0;
+    padding: 12px 0px;
+    font-size: 16px;
+    color: #00fff6;
+    font-weight: normal;
+  }
+
+  .alarm-now-block /deep/ .el-table td {
+    /*background-color: #0757A0;*/
+    padding: 10px 0px;
+    font-size: 15px;
+    color: #FFFFFF;
+    font-weight: normal;
+  }
+
+  .alarm-now-block /deep/ .el-table__row td {
+    background-color: #023D83;
+  }
+  .alarm-now-block /deep/ .el-table__body tr:hover > td {
+    background-color: #0757A0;
+  }
+  .alarm-now-block /deep/ tr.el-table__row--striped td {
+    background-color: #0757A0;
+  }
+
+  .map-tab {
+    position: absolute;
+    right: 20px;
+    top: 100px;
+    width: 300px;
+    button {
+      margin: 5px 0px;
+    }
+  }
+
+  .tab-top {
+    position: relative;
+    width: 284px;
+    height: 24px;
+    background: url("../../assets/overview_images/tab-top-bg.png");
+  }
+  .tab-bottom {
+    position: relative;
+    width: 284px;
+    height: 24px;
+    background: url("../../assets/overview_images/tab-bottom-bg.png");
+  }
+  .map-index-button {
+    position: relative;
+    width: 284px;
+    height: 74px;
+    background: url("../../assets/overview_images/tab-index-unchecked.png");
+    font-size: 32px;
+    line-height: 74px;
+    text-align: center;
+    color: #FFFFFF;
+    cursor: pointer;
+  }
+  .index-selected {
+    background: url("../../assets/overview_images/tab-index-checked.png");
+  }
+  .sub-tab-guider {
+    width: 149px;
+    height: 50px;
+    background: url("../../assets/overview_images/sub-tab-guider.png");
+  }
+  .sub-tab-border {
+    width: 204px;
+    height: 253px;
+    background: url("../../assets/overview_images/sub-tab-border.png");
+  }
+  .sub-tab-content {
+    text-align: center;
+    color: #FFFFFF;
+    font-size: 28px;
+    cursor: pointer;
+    width: 200px;
+  }
+
+  .dev-detail-block {
+    /*position: absolute;*/
+    /*right: 20px;*/
+    /*bottom: 100px;*/
+    width: 520px;
+    height: 335px;
+    color: #00FFFF;
+    font-size: 24px;
+    font-family: "Microsoft YaHei";
+    padding: 45px 60px;
+    line-height: 35px;
+    background: url("../../assets/overview_images/dev-info.png");
+    .dev-detail-span {
+      margin-left: 20px;
+    }
+    .dev-detail-close::before {
+      content: "\2716";
+      position: relative;
+      top: -20px;
+      right: -410px;
+      cursor: pointer;
+    }
+  }
+
+  .dev-footer {
+    position: absolute;
+    bottom: 25px;
+  }
+
+  .dev-icon {
+    width: 195px;
+    height: 105px;
+    vertical-align: middle;
+    line-height: 65px;
+    padding: 20px 30px !important;
+    margin-left: 15px;
+    cursor: pointer;
+    background: url("../../assets/overview_images/dev-type-border-unchecked.png");
+  }
+
+  .dev-icon img {
+    height: 40px;
+    vertical-align:middle;
+  }
+  .dev-icon span {
+    font-size: 20px;
+    color: #00D2FF;
+    line-height: 65px;
+    height: 65px;
+    vertical-align:middle;
+    float: right;
+  }
+
+  .dev-type-selected {
+    background: url("../../assets/overview_images/dev-type-border-checked.png");
+  }
+  .dev-type-selected span {
+    color: #f58a88 !important;
+  }
+
+  /*@media(max-width: 1440px) {*/
+  /*  .main-title {*/
+  /*    height: 68px;*/
+  /*    padding-top: 20px;*/
+  /*    background: url("../../assets/overview_images/title-background-1440.png");*/
+  /*  }*/
+  /*  .main-title span {*/
+  /*    font-size: 24px;*/
+  /*  }*/
+  /*  .main-title img {*/
+  /*    margin-right: 15px;*/
+  /*    width: 32px;*/
+  /*    height: 32px;*/
+  /*  }*/
+
+  /*  .home-icon {*/
+  /*    left: 18px;*/
+  /*    width: 18px;*/
+  /*    height: 18px;*/
+  /*  }*/
+  /*  .exit-icon {*/
+  /*    right: 18px;*/
+  /*    width: 18px;*/
+  /*    height: 18px;*/
+  /*  }*/
+
+  /*  .home-icon img, .exit-icon img {*/
+  /*    width: 18px;*/
+  /*    height: 18px;*/
+  /*  }*/
+
+  /*  .dev-icon span {*/
+  /*    font-size: 12px;*/
+  /*  }*/
+  /*}*/
+
+  @media(max-width: 1440px) {
+    .main-title {
+      height: 65px;
+      padding-top: 16px;
+      background: url("../../assets/overview_images/title-background-1366.png");
+    }
+    .main-title span {
+      font-size: 24px;
+    }
+    .main-title img {
+      margin-right: 15px;
+      width: 32px;
+      height: 32px;
+    }
+
+    .home-icon {
+      left: 16px;
+      width: 16px;
+      height: 16px;
+    }
+    .exit-icon {
+      right: 16px;
+      width: 16px;
+      height: 16px;
+    }
+
+    .home-icon img, .exit-icon img {
+      width: 20px;
+      height: 20px;
+    }
+
+    .map-overview {
+      margin-top: 35px;
+      height: calc(90vh - 150px);
+    }
+
+    .point {
+      width: 16px;
+      height: 16px;
+    }
+
+    .statis-block {
+      margin-top: 16px;
+      font-size: 36px;
+    }
+    .sub-title {
+      font-size: 24px;
+    }
+    .sub-data-block {
+      width: 90px;
+      height: 114px;
+    }
+
+    .dev-normal {
+      background: url("../../assets/overview_images/normal-1366.png");
+    }
+    .dev-alarm {
+      background: url("../../assets/overview_images/alarm-1366.png");
+    }
+    .dev-offline {
+      background: url("../../assets/overview_images/offline-1366.png");
+    }
+    .dev-closed {
+      background: url("../../assets/overview_images/closed-1366.png");
+    }
+
+    .dev-status-block {
+      top: 90px;
+      left: 16px;
+    }
+
+    .alarm-now-block {
+      top: 220px;
+      left: 16px;
+      width: 360px;
+      .map-alarm-div-header {
+        line-height: 32px;
+        font-size: 20px;
+      }
+    }
+
+    .alarm-now-block /deep/ .el-table th {
+      padding: 8px 0px;
+      font-size: 16px;
+    }
+    .alarm-now-block /deep/ .el-table td {
+      padding: 5px 0px;
+      font-size: 12px;
+    }
+
+    .map-tab {
+      right: 16px;
+      top: 90px;
+      width: 215px;
+      button {
+        margin: 5px 0px;
+      }
+    }
+    .tab-top {
+      width: 213px;
+      height: 18px;
+      background: url("../../assets/overview_images/tab-top-bg-1366.png");
+    }
+    .tab-bottom {
+      width: 213px;
+      height: 18px;
+      background: url("../../assets/overview_images/tab-bottom-bg-1366.png");
+    }
+    .map-index-button {
+      width: 210px;
+      height: 56px;
+      background: url("../../assets/overview_images/tab-index-unchecked-1366.png");
+      font-size: 24px;
+      line-height: 56px;
+    }
+    .index-selected {
+      background: url("../../assets/overview_images/tab-index-checked-1366.png");
+    }
+
+    .sub-tab-guider {
+      width: 110px;
+      height: 37px;
+      background: url("../../assets/overview_images/sub-tab-guider-1366.png");
+    }
+    .sub-tab-border {
+      width: 150px;
+      height: 186px;
+      background: url("../../assets/overview_images/sub-tab-border-1366.png");
+    }
+    .sub-tab-content {
+      font-size: 20px;
+      cursor: pointer;
+      width: 145px;
+    }
+
+    .dev-detail-block {
+      width: 390px;
+      height: 251px;
+      font-size: 16px;
+      padding: 30px 40px;
+      line-height: 28px;
+      background: url("../../assets/overview_images/dev-info-1366.png");
+      .dev-detail-close::before {
+        top: -12px;
+        right: -312px;
+      }
+    }
+
+    .dev-footer {
+      bottom: 20px;
+    }
+    .dev-icon {
+      width: 140px;
+      height: 76px;
+      line-height: 56px;
+      padding: 10px 16px !important;
+      margin-left: 15px;
+      background: url("../../assets/overview_images/dev-type-border-unchecked-1366.png");
+    }
+    .dev-icon img {
+      height: 32px;
+    }
+    .dev-icon span {
+      font-size: 16px;
+      line-height: 56px;
+      height: 56px;
+    }
+    .dev-type-selected {
+      background: url("../../assets/overview_images/dev-type-border-checked-1366.png");
+    }
+  }
+
+</style>
diff --git a/src/views/alarm/webPlay.vue b/src/views/alarm/webPlay.vue
new file mode 100644
index 0000000..97e5ed2
--- /dev/null
+++ b/src/views/alarm/webPlay.vue
@@ -0,0 +1,21 @@
+<template>
+  <div class="play-window-block">
+    <div style="height: 100%">
+      <iframe ref="play" src="/static/webCtrl/demo-easy.html" width="100%" height="100%" style="border: 0px; overflow: hidden;" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'WebPlay'
+}
+</script>
+
+<style scoped>
+  .play-window-block {
+    margin: 15px 15px 15px 0px;
+    box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
+    height: calc(100vh - 175px);
+  }
+</style>
diff --git a/src/views/area/areaList.vue b/src/views/area/areaList.vue
index 1950028..11dc51f 100644
--- a/src/views/area/areaList.vue
+++ b/src/views/area/areaList.vue
@@ -31,7 +31,7 @@
       <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="batchExport">导出</el-button>-->
+          <!--<el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>-->
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>
diff --git a/src/views/area/defenceDetail.vue b/src/views/area/defenceDetail.vue
index e29a258..703ec7d 100644
--- a/src/views/area/defenceDetail.vue
+++ b/src/views/area/defenceDetail.vue
@@ -4,12 +4,14 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="区域名称">
-            <span>{{ dataForm.name }}</span>
+            <el-input v-model="dataForm.name" disabled type="text"/>
+            <!--<span>{{ dataForm.name }}</span>-->
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="防卫状态">
-            <span>{{ dataForm.areaStatusName }}</span>
+            <el-input v-model="dataForm.areaStatusName" disabled type="text"/>
+            <!--<span>{{ dataForm.areaStatusName }}</span>-->
           </el-form-item>
         </el-col>
       </el-row>
@@ -17,12 +19,14 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="区域类别">
-            <span>{{ dataForm.areaTypeName }}</span>
+            <el-input v-model="dataForm.areaTypeName" disabled type="text"/>
+            <!--<span>{{ dataForm.areaTypeName }}</span>-->
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="区域位置">
-            <span>{{ dataForm.position }}</span>
+            <el-input v-model="dataForm.position" disabled type="text"/>
+            <!--<span>{{ dataForm.position }}</span>-->
           </el-form-item>
         </el-col>
       </el-row>
@@ -38,7 +42,8 @@
       <el-row v-show="isFence" :gutter="20">
         <el-col :span="12">
           <el-form-item label="电子围栏">
-            <span>{{ dataForm.deviceStatusName }}</span>
+            <el-input v-model="dataForm.deviceStatusName" disabled type="text"/>
+            <!--<span>{{ dataForm.deviceStatusName }}</span>-->
           </el-form-item>
         </el-col>
       </el-row>
@@ -46,7 +51,8 @@
       <el-row :gutter="20">
         <el-col :span="24">
           <el-form-item label="备注" prop="remark">
-            <span>{{ dataForm.remark }}</span>
+            <el-input v-model="dataForm.remark" disabled type="text"/>
+            <!--<span>{{ dataForm.remark }}</span>-->
           </el-form-item>
         </el-col>
       </el-row>
diff --git a/src/views/area/defenceList.vue b/src/views/area/defenceList.vue
index 9e2ed68..8649918 100644
--- a/src/views/area/defenceList.vue
+++ b/src/views/area/defenceList.vue
@@ -31,9 +31,9 @@
       <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">批量导入</el-button>
-          <el-button class="edit_btn" size="small">导入模板下载</el-button>
-          <!--<el-button class="edit_btn" size="small" @click="batchExport">导出</el-button>-->
+          <!--<el-button class="edit_btn" size="small">批量导入</el-button>-->
+          <!--<el-button class="edit_btn" size="small">导入模板下载</el-button>-->
+          <!--<el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>-->
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>
diff --git a/src/views/car/carAdd.vue b/src/views/car/carAdd.vue
index 6a35b7d..633e353 100644
--- a/src/views/car/carAdd.vue
+++ b/src/views/car/carAdd.vue
@@ -20,14 +20,14 @@
         <el-col :span="12">
           <el-form-item label="所属部门" prop="deptid">
             <!--<span v-show="isDetailMode">{{ dataForm.deptName }}</span>-->
-            <el-select :disabled="isDetailMode" v-model="dataForm.deptid" placeholder="请选择所属部门" filterable clearable>
+            <el-select :disabled="isDetailMode" v-model="dataForm.deptid" placeholder="请选择所属部门" filterable clearable @change="getStaffList">
               <el-option v-for="item in deptList" :key="item.id" :label="item.name" :value="item.id"/>
             </el-select>
             <!--<dept-select v-show="!isDetailMode" v-model="dataForm.deptid" :dept-show="true" :need-top="true" placeholder="所属组织" @change="fetchStaffList"/>-->
           </el-form-item>
         </el-col>
         <el-col v-if="dataForm.property==='2'" :span="12">
-          <el-form-item label="车主" prop="owner">
+          <el-form-item label="车主" prop="ownerId">
             <!--<span v-show="isDetailMode">{{ dataForm.ownerName }}</span>-->
             <el-select :disabled="isDetailMode" v-model="dataForm.ownerId" placeholder="请选择车主" filterable clearable @change="autoStaffPhone">
               <el-option v-for="item in staffList" :key="item.id" :label="item.name" :value="item.id"/>
@@ -91,7 +91,7 @@
       rules: {
         phone: [{ required: true, trigger: ['blur', 'change'], validator: phoneValidator }],
         plateNumber: [{ required: true, trigger: ['blur', 'change'], validator: plateValidator }],
-        owner: [{ required: true, trigger: ['blur', 'change'], message: '请选择车主' }]
+        ownerId: [{ required: true, trigger: ['blur', 'change'], message: '请选择车主' }]
       }, // 前端校验规则
       carProperties: [], // 车辆性质字典值
       staffList: [], // 车主人员列表
@@ -137,6 +137,7 @@
           phone: row.phone,
           remark: row.remark
         }
+        this.getStaffList()
       } else if (dialogStatus === 'detail') {
         this.isDetailMode = true
         this.isEditMode = false
@@ -151,6 +152,7 @@
           deptName: row.deptName,
           ownerName: row.ownerName
         }
+        this.getStaffList()
       }
     },
     // 清除数据
@@ -180,6 +182,13 @@
       })
       getStaffByDept({ deptId: this.dataForm.deptid }).then(response => {
         this.staffList = response.data
+        console.log(response)
+      })
+    },
+    getStaffList(){
+      getStaffByDept({ deptId: this.dataForm.deptid }).then(response => {
+        this.staffList = response.data
+        console.log(response)
       })
     },
     autoStaffPhone() {
@@ -190,7 +199,6 @@
             return item
           }
         })
-
         this.dataForm.phone = selectedStaff[0].phone
       } else {
         this.dataForm.phone = ''
diff --git a/src/views/car/carList.vue b/src/views/car/carList.vue
index ceb77ff..d0c0176 100644
--- a/src/views/car/carList.vue
+++ b/src/views/car/carList.vue
@@ -31,7 +31,7 @@
       <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="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
           <el-button v-if="hasPerm('/door/car/add')" class="edit_btn" size="small" @click="add">新增</el-button>
           <!--          <el-button v-if="hasPerm('/door/car/delete')" v-show="false" class="edit_btn" size="small" @click="batchDel">删除</el-button>-->
         </el-col>
diff --git a/src/views/deviceManage/deviceList.vue b/src/views/deviceManage/deviceList.vue
index 5966b45..feb4b36 100644
--- a/src/views/deviceManage/deviceList.vue
+++ b/src/views/deviceManage/deviceList.vue
@@ -48,7 +48,7 @@
       <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="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border @selection-change="handleSelectionChange">

diff --git a/src/router/modules/doorSys.js b/src/router/modules/doorSys.js
index 8017e4b..6bd1506 100644
--- a/src/router/modules/doorSys.js
+++ b/src/router/modules/doorSys.js
@@ -87,6 +87,20 @@
         name: 'DoorAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/door/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/door/alarm/position',
+        name: 'DoorAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/door/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/door/alarm/video',
+        name: 'DoorAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/door/alarm/video'], keepAlive: true }
       }
     ]
   },
@@ -262,5 +276,26 @@
         meta: { title: '营门出入次数统计', icon: '', permission: ['/door/statistics/doorCount'], keepAlive: true }
       }
     ]
+  },
+  {
+    path: '/door/area',
+    component: Layout,
+    redirect: '/door/area',
+    name: 'DoorArea',
+    alwaysShow: true,
+    meta: {
+      title: '区域管理',
+      icon: 'icon-area', // 图标
+      permission: ['/door/area'], // 权限名称
+      sys: '/door'
+    },
+    children: [
+      {
+        path: '/door/area/list',
+        name: 'DoorAreaList',
+        component: () => import('@/views/area/areaList'),
+        meta: { title: '区域列表', icon: '', permission: ['/door/area/list'], keepAlive: true }
+      }
+    ]
   }
 ]
diff --git a/src/router/modules/fenceSys.js b/src/router/modules/fenceSys.js
index 0d784b0..e2962bd 100644
--- a/src/router/modules/fenceSys.js
+++ b/src/router/modules/fenceSys.js
@@ -85,6 +85,20 @@
         name: 'FenceAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/fence/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/fence/alarm/position',
+        name: 'FenceAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/fence/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/fence/alarm/video',
+        name: 'FenceAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/fence/alarm/video'], keepAlive: true }
       }
     ]
   },
diff --git a/src/router/modules/keySys.js b/src/router/modules/keySys.js
index f3a027b..832744b 100644
--- a/src/router/modules/keySys.js
+++ b/src/router/modules/keySys.js
@@ -85,6 +85,20 @@
         name: 'KeyAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/key/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/key/alarm/position',
+        name: 'KeyAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/key/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/key/alarm/video',
+        name: 'KeyAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/key/alarm/video'], keepAlive: true }
       }
     ]
   },
diff --git a/src/router/modules/regionSys.js b/src/router/modules/regionSys.js
index 9b4613a..43b8c38 100644
--- a/src/router/modules/regionSys.js
+++ b/src/router/modules/regionSys.js
@@ -85,6 +85,20 @@
         name: 'RegionAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/region/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/region/alarm/position',
+        name: 'RegionAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/region/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/region/alarm/video',
+        name: 'RegionAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/region/alarm/video'], keepAlive: true }
       }
     ]
   },
@@ -102,6 +116,20 @@
     },
     children: [
       {
+        path: '/region/staff/add',
+        name: 'RegionStaffAdd',
+        component: () => import('@/views/staff/staffAdd'),
+        hidden: true,
+        meta: { title: '人员登记', icon: '', permission: ['/region/staff/add'], keepAlive: true }
+      },
+      {
+        path: '/region/staff/edit',
+        name: 'RegionStaffEdit',
+        component: () => import('@/views/staff/staffEdit'),
+        hidden: true,
+        meta: { title: '人员编辑', icon: '', permission: ['/region/staff/edit'], keepAlive: true }
+      },
+      {
         path: '/region/staff/list',
         name: 'RegionStaffList',
         component: () => import('@/views/staff/staffList'),
diff --git a/src/views/alarm/alarmList.vue b/src/views/alarm/alarmList.vue
index 704f797..91967a0 100644
--- a/src/views/alarm/alarmList.vue
+++ b/src/views/alarm/alarmList.vue
@@ -37,7 +37,7 @@
             </el-col>
 
             <el-col :span="4" 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" @click="fetchData()">搜索</el-button>
             </el-col>
           </el-row>
         </el-form>
@@ -48,7 +48,7 @@
       <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="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>
@@ -66,8 +66,8 @@
         <!--操作列-->
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
-            <el-button type="text" @click="detail(scope.row)">位置</el-button>
-            <el-button v-if="hasPerm('/car/update')" type="text" @click="edit(scope.row)">视频</el-button>
+            <el-button type="text" @click="position(scope.row)">位置</el-button>
+            <el-button v-if="hasPerm('/car/update')" type="text" @click="video(scope.row)">视频</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -185,6 +185,14 @@
     this.fetchData() // 获取数据
   },
   methods: {
+    video(row){
+      const code = this.$store.getters.currentSystem.code
+      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId }})
+    },
+    position(row){
+      const code = this.$store.getters.currentSystem.code
+      this.$router.push({ path: '/' + code + '/alarm/position', query: {  id: row.deviceId }})
+    },
     batchExport() {
       // 全屏加载动画
       const loading = this.$loading({
@@ -254,6 +262,8 @@
       getAlarmList(this.listQuery).then(response => {
         if (response.code === 200) {
           this.list = response.data.rows
+          console.log('&&&')
+          console.log(this.list)
           this.total = parseInt(response.data.total)
         } else {
           this.$message.error(response.message)
diff --git a/src/views/alarm/alarmMonitor.vue b/src/views/alarm/alarmMonitor.vue
new file mode 100644
index 0000000..517d6e9
--- /dev/null
+++ b/src/views/alarm/alarmMonitor.vue
@@ -0,0 +1,80 @@
+<template>
+  <div>
+    <el-row>
+      <!--<el-col :span="6">-->
+        <!--&lt;!&ndash;<video-tree @click="handleCameraClicked"/>&ndash;&gt;-->
+      <!--</el-col>-->
+
+      <el-col :span="18" :offset="3">
+        <web-play ref="webCtrl" />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+// import VideoTree from './videoTree'
+import WebPlay from './webPlay'
+import { getDetailDevice } from '@/api/device'
+export default {
+  name: 'VideoMonitor',
+  components: { WebPlay },
+  data() {
+    return {
+      camera:{
+        ip:'',
+        port:'',
+        username:'',
+        password:''
+      }
+    }
+  },
+  mounted() {
+
+  },
+  activated() {
+    if (this.$route.query && this.$route.query.id) {
+      const id = this.$route.query.id
+      getDetailDevice(id).then(response => {
+          if (response.code === 200) {
+            console.log(response.data)
+            this.camera.ip = response.data.ip
+            this.camera.port = response.data.port
+            this.camera.username = response.data.username
+            this.camera.password = response.data.password
+            this.handleCamera()
+          }
+      })
+    }
+  },
+  methods: {
+    handleCamera(){
+      if (typeof this.camera.ip === 'undefined' || this.camera.ip === '') {
+        console.log('ip is null')
+        return false
+      }
+      if (typeof this.camera.port === 'undefined' || this.camera.port === '') {
+        console.log('port is null')
+        return false
+      }else{
+        this.camera.ip += (':'+ this.camera.port)
+      }
+      if (typeof this.camera.username === 'undefined' || this.camera.username === '') {
+        console.log('username is null')
+        return false
+      }
+      if (typeof this.camera.password === 'undefined' || this.camera.password === '') {
+        console.log('password is null')
+        return false
+      }
+
+      // 开始预览
+      this.$refs.webCtrl.$refs.play.contentWindow.startPlayReal(this.camera)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/alarm/alarmNow.vue b/src/views/alarm/alarmNow.vue
index 03bb5ea..66055b1 100644
--- a/src/views/alarm/alarmNow.vue
+++ b/src/views/alarm/alarmNow.vue
@@ -48,7 +48,7 @@
       <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="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>
@@ -66,8 +66,8 @@
         <el-table-column label="操作" align="center" width="180">
           <template slot-scope="scope">
             <el-button v-if="hasPerm('/alarm/cancel')" type="text" @click="alarmCancel(scope.row)">取消报警</el-button>
-            <el-button type="text" @click="detail(scope.row)">位置</el-button>
-            <el-button type="text" @click="edit(scope.row)">视频</el-button>
+            <el-button type="text" @click="position(scope.row)">位置</el-button>
+            <el-button v-if="hasPerm('/car/update')" type="text" @click="video(scope.row)">视频</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -183,6 +183,14 @@
     this.fetchData() // 获取数据
   },
   methods: {
+    video(row){
+      const code = this.$store.getters.currentSystem.code
+      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId }})
+    },
+    position(row){
+      const code = this.$store.getters.currentSystem.code
+      this.$router.push({ path: '/' + code + '/alarm/position', query: {  id: row.deviceId }})
+    },
     batchExport() {
       // 全屏加载动画
       const loading = this.$loading({
diff --git a/src/views/alarm/alarmPosition.vue b/src/views/alarm/alarmPosition.vue
new file mode 100644
index 0000000..51f915e
--- /dev/null
+++ b/src/views/alarm/alarmPosition.vue
@@ -0,0 +1,786 @@
+<template>
+  <div class="main-page">
+    <!-- 中间平面图区域 -->
+    <div class="map-overview">
+      <img ref="bgImg" :src="bgImageSrc" height="100%" @load="backgroundImageReady">
+
+      <div
+        v-for="item in devList"
+        :id="item.id"
+        :key="item.id"
+        :style="{ position: 'absolute', top: item.y * imgSize.height / imgSizeOriginal.height + 'px', left: (item.x * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
+        class="point-camera"
+        @click="detailDev(item, $event)" />
+    </div>
+    <!-- 右侧设备详情及操作区域 -->
+    <div v-show="showDevDetail" ref="dev-detail-block" class="dev-detail-block">
+      <span class="dev-detail-close" @click="showDevDetail=false" />
+      <el-row style="margin-top: -25px;">
+        <el-col :span="24">设备名称
+          <span class="dev-detail-span">{{ dataForm.name }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">设备编号
+          <span class="dev-detail-span">{{ dataForm.devcode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">设备类型
+          <span class="dev-detail-span">{{ dataForm.typeName }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">在线状态
+          <span class="dev-detail-span">{{ dataForm.onlineStatusName }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">安装日期
+          <span class="dev-detail-span">{{ dataForm.installDate }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">安装位置
+          <span class="dev-detail-span">{{ dataForm.position }}</span>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getProject } from '@/utils/baseConfig'
+import DeviceDetail from '@/views/deviceManage/deviceDetail'
+import tg_main from '../../assets/overview_images/tg/mapOverviewTg.jpg'
+import tg_3_1 from '../../assets/overview_images/tg/mapOverviewTg-3-1.jpg'
+import tg_4_1 from '../../assets/overview_images/tg/mapOverviewTg-4-1.jpg'
+import tg_4_5 from '../../assets/overview_images/tg/mapOverviewTg-4-5.jpg'
+import { getDetailDevice } from '@/api/device'
+
+// const cameraTypes = [4, 5, 8, 9, 10, 11]
+export default {
+  name: 'AlarmPosition',
+  components: { DeviceDetail },
+  data() {
+    return {
+      title: getProject().title,
+      bgImageSrc: tg_main,
+      devListParams: {
+        picture: '1',
+        areaTypeId: 1,
+        deviceTypes: []
+      },
+      dev: {
+        alarm: 0,
+        onLine: 0,
+        closed: 0,
+        offLine: 0
+      },
+      imgSizeOriginal: {
+        width: 2245,
+        height: 1586
+      }, // 图片原尺寸
+      imgSize: {
+        width: 2245,
+        height: 1586
+      }, // 图片显示尺寸
+      winSize: {
+        width: 1440,
+        height: 789
+      }, // 屏幕窗口尺寸
+      halfLeft: 0,
+      showDevDetail: false, // 是否显示设备详情
+      alarmList: [], // 报警列表
+      alarmColumns: [
+        {
+          text: '设备编号',
+          value: 'devcode',
+          align: 'center'
+        },
+        {
+          text: '报警内容',
+          value: 'alarmContent',
+          align: 'center'
+        },
+        {
+          text: '报警时间',
+          value: 'alarmTime',
+          align: 'center',
+          width: 165
+        }
+      ], // 报警列表显示列
+      tableShow: true, // 是否显示告警列表
+      devList: [], // 设备列表（在地图上显示）
+      dataForm: {
+        id: '', // id
+        name: '', // 设备名
+        devcode: '', // 设备编号
+        typeName: '', // 设备类型
+        model: '', // 设备型号
+        onlineStatusName: '', // 在线状态
+        deviceStatusName: '', // 设备状态
+        position: '', // 安装位置
+        installDate: '', // 安装日期
+        inOutName: '' // 进出营
+      }, // 设备详情表单
+      devPosition:{
+        picture: '',
+        x: '',
+        y: ''
+      },
+      checkDevType: [true, false] // 选中设备类型
+    }
+  },
+  mounted() {
+    this.initWindowSize()
+    if (this.$route.query && this.$route.query.id) {
+      const id = this.$route.query.id
+      getDetailDevice(id).then(response => {
+        if (response.code === 200) {
+          console.log(response.data)
+          this.devPosition.picture = response.data.picture
+          this.devPosition.x = response.data.x
+          this.devPosition.y = response.data.y
+          if(this.devPosition.picture === '1'){
+            this.bgImageSrc = tg_main
+          }else if(this.devPosition.picture === '2'){
+            this.bgImageSrc = tg_3_1
+          }else if(this.devPosition.picture === '3'){
+            this.bgImageSrc = tg_4_1
+          }else if(this.devPosition.picture === '4'){
+            this.bgImageSrc = tg_4_5
+          }else{
+            this.$message.warning('该设备暂无位置信息')
+            return
+          }
+          this.devList = []
+          if (this.devPosition.x !== '' && this.devPosition.y !== '') {
+            this.devList.push(response.data)
+          }
+        }
+      })
+    }
+    const that = this
+    window.onresize = function() {
+      that.initWindowSize()
+      that.getBgImageSize()
+    }
+  },
+  methods: {
+    // 获取窗口大小
+    initWindowSize() {
+      // 获取窗体尺寸
+      this.winSize = {
+        width: document.documentElement.clientWidth,
+        height: document.documentElement.clientHeight
+      }
+    },
+    // 获取图像大小
+    getBgImageSize() {
+      // 获取图片尺寸
+      this.imgSize = {
+        width: this.$refs['bgImg'].width,
+        height: this.$refs['bgImg'].height
+      }
+      this.halfLeft = (this.winSize.width - this.imgSize.width) / 2
+    },
+    // 重新绘制设备点位
+    reDrawDevs() {
+      const halfLeft = (this.winSize.width - this.imgSize.width) / 2
+
+      // 调整球机的设备位置
+      const that = this
+      this.devList.forEach(function(item) {
+        const point = document.getElementById(item.id)
+
+        if (point !== null) {
+          if (item.x !== '' && item.y !== '') {
+            point.style.position = 'absolute'
+            point.style.top = item.y * that.imgSize.height / that.imgSizeOriginal.height + 'px'
+            point.style.left = (item.x * that.imgSize.width / that.imgSizeOriginal.width + halfLeft) + 'px'
+          } else {
+            point.style.display = 'none'
+          }
+        }
+      })
+    },
+    // 平面图就绪时执行函数
+    backgroundImageReady() {
+      this.getBgImageSize()
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    },
+    backToIndex() {
+      this.$router.push('/door/alarm/now')
+    },
+    // 查询并显示设备详情
+    detailDev(dev, event) {
+      this.resetDevDetail()
+      getDetailDevice(dev.id).then(response => {
+        if (response.code === 200) {
+          this.dataForm = {
+            id: dev.id,
+            name: dev.name,
+            devcode: dev.devcode,
+            typeName: response.data.typeName,
+            model: dev.model,
+            onlineStatusName: response.data.onlineStatusName,
+            position: dev.position,
+            installDate: dev.installDate,
+            inOutName: response.data.inOutName,
+            deviceStatusName: response.data.deviceStatusName
+          }
+        } else {
+          this.$message.error(response.message)
+        }
+      })
+
+      // 弹窗显示设备详情
+      const targetDev = event.currentTarget // 取到点击到的设备图标div
+
+      this.showDevDetail = true
+      let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+      top = top + 100
+      this.$refs['dev-detail-block'].style.position = 'absolute'
+      this.$refs['dev-detail-block'].style.top = top + 'px'
+      this.$refs['dev-detail-block'].style.left = targetDev.style.left
+    },
+    // 点击报警列表
+    alarmRowClick(dev, column, event) {
+
+    },
+    // 清除设备详情
+    resetDevDetail() {
+      this.dataForm = {
+        id: '', // id
+        name: '', // 设备名
+        devcode: '', // 设备编号
+        typeName: '', // 设备类型
+        model: '', // 设备型号
+        onlineStatusName: '', // 在线状态
+        deviceStatusName: '', // 设备状态
+        position: '', // 安装位置
+        installDate: '', // 安装日期
+        inOutName: '' // 进出营
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+  .main-page {
+    background-size: cover;
+    background-color: #023d83;
+    height: 100vh;
+  }
+
+  .main-header {
+    width: 100vw;
+  }
+  .main-title {
+    height: 90px;
+    text-align: center;
+    padding-top: 20px;
+    background: url("../../assets/overview_images/title-background-1920.png");
+  }
+
+  .main-title img {
+    display: inline-block;
+    margin-right: 15px;
+    width: 52px;
+    height: 32px;
+    vertical-align: text-bottom;
+  }
+
+  .home-icon {
+    width: 26px;
+    height: 26px;
+    position: fixed;
+    left: 20px;
+    top: 20px;
+  }
+  .exit-icon {
+    width: 26px;
+    height: 26px;
+    position: fixed;
+    right: 20px;
+    top: 20px;
+  }
+  .home-icon img, .exit-icon img {
+    width: 26px;
+    height: 26px;
+  }
+
+  .main-title span {
+    color: #FFFFFF;
+    font-size: 32px;
+    font-weight: bold;
+    font-family: 'Microsoft YaHei';
+  }
+
+  .map-overview {
+    /*margin-top: 50px;*/
+    /*width: 1100px;*/
+    height: calc(90vh - 200px);
+    text-align: center;
+    position: relative;
+  }
+  .point {
+    width: 24px;
+    height: 24px;
+    position: relative;
+    display: inline-block;
+    cursor: pointer;
+  }
+  .point-camera {
+    background: url("../../assets/overview_images/icons/icon-camera-point.png");
+    background-size: contain;
+    @extend .point;
+  }
+  .point-fence {
+    background: url("../../assets/overview_images/icons/icon-fence-unchecked.png");
+    background-size: contain;
+    @extend .point;
+  }
+
+  .statis-block {
+    text-align: center;
+    margin-top: 20px;
+    font-size: 48px;
+  }
+  .sub-title {
+    text-align: center;
+    font-size: 32px;
+  }
+  .sub-data-block {
+    width: 122px;
+    height: 155px;
+  }
+  .dev-normal {
+    background: url("../../assets/overview_images/normal.png");
+    background-size: contain;
+    color: #00ff0c;
+  }
+  .dev-alarm {
+    background: url("../../assets/overview_images/alarm.png");
+    background-size: contain;
+    color: #ff0000;
+  }
+  .dev-offline {
+    background: url("../../assets/overview_images/offline.png");
+    background-size: contain;
+    color: #fff000;
+  }
+  .dev-closed {
+    background: url("../../assets/overview_images/closed.png");
+    background-size: contain;
+    color: #00fff6;
+  }
+
+  .dev-status-block {
+    position: absolute;
+    top: 100px;
+    left: 20px;
+    color: #ffffff;
+  }
+
+  .alarm-now-block {
+    position: absolute;
+    z-index: 500;
+    top: 300px;
+    left: 20px;
+    width: 480px;
+    .map-alarm-div-header {
+      line-height: 40px;
+      padding-left: 10px;
+      color: #00fff6;
+      font-size: 24px;
+      .icon-right {
+        cursor: pointer;
+        margin-left: 20px;
+      }
+    }
+    .el-scrollbar {
+      /*height: 200px;*/
+      width: 100%;
+    }
+    .moredatascollor {
+      height: 200px;
+    }
+    .el-scrollbar__wrap {
+      overflow-y: auto;
+      overflow-x: hidden;
+      margin-bottom: 0px !important;
+    }
+    .el-table {
+      font-size: 12px;
+    }
+    .transition-box {
+      margin-bottom: 10px;
+      width: 200px;
+      height: 100px;
+      border-radius: 4px;
+      background-color: #409EFF;
+      text-align: center;
+      color: #fff;
+      padding: 40px 20px;
+      box-sizing: border-box;
+      margin-right: 20px;
+    }
+  }
+
+  .alarm-now-block /deep/ .el-table th {
+    background-color: #0757A0;
+    padding: 12px 0px;
+    font-size: 16px;
+    color: #00fff6;
+    font-weight: normal;
+  }
+
+  .alarm-now-block /deep/ .el-table td {
+    /*background-color: #0757A0;*/
+    padding: 10px 0px;
+    font-size: 15px;
+    color: #FFFFFF;
+    font-weight: normal;
+  }
+
+  .alarm-now-block /deep/ .el-table__row td {
+    background-color: #023D83;
+  }
+  .alarm-now-block /deep/ .el-table__body tr:hover > td {
+    background-color: #0757A0;
+  }
+  .alarm-now-block /deep/ tr.el-table__row--striped td {
+    background-color: #0757A0;
+  }
+
+  .map-tab {
+    position: absolute;
+    right: 20px;
+    top: 100px;
+    width: 300px;
+    button {
+      margin: 5px 0px;
+    }
+  }
+
+  .tab-top {
+    position: relative;
+    width: 284px;
+    height: 24px;
+    background: url("../../assets/overview_images/tab-top-bg.png");
+  }
+  .tab-bottom {
+    position: relative;
+    width: 284px;
+    height: 24px;
+    background: url("../../assets/overview_images/tab-bottom-bg.png");
+  }
+  .map-index-button {
+    position: relative;
+    width: 284px;
+    height: 74px;
+    background: url("../../assets/overview_images/tab-index-unchecked.png");
+    font-size: 32px;
+    line-height: 74px;
+    text-align: center;
+    color: #FFFFFF;
+    cursor: pointer;
+  }
+  .index-selected {
+    background: url("../../assets/overview_images/tab-index-checked.png");
+  }
+  .sub-tab-guider {
+    width: 149px;
+    height: 50px;
+    background: url("../../assets/overview_images/sub-tab-guider.png");
+  }
+  .sub-tab-border {
+    width: 204px;
+    height: 253px;
+    background: url("../../assets/overview_images/sub-tab-border.png");
+  }
+  .sub-tab-content {
+    text-align: center;
+    color: #FFFFFF;
+    font-size: 28px;
+    cursor: pointer;
+    width: 200px;
+  }
+
+  .dev-detail-block {
+    /*position: absolute;*/
+    /*right: 20px;*/
+    /*bottom: 100px;*/
+    width: 520px;
+    height: 335px;
+    color: #00FFFF;
+    font-size: 24px;
+    font-family: "Microsoft YaHei";
+    padding: 45px 60px;
+    line-height: 35px;
+    background: url("../../assets/overview_images/dev-info.png");
+    .dev-detail-span {
+      margin-left: 20px;
+    }
+    .dev-detail-close::before {
+      content: "\2716";
+      position: relative;
+      top: -20px;
+      right: -410px;
+      cursor: pointer;
+    }
+  }
+
+  .dev-footer {
+    position: absolute;
+    bottom: 25px;
+  }
+
+  .dev-icon {
+    width: 195px;
+    height: 105px;
+    vertical-align: middle;
+    line-height: 65px;
+    padding: 20px 30px !important;
+    margin-left: 15px;
+    cursor: pointer;
+    background: url("../../assets/overview_images/dev-type-border-unchecked.png");
+  }
+
+  .dev-icon img {
+    height: 40px;
+    vertical-align:middle;
+  }
+  .dev-icon span {
+    font-size: 20px;
+    color: #00D2FF;
+    line-height: 65px;
+    height: 65px;
+    vertical-align:middle;
+    float: right;
+  }
+
+  .dev-type-selected {
+    background: url("../../assets/overview_images/dev-type-border-checked.png");
+  }
+  .dev-type-selected span {
+    color: #f58a88 !important;
+  }
+
+  /*@media(max-width: 1440px) {*/
+  /*  .main-title {*/
+  /*    height: 68px;*/
+  /*    padding-top: 20px;*/
+  /*    background: url("../../assets/overview_images/title-background-1440.png");*/
+  /*  }*/
+  /*  .main-title span {*/
+  /*    font-size: 24px;*/
+  /*  }*/
+  /*  .main-title img {*/
+  /*    margin-right: 15px;*/
+  /*    width: 32px;*/
+  /*    height: 32px;*/
+  /*  }*/
+
+  /*  .home-icon {*/
+  /*    left: 18px;*/
+  /*    width: 18px;*/
+  /*    height: 18px;*/
+  /*  }*/
+  /*  .exit-icon {*/
+  /*    right: 18px;*/
+  /*    width: 18px;*/
+  /*    height: 18px;*/
+  /*  }*/
+
+  /*  .home-icon img, .exit-icon img {*/
+  /*    width: 18px;*/
+  /*    height: 18px;*/
+  /*  }*/
+
+  /*  .dev-icon span {*/
+  /*    font-size: 12px;*/
+  /*  }*/
+  /*}*/
+
+  @media(max-width: 1440px) {
+    .main-title {
+      height: 65px;
+      padding-top: 16px;
+      background: url("../../assets/overview_images/title-background-1366.png");
+    }
+    .main-title span {
+      font-size: 24px;
+    }
+    .main-title img {
+      margin-right: 15px;
+      width: 32px;
+      height: 32px;
+    }
+
+    .home-icon {
+      left: 16px;
+      width: 16px;
+      height: 16px;
+    }
+    .exit-icon {
+      right: 16px;
+      width: 16px;
+      height: 16px;
+    }
+
+    .home-icon img, .exit-icon img {
+      width: 20px;
+      height: 20px;
+    }
+
+    .map-overview {
+      margin-top: 35px;
+      height: calc(90vh - 150px);
+    }
+
+    .point {
+      width: 16px;
+      height: 16px;
+    }
+
+    .statis-block {
+      margin-top: 16px;
+      font-size: 36px;
+    }
+    .sub-title {
+      font-size: 24px;
+    }
+    .sub-data-block {
+      width: 90px;
+      height: 114px;
+    }
+
+    .dev-normal {
+      background: url("../../assets/overview_images/normal-1366.png");
+    }
+    .dev-alarm {
+      background: url("../../assets/overview_images/alarm-1366.png");
+    }
+    .dev-offline {
+      background: url("../../assets/overview_images/offline-1366.png");
+    }
+    .dev-closed {
+      background: url("../../assets/overview_images/closed-1366.png");
+    }
+
+    .dev-status-block {
+      top: 90px;
+      left: 16px;
+    }
+
+    .alarm-now-block {
+      top: 220px;
+      left: 16px;
+      width: 360px;
+      .map-alarm-div-header {
+        line-height: 32px;
+        font-size: 20px;
+      }
+    }
+
+    .alarm-now-block /deep/ .el-table th {
+      padding: 8px 0px;
+      font-size: 16px;
+    }
+    .alarm-now-block /deep/ .el-table td {
+      padding: 5px 0px;
+      font-size: 12px;
+    }
+
+    .map-tab {
+      right: 16px;
+      top: 90px;
+      width: 215px;
+      button {
+        margin: 5px 0px;
+      }
+    }
+    .tab-top {
+      width: 213px;
+      height: 18px;
+      background: url("../../assets/overview_images/tab-top-bg-1366.png");
+    }
+    .tab-bottom {
+      width: 213px;
+      height: 18px;
+      background: url("../../assets/overview_images/tab-bottom-bg-1366.png");
+    }
+    .map-index-button {
+      width: 210px;
+      height: 56px;
+      background: url("../../assets/overview_images/tab-index-unchecked-1366.png");
+      font-size: 24px;
+      line-height: 56px;
+    }
+    .index-selected {
+      background: url("../../assets/overview_images/tab-index-checked-1366.png");
+    }
+
+    .sub-tab-guider {
+      width: 110px;
+      height: 37px;
+      background: url("../../assets/overview_images/sub-tab-guider-1366.png");
+    }
+    .sub-tab-border {
+      width: 150px;
+      height: 186px;
+      background: url("../../assets/overview_images/sub-tab-border-1366.png");
+    }
+    .sub-tab-content {
+      font-size: 20px;
+      cursor: pointer;
+      width: 145px;
+    }
+
+    .dev-detail-block {
+      width: 390px;
+      height: 251px;
+      font-size: 16px;
+      padding: 30px 40px;
+      line-height: 28px;
+      background: url("../../assets/overview_images/dev-info-1366.png");
+      .dev-detail-close::before {
+        top: -12px;
+        right: -312px;
+      }
+    }
+
+    .dev-footer {
+      bottom: 20px;
+    }
+    .dev-icon {
+      width: 140px;
+      height: 76px;
+      line-height: 56px;
+      padding: 10px 16px !important;
+      margin-left: 15px;
+      background: url("../../assets/overview_images/dev-type-border-unchecked-1366.png");
+    }
+    .dev-icon img {
+      height: 32px;
+    }
+    .dev-icon span {
+      font-size: 16px;
+      line-height: 56px;
+      height: 56px;
+    }
+    .dev-type-selected {
+      background: url("../../assets/overview_images/dev-type-border-checked-1366.png");
+    }
+  }
+
+</style>
diff --git a/src/views/alarm/webPlay.vue b/src/views/alarm/webPlay.vue
new file mode 100644
index 0000000..97e5ed2
--- /dev/null
+++ b/src/views/alarm/webPlay.vue
@@ -0,0 +1,21 @@
+<template>
+  <div class="play-window-block">
+    <div style="height: 100%">
+      <iframe ref="play" src="/static/webCtrl/demo-easy.html" width="100%" height="100%" style="border: 0px; overflow: hidden;" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'WebPlay'
+}
+</script>
+
+<style scoped>
+  .play-window-block {
+    margin: 15px 15px 15px 0px;
+    box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
+    height: calc(100vh - 175px);
+  }
+</style>
diff --git a/src/views/area/areaList.vue b/src/views/area/areaList.vue
index 1950028..11dc51f 100644
--- a/src/views/area/areaList.vue
+++ b/src/views/area/areaList.vue
@@ -31,7 +31,7 @@
       <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="batchExport">导出</el-button>-->
+          <!--<el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>-->
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>
diff --git a/src/views/area/defenceDetail.vue b/src/views/area/defenceDetail.vue
index e29a258..703ec7d 100644
--- a/src/views/area/defenceDetail.vue
+++ b/src/views/area/defenceDetail.vue
@@ -4,12 +4,14 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="区域名称">
-            <span>{{ dataForm.name }}</span>
+            <el-input v-model="dataForm.name" disabled type="text"/>
+            <!--<span>{{ dataForm.name }}</span>-->
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="防卫状态">
-            <span>{{ dataForm.areaStatusName }}</span>
+            <el-input v-model="dataForm.areaStatusName" disabled type="text"/>
+            <!--<span>{{ dataForm.areaStatusName }}</span>-->
           </el-form-item>
         </el-col>
       </el-row>
@@ -17,12 +19,14 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="区域类别">
-            <span>{{ dataForm.areaTypeName }}</span>
+            <el-input v-model="dataForm.areaTypeName" disabled type="text"/>
+            <!--<span>{{ dataForm.areaTypeName }}</span>-->
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="区域位置">
-            <span>{{ dataForm.position }}</span>
+            <el-input v-model="dataForm.position" disabled type="text"/>
+            <!--<span>{{ dataForm.position }}</span>-->
           </el-form-item>
         </el-col>
       </el-row>
@@ -38,7 +42,8 @@
       <el-row v-show="isFence" :gutter="20">
         <el-col :span="12">
           <el-form-item label="电子围栏">
-            <span>{{ dataForm.deviceStatusName }}</span>
+            <el-input v-model="dataForm.deviceStatusName" disabled type="text"/>
+            <!--<span>{{ dataForm.deviceStatusName }}</span>-->
           </el-form-item>
         </el-col>
       </el-row>
@@ -46,7 +51,8 @@
       <el-row :gutter="20">
         <el-col :span="24">
           <el-form-item label="备注" prop="remark">
-            <span>{{ dataForm.remark }}</span>
+            <el-input v-model="dataForm.remark" disabled type="text"/>
+            <!--<span>{{ dataForm.remark }}</span>-->
           </el-form-item>
         </el-col>
       </el-row>
diff --git a/src/views/area/defenceList.vue b/src/views/area/defenceList.vue
index 9e2ed68..8649918 100644
--- a/src/views/area/defenceList.vue
+++ b/src/views/area/defenceList.vue
@@ -31,9 +31,9 @@
       <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">批量导入</el-button>
-          <el-button class="edit_btn" size="small">导入模板下载</el-button>
-          <!--<el-button class="edit_btn" size="small" @click="batchExport">导出</el-button>-->
+          <!--<el-button class="edit_btn" size="small">批量导入</el-button>-->
+          <!--<el-button class="edit_btn" size="small">导入模板下载</el-button>-->
+          <!--<el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>-->
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>
diff --git a/src/views/car/carAdd.vue b/src/views/car/carAdd.vue
index 6a35b7d..633e353 100644
--- a/src/views/car/carAdd.vue
+++ b/src/views/car/carAdd.vue
@@ -20,14 +20,14 @@
         <el-col :span="12">
           <el-form-item label="所属部门" prop="deptid">
             <!--<span v-show="isDetailMode">{{ dataForm.deptName }}</span>-->
-            <el-select :disabled="isDetailMode" v-model="dataForm.deptid" placeholder="请选择所属部门" filterable clearable>
+            <el-select :disabled="isDetailMode" v-model="dataForm.deptid" placeholder="请选择所属部门" filterable clearable @change="getStaffList">
               <el-option v-for="item in deptList" :key="item.id" :label="item.name" :value="item.id"/>
             </el-select>
             <!--<dept-select v-show="!isDetailMode" v-model="dataForm.deptid" :dept-show="true" :need-top="true" placeholder="所属组织" @change="fetchStaffList"/>-->
           </el-form-item>
         </el-col>
         <el-col v-if="dataForm.property==='2'" :span="12">
-          <el-form-item label="车主" prop="owner">
+          <el-form-item label="车主" prop="ownerId">
             <!--<span v-show="isDetailMode">{{ dataForm.ownerName }}</span>-->
             <el-select :disabled="isDetailMode" v-model="dataForm.ownerId" placeholder="请选择车主" filterable clearable @change="autoStaffPhone">
               <el-option v-for="item in staffList" :key="item.id" :label="item.name" :value="item.id"/>
@@ -91,7 +91,7 @@
       rules: {
         phone: [{ required: true, trigger: ['blur', 'change'], validator: phoneValidator }],
         plateNumber: [{ required: true, trigger: ['blur', 'change'], validator: plateValidator }],
-        owner: [{ required: true, trigger: ['blur', 'change'], message: '请选择车主' }]
+        ownerId: [{ required: true, trigger: ['blur', 'change'], message: '请选择车主' }]
       }, // 前端校验规则
       carProperties: [], // 车辆性质字典值
       staffList: [], // 车主人员列表
@@ -137,6 +137,7 @@
           phone: row.phone,
           remark: row.remark
         }
+        this.getStaffList()
       } else if (dialogStatus === 'detail') {
         this.isDetailMode = true
         this.isEditMode = false
@@ -151,6 +152,7 @@
           deptName: row.deptName,
           ownerName: row.ownerName
         }
+        this.getStaffList()
       }
     },
     // 清除数据
@@ -180,6 +182,13 @@
       })
       getStaffByDept({ deptId: this.dataForm.deptid }).then(response => {
         this.staffList = response.data
+        console.log(response)
+      })
+    },
+    getStaffList(){
+      getStaffByDept({ deptId: this.dataForm.deptid }).then(response => {
+        this.staffList = response.data
+        console.log(response)
       })
     },
     autoStaffPhone() {
@@ -190,7 +199,6 @@
             return item
           }
         })
-
         this.dataForm.phone = selectedStaff[0].phone
       } else {
         this.dataForm.phone = ''
diff --git a/src/views/car/carList.vue b/src/views/car/carList.vue
index ceb77ff..d0c0176 100644
--- a/src/views/car/carList.vue
+++ b/src/views/car/carList.vue
@@ -31,7 +31,7 @@
       <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="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
           <el-button v-if="hasPerm('/door/car/add')" class="edit_btn" size="small" @click="add">新增</el-button>
           <!--          <el-button v-if="hasPerm('/door/car/delete')" v-show="false" class="edit_btn" size="small" @click="batchDel">删除</el-button>-->
         </el-col>
diff --git a/src/views/deviceManage/deviceList.vue b/src/views/deviceManage/deviceList.vue
index 5966b45..feb4b36 100644
--- a/src/views/deviceManage/deviceList.vue
+++ b/src/views/deviceManage/deviceList.vue
@@ -48,7 +48,7 @@
       <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="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border @selection-change="handleSelectionChange">
diff --git a/src/views/overview/doorIndex.vue b/src/views/overview/doorIndex.vue
index 03624bb..4f48bd0 100644
--- a/src/views/overview/doorIndex.vue
+++ b/src/views/overview/doorIndex.vue
@@ -285,6 +285,7 @@
         if (response.code === 200) {
           const that = this
           this.devList = []
+          console.log(response)
           response.data.forEach(dev => {
             if (dev.x !== '' && dev.y !== '') {
               that.devList.push(dev)

diff --git a/src/router/modules/doorSys.js b/src/router/modules/doorSys.js
index 8017e4b..6bd1506 100644
--- a/src/router/modules/doorSys.js
+++ b/src/router/modules/doorSys.js
@@ -87,6 +87,20 @@
         name: 'DoorAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/door/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/door/alarm/position',
+        name: 'DoorAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/door/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/door/alarm/video',
+        name: 'DoorAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/door/alarm/video'], keepAlive: true }
       }
     ]
   },
@@ -262,5 +276,26 @@
         meta: { title: '营门出入次数统计', icon: '', permission: ['/door/statistics/doorCount'], keepAlive: true }
       }
     ]
+  },
+  {
+    path: '/door/area',
+    component: Layout,
+    redirect: '/door/area',
+    name: 'DoorArea',
+    alwaysShow: true,
+    meta: {
+      title: '区域管理',
+      icon: 'icon-area', // 图标
+      permission: ['/door/area'], // 权限名称
+      sys: '/door'
+    },
+    children: [
+      {
+        path: '/door/area/list',
+        name: 'DoorAreaList',
+        component: () => import('@/views/area/areaList'),
+        meta: { title: '区域列表', icon: '', permission: ['/door/area/list'], keepAlive: true }
+      }
+    ]
   }
 ]
diff --git a/src/router/modules/fenceSys.js b/src/router/modules/fenceSys.js
index 0d784b0..e2962bd 100644
--- a/src/router/modules/fenceSys.js
+++ b/src/router/modules/fenceSys.js
@@ -85,6 +85,20 @@
         name: 'FenceAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/fence/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/fence/alarm/position',
+        name: 'FenceAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/fence/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/fence/alarm/video',
+        name: 'FenceAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/fence/alarm/video'], keepAlive: true }
       }
     ]
   },
diff --git a/src/router/modules/keySys.js b/src/router/modules/keySys.js
index f3a027b..832744b 100644
--- a/src/router/modules/keySys.js
+++ b/src/router/modules/keySys.js
@@ -85,6 +85,20 @@
         name: 'KeyAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/key/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/key/alarm/position',
+        name: 'KeyAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/key/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/key/alarm/video',
+        name: 'KeyAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/key/alarm/video'], keepAlive: true }
       }
     ]
   },
diff --git a/src/router/modules/regionSys.js b/src/router/modules/regionSys.js
index 9b4613a..43b8c38 100644
--- a/src/router/modules/regionSys.js
+++ b/src/router/modules/regionSys.js
@@ -85,6 +85,20 @@
         name: 'RegionAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/region/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/region/alarm/position',
+        name: 'RegionAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/region/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/region/alarm/video',
+        name: 'RegionAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/region/alarm/video'], keepAlive: true }
       }
     ]
   },
@@ -102,6 +116,20 @@
     },
     children: [
       {
+        path: '/region/staff/add',
+        name: 'RegionStaffAdd',
+        component: () => import('@/views/staff/staffAdd'),
+        hidden: true,
+        meta: { title: '人员登记', icon: '', permission: ['/region/staff/add'], keepAlive: true }
+      },
+      {
+        path: '/region/staff/edit',
+        name: 'RegionStaffEdit',
+        component: () => import('@/views/staff/staffEdit'),
+        hidden: true,
+        meta: { title: '人员编辑', icon: '', permission: ['/region/staff/edit'], keepAlive: true }
+      },
+      {
         path: '/region/staff/list',
         name: 'RegionStaffList',
         component: () => import('@/views/staff/staffList'),
diff --git a/src/views/alarm/alarmList.vue b/src/views/alarm/alarmList.vue
index 704f797..91967a0 100644
--- a/src/views/alarm/alarmList.vue
+++ b/src/views/alarm/alarmList.vue
@@ -37,7 +37,7 @@
             </el-col>
 
             <el-col :span="4" 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" @click="fetchData()">搜索</el-button>
             </el-col>
           </el-row>
         </el-form>
@@ -48,7 +48,7 @@
       <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="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>
@@ -66,8 +66,8 @@
         <!--操作列-->
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
-            <el-button type="text" @click="detail(scope.row)">位置</el-button>
-            <el-button v-if="hasPerm('/car/update')" type="text" @click="edit(scope.row)">视频</el-button>
+            <el-button type="text" @click="position(scope.row)">位置</el-button>
+            <el-button v-if="hasPerm('/car/update')" type="text" @click="video(scope.row)">视频</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -185,6 +185,14 @@
     this.fetchData() // 获取数据
   },
   methods: {
+    video(row){
+      const code = this.$store.getters.currentSystem.code
+      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId }})
+    },
+    position(row){
+      const code = this.$store.getters.currentSystem.code
+      this.$router.push({ path: '/' + code + '/alarm/position', query: {  id: row.deviceId }})
+    },
     batchExport() {
       // 全屏加载动画
       const loading = this.$loading({
@@ -254,6 +262,8 @@
       getAlarmList(this.listQuery).then(response => {
         if (response.code === 200) {
           this.list = response.data.rows
+          console.log('&&&')
+          console.log(this.list)
           this.total = parseInt(response.data.total)
         } else {
           this.$message.error(response.message)
diff --git a/src/views/alarm/alarmMonitor.vue b/src/views/alarm/alarmMonitor.vue
new file mode 100644
index 0000000..517d6e9
--- /dev/null
+++ b/src/views/alarm/alarmMonitor.vue
@@ -0,0 +1,80 @@
+<template>
+  <div>
+    <el-row>
+      <!--<el-col :span="6">-->
+        <!--&lt;!&ndash;<video-tree @click="handleCameraClicked"/>&ndash;&gt;-->
+      <!--</el-col>-->
+
+      <el-col :span="18" :offset="3">
+        <web-play ref="webCtrl" />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+// import VideoTree from './videoTree'
+import WebPlay from './webPlay'
+import { getDetailDevice } from '@/api/device'
+export default {
+  name: 'VideoMonitor',
+  components: { WebPlay },
+  data() {
+    return {
+      camera:{
+        ip:'',
+        port:'',
+        username:'',
+        password:''
+      }
+    }
+  },
+  mounted() {
+
+  },
+  activated() {
+    if (this.$route.query && this.$route.query.id) {
+      const id = this.$route.query.id
+      getDetailDevice(id).then(response => {
+          if (response.code === 200) {
+            console.log(response.data)
+            this.camera.ip = response.data.ip
+            this.camera.port = response.data.port
+            this.camera.username = response.data.username
+            this.camera.password = response.data.password
+            this.handleCamera()
+          }
+      })
+    }
+  },
+  methods: {
+    handleCamera(){
+      if (typeof this.camera.ip === 'undefined' || this.camera.ip === '') {
+        console.log('ip is null')
+        return false
+      }
+      if (typeof this.camera.port === 'undefined' || this.camera.port === '') {
+        console.log('port is null')
+        return false
+      }else{
+        this.camera.ip += (':'+ this.camera.port)
+      }
+      if (typeof this.camera.username === 'undefined' || this.camera.username === '') {
+        console.log('username is null')
+        return false
+      }
+      if (typeof this.camera.password === 'undefined' || this.camera.password === '') {
+        console.log('password is null')
+        return false
+      }
+
+      // 开始预览
+      this.$refs.webCtrl.$refs.play.contentWindow.startPlayReal(this.camera)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/alarm/alarmNow.vue b/src/views/alarm/alarmNow.vue
index 03bb5ea..66055b1 100644
--- a/src/views/alarm/alarmNow.vue
+++ b/src/views/alarm/alarmNow.vue
@@ -48,7 +48,7 @@
       <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="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>
@@ -66,8 +66,8 @@
         <el-table-column label="操作" align="center" width="180">
           <template slot-scope="scope">
             <el-button v-if="hasPerm('/alarm/cancel')" type="text" @click="alarmCancel(scope.row)">取消报警</el-button>
-            <el-button type="text" @click="detail(scope.row)">位置</el-button>
-            <el-button type="text" @click="edit(scope.row)">视频</el-button>
+            <el-button type="text" @click="position(scope.row)">位置</el-button>
+            <el-button v-if="hasPerm('/car/update')" type="text" @click="video(scope.row)">视频</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -183,6 +183,14 @@
     this.fetchData() // 获取数据
   },
   methods: {
+    video(row){
+      const code = this.$store.getters.currentSystem.code
+      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId }})
+    },
+    position(row){
+      const code = this.$store.getters.currentSystem.code
+      this.$router.push({ path: '/' + code + '/alarm/position', query: {  id: row.deviceId }})
+    },
     batchExport() {
       // 全屏加载动画
       const loading = this.$loading({
diff --git a/src/views/alarm/alarmPosition.vue b/src/views/alarm/alarmPosition.vue
new file mode 100644
index 0000000..51f915e
--- /dev/null
+++ b/src/views/alarm/alarmPosition.vue
@@ -0,0 +1,786 @@
+<template>
+  <div class="main-page">
+    <!-- 中间平面图区域 -->
+    <div class="map-overview">
+      <img ref="bgImg" :src="bgImageSrc" height="100%" @load="backgroundImageReady">
+
+      <div
+        v-for="item in devList"
+        :id="item.id"
+        :key="item.id"
+        :style="{ position: 'absolute', top: item.y * imgSize.height / imgSizeOriginal.height + 'px', left: (item.x * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
+        class="point-camera"
+        @click="detailDev(item, $event)" />
+    </div>
+    <!-- 右侧设备详情及操作区域 -->
+    <div v-show="showDevDetail" ref="dev-detail-block" class="dev-detail-block">
+      <span class="dev-detail-close" @click="showDevDetail=false" />
+      <el-row style="margin-top: -25px;">
+        <el-col :span="24">设备名称
+          <span class="dev-detail-span">{{ dataForm.name }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">设备编号
+          <span class="dev-detail-span">{{ dataForm.devcode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">设备类型
+          <span class="dev-detail-span">{{ dataForm.typeName }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">在线状态
+          <span class="dev-detail-span">{{ dataForm.onlineStatusName }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">安装日期
+          <span class="dev-detail-span">{{ dataForm.installDate }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">安装位置
+          <span class="dev-detail-span">{{ dataForm.position }}</span>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getProject } from '@/utils/baseConfig'
+import DeviceDetail from '@/views/deviceManage/deviceDetail'
+import tg_main from '../../assets/overview_images/tg/mapOverviewTg.jpg'
+import tg_3_1 from '../../assets/overview_images/tg/mapOverviewTg-3-1.jpg'
+import tg_4_1 from '../../assets/overview_images/tg/mapOverviewTg-4-1.jpg'
+import tg_4_5 from '../../assets/overview_images/tg/mapOverviewTg-4-5.jpg'
+import { getDetailDevice } from '@/api/device'
+
+// const cameraTypes = [4, 5, 8, 9, 10, 11]
+export default {
+  name: 'AlarmPosition',
+  components: { DeviceDetail },
+  data() {
+    return {
+      title: getProject().title,
+      bgImageSrc: tg_main,
+      devListParams: {
+        picture: '1',
+        areaTypeId: 1,
+        deviceTypes: []
+      },
+      dev: {
+        alarm: 0,
+        onLine: 0,
+        closed: 0,
+        offLine: 0
+      },
+      imgSizeOriginal: {
+        width: 2245,
+        height: 1586
+      }, // 图片原尺寸
+      imgSize: {
+        width: 2245,
+        height: 1586
+      }, // 图片显示尺寸
+      winSize: {
+        width: 1440,
+        height: 789
+      }, // 屏幕窗口尺寸
+      halfLeft: 0,
+      showDevDetail: false, // 是否显示设备详情
+      alarmList: [], // 报警列表
+      alarmColumns: [
+        {
+          text: '设备编号',
+          value: 'devcode',
+          align: 'center'
+        },
+        {
+          text: '报警内容',
+          value: 'alarmContent',
+          align: 'center'
+        },
+        {
+          text: '报警时间',
+          value: 'alarmTime',
+          align: 'center',
+          width: 165
+        }
+      ], // 报警列表显示列
+      tableShow: true, // 是否显示告警列表
+      devList: [], // 设备列表（在地图上显示）
+      dataForm: {
+        id: '', // id
+        name: '', // 设备名
+        devcode: '', // 设备编号
+        typeName: '', // 设备类型
+        model: '', // 设备型号
+        onlineStatusName: '', // 在线状态
+        deviceStatusName: '', // 设备状态
+        position: '', // 安装位置
+        installDate: '', // 安装日期
+        inOutName: '' // 进出营
+      }, // 设备详情表单
+      devPosition:{
+        picture: '',
+        x: '',
+        y: ''
+      },
+      checkDevType: [true, false] // 选中设备类型
+    }
+  },
+  mounted() {
+    this.initWindowSize()
+    if (this.$route.query && this.$route.query.id) {
+      const id = this.$route.query.id
+      getDetailDevice(id).then(response => {
+        if (response.code === 200) {
+          console.log(response.data)
+          this.devPosition.picture = response.data.picture
+          this.devPosition.x = response.data.x
+          this.devPosition.y = response.data.y
+          if(this.devPosition.picture === '1'){
+            this.bgImageSrc = tg_main
+          }else if(this.devPosition.picture === '2'){
+            this.bgImageSrc = tg_3_1
+          }else if(this.devPosition.picture === '3'){
+            this.bgImageSrc = tg_4_1
+          }else if(this.devPosition.picture === '4'){
+            this.bgImageSrc = tg_4_5
+          }else{
+            this.$message.warning('该设备暂无位置信息')
+            return
+          }
+          this.devList = []
+          if (this.devPosition.x !== '' && this.devPosition.y !== '') {
+            this.devList.push(response.data)
+          }
+        }
+      })
+    }
+    const that = this
+    window.onresize = function() {
+      that.initWindowSize()
+      that.getBgImageSize()
+    }
+  },
+  methods: {
+    // 获取窗口大小
+    initWindowSize() {
+      // 获取窗体尺寸
+      this.winSize = {
+        width: document.documentElement.clientWidth,
+        height: document.documentElement.clientHeight
+      }
+    },
+    // 获取图像大小
+    getBgImageSize() {
+      // 获取图片尺寸
+      this.imgSize = {
+        width: this.$refs['bgImg'].width,
+        height: this.$refs['bgImg'].height
+      }
+      this.halfLeft = (this.winSize.width - this.imgSize.width) / 2
+    },
+    // 重新绘制设备点位
+    reDrawDevs() {
+      const halfLeft = (this.winSize.width - this.imgSize.width) / 2
+
+      // 调整球机的设备位置
+      const that = this
+      this.devList.forEach(function(item) {
+        const point = document.getElementById(item.id)
+
+        if (point !== null) {
+          if (item.x !== '' && item.y !== '') {
+            point.style.position = 'absolute'
+            point.style.top = item.y * that.imgSize.height / that.imgSizeOriginal.height + 'px'
+            point.style.left = (item.x * that.imgSize.width / that.imgSizeOriginal.width + halfLeft) + 'px'
+          } else {
+            point.style.display = 'none'
+          }
+        }
+      })
+    },
+    // 平面图就绪时执行函数
+    backgroundImageReady() {
+      this.getBgImageSize()
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    },
+    backToIndex() {
+      this.$router.push('/door/alarm/now')
+    },
+    // 查询并显示设备详情
+    detailDev(dev, event) {
+      this.resetDevDetail()
+      getDetailDevice(dev.id).then(response => {
+        if (response.code === 200) {
+          this.dataForm = {
+            id: dev.id,
+            name: dev.name,
+            devcode: dev.devcode,
+            typeName: response.data.typeName,
+            model: dev.model,
+            onlineStatusName: response.data.onlineStatusName,
+            position: dev.position,
+            installDate: dev.installDate,
+            inOutName: response.data.inOutName,
+            deviceStatusName: response.data.deviceStatusName
+          }
+        } else {
+          this.$message.error(response.message)
+        }
+      })
+
+      // 弹窗显示设备详情
+      const targetDev = event.currentTarget // 取到点击到的设备图标div
+
+      this.showDevDetail = true
+      let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+      top = top + 100
+      this.$refs['dev-detail-block'].style.position = 'absolute'
+      this.$refs['dev-detail-block'].style.top = top + 'px'
+      this.$refs['dev-detail-block'].style.left = targetDev.style.left
+    },
+    // 点击报警列表
+    alarmRowClick(dev, column, event) {
+
+    },
+    // 清除设备详情
+    resetDevDetail() {
+      this.dataForm = {
+        id: '', // id
+        name: '', // 设备名
+        devcode: '', // 设备编号
+        typeName: '', // 设备类型
+        model: '', // 设备型号
+        onlineStatusName: '', // 在线状态
+        deviceStatusName: '', // 设备状态
+        position: '', // 安装位置
+        installDate: '', // 安装日期
+        inOutName: '' // 进出营
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+  .main-page {
+    background-size: cover;
+    background-color: #023d83;
+    height: 100vh;
+  }
+
+  .main-header {
+    width: 100vw;
+  }
+  .main-title {
+    height: 90px;
+    text-align: center;
+    padding-top: 20px;
+    background: url("../../assets/overview_images/title-background-1920.png");
+  }
+
+  .main-title img {
+    display: inline-block;
+    margin-right: 15px;
+    width: 52px;
+    height: 32px;
+    vertical-align: text-bottom;
+  }
+
+  .home-icon {
+    width: 26px;
+    height: 26px;
+    position: fixed;
+    left: 20px;
+    top: 20px;
+  }
+  .exit-icon {
+    width: 26px;
+    height: 26px;
+    position: fixed;
+    right: 20px;
+    top: 20px;
+  }
+  .home-icon img, .exit-icon img {
+    width: 26px;
+    height: 26px;
+  }
+
+  .main-title span {
+    color: #FFFFFF;
+    font-size: 32px;
+    font-weight: bold;
+    font-family: 'Microsoft YaHei';
+  }
+
+  .map-overview {
+    /*margin-top: 50px;*/
+    /*width: 1100px;*/
+    height: calc(90vh - 200px);
+    text-align: center;
+    position: relative;
+  }
+  .point {
+    width: 24px;
+    height: 24px;
+    position: relative;
+    display: inline-block;
+    cursor: pointer;
+  }
+  .point-camera {
+    background: url("../../assets/overview_images/icons/icon-camera-point.png");
+    background-size: contain;
+    @extend .point;
+  }
+  .point-fence {
+    background: url("../../assets/overview_images/icons/icon-fence-unchecked.png");
+    background-size: contain;
+    @extend .point;
+  }
+
+  .statis-block {
+    text-align: center;
+    margin-top: 20px;
+    font-size: 48px;
+  }
+  .sub-title {
+    text-align: center;
+    font-size: 32px;
+  }
+  .sub-data-block {
+    width: 122px;
+    height: 155px;
+  }
+  .dev-normal {
+    background: url("../../assets/overview_images/normal.png");
+    background-size: contain;
+    color: #00ff0c;
+  }
+  .dev-alarm {
+    background: url("../../assets/overview_images/alarm.png");
+    background-size: contain;
+    color: #ff0000;
+  }
+  .dev-offline {
+    background: url("../../assets/overview_images/offline.png");
+    background-size: contain;
+    color: #fff000;
+  }
+  .dev-closed {
+    background: url("../../assets/overview_images/closed.png");
+    background-size: contain;
+    color: #00fff6;
+  }
+
+  .dev-status-block {
+    position: absolute;
+    top: 100px;
+    left: 20px;
+    color: #ffffff;
+  }
+
+  .alarm-now-block {
+    position: absolute;
+    z-index: 500;
+    top: 300px;
+    left: 20px;
+    width: 480px;
+    .map-alarm-div-header {
+      line-height: 40px;
+      padding-left: 10px;
+      color: #00fff6;
+      font-size: 24px;
+      .icon-right {
+        cursor: pointer;
+        margin-left: 20px;
+      }
+    }
+    .el-scrollbar {
+      /*height: 200px;*/
+      width: 100%;
+    }
+    .moredatascollor {
+      height: 200px;
+    }
+    .el-scrollbar__wrap {
+      overflow-y: auto;
+      overflow-x: hidden;
+      margin-bottom: 0px !important;
+    }
+    .el-table {
+      font-size: 12px;
+    }
+    .transition-box {
+      margin-bottom: 10px;
+      width: 200px;
+      height: 100px;
+      border-radius: 4px;
+      background-color: #409EFF;
+      text-align: center;
+      color: #fff;
+      padding: 40px 20px;
+      box-sizing: border-box;
+      margin-right: 20px;
+    }
+  }
+
+  .alarm-now-block /deep/ .el-table th {
+    background-color: #0757A0;
+    padding: 12px 0px;
+    font-size: 16px;
+    color: #00fff6;
+    font-weight: normal;
+  }
+
+  .alarm-now-block /deep/ .el-table td {
+    /*background-color: #0757A0;*/
+    padding: 10px 0px;
+    font-size: 15px;
+    color: #FFFFFF;
+    font-weight: normal;
+  }
+
+  .alarm-now-block /deep/ .el-table__row td {
+    background-color: #023D83;
+  }
+  .alarm-now-block /deep/ .el-table__body tr:hover > td {
+    background-color: #0757A0;
+  }
+  .alarm-now-block /deep/ tr.el-table__row--striped td {
+    background-color: #0757A0;
+  }
+
+  .map-tab {
+    position: absolute;
+    right: 20px;
+    top: 100px;
+    width: 300px;
+    button {
+      margin: 5px 0px;
+    }
+  }
+
+  .tab-top {
+    position: relative;
+    width: 284px;
+    height: 24px;
+    background: url("../../assets/overview_images/tab-top-bg.png");
+  }
+  .tab-bottom {
+    position: relative;
+    width: 284px;
+    height: 24px;
+    background: url("../../assets/overview_images/tab-bottom-bg.png");
+  }
+  .map-index-button {
+    position: relative;
+    width: 284px;
+    height: 74px;
+    background: url("../../assets/overview_images/tab-index-unchecked.png");
+    font-size: 32px;
+    line-height: 74px;
+    text-align: center;
+    color: #FFFFFF;
+    cursor: pointer;
+  }
+  .index-selected {
+    background: url("../../assets/overview_images/tab-index-checked.png");
+  }
+  .sub-tab-guider {
+    width: 149px;
+    height: 50px;
+    background: url("../../assets/overview_images/sub-tab-guider.png");
+  }
+  .sub-tab-border {
+    width: 204px;
+    height: 253px;
+    background: url("../../assets/overview_images/sub-tab-border.png");
+  }
+  .sub-tab-content {
+    text-align: center;
+    color: #FFFFFF;
+    font-size: 28px;
+    cursor: pointer;
+    width: 200px;
+  }
+
+  .dev-detail-block {
+    /*position: absolute;*/
+    /*right: 20px;*/
+    /*bottom: 100px;*/
+    width: 520px;
+    height: 335px;
+    color: #00FFFF;
+    font-size: 24px;
+    font-family: "Microsoft YaHei";
+    padding: 45px 60px;
+    line-height: 35px;
+    background: url("../../assets/overview_images/dev-info.png");
+    .dev-detail-span {
+      margin-left: 20px;
+    }
+    .dev-detail-close::before {
+      content: "\2716";
+      position: relative;
+      top: -20px;
+      right: -410px;
+      cursor: pointer;
+    }
+  }
+
+  .dev-footer {
+    position: absolute;
+    bottom: 25px;
+  }
+
+  .dev-icon {
+    width: 195px;
+    height: 105px;
+    vertical-align: middle;
+    line-height: 65px;
+    padding: 20px 30px !important;
+    margin-left: 15px;
+    cursor: pointer;
+    background: url("../../assets/overview_images/dev-type-border-unchecked.png");
+  }
+
+  .dev-icon img {
+    height: 40px;
+    vertical-align:middle;
+  }
+  .dev-icon span {
+    font-size: 20px;
+    color: #00D2FF;
+    line-height: 65px;
+    height: 65px;
+    vertical-align:middle;
+    float: right;
+  }
+
+  .dev-type-selected {
+    background: url("../../assets/overview_images/dev-type-border-checked.png");
+  }
+  .dev-type-selected span {
+    color: #f58a88 !important;
+  }
+
+  /*@media(max-width: 1440px) {*/
+  /*  .main-title {*/
+  /*    height: 68px;*/
+  /*    padding-top: 20px;*/
+  /*    background: url("../../assets/overview_images/title-background-1440.png");*/
+  /*  }*/
+  /*  .main-title span {*/
+  /*    font-size: 24px;*/
+  /*  }*/
+  /*  .main-title img {*/
+  /*    margin-right: 15px;*/
+  /*    width: 32px;*/
+  /*    height: 32px;*/
+  /*  }*/
+
+  /*  .home-icon {*/
+  /*    left: 18px;*/
+  /*    width: 18px;*/
+  /*    height: 18px;*/
+  /*  }*/
+  /*  .exit-icon {*/
+  /*    right: 18px;*/
+  /*    width: 18px;*/
+  /*    height: 18px;*/
+  /*  }*/
+
+  /*  .home-icon img, .exit-icon img {*/
+  /*    width: 18px;*/
+  /*    height: 18px;*/
+  /*  }*/
+
+  /*  .dev-icon span {*/
+  /*    font-size: 12px;*/
+  /*  }*/
+  /*}*/
+
+  @media(max-width: 1440px) {
+    .main-title {
+      height: 65px;
+      padding-top: 16px;
+      background: url("../../assets/overview_images/title-background-1366.png");
+    }
+    .main-title span {
+      font-size: 24px;
+    }
+    .main-title img {
+      margin-right: 15px;
+      width: 32px;
+      height: 32px;
+    }
+
+    .home-icon {
+      left: 16px;
+      width: 16px;
+      height: 16px;
+    }
+    .exit-icon {
+      right: 16px;
+      width: 16px;
+      height: 16px;
+    }
+
+    .home-icon img, .exit-icon img {
+      width: 20px;
+      height: 20px;
+    }
+
+    .map-overview {
+      margin-top: 35px;
+      height: calc(90vh - 150px);
+    }
+
+    .point {
+      width: 16px;
+      height: 16px;
+    }
+
+    .statis-block {
+      margin-top: 16px;
+      font-size: 36px;
+    }
+    .sub-title {
+      font-size: 24px;
+    }
+    .sub-data-block {
+      width: 90px;
+      height: 114px;
+    }
+
+    .dev-normal {
+      background: url("../../assets/overview_images/normal-1366.png");
+    }
+    .dev-alarm {
+      background: url("../../assets/overview_images/alarm-1366.png");
+    }
+    .dev-offline {
+      background: url("../../assets/overview_images/offline-1366.png");
+    }
+    .dev-closed {
+      background: url("../../assets/overview_images/closed-1366.png");
+    }
+
+    .dev-status-block {
+      top: 90px;
+      left: 16px;
+    }
+
+    .alarm-now-block {
+      top: 220px;
+      left: 16px;
+      width: 360px;
+      .map-alarm-div-header {
+        line-height: 32px;
+        font-size: 20px;
+      }
+    }
+
+    .alarm-now-block /deep/ .el-table th {
+      padding: 8px 0px;
+      font-size: 16px;
+    }
+    .alarm-now-block /deep/ .el-table td {
+      padding: 5px 0px;
+      font-size: 12px;
+    }
+
+    .map-tab {
+      right: 16px;
+      top: 90px;
+      width: 215px;
+      button {
+        margin: 5px 0px;
+      }
+    }
+    .tab-top {
+      width: 213px;
+      height: 18px;
+      background: url("../../assets/overview_images/tab-top-bg-1366.png");
+    }
+    .tab-bottom {
+      width: 213px;
+      height: 18px;
+      background: url("../../assets/overview_images/tab-bottom-bg-1366.png");
+    }
+    .map-index-button {
+      width: 210px;
+      height: 56px;
+      background: url("../../assets/overview_images/tab-index-unchecked-1366.png");
+      font-size: 24px;
+      line-height: 56px;
+    }
+    .index-selected {
+      background: url("../../assets/overview_images/tab-index-checked-1366.png");
+    }
+
+    .sub-tab-guider {
+      width: 110px;
+      height: 37px;
+      background: url("../../assets/overview_images/sub-tab-guider-1366.png");
+    }
+    .sub-tab-border {
+      width: 150px;
+      height: 186px;
+      background: url("../../assets/overview_images/sub-tab-border-1366.png");
+    }
+    .sub-tab-content {
+      font-size: 20px;
+      cursor: pointer;
+      width: 145px;
+    }
+
+    .dev-detail-block {
+      width: 390px;
+      height: 251px;
+      font-size: 16px;
+      padding: 30px 40px;
+      line-height: 28px;
+      background: url("../../assets/overview_images/dev-info-1366.png");
+      .dev-detail-close::before {
+        top: -12px;
+        right: -312px;
+      }
+    }
+
+    .dev-footer {
+      bottom: 20px;
+    }
+    .dev-icon {
+      width: 140px;
+      height: 76px;
+      line-height: 56px;
+      padding: 10px 16px !important;
+      margin-left: 15px;
+      background: url("../../assets/overview_images/dev-type-border-unchecked-1366.png");
+    }
+    .dev-icon img {
+      height: 32px;
+    }
+    .dev-icon span {
+      font-size: 16px;
+      line-height: 56px;
+      height: 56px;
+    }
+    .dev-type-selected {
+      background: url("../../assets/overview_images/dev-type-border-checked-1366.png");
+    }
+  }
+
+</style>
diff --git a/src/views/alarm/webPlay.vue b/src/views/alarm/webPlay.vue
new file mode 100644
index 0000000..97e5ed2
--- /dev/null
+++ b/src/views/alarm/webPlay.vue
@@ -0,0 +1,21 @@
+<template>
+  <div class="play-window-block">
+    <div style="height: 100%">
+      <iframe ref="play" src="/static/webCtrl/demo-easy.html" width="100%" height="100%" style="border: 0px; overflow: hidden;" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'WebPlay'
+}
+</script>
+
+<style scoped>
+  .play-window-block {
+    margin: 15px 15px 15px 0px;
+    box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
+    height: calc(100vh - 175px);
+  }
+</style>
diff --git a/src/views/area/areaList.vue b/src/views/area/areaList.vue
index 1950028..11dc51f 100644
--- a/src/views/area/areaList.vue
+++ b/src/views/area/areaList.vue
@@ -31,7 +31,7 @@
       <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="batchExport">导出</el-button>-->
+          <!--<el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>-->
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>
diff --git a/src/views/area/defenceDetail.vue b/src/views/area/defenceDetail.vue
index e29a258..703ec7d 100644
--- a/src/views/area/defenceDetail.vue
+++ b/src/views/area/defenceDetail.vue
@@ -4,12 +4,14 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="区域名称">
-            <span>{{ dataForm.name }}</span>
+            <el-input v-model="dataForm.name" disabled type="text"/>
+            <!--<span>{{ dataForm.name }}</span>-->
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="防卫状态">
-            <span>{{ dataForm.areaStatusName }}</span>
+            <el-input v-model="dataForm.areaStatusName" disabled type="text"/>
+            <!--<span>{{ dataForm.areaStatusName }}</span>-->
           </el-form-item>
         </el-col>
       </el-row>
@@ -17,12 +19,14 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="区域类别">
-            <span>{{ dataForm.areaTypeName }}</span>
+            <el-input v-model="dataForm.areaTypeName" disabled type="text"/>
+            <!--<span>{{ dataForm.areaTypeName }}</span>-->
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="区域位置">
-            <span>{{ dataForm.position }}</span>
+            <el-input v-model="dataForm.position" disabled type="text"/>
+            <!--<span>{{ dataForm.position }}</span>-->
           </el-form-item>
         </el-col>
       </el-row>
@@ -38,7 +42,8 @@
       <el-row v-show="isFence" :gutter="20">
         <el-col :span="12">
           <el-form-item label="电子围栏">
-            <span>{{ dataForm.deviceStatusName }}</span>
+            <el-input v-model="dataForm.deviceStatusName" disabled type="text"/>
+            <!--<span>{{ dataForm.deviceStatusName }}</span>-->
           </el-form-item>
         </el-col>
       </el-row>
@@ -46,7 +51,8 @@
       <el-row :gutter="20">
         <el-col :span="24">
           <el-form-item label="备注" prop="remark">
-            <span>{{ dataForm.remark }}</span>
+            <el-input v-model="dataForm.remark" disabled type="text"/>
+            <!--<span>{{ dataForm.remark }}</span>-->
           </el-form-item>
         </el-col>
       </el-row>
diff --git a/src/views/area/defenceList.vue b/src/views/area/defenceList.vue
index 9e2ed68..8649918 100644
--- a/src/views/area/defenceList.vue
+++ b/src/views/area/defenceList.vue
@@ -31,9 +31,9 @@
       <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">批量导入</el-button>
-          <el-button class="edit_btn" size="small">导入模板下载</el-button>
-          <!--<el-button class="edit_btn" size="small" @click="batchExport">导出</el-button>-->
+          <!--<el-button class="edit_btn" size="small">批量导入</el-button>-->
+          <!--<el-button class="edit_btn" size="small">导入模板下载</el-button>-->
+          <!--<el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>-->
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>
diff --git a/src/views/car/carAdd.vue b/src/views/car/carAdd.vue
index 6a35b7d..633e353 100644
--- a/src/views/car/carAdd.vue
+++ b/src/views/car/carAdd.vue
@@ -20,14 +20,14 @@
         <el-col :span="12">
           <el-form-item label="所属部门" prop="deptid">
             <!--<span v-show="isDetailMode">{{ dataForm.deptName }}</span>-->
-            <el-select :disabled="isDetailMode" v-model="dataForm.deptid" placeholder="请选择所属部门" filterable clearable>
+            <el-select :disabled="isDetailMode" v-model="dataForm.deptid" placeholder="请选择所属部门" filterable clearable @change="getStaffList">
               <el-option v-for="item in deptList" :key="item.id" :label="item.name" :value="item.id"/>
             </el-select>
             <!--<dept-select v-show="!isDetailMode" v-model="dataForm.deptid" :dept-show="true" :need-top="true" placeholder="所属组织" @change="fetchStaffList"/>-->
           </el-form-item>
         </el-col>
         <el-col v-if="dataForm.property==='2'" :span="12">
-          <el-form-item label="车主" prop="owner">
+          <el-form-item label="车主" prop="ownerId">
             <!--<span v-show="isDetailMode">{{ dataForm.ownerName }}</span>-->
             <el-select :disabled="isDetailMode" v-model="dataForm.ownerId" placeholder="请选择车主" filterable clearable @change="autoStaffPhone">
               <el-option v-for="item in staffList" :key="item.id" :label="item.name" :value="item.id"/>
@@ -91,7 +91,7 @@
       rules: {
         phone: [{ required: true, trigger: ['blur', 'change'], validator: phoneValidator }],
         plateNumber: [{ required: true, trigger: ['blur', 'change'], validator: plateValidator }],
-        owner: [{ required: true, trigger: ['blur', 'change'], message: '请选择车主' }]
+        ownerId: [{ required: true, trigger: ['blur', 'change'], message: '请选择车主' }]
       }, // 前端校验规则
       carProperties: [], // 车辆性质字典值
       staffList: [], // 车主人员列表
@@ -137,6 +137,7 @@
           phone: row.phone,
           remark: row.remark
         }
+        this.getStaffList()
       } else if (dialogStatus === 'detail') {
         this.isDetailMode = true
         this.isEditMode = false
@@ -151,6 +152,7 @@
           deptName: row.deptName,
           ownerName: row.ownerName
         }
+        this.getStaffList()
       }
     },
     // 清除数据
@@ -180,6 +182,13 @@
       })
       getStaffByDept({ deptId: this.dataForm.deptid }).then(response => {
         this.staffList = response.data
+        console.log(response)
+      })
+    },
+    getStaffList(){
+      getStaffByDept({ deptId: this.dataForm.deptid }).then(response => {
+        this.staffList = response.data
+        console.log(response)
       })
     },
     autoStaffPhone() {
@@ -190,7 +199,6 @@
             return item
           }
         })
-
         this.dataForm.phone = selectedStaff[0].phone
       } else {
         this.dataForm.phone = ''
diff --git a/src/views/car/carList.vue b/src/views/car/carList.vue
index ceb77ff..d0c0176 100644
--- a/src/views/car/carList.vue
+++ b/src/views/car/carList.vue
@@ -31,7 +31,7 @@
       <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="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
           <el-button v-if="hasPerm('/door/car/add')" class="edit_btn" size="small" @click="add">新增</el-button>
           <!--          <el-button v-if="hasPerm('/door/car/delete')" v-show="false" class="edit_btn" size="small" @click="batchDel">删除</el-button>-->
         </el-col>
diff --git a/src/views/deviceManage/deviceList.vue b/src/views/deviceManage/deviceList.vue
index 5966b45..feb4b36 100644
--- a/src/views/deviceManage/deviceList.vue
+++ b/src/views/deviceManage/deviceList.vue
@@ -48,7 +48,7 @@
       <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="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border @selection-change="handleSelectionChange">
diff --git a/src/views/overview/doorIndex.vue b/src/views/overview/doorIndex.vue
index 03624bb..4f48bd0 100644
--- a/src/views/overview/doorIndex.vue
+++ b/src/views/overview/doorIndex.vue
@@ -285,6 +285,7 @@
         if (response.code === 200) {
           const that = this
           this.devList = []
+          console.log(response)
           response.data.forEach(dev => {
             if (dev.x !== '' && dev.y !== '') {
               that.devList.push(dev)
diff --git a/src/views/staff/staffDetail.vue b/src/views/staff/staffDetail.vue
index 8fc4c6d..50f7166 100644
--- a/src/views/staff/staffDetail.vue
+++ b/src/views/staff/staffDetail.vue
@@ -16,12 +16,14 @@
           <el-row :gutter="20">
             <el-col :span="12">
               <el-form-item label="姓名">
-                <span>{{ dataForm.name }}</span>
+                <el-input v-model="dataForm.name" disabled type="text"/>
+                <!--<span>{{ dataForm.name }}</span>-->
               </el-form-item>
             </el-col>
             <el-col :span="12">
               <el-form-item label="身份证号">
-                <span>{{ dataForm.idCard }}</span>
+                <el-input v-model="dataForm.idCard" disabled type="text"/>
+                <!--<span>{{ dataForm.idCard }}</span>-->
               </el-form-item>
             </el-col>
           </el-row>
@@ -29,12 +31,14 @@
           <el-row :gutter="20">
             <el-col :span="12">
               <el-form-item label="出生日期">
-                <span>{{ dataForm.birthday }}</span>
+                <el-input v-model="dataForm.birthday" disabled type="text"/>
+                <!--<span>{{ dataForm.birthday }}</span>-->
               </el-form-item>
             </el-col>
             <el-col :span="12">
               <el-form-item label="性别">
-                <span>{{ dataForm.sex }}</span>
+                <el-input v-model="dataForm.sex" disabled type="text"/>
+                <!--<span>{{ dataForm.sex }}</span>-->
               </el-form-item>
             </el-col>
           </el-row>
@@ -42,13 +46,15 @@
           <el-row :gutter="20">
             <el-col :span="12">
               <el-form-item label="所在部门">
-                <span>{{ dataForm.deptName }}</span>
+                <el-input v-model="dataForm.deptName" disabled type="text"/>
+                <!--<span>{{ dataForm.deptName }}</span>-->
               </el-form-item>
             </el-col>
 
             <el-col :span="12">
               <el-form-item label="联系电话">
-                <span>{{ dataForm.phone }}</span>
+                <el-input v-model="dataForm.phone" disabled type="text"/>
+                <!--<span>{{ dataForm.phone }}</span>-->
               </el-form-item>
             </el-col>
           </el-row>
@@ -56,7 +62,8 @@
           <el-row>
             <el-col :span="24">
               <el-form-item label="住址">
-                <span>{{ dataForm.address }}</span>
+                <el-input v-model="dataForm.address" disabled type="text"/>
+                <!--<span>{{ dataForm.address }}</span>-->
               </el-form-item>
             </el-col>
           </el-row>

diff --git a/src/router/modules/doorSys.js b/src/router/modules/doorSys.js
index 8017e4b..6bd1506 100644
--- a/src/router/modules/doorSys.js
+++ b/src/router/modules/doorSys.js
@@ -87,6 +87,20 @@
         name: 'DoorAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/door/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/door/alarm/position',
+        name: 'DoorAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/door/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/door/alarm/video',
+        name: 'DoorAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/door/alarm/video'], keepAlive: true }
       }
     ]
   },
@@ -262,5 +276,26 @@
         meta: { title: '营门出入次数统计', icon: '', permission: ['/door/statistics/doorCount'], keepAlive: true }
       }
     ]
+  },
+  {
+    path: '/door/area',
+    component: Layout,
+    redirect: '/door/area',
+    name: 'DoorArea',
+    alwaysShow: true,
+    meta: {
+      title: '区域管理',
+      icon: 'icon-area', // 图标
+      permission: ['/door/area'], // 权限名称
+      sys: '/door'
+    },
+    children: [
+      {
+        path: '/door/area/list',
+        name: 'DoorAreaList',
+        component: () => import('@/views/area/areaList'),
+        meta: { title: '区域列表', icon: '', permission: ['/door/area/list'], keepAlive: true }
+      }
+    ]
   }
 ]
diff --git a/src/router/modules/fenceSys.js b/src/router/modules/fenceSys.js
index 0d784b0..e2962bd 100644
--- a/src/router/modules/fenceSys.js
+++ b/src/router/modules/fenceSys.js
@@ -85,6 +85,20 @@
         name: 'FenceAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/fence/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/fence/alarm/position',
+        name: 'FenceAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/fence/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/fence/alarm/video',
+        name: 'FenceAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/fence/alarm/video'], keepAlive: true }
       }
     ]
   },
diff --git a/src/router/modules/keySys.js b/src/router/modules/keySys.js
index f3a027b..832744b 100644
--- a/src/router/modules/keySys.js
+++ b/src/router/modules/keySys.js
@@ -85,6 +85,20 @@
         name: 'KeyAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/key/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/key/alarm/position',
+        name: 'KeyAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/key/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/key/alarm/video',
+        name: 'KeyAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/key/alarm/video'], keepAlive: true }
       }
     ]
   },
diff --git a/src/router/modules/regionSys.js b/src/router/modules/regionSys.js
index 9b4613a..43b8c38 100644
--- a/src/router/modules/regionSys.js
+++ b/src/router/modules/regionSys.js
@@ -85,6 +85,20 @@
         name: 'RegionAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/region/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/region/alarm/position',
+        name: 'RegionAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/region/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/region/alarm/video',
+        name: 'RegionAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/region/alarm/video'], keepAlive: true }
       }
     ]
   },
@@ -102,6 +116,20 @@
     },
     children: [
       {
+        path: '/region/staff/add',
+        name: 'RegionStaffAdd',
+        component: () => import('@/views/staff/staffAdd'),
+        hidden: true,
+        meta: { title: '人员登记', icon: '', permission: ['/region/staff/add'], keepAlive: true }
+      },
+      {
+        path: '/region/staff/edit',
+        name: 'RegionStaffEdit',
+        component: () => import('@/views/staff/staffEdit'),
+        hidden: true,
+        meta: { title: '人员编辑', icon: '', permission: ['/region/staff/edit'], keepAlive: true }
+      },
+      {
         path: '/region/staff/list',
         name: 'RegionStaffList',
         component: () => import('@/views/staff/staffList'),
diff --git a/src/views/alarm/alarmList.vue b/src/views/alarm/alarmList.vue
index 704f797..91967a0 100644
--- a/src/views/alarm/alarmList.vue
+++ b/src/views/alarm/alarmList.vue
@@ -37,7 +37,7 @@
             </el-col>
 
             <el-col :span="4" 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" @click="fetchData()">搜索</el-button>
             </el-col>
           </el-row>
         </el-form>
@@ -48,7 +48,7 @@
       <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="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>
@@ -66,8 +66,8 @@
         <!--操作列-->
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
-            <el-button type="text" @click="detail(scope.row)">位置</el-button>
-            <el-button v-if="hasPerm('/car/update')" type="text" @click="edit(scope.row)">视频</el-button>
+            <el-button type="text" @click="position(scope.row)">位置</el-button>
+            <el-button v-if="hasPerm('/car/update')" type="text" @click="video(scope.row)">视频</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -185,6 +185,14 @@
     this.fetchData() // 获取数据
   },
   methods: {
+    video(row){
+      const code = this.$store.getters.currentSystem.code
+      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId }})
+    },
+    position(row){
+      const code = this.$store.getters.currentSystem.code
+      this.$router.push({ path: '/' + code + '/alarm/position', query: {  id: row.deviceId }})
+    },
     batchExport() {
       // 全屏加载动画
       const loading = this.$loading({
@@ -254,6 +262,8 @@
       getAlarmList(this.listQuery).then(response => {
         if (response.code === 200) {
           this.list = response.data.rows
+          console.log('&&&')
+          console.log(this.list)
           this.total = parseInt(response.data.total)
         } else {
           this.$message.error(response.message)
diff --git a/src/views/alarm/alarmMonitor.vue b/src/views/alarm/alarmMonitor.vue
new file mode 100644
index 0000000..517d6e9
--- /dev/null
+++ b/src/views/alarm/alarmMonitor.vue
@@ -0,0 +1,80 @@
+<template>
+  <div>
+    <el-row>
+      <!--<el-col :span="6">-->
+        <!--&lt;!&ndash;<video-tree @click="handleCameraClicked"/>&ndash;&gt;-->
+      <!--</el-col>-->
+
+      <el-col :span="18" :offset="3">
+        <web-play ref="webCtrl" />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+// import VideoTree from './videoTree'
+import WebPlay from './webPlay'
+import { getDetailDevice } from '@/api/device'
+export default {
+  name: 'VideoMonitor',
+  components: { WebPlay },
+  data() {
+    return {
+      camera:{
+        ip:'',
+        port:'',
+        username:'',
+        password:''
+      }
+    }
+  },
+  mounted() {
+
+  },
+  activated() {
+    if (this.$route.query && this.$route.query.id) {
+      const id = this.$route.query.id
+      getDetailDevice(id).then(response => {
+          if (response.code === 200) {
+            console.log(response.data)
+            this.camera.ip = response.data.ip
+            this.camera.port = response.data.port
+            this.camera.username = response.data.username
+            this.camera.password = response.data.password
+            this.handleCamera()
+          }
+      })
+    }
+  },
+  methods: {
+    handleCamera(){
+      if (typeof this.camera.ip === 'undefined' || this.camera.ip === '') {
+        console.log('ip is null')
+        return false
+      }
+      if (typeof this.camera.port === 'undefined' || this.camera.port === '') {
+        console.log('port is null')
+        return false
+      }else{
+        this.camera.ip += (':'+ this.camera.port)
+      }
+      if (typeof this.camera.username === 'undefined' || this.camera.username === '') {
+        console.log('username is null')
+        return false
+      }
+      if (typeof this.camera.password === 'undefined' || this.camera.password === '') {
+        console.log('password is null')
+        return false
+      }
+
+      // 开始预览
+      this.$refs.webCtrl.$refs.play.contentWindow.startPlayReal(this.camera)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/alarm/alarmNow.vue b/src/views/alarm/alarmNow.vue
index 03bb5ea..66055b1 100644
--- a/src/views/alarm/alarmNow.vue
+++ b/src/views/alarm/alarmNow.vue
@@ -48,7 +48,7 @@
       <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="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>
@@ -66,8 +66,8 @@
         <el-table-column label="操作" align="center" width="180">
           <template slot-scope="scope">
             <el-button v-if="hasPerm('/alarm/cancel')" type="text" @click="alarmCancel(scope.row)">取消报警</el-button>
-            <el-button type="text" @click="detail(scope.row)">位置</el-button>
-            <el-button type="text" @click="edit(scope.row)">视频</el-button>
+            <el-button type="text" @click="position(scope.row)">位置</el-button>
+            <el-button v-if="hasPerm('/car/update')" type="text" @click="video(scope.row)">视频</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -183,6 +183,14 @@
     this.fetchData() // 获取数据
   },
   methods: {
+    video(row){
+      const code = this.$store.getters.currentSystem.code
+      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId }})
+    },
+    position(row){
+      const code = this.$store.getters.currentSystem.code
+      this.$router.push({ path: '/' + code + '/alarm/position', query: {  id: row.deviceId }})
+    },
     batchExport() {
       // 全屏加载动画
       const loading = this.$loading({
diff --git a/src/views/alarm/alarmPosition.vue b/src/views/alarm/alarmPosition.vue
new file mode 100644
index 0000000..51f915e
--- /dev/null
+++ b/src/views/alarm/alarmPosition.vue
@@ -0,0 +1,786 @@
+<template>
+  <div class="main-page">
+    <!-- 中间平面图区域 -->
+    <div class="map-overview">
+      <img ref="bgImg" :src="bgImageSrc" height="100%" @load="backgroundImageReady">
+
+      <div
+        v-for="item in devList"
+        :id="item.id"
+        :key="item.id"
+        :style="{ position: 'absolute', top: item.y * imgSize.height / imgSizeOriginal.height + 'px', left: (item.x * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
+        class="point-camera"
+        @click="detailDev(item, $event)" />
+    </div>
+    <!-- 右侧设备详情及操作区域 -->
+    <div v-show="showDevDetail" ref="dev-detail-block" class="dev-detail-block">
+      <span class="dev-detail-close" @click="showDevDetail=false" />
+      <el-row style="margin-top: -25px;">
+        <el-col :span="24">设备名称
+          <span class="dev-detail-span">{{ dataForm.name }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">设备编号
+          <span class="dev-detail-span">{{ dataForm.devcode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">设备类型
+          <span class="dev-detail-span">{{ dataForm.typeName }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">在线状态
+          <span class="dev-detail-span">{{ dataForm.onlineStatusName }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">安装日期
+          <span class="dev-detail-span">{{ dataForm.installDate }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">安装位置
+          <span class="dev-detail-span">{{ dataForm.position }}</span>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getProject } from '@/utils/baseConfig'
+import DeviceDetail from '@/views/deviceManage/deviceDetail'
+import tg_main from '../../assets/overview_images/tg/mapOverviewTg.jpg'
+import tg_3_1 from '../../assets/overview_images/tg/mapOverviewTg-3-1.jpg'
+import tg_4_1 from '../../assets/overview_images/tg/mapOverviewTg-4-1.jpg'
+import tg_4_5 from '../../assets/overview_images/tg/mapOverviewTg-4-5.jpg'
+import { getDetailDevice } from '@/api/device'
+
+// const cameraTypes = [4, 5, 8, 9, 10, 11]
+export default {
+  name: 'AlarmPosition',
+  components: { DeviceDetail },
+  data() {
+    return {
+      title: getProject().title,
+      bgImageSrc: tg_main,
+      devListParams: {
+        picture: '1',
+        areaTypeId: 1,
+        deviceTypes: []
+      },
+      dev: {
+        alarm: 0,
+        onLine: 0,
+        closed: 0,
+        offLine: 0
+      },
+      imgSizeOriginal: {
+        width: 2245,
+        height: 1586
+      }, // 图片原尺寸
+      imgSize: {
+        width: 2245,
+        height: 1586
+      }, // 图片显示尺寸
+      winSize: {
+        width: 1440,
+        height: 789
+      }, // 屏幕窗口尺寸
+      halfLeft: 0,
+      showDevDetail: false, // 是否显示设备详情
+      alarmList: [], // 报警列表
+      alarmColumns: [
+        {
+          text: '设备编号',
+          value: 'devcode',
+          align: 'center'
+        },
+        {
+          text: '报警内容',
+          value: 'alarmContent',
+          align: 'center'
+        },
+        {
+          text: '报警时间',
+          value: 'alarmTime',
+          align: 'center',
+          width: 165
+        }
+      ], // 报警列表显示列
+      tableShow: true, // 是否显示告警列表
+      devList: [], // 设备列表（在地图上显示）
+      dataForm: {
+        id: '', // id
+        name: '', // 设备名
+        devcode: '', // 设备编号
+        typeName: '', // 设备类型
+        model: '', // 设备型号
+        onlineStatusName: '', // 在线状态
+        deviceStatusName: '', // 设备状态
+        position: '', // 安装位置
+        installDate: '', // 安装日期
+        inOutName: '' // 进出营
+      }, // 设备详情表单
+      devPosition:{
+        picture: '',
+        x: '',
+        y: ''
+      },
+      checkDevType: [true, false] // 选中设备类型
+    }
+  },
+  mounted() {
+    this.initWindowSize()
+    if (this.$route.query && this.$route.query.id) {
+      const id = this.$route.query.id
+      getDetailDevice(id).then(response => {
+        if (response.code === 200) {
+          console.log(response.data)
+          this.devPosition.picture = response.data.picture
+          this.devPosition.x = response.data.x
+          this.devPosition.y = response.data.y
+          if(this.devPosition.picture === '1'){
+            this.bgImageSrc = tg_main
+          }else if(this.devPosition.picture === '2'){
+            this.bgImageSrc = tg_3_1
+          }else if(this.devPosition.picture === '3'){
+            this.bgImageSrc = tg_4_1
+          }else if(this.devPosition.picture === '4'){
+            this.bgImageSrc = tg_4_5
+          }else{
+            this.$message.warning('该设备暂无位置信息')
+            return
+          }
+          this.devList = []
+          if (this.devPosition.x !== '' && this.devPosition.y !== '') {
+            this.devList.push(response.data)
+          }
+        }
+      })
+    }
+    const that = this
+    window.onresize = function() {
+      that.initWindowSize()
+      that.getBgImageSize()
+    }
+  },
+  methods: {
+    // 获取窗口大小
+    initWindowSize() {
+      // 获取窗体尺寸
+      this.winSize = {
+        width: document.documentElement.clientWidth,
+        height: document.documentElement.clientHeight
+      }
+    },
+    // 获取图像大小
+    getBgImageSize() {
+      // 获取图片尺寸
+      this.imgSize = {
+        width: this.$refs['bgImg'].width,
+        height: this.$refs['bgImg'].height
+      }
+      this.halfLeft = (this.winSize.width - this.imgSize.width) / 2
+    },
+    // 重新绘制设备点位
+    reDrawDevs() {
+      const halfLeft = (this.winSize.width - this.imgSize.width) / 2
+
+      // 调整球机的设备位置
+      const that = this
+      this.devList.forEach(function(item) {
+        const point = document.getElementById(item.id)
+
+        if (point !== null) {
+          if (item.x !== '' && item.y !== '') {
+            point.style.position = 'absolute'
+            point.style.top = item.y * that.imgSize.height / that.imgSizeOriginal.height + 'px'
+            point.style.left = (item.x * that.imgSize.width / that.imgSizeOriginal.width + halfLeft) + 'px'
+          } else {
+            point.style.display = 'none'
+          }
+        }
+      })
+    },
+    // 平面图就绪时执行函数
+    backgroundImageReady() {
+      this.getBgImageSize()
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    },
+    backToIndex() {
+      this.$router.push('/door/alarm/now')
+    },
+    // 查询并显示设备详情
+    detailDev(dev, event) {
+      this.resetDevDetail()
+      getDetailDevice(dev.id).then(response => {
+        if (response.code === 200) {
+          this.dataForm = {
+            id: dev.id,
+            name: dev.name,
+            devcode: dev.devcode,
+            typeName: response.data.typeName,
+            model: dev.model,
+            onlineStatusName: response.data.onlineStatusName,
+            position: dev.position,
+            installDate: dev.installDate,
+            inOutName: response.data.inOutName,
+            deviceStatusName: response.data.deviceStatusName
+          }
+        } else {
+          this.$message.error(response.message)
+        }
+      })
+
+      // 弹窗显示设备详情
+      const targetDev = event.currentTarget // 取到点击到的设备图标div
+
+      this.showDevDetail = true
+      let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+      top = top + 100
+      this.$refs['dev-detail-block'].style.position = 'absolute'
+      this.$refs['dev-detail-block'].style.top = top + 'px'
+      this.$refs['dev-detail-block'].style.left = targetDev.style.left
+    },
+    // 点击报警列表
+    alarmRowClick(dev, column, event) {
+
+    },
+    // 清除设备详情
+    resetDevDetail() {
+      this.dataForm = {
+        id: '', // id
+        name: '', // 设备名
+        devcode: '', // 设备编号
+        typeName: '', // 设备类型
+        model: '', // 设备型号
+        onlineStatusName: '', // 在线状态
+        deviceStatusName: '', // 设备状态
+        position: '', // 安装位置
+        installDate: '', // 安装日期
+        inOutName: '' // 进出营
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+  .main-page {
+    background-size: cover;
+    background-color: #023d83;
+    height: 100vh;
+  }
+
+  .main-header {
+    width: 100vw;
+  }
+  .main-title {
+    height: 90px;
+    text-align: center;
+    padding-top: 20px;
+    background: url("../../assets/overview_images/title-background-1920.png");
+  }
+
+  .main-title img {
+    display: inline-block;
+    margin-right: 15px;
+    width: 52px;
+    height: 32px;
+    vertical-align: text-bottom;
+  }
+
+  .home-icon {
+    width: 26px;
+    height: 26px;
+    position: fixed;
+    left: 20px;
+    top: 20px;
+  }
+  .exit-icon {
+    width: 26px;
+    height: 26px;
+    position: fixed;
+    right: 20px;
+    top: 20px;
+  }
+  .home-icon img, .exit-icon img {
+    width: 26px;
+    height: 26px;
+  }
+
+  .main-title span {
+    color: #FFFFFF;
+    font-size: 32px;
+    font-weight: bold;
+    font-family: 'Microsoft YaHei';
+  }
+
+  .map-overview {
+    /*margin-top: 50px;*/
+    /*width: 1100px;*/
+    height: calc(90vh - 200px);
+    text-align: center;
+    position: relative;
+  }
+  .point {
+    width: 24px;
+    height: 24px;
+    position: relative;
+    display: inline-block;
+    cursor: pointer;
+  }
+  .point-camera {
+    background: url("../../assets/overview_images/icons/icon-camera-point.png");
+    background-size: contain;
+    @extend .point;
+  }
+  .point-fence {
+    background: url("../../assets/overview_images/icons/icon-fence-unchecked.png");
+    background-size: contain;
+    @extend .point;
+  }
+
+  .statis-block {
+    text-align: center;
+    margin-top: 20px;
+    font-size: 48px;
+  }
+  .sub-title {
+    text-align: center;
+    font-size: 32px;
+  }
+  .sub-data-block {
+    width: 122px;
+    height: 155px;
+  }
+  .dev-normal {
+    background: url("../../assets/overview_images/normal.png");
+    background-size: contain;
+    color: #00ff0c;
+  }
+  .dev-alarm {
+    background: url("../../assets/overview_images/alarm.png");
+    background-size: contain;
+    color: #ff0000;
+  }
+  .dev-offline {
+    background: url("../../assets/overview_images/offline.png");
+    background-size: contain;
+    color: #fff000;
+  }
+  .dev-closed {
+    background: url("../../assets/overview_images/closed.png");
+    background-size: contain;
+    color: #00fff6;
+  }
+
+  .dev-status-block {
+    position: absolute;
+    top: 100px;
+    left: 20px;
+    color: #ffffff;
+  }
+
+  .alarm-now-block {
+    position: absolute;
+    z-index: 500;
+    top: 300px;
+    left: 20px;
+    width: 480px;
+    .map-alarm-div-header {
+      line-height: 40px;
+      padding-left: 10px;
+      color: #00fff6;
+      font-size: 24px;
+      .icon-right {
+        cursor: pointer;
+        margin-left: 20px;
+      }
+    }
+    .el-scrollbar {
+      /*height: 200px;*/
+      width: 100%;
+    }
+    .moredatascollor {
+      height: 200px;
+    }
+    .el-scrollbar__wrap {
+      overflow-y: auto;
+      overflow-x: hidden;
+      margin-bottom: 0px !important;
+    }
+    .el-table {
+      font-size: 12px;
+    }
+    .transition-box {
+      margin-bottom: 10px;
+      width: 200px;
+      height: 100px;
+      border-radius: 4px;
+      background-color: #409EFF;
+      text-align: center;
+      color: #fff;
+      padding: 40px 20px;
+      box-sizing: border-box;
+      margin-right: 20px;
+    }
+  }
+
+  .alarm-now-block /deep/ .el-table th {
+    background-color: #0757A0;
+    padding: 12px 0px;
+    font-size: 16px;
+    color: #00fff6;
+    font-weight: normal;
+  }
+
+  .alarm-now-block /deep/ .el-table td {
+    /*background-color: #0757A0;*/
+    padding: 10px 0px;
+    font-size: 15px;
+    color: #FFFFFF;
+    font-weight: normal;
+  }
+
+  .alarm-now-block /deep/ .el-table__row td {
+    background-color: #023D83;
+  }
+  .alarm-now-block /deep/ .el-table__body tr:hover > td {
+    background-color: #0757A0;
+  }
+  .alarm-now-block /deep/ tr.el-table__row--striped td {
+    background-color: #0757A0;
+  }
+
+  .map-tab {
+    position: absolute;
+    right: 20px;
+    top: 100px;
+    width: 300px;
+    button {
+      margin: 5px 0px;
+    }
+  }
+
+  .tab-top {
+    position: relative;
+    width: 284px;
+    height: 24px;
+    background: url("../../assets/overview_images/tab-top-bg.png");
+  }
+  .tab-bottom {
+    position: relative;
+    width: 284px;
+    height: 24px;
+    background: url("../../assets/overview_images/tab-bottom-bg.png");
+  }
+  .map-index-button {
+    position: relative;
+    width: 284px;
+    height: 74px;
+    background: url("../../assets/overview_images/tab-index-unchecked.png");
+    font-size: 32px;
+    line-height: 74px;
+    text-align: center;
+    color: #FFFFFF;
+    cursor: pointer;
+  }
+  .index-selected {
+    background: url("../../assets/overview_images/tab-index-checked.png");
+  }
+  .sub-tab-guider {
+    width: 149px;
+    height: 50px;
+    background: url("../../assets/overview_images/sub-tab-guider.png");
+  }
+  .sub-tab-border {
+    width: 204px;
+    height: 253px;
+    background: url("../../assets/overview_images/sub-tab-border.png");
+  }
+  .sub-tab-content {
+    text-align: center;
+    color: #FFFFFF;
+    font-size: 28px;
+    cursor: pointer;
+    width: 200px;
+  }
+
+  .dev-detail-block {
+    /*position: absolute;*/
+    /*right: 20px;*/
+    /*bottom: 100px;*/
+    width: 520px;
+    height: 335px;
+    color: #00FFFF;
+    font-size: 24px;
+    font-family: "Microsoft YaHei";
+    padding: 45px 60px;
+    line-height: 35px;
+    background: url("../../assets/overview_images/dev-info.png");
+    .dev-detail-span {
+      margin-left: 20px;
+    }
+    .dev-detail-close::before {
+      content: "\2716";
+      position: relative;
+      top: -20px;
+      right: -410px;
+      cursor: pointer;
+    }
+  }
+
+  .dev-footer {
+    position: absolute;
+    bottom: 25px;
+  }
+
+  .dev-icon {
+    width: 195px;
+    height: 105px;
+    vertical-align: middle;
+    line-height: 65px;
+    padding: 20px 30px !important;
+    margin-left: 15px;
+    cursor: pointer;
+    background: url("../../assets/overview_images/dev-type-border-unchecked.png");
+  }
+
+  .dev-icon img {
+    height: 40px;
+    vertical-align:middle;
+  }
+  .dev-icon span {
+    font-size: 20px;
+    color: #00D2FF;
+    line-height: 65px;
+    height: 65px;
+    vertical-align:middle;
+    float: right;
+  }
+
+  .dev-type-selected {
+    background: url("../../assets/overview_images/dev-type-border-checked.png");
+  }
+  .dev-type-selected span {
+    color: #f58a88 !important;
+  }
+
+  /*@media(max-width: 1440px) {*/
+  /*  .main-title {*/
+  /*    height: 68px;*/
+  /*    padding-top: 20px;*/
+  /*    background: url("../../assets/overview_images/title-background-1440.png");*/
+  /*  }*/
+  /*  .main-title span {*/
+  /*    font-size: 24px;*/
+  /*  }*/
+  /*  .main-title img {*/
+  /*    margin-right: 15px;*/
+  /*    width: 32px;*/
+  /*    height: 32px;*/
+  /*  }*/
+
+  /*  .home-icon {*/
+  /*    left: 18px;*/
+  /*    width: 18px;*/
+  /*    height: 18px;*/
+  /*  }*/
+  /*  .exit-icon {*/
+  /*    right: 18px;*/
+  /*    width: 18px;*/
+  /*    height: 18px;*/
+  /*  }*/
+
+  /*  .home-icon img, .exit-icon img {*/
+  /*    width: 18px;*/
+  /*    height: 18px;*/
+  /*  }*/
+
+  /*  .dev-icon span {*/
+  /*    font-size: 12px;*/
+  /*  }*/
+  /*}*/
+
+  @media(max-width: 1440px) {
+    .main-title {
+      height: 65px;
+      padding-top: 16px;
+      background: url("../../assets/overview_images/title-background-1366.png");
+    }
+    .main-title span {
+      font-size: 24px;
+    }
+    .main-title img {
+      margin-right: 15px;
+      width: 32px;
+      height: 32px;
+    }
+
+    .home-icon {
+      left: 16px;
+      width: 16px;
+      height: 16px;
+    }
+    .exit-icon {
+      right: 16px;
+      width: 16px;
+      height: 16px;
+    }
+
+    .home-icon img, .exit-icon img {
+      width: 20px;
+      height: 20px;
+    }
+
+    .map-overview {
+      margin-top: 35px;
+      height: calc(90vh - 150px);
+    }
+
+    .point {
+      width: 16px;
+      height: 16px;
+    }
+
+    .statis-block {
+      margin-top: 16px;
+      font-size: 36px;
+    }
+    .sub-title {
+      font-size: 24px;
+    }
+    .sub-data-block {
+      width: 90px;
+      height: 114px;
+    }
+
+    .dev-normal {
+      background: url("../../assets/overview_images/normal-1366.png");
+    }
+    .dev-alarm {
+      background: url("../../assets/overview_images/alarm-1366.png");
+    }
+    .dev-offline {
+      background: url("../../assets/overview_images/offline-1366.png");
+    }
+    .dev-closed {
+      background: url("../../assets/overview_images/closed-1366.png");
+    }
+
+    .dev-status-block {
+      top: 90px;
+      left: 16px;
+    }
+
+    .alarm-now-block {
+      top: 220px;
+      left: 16px;
+      width: 360px;
+      .map-alarm-div-header {
+        line-height: 32px;
+        font-size: 20px;
+      }
+    }
+
+    .alarm-now-block /deep/ .el-table th {
+      padding: 8px 0px;
+      font-size: 16px;
+    }
+    .alarm-now-block /deep/ .el-table td {
+      padding: 5px 0px;
+      font-size: 12px;
+    }
+
+    .map-tab {
+      right: 16px;
+      top: 90px;
+      width: 215px;
+      button {
+        margin: 5px 0px;
+      }
+    }
+    .tab-top {
+      width: 213px;
+      height: 18px;
+      background: url("../../assets/overview_images/tab-top-bg-1366.png");
+    }
+    .tab-bottom {
+      width: 213px;
+      height: 18px;
+      background: url("../../assets/overview_images/tab-bottom-bg-1366.png");
+    }
+    .map-index-button {
+      width: 210px;
+      height: 56px;
+      background: url("../../assets/overview_images/tab-index-unchecked-1366.png");
+      font-size: 24px;
+      line-height: 56px;
+    }
+    .index-selected {
+      background: url("../../assets/overview_images/tab-index-checked-1366.png");
+    }
+
+    .sub-tab-guider {
+      width: 110px;
+      height: 37px;
+      background: url("../../assets/overview_images/sub-tab-guider-1366.png");
+    }
+    .sub-tab-border {
+      width: 150px;
+      height: 186px;
+      background: url("../../assets/overview_images/sub-tab-border-1366.png");
+    }
+    .sub-tab-content {
+      font-size: 20px;
+      cursor: pointer;
+      width: 145px;
+    }
+
+    .dev-detail-block {
+      width: 390px;
+      height: 251px;
+      font-size: 16px;
+      padding: 30px 40px;
+      line-height: 28px;
+      background: url("../../assets/overview_images/dev-info-1366.png");
+      .dev-detail-close::before {
+        top: -12px;
+        right: -312px;
+      }
+    }
+
+    .dev-footer {
+      bottom: 20px;
+    }
+    .dev-icon {
+      width: 140px;
+      height: 76px;
+      line-height: 56px;
+      padding: 10px 16px !important;
+      margin-left: 15px;
+      background: url("../../assets/overview_images/dev-type-border-unchecked-1366.png");
+    }
+    .dev-icon img {
+      height: 32px;
+    }
+    .dev-icon span {
+      font-size: 16px;
+      line-height: 56px;
+      height: 56px;
+    }
+    .dev-type-selected {
+      background: url("../../assets/overview_images/dev-type-border-checked-1366.png");
+    }
+  }
+
+</style>
diff --git a/src/views/alarm/webPlay.vue b/src/views/alarm/webPlay.vue
new file mode 100644
index 0000000..97e5ed2
--- /dev/null
+++ b/src/views/alarm/webPlay.vue
@@ -0,0 +1,21 @@
+<template>
+  <div class="play-window-block">
+    <div style="height: 100%">
+      <iframe ref="play" src="/static/webCtrl/demo-easy.html" width="100%" height="100%" style="border: 0px; overflow: hidden;" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'WebPlay'
+}
+</script>
+
+<style scoped>
+  .play-window-block {
+    margin: 15px 15px 15px 0px;
+    box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
+    height: calc(100vh - 175px);
+  }
+</style>
diff --git a/src/views/area/areaList.vue b/src/views/area/areaList.vue
index 1950028..11dc51f 100644
--- a/src/views/area/areaList.vue
+++ b/src/views/area/areaList.vue
@@ -31,7 +31,7 @@
       <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="batchExport">导出</el-button>-->
+          <!--<el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>-->
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>
diff --git a/src/views/area/defenceDetail.vue b/src/views/area/defenceDetail.vue
index e29a258..703ec7d 100644
--- a/src/views/area/defenceDetail.vue
+++ b/src/views/area/defenceDetail.vue
@@ -4,12 +4,14 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="区域名称">
-            <span>{{ dataForm.name }}</span>
+            <el-input v-model="dataForm.name" disabled type="text"/>
+            <!--<span>{{ dataForm.name }}</span>-->
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="防卫状态">
-            <span>{{ dataForm.areaStatusName }}</span>
+            <el-input v-model="dataForm.areaStatusName" disabled type="text"/>
+            <!--<span>{{ dataForm.areaStatusName }}</span>-->
           </el-form-item>
         </el-col>
       </el-row>
@@ -17,12 +19,14 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="区域类别">
-            <span>{{ dataForm.areaTypeName }}</span>
+            <el-input v-model="dataForm.areaTypeName" disabled type="text"/>
+            <!--<span>{{ dataForm.areaTypeName }}</span>-->
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="区域位置">
-            <span>{{ dataForm.position }}</span>
+            <el-input v-model="dataForm.position" disabled type="text"/>
+            <!--<span>{{ dataForm.position }}</span>-->
           </el-form-item>
         </el-col>
       </el-row>
@@ -38,7 +42,8 @@
       <el-row v-show="isFence" :gutter="20">
         <el-col :span="12">
           <el-form-item label="电子围栏">
-            <span>{{ dataForm.deviceStatusName }}</span>
+            <el-input v-model="dataForm.deviceStatusName" disabled type="text"/>
+            <!--<span>{{ dataForm.deviceStatusName }}</span>-->
           </el-form-item>
         </el-col>
       </el-row>
@@ -46,7 +51,8 @@
       <el-row :gutter="20">
         <el-col :span="24">
           <el-form-item label="备注" prop="remark">
-            <span>{{ dataForm.remark }}</span>
+            <el-input v-model="dataForm.remark" disabled type="text"/>
+            <!--<span>{{ dataForm.remark }}</span>-->
           </el-form-item>
         </el-col>
       </el-row>
diff --git a/src/views/area/defenceList.vue b/src/views/area/defenceList.vue
index 9e2ed68..8649918 100644
--- a/src/views/area/defenceList.vue
+++ b/src/views/area/defenceList.vue
@@ -31,9 +31,9 @@
       <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">批量导入</el-button>
-          <el-button class="edit_btn" size="small">导入模板下载</el-button>
-          <!--<el-button class="edit_btn" size="small" @click="batchExport">导出</el-button>-->
+          <!--<el-button class="edit_btn" size="small">批量导入</el-button>-->
+          <!--<el-button class="edit_btn" size="small">导入模板下载</el-button>-->
+          <!--<el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>-->
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>
diff --git a/src/views/car/carAdd.vue b/src/views/car/carAdd.vue
index 6a35b7d..633e353 100644
--- a/src/views/car/carAdd.vue
+++ b/src/views/car/carAdd.vue
@@ -20,14 +20,14 @@
         <el-col :span="12">
           <el-form-item label="所属部门" prop="deptid">
             <!--<span v-show="isDetailMode">{{ dataForm.deptName }}</span>-->
-            <el-select :disabled="isDetailMode" v-model="dataForm.deptid" placeholder="请选择所属部门" filterable clearable>
+            <el-select :disabled="isDetailMode" v-model="dataForm.deptid" placeholder="请选择所属部门" filterable clearable @change="getStaffList">
               <el-option v-for="item in deptList" :key="item.id" :label="item.name" :value="item.id"/>
             </el-select>
             <!--<dept-select v-show="!isDetailMode" v-model="dataForm.deptid" :dept-show="true" :need-top="true" placeholder="所属组织" @change="fetchStaffList"/>-->
           </el-form-item>
         </el-col>
         <el-col v-if="dataForm.property==='2'" :span="12">
-          <el-form-item label="车主" prop="owner">
+          <el-form-item label="车主" prop="ownerId">
             <!--<span v-show="isDetailMode">{{ dataForm.ownerName }}</span>-->
             <el-select :disabled="isDetailMode" v-model="dataForm.ownerId" placeholder="请选择车主" filterable clearable @change="autoStaffPhone">
               <el-option v-for="item in staffList" :key="item.id" :label="item.name" :value="item.id"/>
@@ -91,7 +91,7 @@
       rules: {
         phone: [{ required: true, trigger: ['blur', 'change'], validator: phoneValidator }],
         plateNumber: [{ required: true, trigger: ['blur', 'change'], validator: plateValidator }],
-        owner: [{ required: true, trigger: ['blur', 'change'], message: '请选择车主' }]
+        ownerId: [{ required: true, trigger: ['blur', 'change'], message: '请选择车主' }]
       }, // 前端校验规则
       carProperties: [], // 车辆性质字典值
       staffList: [], // 车主人员列表
@@ -137,6 +137,7 @@
           phone: row.phone,
           remark: row.remark
         }
+        this.getStaffList()
       } else if (dialogStatus === 'detail') {
         this.isDetailMode = true
         this.isEditMode = false
@@ -151,6 +152,7 @@
           deptName: row.deptName,
           ownerName: row.ownerName
         }
+        this.getStaffList()
       }
     },
     // 清除数据
@@ -180,6 +182,13 @@
       })
       getStaffByDept({ deptId: this.dataForm.deptid }).then(response => {
         this.staffList = response.data
+        console.log(response)
+      })
+    },
+    getStaffList(){
+      getStaffByDept({ deptId: this.dataForm.deptid }).then(response => {
+        this.staffList = response.data
+        console.log(response)
       })
     },
     autoStaffPhone() {
@@ -190,7 +199,6 @@
             return item
           }
         })
-
         this.dataForm.phone = selectedStaff[0].phone
       } else {
         this.dataForm.phone = ''
diff --git a/src/views/car/carList.vue b/src/views/car/carList.vue
index ceb77ff..d0c0176 100644
--- a/src/views/car/carList.vue
+++ b/src/views/car/carList.vue
@@ -31,7 +31,7 @@
       <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="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
           <el-button v-if="hasPerm('/door/car/add')" class="edit_btn" size="small" @click="add">新增</el-button>
           <!--          <el-button v-if="hasPerm('/door/car/delete')" v-show="false" class="edit_btn" size="small" @click="batchDel">删除</el-button>-->
         </el-col>
diff --git a/src/views/deviceManage/deviceList.vue b/src/views/deviceManage/deviceList.vue
index 5966b45..feb4b36 100644
--- a/src/views/deviceManage/deviceList.vue
+++ b/src/views/deviceManage/deviceList.vue
@@ -48,7 +48,7 @@
       <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="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border @selection-change="handleSelectionChange">
diff --git a/src/views/overview/doorIndex.vue b/src/views/overview/doorIndex.vue
index 03624bb..4f48bd0 100644
--- a/src/views/overview/doorIndex.vue
+++ b/src/views/overview/doorIndex.vue
@@ -285,6 +285,7 @@
         if (response.code === 200) {
           const that = this
           this.devList = []
+          console.log(response)
           response.data.forEach(dev => {
             if (dev.x !== '' && dev.y !== '') {
               that.devList.push(dev)
diff --git a/src/views/staff/staffDetail.vue b/src/views/staff/staffDetail.vue
index 8fc4c6d..50f7166 100644
--- a/src/views/staff/staffDetail.vue
+++ b/src/views/staff/staffDetail.vue
@@ -16,12 +16,14 @@
           <el-row :gutter="20">
             <el-col :span="12">
               <el-form-item label="姓名">
-                <span>{{ dataForm.name }}</span>
+                <el-input v-model="dataForm.name" disabled type="text"/>
+                <!--<span>{{ dataForm.name }}</span>-->
               </el-form-item>
             </el-col>
             <el-col :span="12">
               <el-form-item label="身份证号">
-                <span>{{ dataForm.idCard }}</span>
+                <el-input v-model="dataForm.idCard" disabled type="text"/>
+                <!--<span>{{ dataForm.idCard }}</span>-->
               </el-form-item>
             </el-col>
           </el-row>
@@ -29,12 +31,14 @@
           <el-row :gutter="20">
             <el-col :span="12">
               <el-form-item label="出生日期">
-                <span>{{ dataForm.birthday }}</span>
+                <el-input v-model="dataForm.birthday" disabled type="text"/>
+                <!--<span>{{ dataForm.birthday }}</span>-->
               </el-form-item>
             </el-col>
             <el-col :span="12">
               <el-form-item label="性别">
-                <span>{{ dataForm.sex }}</span>
+                <el-input v-model="dataForm.sex" disabled type="text"/>
+                <!--<span>{{ dataForm.sex }}</span>-->
               </el-form-item>
             </el-col>
           </el-row>
@@ -42,13 +46,15 @@
           <el-row :gutter="20">
             <el-col :span="12">
               <el-form-item label="所在部门">
-                <span>{{ dataForm.deptName }}</span>
+                <el-input v-model="dataForm.deptName" disabled type="text"/>
+                <!--<span>{{ dataForm.deptName }}</span>-->
               </el-form-item>
             </el-col>
 
             <el-col :span="12">
               <el-form-item label="联系电话">
-                <span>{{ dataForm.phone }}</span>
+                <el-input v-model="dataForm.phone" disabled type="text"/>
+                <!--<span>{{ dataForm.phone }}</span>-->
               </el-form-item>
             </el-col>
           </el-row>
@@ -56,7 +62,8 @@
           <el-row>
             <el-col :span="24">
               <el-form-item label="住址">
-                <span>{{ dataForm.address }}</span>
+                <el-input v-model="dataForm.address" disabled type="text"/>
+                <!--<span>{{ dataForm.address }}</span>-->
               </el-form-item>
             </el-col>
           </el-row>
diff --git a/src/views/staff/staffList.vue b/src/views/staff/staffList.vue
index 4a92b0c..c6ad796 100644
--- a/src/views/staff/staffList.vue
+++ b/src/views/staff/staffList.vue
@@ -44,7 +44,7 @@
           </el-upload>
           <download-template :filename="personImpTem" btnname="导入模板下载"/>
           <el-button v-if="hasPerm('/staff/delete')" size="small" class="edit_btn" @click="del">删除</el-button>
-          <el-button class="edit_btn" size="small" @click="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
           <el-button v-if="hasPerm('/staff/add')" class="edit_btn" size="small" @click="add">新增</el-button>
         </el-col>
       </el-row>

diff --git a/src/router/modules/doorSys.js b/src/router/modules/doorSys.js
index 8017e4b..6bd1506 100644
--- a/src/router/modules/doorSys.js
+++ b/src/router/modules/doorSys.js
@@ -87,6 +87,20 @@
         name: 'DoorAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/door/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/door/alarm/position',
+        name: 'DoorAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/door/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/door/alarm/video',
+        name: 'DoorAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/door/alarm/video'], keepAlive: true }
       }
     ]
   },
@@ -262,5 +276,26 @@
         meta: { title: '营门出入次数统计', icon: '', permission: ['/door/statistics/doorCount'], keepAlive: true }
       }
     ]
+  },
+  {
+    path: '/door/area',
+    component: Layout,
+    redirect: '/door/area',
+    name: 'DoorArea',
+    alwaysShow: true,
+    meta: {
+      title: '区域管理',
+      icon: 'icon-area', // 图标
+      permission: ['/door/area'], // 权限名称
+      sys: '/door'
+    },
+    children: [
+      {
+        path: '/door/area/list',
+        name: 'DoorAreaList',
+        component: () => import('@/views/area/areaList'),
+        meta: { title: '区域列表', icon: '', permission: ['/door/area/list'], keepAlive: true }
+      }
+    ]
   }
 ]
diff --git a/src/router/modules/fenceSys.js b/src/router/modules/fenceSys.js
index 0d784b0..e2962bd 100644
--- a/src/router/modules/fenceSys.js
+++ b/src/router/modules/fenceSys.js
@@ -85,6 +85,20 @@
         name: 'FenceAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/fence/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/fence/alarm/position',
+        name: 'FenceAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/fence/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/fence/alarm/video',
+        name: 'FenceAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/fence/alarm/video'], keepAlive: true }
       }
     ]
   },
diff --git a/src/router/modules/keySys.js b/src/router/modules/keySys.js
index f3a027b..832744b 100644
--- a/src/router/modules/keySys.js
+++ b/src/router/modules/keySys.js
@@ -85,6 +85,20 @@
         name: 'KeyAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/key/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/key/alarm/position',
+        name: 'KeyAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/key/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/key/alarm/video',
+        name: 'KeyAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/key/alarm/video'], keepAlive: true }
       }
     ]
   },
diff --git a/src/router/modules/regionSys.js b/src/router/modules/regionSys.js
index 9b4613a..43b8c38 100644
--- a/src/router/modules/regionSys.js
+++ b/src/router/modules/regionSys.js
@@ -85,6 +85,20 @@
         name: 'RegionAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/region/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/region/alarm/position',
+        name: 'RegionAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/region/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/region/alarm/video',
+        name: 'RegionAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/region/alarm/video'], keepAlive: true }
       }
     ]
   },
@@ -102,6 +116,20 @@
     },
     children: [
       {
+        path: '/region/staff/add',
+        name: 'RegionStaffAdd',
+        component: () => import('@/views/staff/staffAdd'),
+        hidden: true,
+        meta: { title: '人员登记', icon: '', permission: ['/region/staff/add'], keepAlive: true }
+      },
+      {
+        path: '/region/staff/edit',
+        name: 'RegionStaffEdit',
+        component: () => import('@/views/staff/staffEdit'),
+        hidden: true,
+        meta: { title: '人员编辑', icon: '', permission: ['/region/staff/edit'], keepAlive: true }
+      },
+      {
         path: '/region/staff/list',
         name: 'RegionStaffList',
         component: () => import('@/views/staff/staffList'),
diff --git a/src/views/alarm/alarmList.vue b/src/views/alarm/alarmList.vue
index 704f797..91967a0 100644
--- a/src/views/alarm/alarmList.vue
+++ b/src/views/alarm/alarmList.vue
@@ -37,7 +37,7 @@
             </el-col>
 
             <el-col :span="4" 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" @click="fetchData()">搜索</el-button>
             </el-col>
           </el-row>
         </el-form>
@@ -48,7 +48,7 @@
       <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="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>
@@ -66,8 +66,8 @@
         <!--操作列-->
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
-            <el-button type="text" @click="detail(scope.row)">位置</el-button>
-            <el-button v-if="hasPerm('/car/update')" type="text" @click="edit(scope.row)">视频</el-button>
+            <el-button type="text" @click="position(scope.row)">位置</el-button>
+            <el-button v-if="hasPerm('/car/update')" type="text" @click="video(scope.row)">视频</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -185,6 +185,14 @@
     this.fetchData() // 获取数据
   },
   methods: {
+    video(row){
+      const code = this.$store.getters.currentSystem.code
+      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId }})
+    },
+    position(row){
+      const code = this.$store.getters.currentSystem.code
+      this.$router.push({ path: '/' + code + '/alarm/position', query: {  id: row.deviceId }})
+    },
     batchExport() {
       // 全屏加载动画
       const loading = this.$loading({
@@ -254,6 +262,8 @@
       getAlarmList(this.listQuery).then(response => {
         if (response.code === 200) {
           this.list = response.data.rows
+          console.log('&&&')
+          console.log(this.list)
           this.total = parseInt(response.data.total)
         } else {
           this.$message.error(response.message)
diff --git a/src/views/alarm/alarmMonitor.vue b/src/views/alarm/alarmMonitor.vue
new file mode 100644
index 0000000..517d6e9
--- /dev/null
+++ b/src/views/alarm/alarmMonitor.vue
@@ -0,0 +1,80 @@
+<template>
+  <div>
+    <el-row>
+      <!--<el-col :span="6">-->
+        <!--&lt;!&ndash;<video-tree @click="handleCameraClicked"/>&ndash;&gt;-->
+      <!--</el-col>-->
+
+      <el-col :span="18" :offset="3">
+        <web-play ref="webCtrl" />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+// import VideoTree from './videoTree'
+import WebPlay from './webPlay'
+import { getDetailDevice } from '@/api/device'
+export default {
+  name: 'VideoMonitor',
+  components: { WebPlay },
+  data() {
+    return {
+      camera:{
+        ip:'',
+        port:'',
+        username:'',
+        password:''
+      }
+    }
+  },
+  mounted() {
+
+  },
+  activated() {
+    if (this.$route.query && this.$route.query.id) {
+      const id = this.$route.query.id
+      getDetailDevice(id).then(response => {
+          if (response.code === 200) {
+            console.log(response.data)
+            this.camera.ip = response.data.ip
+            this.camera.port = response.data.port
+            this.camera.username = response.data.username
+            this.camera.password = response.data.password
+            this.handleCamera()
+          }
+      })
+    }
+  },
+  methods: {
+    handleCamera(){
+      if (typeof this.camera.ip === 'undefined' || this.camera.ip === '') {
+        console.log('ip is null')
+        return false
+      }
+      if (typeof this.camera.port === 'undefined' || this.camera.port === '') {
+        console.log('port is null')
+        return false
+      }else{
+        this.camera.ip += (':'+ this.camera.port)
+      }
+      if (typeof this.camera.username === 'undefined' || this.camera.username === '') {
+        console.log('username is null')
+        return false
+      }
+      if (typeof this.camera.password === 'undefined' || this.camera.password === '') {
+        console.log('password is null')
+        return false
+      }
+
+      // 开始预览
+      this.$refs.webCtrl.$refs.play.contentWindow.startPlayReal(this.camera)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/alarm/alarmNow.vue b/src/views/alarm/alarmNow.vue
index 03bb5ea..66055b1 100644
--- a/src/views/alarm/alarmNow.vue
+++ b/src/views/alarm/alarmNow.vue
@@ -48,7 +48,7 @@
       <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="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>
@@ -66,8 +66,8 @@
         <el-table-column label="操作" align="center" width="180">
           <template slot-scope="scope">
             <el-button v-if="hasPerm('/alarm/cancel')" type="text" @click="alarmCancel(scope.row)">取消报警</el-button>
-            <el-button type="text" @click="detail(scope.row)">位置</el-button>
-            <el-button type="text" @click="edit(scope.row)">视频</el-button>
+            <el-button type="text" @click="position(scope.row)">位置</el-button>
+            <el-button v-if="hasPerm('/car/update')" type="text" @click="video(scope.row)">视频</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -183,6 +183,14 @@
     this.fetchData() // 获取数据
   },
   methods: {
+    video(row){
+      const code = this.$store.getters.currentSystem.code
+      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId }})
+    },
+    position(row){
+      const code = this.$store.getters.currentSystem.code
+      this.$router.push({ path: '/' + code + '/alarm/position', query: {  id: row.deviceId }})
+    },
     batchExport() {
       // 全屏加载动画
       const loading = this.$loading({
diff --git a/src/views/alarm/alarmPosition.vue b/src/views/alarm/alarmPosition.vue
new file mode 100644
index 0000000..51f915e
--- /dev/null
+++ b/src/views/alarm/alarmPosition.vue
@@ -0,0 +1,786 @@
+<template>
+  <div class="main-page">
+    <!-- 中间平面图区域 -->
+    <div class="map-overview">
+      <img ref="bgImg" :src="bgImageSrc" height="100%" @load="backgroundImageReady">
+
+      <div
+        v-for="item in devList"
+        :id="item.id"
+        :key="item.id"
+        :style="{ position: 'absolute', top: item.y * imgSize.height / imgSizeOriginal.height + 'px', left: (item.x * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
+        class="point-camera"
+        @click="detailDev(item, $event)" />
+    </div>
+    <!-- 右侧设备详情及操作区域 -->
+    <div v-show="showDevDetail" ref="dev-detail-block" class="dev-detail-block">
+      <span class="dev-detail-close" @click="showDevDetail=false" />
+      <el-row style="margin-top: -25px;">
+        <el-col :span="24">设备名称
+          <span class="dev-detail-span">{{ dataForm.name }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">设备编号
+          <span class="dev-detail-span">{{ dataForm.devcode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">设备类型
+          <span class="dev-detail-span">{{ dataForm.typeName }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">在线状态
+          <span class="dev-detail-span">{{ dataForm.onlineStatusName }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">安装日期
+          <span class="dev-detail-span">{{ dataForm.installDate }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">安装位置
+          <span class="dev-detail-span">{{ dataForm.position }}</span>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getProject } from '@/utils/baseConfig'
+import DeviceDetail from '@/views/deviceManage/deviceDetail'
+import tg_main from '../../assets/overview_images/tg/mapOverviewTg.jpg'
+import tg_3_1 from '../../assets/overview_images/tg/mapOverviewTg-3-1.jpg'
+import tg_4_1 from '../../assets/overview_images/tg/mapOverviewTg-4-1.jpg'
+import tg_4_5 from '../../assets/overview_images/tg/mapOverviewTg-4-5.jpg'
+import { getDetailDevice } from '@/api/device'
+
+// const cameraTypes = [4, 5, 8, 9, 10, 11]
+export default {
+  name: 'AlarmPosition',
+  components: { DeviceDetail },
+  data() {
+    return {
+      title: getProject().title,
+      bgImageSrc: tg_main,
+      devListParams: {
+        picture: '1',
+        areaTypeId: 1,
+        deviceTypes: []
+      },
+      dev: {
+        alarm: 0,
+        onLine: 0,
+        closed: 0,
+        offLine: 0
+      },
+      imgSizeOriginal: {
+        width: 2245,
+        height: 1586
+      }, // 图片原尺寸
+      imgSize: {
+        width: 2245,
+        height: 1586
+      }, // 图片显示尺寸
+      winSize: {
+        width: 1440,
+        height: 789
+      }, // 屏幕窗口尺寸
+      halfLeft: 0,
+      showDevDetail: false, // 是否显示设备详情
+      alarmList: [], // 报警列表
+      alarmColumns: [
+        {
+          text: '设备编号',
+          value: 'devcode',
+          align: 'center'
+        },
+        {
+          text: '报警内容',
+          value: 'alarmContent',
+          align: 'center'
+        },
+        {
+          text: '报警时间',
+          value: 'alarmTime',
+          align: 'center',
+          width: 165
+        }
+      ], // 报警列表显示列
+      tableShow: true, // 是否显示告警列表
+      devList: [], // 设备列表（在地图上显示）
+      dataForm: {
+        id: '', // id
+        name: '', // 设备名
+        devcode: '', // 设备编号
+        typeName: '', // 设备类型
+        model: '', // 设备型号
+        onlineStatusName: '', // 在线状态
+        deviceStatusName: '', // 设备状态
+        position: '', // 安装位置
+        installDate: '', // 安装日期
+        inOutName: '' // 进出营
+      }, // 设备详情表单
+      devPosition:{
+        picture: '',
+        x: '',
+        y: ''
+      },
+      checkDevType: [true, false] // 选中设备类型
+    }
+  },
+  mounted() {
+    this.initWindowSize()
+    if (this.$route.query && this.$route.query.id) {
+      const id = this.$route.query.id
+      getDetailDevice(id).then(response => {
+        if (response.code === 200) {
+          console.log(response.data)
+          this.devPosition.picture = response.data.picture
+          this.devPosition.x = response.data.x
+          this.devPosition.y = response.data.y
+          if(this.devPosition.picture === '1'){
+            this.bgImageSrc = tg_main
+          }else if(this.devPosition.picture === '2'){
+            this.bgImageSrc = tg_3_1
+          }else if(this.devPosition.picture === '3'){
+            this.bgImageSrc = tg_4_1
+          }else if(this.devPosition.picture === '4'){
+            this.bgImageSrc = tg_4_5
+          }else{
+            this.$message.warning('该设备暂无位置信息')
+            return
+          }
+          this.devList = []
+          if (this.devPosition.x !== '' && this.devPosition.y !== '') {
+            this.devList.push(response.data)
+          }
+        }
+      })
+    }
+    const that = this
+    window.onresize = function() {
+      that.initWindowSize()
+      that.getBgImageSize()
+    }
+  },
+  methods: {
+    // 获取窗口大小
+    initWindowSize() {
+      // 获取窗体尺寸
+      this.winSize = {
+        width: document.documentElement.clientWidth,
+        height: document.documentElement.clientHeight
+      }
+    },
+    // 获取图像大小
+    getBgImageSize() {
+      // 获取图片尺寸
+      this.imgSize = {
+        width: this.$refs['bgImg'].width,
+        height: this.$refs['bgImg'].height
+      }
+      this.halfLeft = (this.winSize.width - this.imgSize.width) / 2
+    },
+    // 重新绘制设备点位
+    reDrawDevs() {
+      const halfLeft = (this.winSize.width - this.imgSize.width) / 2
+
+      // 调整球机的设备位置
+      const that = this
+      this.devList.forEach(function(item) {
+        const point = document.getElementById(item.id)
+
+        if (point !== null) {
+          if (item.x !== '' && item.y !== '') {
+            point.style.position = 'absolute'
+            point.style.top = item.y * that.imgSize.height / that.imgSizeOriginal.height + 'px'
+            point.style.left = (item.x * that.imgSize.width / that.imgSizeOriginal.width + halfLeft) + 'px'
+          } else {
+            point.style.display = 'none'
+          }
+        }
+      })
+    },
+    // 平面图就绪时执行函数
+    backgroundImageReady() {
+      this.getBgImageSize()
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    },
+    backToIndex() {
+      this.$router.push('/door/alarm/now')
+    },
+    // 查询并显示设备详情
+    detailDev(dev, event) {
+      this.resetDevDetail()
+      getDetailDevice(dev.id).then(response => {
+        if (response.code === 200) {
+          this.dataForm = {
+            id: dev.id,
+            name: dev.name,
+            devcode: dev.devcode,
+            typeName: response.data.typeName,
+            model: dev.model,
+            onlineStatusName: response.data.onlineStatusName,
+            position: dev.position,
+            installDate: dev.installDate,
+            inOutName: response.data.inOutName,
+            deviceStatusName: response.data.deviceStatusName
+          }
+        } else {
+          this.$message.error(response.message)
+        }
+      })
+
+      // 弹窗显示设备详情
+      const targetDev = event.currentTarget // 取到点击到的设备图标div
+
+      this.showDevDetail = true
+      let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+      top = top + 100
+      this.$refs['dev-detail-block'].style.position = 'absolute'
+      this.$refs['dev-detail-block'].style.top = top + 'px'
+      this.$refs['dev-detail-block'].style.left = targetDev.style.left
+    },
+    // 点击报警列表
+    alarmRowClick(dev, column, event) {
+
+    },
+    // 清除设备详情
+    resetDevDetail() {
+      this.dataForm = {
+        id: '', // id
+        name: '', // 设备名
+        devcode: '', // 设备编号
+        typeName: '', // 设备类型
+        model: '', // 设备型号
+        onlineStatusName: '', // 在线状态
+        deviceStatusName: '', // 设备状态
+        position: '', // 安装位置
+        installDate: '', // 安装日期
+        inOutName: '' // 进出营
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+  .main-page {
+    background-size: cover;
+    background-color: #023d83;
+    height: 100vh;
+  }
+
+  .main-header {
+    width: 100vw;
+  }
+  .main-title {
+    height: 90px;
+    text-align: center;
+    padding-top: 20px;
+    background: url("../../assets/overview_images/title-background-1920.png");
+  }
+
+  .main-title img {
+    display: inline-block;
+    margin-right: 15px;
+    width: 52px;
+    height: 32px;
+    vertical-align: text-bottom;
+  }
+
+  .home-icon {
+    width: 26px;
+    height: 26px;
+    position: fixed;
+    left: 20px;
+    top: 20px;
+  }
+  .exit-icon {
+    width: 26px;
+    height: 26px;
+    position: fixed;
+    right: 20px;
+    top: 20px;
+  }
+  .home-icon img, .exit-icon img {
+    width: 26px;
+    height: 26px;
+  }
+
+  .main-title span {
+    color: #FFFFFF;
+    font-size: 32px;
+    font-weight: bold;
+    font-family: 'Microsoft YaHei';
+  }
+
+  .map-overview {
+    /*margin-top: 50px;*/
+    /*width: 1100px;*/
+    height: calc(90vh - 200px);
+    text-align: center;
+    position: relative;
+  }
+  .point {
+    width: 24px;
+    height: 24px;
+    position: relative;
+    display: inline-block;
+    cursor: pointer;
+  }
+  .point-camera {
+    background: url("../../assets/overview_images/icons/icon-camera-point.png");
+    background-size: contain;
+    @extend .point;
+  }
+  .point-fence {
+    background: url("../../assets/overview_images/icons/icon-fence-unchecked.png");
+    background-size: contain;
+    @extend .point;
+  }
+
+  .statis-block {
+    text-align: center;
+    margin-top: 20px;
+    font-size: 48px;
+  }
+  .sub-title {
+    text-align: center;
+    font-size: 32px;
+  }
+  .sub-data-block {
+    width: 122px;
+    height: 155px;
+  }
+  .dev-normal {
+    background: url("../../assets/overview_images/normal.png");
+    background-size: contain;
+    color: #00ff0c;
+  }
+  .dev-alarm {
+    background: url("../../assets/overview_images/alarm.png");
+    background-size: contain;
+    color: #ff0000;
+  }
+  .dev-offline {
+    background: url("../../assets/overview_images/offline.png");
+    background-size: contain;
+    color: #fff000;
+  }
+  .dev-closed {
+    background: url("../../assets/overview_images/closed.png");
+    background-size: contain;
+    color: #00fff6;
+  }
+
+  .dev-status-block {
+    position: absolute;
+    top: 100px;
+    left: 20px;
+    color: #ffffff;
+  }
+
+  .alarm-now-block {
+    position: absolute;
+    z-index: 500;
+    top: 300px;
+    left: 20px;
+    width: 480px;
+    .map-alarm-div-header {
+      line-height: 40px;
+      padding-left: 10px;
+      color: #00fff6;
+      font-size: 24px;
+      .icon-right {
+        cursor: pointer;
+        margin-left: 20px;
+      }
+    }
+    .el-scrollbar {
+      /*height: 200px;*/
+      width: 100%;
+    }
+    .moredatascollor {
+      height: 200px;
+    }
+    .el-scrollbar__wrap {
+      overflow-y: auto;
+      overflow-x: hidden;
+      margin-bottom: 0px !important;
+    }
+    .el-table {
+      font-size: 12px;
+    }
+    .transition-box {
+      margin-bottom: 10px;
+      width: 200px;
+      height: 100px;
+      border-radius: 4px;
+      background-color: #409EFF;
+      text-align: center;
+      color: #fff;
+      padding: 40px 20px;
+      box-sizing: border-box;
+      margin-right: 20px;
+    }
+  }
+
+  .alarm-now-block /deep/ .el-table th {
+    background-color: #0757A0;
+    padding: 12px 0px;
+    font-size: 16px;
+    color: #00fff6;
+    font-weight: normal;
+  }
+
+  .alarm-now-block /deep/ .el-table td {
+    /*background-color: #0757A0;*/
+    padding: 10px 0px;
+    font-size: 15px;
+    color: #FFFFFF;
+    font-weight: normal;
+  }
+
+  .alarm-now-block /deep/ .el-table__row td {
+    background-color: #023D83;
+  }
+  .alarm-now-block /deep/ .el-table__body tr:hover > td {
+    background-color: #0757A0;
+  }
+  .alarm-now-block /deep/ tr.el-table__row--striped td {
+    background-color: #0757A0;
+  }
+
+  .map-tab {
+    position: absolute;
+    right: 20px;
+    top: 100px;
+    width: 300px;
+    button {
+      margin: 5px 0px;
+    }
+  }
+
+  .tab-top {
+    position: relative;
+    width: 284px;
+    height: 24px;
+    background: url("../../assets/overview_images/tab-top-bg.png");
+  }
+  .tab-bottom {
+    position: relative;
+    width: 284px;
+    height: 24px;
+    background: url("../../assets/overview_images/tab-bottom-bg.png");
+  }
+  .map-index-button {
+    position: relative;
+    width: 284px;
+    height: 74px;
+    background: url("../../assets/overview_images/tab-index-unchecked.png");
+    font-size: 32px;
+    line-height: 74px;
+    text-align: center;
+    color: #FFFFFF;
+    cursor: pointer;
+  }
+  .index-selected {
+    background: url("../../assets/overview_images/tab-index-checked.png");
+  }
+  .sub-tab-guider {
+    width: 149px;
+    height: 50px;
+    background: url("../../assets/overview_images/sub-tab-guider.png");
+  }
+  .sub-tab-border {
+    width: 204px;
+    height: 253px;
+    background: url("../../assets/overview_images/sub-tab-border.png");
+  }
+  .sub-tab-content {
+    text-align: center;
+    color: #FFFFFF;
+    font-size: 28px;
+    cursor: pointer;
+    width: 200px;
+  }
+
+  .dev-detail-block {
+    /*position: absolute;*/
+    /*right: 20px;*/
+    /*bottom: 100px;*/
+    width: 520px;
+    height: 335px;
+    color: #00FFFF;
+    font-size: 24px;
+    font-family: "Microsoft YaHei";
+    padding: 45px 60px;
+    line-height: 35px;
+    background: url("../../assets/overview_images/dev-info.png");
+    .dev-detail-span {
+      margin-left: 20px;
+    }
+    .dev-detail-close::before {
+      content: "\2716";
+      position: relative;
+      top: -20px;
+      right: -410px;
+      cursor: pointer;
+    }
+  }
+
+  .dev-footer {
+    position: absolute;
+    bottom: 25px;
+  }
+
+  .dev-icon {
+    width: 195px;
+    height: 105px;
+    vertical-align: middle;
+    line-height: 65px;
+    padding: 20px 30px !important;
+    margin-left: 15px;
+    cursor: pointer;
+    background: url("../../assets/overview_images/dev-type-border-unchecked.png");
+  }
+
+  .dev-icon img {
+    height: 40px;
+    vertical-align:middle;
+  }
+  .dev-icon span {
+    font-size: 20px;
+    color: #00D2FF;
+    line-height: 65px;
+    height: 65px;
+    vertical-align:middle;
+    float: right;
+  }
+
+  .dev-type-selected {
+    background: url("../../assets/overview_images/dev-type-border-checked.png");
+  }
+  .dev-type-selected span {
+    color: #f58a88 !important;
+  }
+
+  /*@media(max-width: 1440px) {*/
+  /*  .main-title {*/
+  /*    height: 68px;*/
+  /*    padding-top: 20px;*/
+  /*    background: url("../../assets/overview_images/title-background-1440.png");*/
+  /*  }*/
+  /*  .main-title span {*/
+  /*    font-size: 24px;*/
+  /*  }*/
+  /*  .main-title img {*/
+  /*    margin-right: 15px;*/
+  /*    width: 32px;*/
+  /*    height: 32px;*/
+  /*  }*/
+
+  /*  .home-icon {*/
+  /*    left: 18px;*/
+  /*    width: 18px;*/
+  /*    height: 18px;*/
+  /*  }*/
+  /*  .exit-icon {*/
+  /*    right: 18px;*/
+  /*    width: 18px;*/
+  /*    height: 18px;*/
+  /*  }*/
+
+  /*  .home-icon img, .exit-icon img {*/
+  /*    width: 18px;*/
+  /*    height: 18px;*/
+  /*  }*/
+
+  /*  .dev-icon span {*/
+  /*    font-size: 12px;*/
+  /*  }*/
+  /*}*/
+
+  @media(max-width: 1440px) {
+    .main-title {
+      height: 65px;
+      padding-top: 16px;
+      background: url("../../assets/overview_images/title-background-1366.png");
+    }
+    .main-title span {
+      font-size: 24px;
+    }
+    .main-title img {
+      margin-right: 15px;
+      width: 32px;
+      height: 32px;
+    }
+
+    .home-icon {
+      left: 16px;
+      width: 16px;
+      height: 16px;
+    }
+    .exit-icon {
+      right: 16px;
+      width: 16px;
+      height: 16px;
+    }
+
+    .home-icon img, .exit-icon img {
+      width: 20px;
+      height: 20px;
+    }
+
+    .map-overview {
+      margin-top: 35px;
+      height: calc(90vh - 150px);
+    }
+
+    .point {
+      width: 16px;
+      height: 16px;
+    }
+
+    .statis-block {
+      margin-top: 16px;
+      font-size: 36px;
+    }
+    .sub-title {
+      font-size: 24px;
+    }
+    .sub-data-block {
+      width: 90px;
+      height: 114px;
+    }
+
+    .dev-normal {
+      background: url("../../assets/overview_images/normal-1366.png");
+    }
+    .dev-alarm {
+      background: url("../../assets/overview_images/alarm-1366.png");
+    }
+    .dev-offline {
+      background: url("../../assets/overview_images/offline-1366.png");
+    }
+    .dev-closed {
+      background: url("../../assets/overview_images/closed-1366.png");
+    }
+
+    .dev-status-block {
+      top: 90px;
+      left: 16px;
+    }
+
+    .alarm-now-block {
+      top: 220px;
+      left: 16px;
+      width: 360px;
+      .map-alarm-div-header {
+        line-height: 32px;
+        font-size: 20px;
+      }
+    }
+
+    .alarm-now-block /deep/ .el-table th {
+      padding: 8px 0px;
+      font-size: 16px;
+    }
+    .alarm-now-block /deep/ .el-table td {
+      padding: 5px 0px;
+      font-size: 12px;
+    }
+
+    .map-tab {
+      right: 16px;
+      top: 90px;
+      width: 215px;
+      button {
+        margin: 5px 0px;
+      }
+    }
+    .tab-top {
+      width: 213px;
+      height: 18px;
+      background: url("../../assets/overview_images/tab-top-bg-1366.png");
+    }
+    .tab-bottom {
+      width: 213px;
+      height: 18px;
+      background: url("../../assets/overview_images/tab-bottom-bg-1366.png");
+    }
+    .map-index-button {
+      width: 210px;
+      height: 56px;
+      background: url("../../assets/overview_images/tab-index-unchecked-1366.png");
+      font-size: 24px;
+      line-height: 56px;
+    }
+    .index-selected {
+      background: url("../../assets/overview_images/tab-index-checked-1366.png");
+    }
+
+    .sub-tab-guider {
+      width: 110px;
+      height: 37px;
+      background: url("../../assets/overview_images/sub-tab-guider-1366.png");
+    }
+    .sub-tab-border {
+      width: 150px;
+      height: 186px;
+      background: url("../../assets/overview_images/sub-tab-border-1366.png");
+    }
+    .sub-tab-content {
+      font-size: 20px;
+      cursor: pointer;
+      width: 145px;
+    }
+
+    .dev-detail-block {
+      width: 390px;
+      height: 251px;
+      font-size: 16px;
+      padding: 30px 40px;
+      line-height: 28px;
+      background: url("../../assets/overview_images/dev-info-1366.png");
+      .dev-detail-close::before {
+        top: -12px;
+        right: -312px;
+      }
+    }
+
+    .dev-footer {
+      bottom: 20px;
+    }
+    .dev-icon {
+      width: 140px;
+      height: 76px;
+      line-height: 56px;
+      padding: 10px 16px !important;
+      margin-left: 15px;
+      background: url("../../assets/overview_images/dev-type-border-unchecked-1366.png");
+    }
+    .dev-icon img {
+      height: 32px;
+    }
+    .dev-icon span {
+      font-size: 16px;
+      line-height: 56px;
+      height: 56px;
+    }
+    .dev-type-selected {
+      background: url("../../assets/overview_images/dev-type-border-checked-1366.png");
+    }
+  }
+
+</style>
diff --git a/src/views/alarm/webPlay.vue b/src/views/alarm/webPlay.vue
new file mode 100644
index 0000000..97e5ed2
--- /dev/null
+++ b/src/views/alarm/webPlay.vue
@@ -0,0 +1,21 @@
+<template>
+  <div class="play-window-block">
+    <div style="height: 100%">
+      <iframe ref="play" src="/static/webCtrl/demo-easy.html" width="100%" height="100%" style="border: 0px; overflow: hidden;" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'WebPlay'
+}
+</script>
+
+<style scoped>
+  .play-window-block {
+    margin: 15px 15px 15px 0px;
+    box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
+    height: calc(100vh - 175px);
+  }
+</style>
diff --git a/src/views/area/areaList.vue b/src/views/area/areaList.vue
index 1950028..11dc51f 100644
--- a/src/views/area/areaList.vue
+++ b/src/views/area/areaList.vue
@@ -31,7 +31,7 @@
       <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="batchExport">导出</el-button>-->
+          <!--<el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>-->
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>
diff --git a/src/views/area/defenceDetail.vue b/src/views/area/defenceDetail.vue
index e29a258..703ec7d 100644
--- a/src/views/area/defenceDetail.vue
+++ b/src/views/area/defenceDetail.vue
@@ -4,12 +4,14 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="区域名称">
-            <span>{{ dataForm.name }}</span>
+            <el-input v-model="dataForm.name" disabled type="text"/>
+            <!--<span>{{ dataForm.name }}</span>-->
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="防卫状态">
-            <span>{{ dataForm.areaStatusName }}</span>
+            <el-input v-model="dataForm.areaStatusName" disabled type="text"/>
+            <!--<span>{{ dataForm.areaStatusName }}</span>-->
           </el-form-item>
         </el-col>
       </el-row>
@@ -17,12 +19,14 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="区域类别">
-            <span>{{ dataForm.areaTypeName }}</span>
+            <el-input v-model="dataForm.areaTypeName" disabled type="text"/>
+            <!--<span>{{ dataForm.areaTypeName }}</span>-->
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="区域位置">
-            <span>{{ dataForm.position }}</span>
+            <el-input v-model="dataForm.position" disabled type="text"/>
+            <!--<span>{{ dataForm.position }}</span>-->
           </el-form-item>
         </el-col>
       </el-row>
@@ -38,7 +42,8 @@
       <el-row v-show="isFence" :gutter="20">
         <el-col :span="12">
           <el-form-item label="电子围栏">
-            <span>{{ dataForm.deviceStatusName }}</span>
+            <el-input v-model="dataForm.deviceStatusName" disabled type="text"/>
+            <!--<span>{{ dataForm.deviceStatusName }}</span>-->
           </el-form-item>
         </el-col>
       </el-row>
@@ -46,7 +51,8 @@
       <el-row :gutter="20">
         <el-col :span="24">
           <el-form-item label="备注" prop="remark">
-            <span>{{ dataForm.remark }}</span>
+            <el-input v-model="dataForm.remark" disabled type="text"/>
+            <!--<span>{{ dataForm.remark }}</span>-->
           </el-form-item>
         </el-col>
       </el-row>
diff --git a/src/views/area/defenceList.vue b/src/views/area/defenceList.vue
index 9e2ed68..8649918 100644
--- a/src/views/area/defenceList.vue
+++ b/src/views/area/defenceList.vue
@@ -31,9 +31,9 @@
       <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">批量导入</el-button>
-          <el-button class="edit_btn" size="small">导入模板下载</el-button>
-          <!--<el-button class="edit_btn" size="small" @click="batchExport">导出</el-button>-->
+          <!--<el-button class="edit_btn" size="small">批量导入</el-button>-->
+          <!--<el-button class="edit_btn" size="small">导入模板下载</el-button>-->
+          <!--<el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>-->
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>
diff --git a/src/views/car/carAdd.vue b/src/views/car/carAdd.vue
index 6a35b7d..633e353 100644
--- a/src/views/car/carAdd.vue
+++ b/src/views/car/carAdd.vue
@@ -20,14 +20,14 @@
         <el-col :span="12">
           <el-form-item label="所属部门" prop="deptid">
             <!--<span v-show="isDetailMode">{{ dataForm.deptName }}</span>-->
-            <el-select :disabled="isDetailMode" v-model="dataForm.deptid" placeholder="请选择所属部门" filterable clearable>
+            <el-select :disabled="isDetailMode" v-model="dataForm.deptid" placeholder="请选择所属部门" filterable clearable @change="getStaffList">
               <el-option v-for="item in deptList" :key="item.id" :label="item.name" :value="item.id"/>
             </el-select>
             <!--<dept-select v-show="!isDetailMode" v-model="dataForm.deptid" :dept-show="true" :need-top="true" placeholder="所属组织" @change="fetchStaffList"/>-->
           </el-form-item>
         </el-col>
         <el-col v-if="dataForm.property==='2'" :span="12">
-          <el-form-item label="车主" prop="owner">
+          <el-form-item label="车主" prop="ownerId">
             <!--<span v-show="isDetailMode">{{ dataForm.ownerName }}</span>-->
             <el-select :disabled="isDetailMode" v-model="dataForm.ownerId" placeholder="请选择车主" filterable clearable @change="autoStaffPhone">
               <el-option v-for="item in staffList" :key="item.id" :label="item.name" :value="item.id"/>
@@ -91,7 +91,7 @@
       rules: {
         phone: [{ required: true, trigger: ['blur', 'change'], validator: phoneValidator }],
         plateNumber: [{ required: true, trigger: ['blur', 'change'], validator: plateValidator }],
-        owner: [{ required: true, trigger: ['blur', 'change'], message: '请选择车主' }]
+        ownerId: [{ required: true, trigger: ['blur', 'change'], message: '请选择车主' }]
       }, // 前端校验规则
       carProperties: [], // 车辆性质字典值
       staffList: [], // 车主人员列表
@@ -137,6 +137,7 @@
           phone: row.phone,
           remark: row.remark
         }
+        this.getStaffList()
       } else if (dialogStatus === 'detail') {
         this.isDetailMode = true
         this.isEditMode = false
@@ -151,6 +152,7 @@
           deptName: row.deptName,
           ownerName: row.ownerName
         }
+        this.getStaffList()
       }
     },
     // 清除数据
@@ -180,6 +182,13 @@
       })
       getStaffByDept({ deptId: this.dataForm.deptid }).then(response => {
         this.staffList = response.data
+        console.log(response)
+      })
+    },
+    getStaffList(){
+      getStaffByDept({ deptId: this.dataForm.deptid }).then(response => {
+        this.staffList = response.data
+        console.log(response)
       })
     },
     autoStaffPhone() {
@@ -190,7 +199,6 @@
             return item
           }
         })
-
         this.dataForm.phone = selectedStaff[0].phone
       } else {
         this.dataForm.phone = ''
diff --git a/src/views/car/carList.vue b/src/views/car/carList.vue
index ceb77ff..d0c0176 100644
--- a/src/views/car/carList.vue
+++ b/src/views/car/carList.vue
@@ -31,7 +31,7 @@
       <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="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
           <el-button v-if="hasPerm('/door/car/add')" class="edit_btn" size="small" @click="add">新增</el-button>
           <!--          <el-button v-if="hasPerm('/door/car/delete')" v-show="false" class="edit_btn" size="small" @click="batchDel">删除</el-button>-->
         </el-col>
diff --git a/src/views/deviceManage/deviceList.vue b/src/views/deviceManage/deviceList.vue
index 5966b45..feb4b36 100644
--- a/src/views/deviceManage/deviceList.vue
+++ b/src/views/deviceManage/deviceList.vue
@@ -48,7 +48,7 @@
       <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="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border @selection-change="handleSelectionChange">
diff --git a/src/views/overview/doorIndex.vue b/src/views/overview/doorIndex.vue
index 03624bb..4f48bd0 100644
--- a/src/views/overview/doorIndex.vue
+++ b/src/views/overview/doorIndex.vue
@@ -285,6 +285,7 @@
         if (response.code === 200) {
           const that = this
           this.devList = []
+          console.log(response)
           response.data.forEach(dev => {
             if (dev.x !== '' && dev.y !== '') {
               that.devList.push(dev)
diff --git a/src/views/staff/staffDetail.vue b/src/views/staff/staffDetail.vue
index 8fc4c6d..50f7166 100644
--- a/src/views/staff/staffDetail.vue
+++ b/src/views/staff/staffDetail.vue
@@ -16,12 +16,14 @@
           <el-row :gutter="20">
             <el-col :span="12">
               <el-form-item label="姓名">
-                <span>{{ dataForm.name }}</span>
+                <el-input v-model="dataForm.name" disabled type="text"/>
+                <!--<span>{{ dataForm.name }}</span>-->
               </el-form-item>
             </el-col>
             <el-col :span="12">
               <el-form-item label="身份证号">
-                <span>{{ dataForm.idCard }}</span>
+                <el-input v-model="dataForm.idCard" disabled type="text"/>
+                <!--<span>{{ dataForm.idCard }}</span>-->
               </el-form-item>
             </el-col>
           </el-row>
@@ -29,12 +31,14 @@
           <el-row :gutter="20">
             <el-col :span="12">
               <el-form-item label="出生日期">
-                <span>{{ dataForm.birthday }}</span>
+                <el-input v-model="dataForm.birthday" disabled type="text"/>
+                <!--<span>{{ dataForm.birthday }}</span>-->
               </el-form-item>
             </el-col>
             <el-col :span="12">
               <el-form-item label="性别">
-                <span>{{ dataForm.sex }}</span>
+                <el-input v-model="dataForm.sex" disabled type="text"/>
+                <!--<span>{{ dataForm.sex }}</span>-->
               </el-form-item>
             </el-col>
           </el-row>
@@ -42,13 +46,15 @@
           <el-row :gutter="20">
             <el-col :span="12">
               <el-form-item label="所在部门">
-                <span>{{ dataForm.deptName }}</span>
+                <el-input v-model="dataForm.deptName" disabled type="text"/>
+                <!--<span>{{ dataForm.deptName }}</span>-->
               </el-form-item>
             </el-col>
 
             <el-col :span="12">
               <el-form-item label="联系电话">
-                <span>{{ dataForm.phone }}</span>
+                <el-input v-model="dataForm.phone" disabled type="text"/>
+                <!--<span>{{ dataForm.phone }}</span>-->
               </el-form-item>
             </el-col>
           </el-row>
@@ -56,7 +62,8 @@
           <el-row>
             <el-col :span="24">
               <el-form-item label="住址">
-                <span>{{ dataForm.address }}</span>
+                <el-input v-model="dataForm.address" disabled type="text"/>
+                <!--<span>{{ dataForm.address }}</span>-->
               </el-form-item>
             </el-col>
           </el-row>
diff --git a/src/views/staff/staffList.vue b/src/views/staff/staffList.vue
index 4a92b0c..c6ad796 100644
--- a/src/views/staff/staffList.vue
+++ b/src/views/staff/staffList.vue
@@ -44,7 +44,7 @@
           </el-upload>
           <download-template :filename="personImpTem" btnname="导入模板下载"/>
           <el-button v-if="hasPerm('/staff/delete')" size="small" class="edit_btn" @click="del">删除</el-button>
-          <el-button class="edit_btn" size="small" @click="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
           <el-button v-if="hasPerm('/staff/add')" class="edit_btn" size="small" @click="add">新增</el-button>
         </el-col>
       </el-row>
diff --git a/src/views/statistics/carDuration.vue b/src/views/statistics/carDuration.vue
index e4093d5..9cb4041 100644
--- a/src/views/statistics/carDuration.vue
+++ b/src/views/statistics/carDuration.vue
@@ -41,7 +41,7 @@
       <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="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>

diff --git a/src/router/modules/doorSys.js b/src/router/modules/doorSys.js
index 8017e4b..6bd1506 100644
--- a/src/router/modules/doorSys.js
+++ b/src/router/modules/doorSys.js
@@ -87,6 +87,20 @@
         name: 'DoorAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/door/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/door/alarm/position',
+        name: 'DoorAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/door/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/door/alarm/video',
+        name: 'DoorAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/door/alarm/video'], keepAlive: true }
       }
     ]
   },
@@ -262,5 +276,26 @@
         meta: { title: '营门出入次数统计', icon: '', permission: ['/door/statistics/doorCount'], keepAlive: true }
       }
     ]
+  },
+  {
+    path: '/door/area',
+    component: Layout,
+    redirect: '/door/area',
+    name: 'DoorArea',
+    alwaysShow: true,
+    meta: {
+      title: '区域管理',
+      icon: 'icon-area', // 图标
+      permission: ['/door/area'], // 权限名称
+      sys: '/door'
+    },
+    children: [
+      {
+        path: '/door/area/list',
+        name: 'DoorAreaList',
+        component: () => import('@/views/area/areaList'),
+        meta: { title: '区域列表', icon: '', permission: ['/door/area/list'], keepAlive: true }
+      }
+    ]
   }
 ]
diff --git a/src/router/modules/fenceSys.js b/src/router/modules/fenceSys.js
index 0d784b0..e2962bd 100644
--- a/src/router/modules/fenceSys.js
+++ b/src/router/modules/fenceSys.js
@@ -85,6 +85,20 @@
         name: 'FenceAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/fence/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/fence/alarm/position',
+        name: 'FenceAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/fence/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/fence/alarm/video',
+        name: 'FenceAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/fence/alarm/video'], keepAlive: true }
       }
     ]
   },
diff --git a/src/router/modules/keySys.js b/src/router/modules/keySys.js
index f3a027b..832744b 100644
--- a/src/router/modules/keySys.js
+++ b/src/router/modules/keySys.js
@@ -85,6 +85,20 @@
         name: 'KeyAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/key/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/key/alarm/position',
+        name: 'KeyAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/key/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/key/alarm/video',
+        name: 'KeyAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/key/alarm/video'], keepAlive: true }
       }
     ]
   },
diff --git a/src/router/modules/regionSys.js b/src/router/modules/regionSys.js
index 9b4613a..43b8c38 100644
--- a/src/router/modules/regionSys.js
+++ b/src/router/modules/regionSys.js
@@ -85,6 +85,20 @@
         name: 'RegionAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/region/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/region/alarm/position',
+        name: 'RegionAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/region/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/region/alarm/video',
+        name: 'RegionAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/region/alarm/video'], keepAlive: true }
       }
     ]
   },
@@ -102,6 +116,20 @@
     },
     children: [
       {
+        path: '/region/staff/add',
+        name: 'RegionStaffAdd',
+        component: () => import('@/views/staff/staffAdd'),
+        hidden: true,
+        meta: { title: '人员登记', icon: '', permission: ['/region/staff/add'], keepAlive: true }
+      },
+      {
+        path: '/region/staff/edit',
+        name: 'RegionStaffEdit',
+        component: () => import('@/views/staff/staffEdit'),
+        hidden: true,
+        meta: { title: '人员编辑', icon: '', permission: ['/region/staff/edit'], keepAlive: true }
+      },
+      {
         path: '/region/staff/list',
         name: 'RegionStaffList',
         component: () => import('@/views/staff/staffList'),
diff --git a/src/views/alarm/alarmList.vue b/src/views/alarm/alarmList.vue
index 704f797..91967a0 100644
--- a/src/views/alarm/alarmList.vue
+++ b/src/views/alarm/alarmList.vue
@@ -37,7 +37,7 @@
             </el-col>
 
             <el-col :span="4" 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" @click="fetchData()">搜索</el-button>
             </el-col>
           </el-row>
         </el-form>
@@ -48,7 +48,7 @@
       <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="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>
@@ -66,8 +66,8 @@
         <!--操作列-->
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
-            <el-button type="text" @click="detail(scope.row)">位置</el-button>
-            <el-button v-if="hasPerm('/car/update')" type="text" @click="edit(scope.row)">视频</el-button>
+            <el-button type="text" @click="position(scope.row)">位置</el-button>
+            <el-button v-if="hasPerm('/car/update')" type="text" @click="video(scope.row)">视频</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -185,6 +185,14 @@
     this.fetchData() // 获取数据
   },
   methods: {
+    video(row){
+      const code = this.$store.getters.currentSystem.code
+      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId }})
+    },
+    position(row){
+      const code = this.$store.getters.currentSystem.code
+      this.$router.push({ path: '/' + code + '/alarm/position', query: {  id: row.deviceId }})
+    },
     batchExport() {
       // 全屏加载动画
       const loading = this.$loading({
@@ -254,6 +262,8 @@
       getAlarmList(this.listQuery).then(response => {
         if (response.code === 200) {
           this.list = response.data.rows
+          console.log('&&&')
+          console.log(this.list)
           this.total = parseInt(response.data.total)
         } else {
           this.$message.error(response.message)
diff --git a/src/views/alarm/alarmMonitor.vue b/src/views/alarm/alarmMonitor.vue
new file mode 100644
index 0000000..517d6e9
--- /dev/null
+++ b/src/views/alarm/alarmMonitor.vue
@@ -0,0 +1,80 @@
+<template>
+  <div>
+    <el-row>
+      <!--<el-col :span="6">-->
+        <!--&lt;!&ndash;<video-tree @click="handleCameraClicked"/>&ndash;&gt;-->
+      <!--</el-col>-->
+
+      <el-col :span="18" :offset="3">
+        <web-play ref="webCtrl" />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+// import VideoTree from './videoTree'
+import WebPlay from './webPlay'
+import { getDetailDevice } from '@/api/device'
+export default {
+  name: 'VideoMonitor',
+  components: { WebPlay },
+  data() {
+    return {
+      camera:{
+        ip:'',
+        port:'',
+        username:'',
+        password:''
+      }
+    }
+  },
+  mounted() {
+
+  },
+  activated() {
+    if (this.$route.query && this.$route.query.id) {
+      const id = this.$route.query.id
+      getDetailDevice(id).then(response => {
+          if (response.code === 200) {
+            console.log(response.data)
+            this.camera.ip = response.data.ip
+            this.camera.port = response.data.port
+            this.camera.username = response.data.username
+            this.camera.password = response.data.password
+            this.handleCamera()
+          }
+      })
+    }
+  },
+  methods: {
+    handleCamera(){
+      if (typeof this.camera.ip === 'undefined' || this.camera.ip === '') {
+        console.log('ip is null')
+        return false
+      }
+      if (typeof this.camera.port === 'undefined' || this.camera.port === '') {
+        console.log('port is null')
+        return false
+      }else{
+        this.camera.ip += (':'+ this.camera.port)
+      }
+      if (typeof this.camera.username === 'undefined' || this.camera.username === '') {
+        console.log('username is null')
+        return false
+      }
+      if (typeof this.camera.password === 'undefined' || this.camera.password === '') {
+        console.log('password is null')
+        return false
+      }
+
+      // 开始预览
+      this.$refs.webCtrl.$refs.play.contentWindow.startPlayReal(this.camera)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/alarm/alarmNow.vue b/src/views/alarm/alarmNow.vue
index 03bb5ea..66055b1 100644
--- a/src/views/alarm/alarmNow.vue
+++ b/src/views/alarm/alarmNow.vue
@@ -48,7 +48,7 @@
       <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="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>
@@ -66,8 +66,8 @@
         <el-table-column label="操作" align="center" width="180">
           <template slot-scope="scope">
             <el-button v-if="hasPerm('/alarm/cancel')" type="text" @click="alarmCancel(scope.row)">取消报警</el-button>
-            <el-button type="text" @click="detail(scope.row)">位置</el-button>
-            <el-button type="text" @click="edit(scope.row)">视频</el-button>
+            <el-button type="text" @click="position(scope.row)">位置</el-button>
+            <el-button v-if="hasPerm('/car/update')" type="text" @click="video(scope.row)">视频</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -183,6 +183,14 @@
     this.fetchData() // 获取数据
   },
   methods: {
+    video(row){
+      const code = this.$store.getters.currentSystem.code
+      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId }})
+    },
+    position(row){
+      const code = this.$store.getters.currentSystem.code
+      this.$router.push({ path: '/' + code + '/alarm/position', query: {  id: row.deviceId }})
+    },
     batchExport() {
       // 全屏加载动画
       const loading = this.$loading({
diff --git a/src/views/alarm/alarmPosition.vue b/src/views/alarm/alarmPosition.vue
new file mode 100644
index 0000000..51f915e
--- /dev/null
+++ b/src/views/alarm/alarmPosition.vue
@@ -0,0 +1,786 @@
+<template>
+  <div class="main-page">
+    <!-- 中间平面图区域 -->
+    <div class="map-overview">
+      <img ref="bgImg" :src="bgImageSrc" height="100%" @load="backgroundImageReady">
+
+      <div
+        v-for="item in devList"
+        :id="item.id"
+        :key="item.id"
+        :style="{ position: 'absolute', top: item.y * imgSize.height / imgSizeOriginal.height + 'px', left: (item.x * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
+        class="point-camera"
+        @click="detailDev(item, $event)" />
+    </div>
+    <!-- 右侧设备详情及操作区域 -->
+    <div v-show="showDevDetail" ref="dev-detail-block" class="dev-detail-block">
+      <span class="dev-detail-close" @click="showDevDetail=false" />
+      <el-row style="margin-top: -25px;">
+        <el-col :span="24">设备名称
+          <span class="dev-detail-span">{{ dataForm.name }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">设备编号
+          <span class="dev-detail-span">{{ dataForm.devcode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">设备类型
+          <span class="dev-detail-span">{{ dataForm.typeName }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">在线状态
+          <span class="dev-detail-span">{{ dataForm.onlineStatusName }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">安装日期
+          <span class="dev-detail-span">{{ dataForm.installDate }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">安装位置
+          <span class="dev-detail-span">{{ dataForm.position }}</span>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getProject } from '@/utils/baseConfig'
+import DeviceDetail from '@/views/deviceManage/deviceDetail'
+import tg_main from '../../assets/overview_images/tg/mapOverviewTg.jpg'
+import tg_3_1 from '../../assets/overview_images/tg/mapOverviewTg-3-1.jpg'
+import tg_4_1 from '../../assets/overview_images/tg/mapOverviewTg-4-1.jpg'
+import tg_4_5 from '../../assets/overview_images/tg/mapOverviewTg-4-5.jpg'
+import { getDetailDevice } from '@/api/device'
+
+// const cameraTypes = [4, 5, 8, 9, 10, 11]
+export default {
+  name: 'AlarmPosition',
+  components: { DeviceDetail },
+  data() {
+    return {
+      title: getProject().title,
+      bgImageSrc: tg_main,
+      devListParams: {
+        picture: '1',
+        areaTypeId: 1,
+        deviceTypes: []
+      },
+      dev: {
+        alarm: 0,
+        onLine: 0,
+        closed: 0,
+        offLine: 0
+      },
+      imgSizeOriginal: {
+        width: 2245,
+        height: 1586
+      }, // 图片原尺寸
+      imgSize: {
+        width: 2245,
+        height: 1586
+      }, // 图片显示尺寸
+      winSize: {
+        width: 1440,
+        height: 789
+      }, // 屏幕窗口尺寸
+      halfLeft: 0,
+      showDevDetail: false, // 是否显示设备详情
+      alarmList: [], // 报警列表
+      alarmColumns: [
+        {
+          text: '设备编号',
+          value: 'devcode',
+          align: 'center'
+        },
+        {
+          text: '报警内容',
+          value: 'alarmContent',
+          align: 'center'
+        },
+        {
+          text: '报警时间',
+          value: 'alarmTime',
+          align: 'center',
+          width: 165
+        }
+      ], // 报警列表显示列
+      tableShow: true, // 是否显示告警列表
+      devList: [], // 设备列表（在地图上显示）
+      dataForm: {
+        id: '', // id
+        name: '', // 设备名
+        devcode: '', // 设备编号
+        typeName: '', // 设备类型
+        model: '', // 设备型号
+        onlineStatusName: '', // 在线状态
+        deviceStatusName: '', // 设备状态
+        position: '', // 安装位置
+        installDate: '', // 安装日期
+        inOutName: '' // 进出营
+      }, // 设备详情表单
+      devPosition:{
+        picture: '',
+        x: '',
+        y: ''
+      },
+      checkDevType: [true, false] // 选中设备类型
+    }
+  },
+  mounted() {
+    this.initWindowSize()
+    if (this.$route.query && this.$route.query.id) {
+      const id = this.$route.query.id
+      getDetailDevice(id).then(response => {
+        if (response.code === 200) {
+          console.log(response.data)
+          this.devPosition.picture = response.data.picture
+          this.devPosition.x = response.data.x
+          this.devPosition.y = response.data.y
+          if(this.devPosition.picture === '1'){
+            this.bgImageSrc = tg_main
+          }else if(this.devPosition.picture === '2'){
+            this.bgImageSrc = tg_3_1
+          }else if(this.devPosition.picture === '3'){
+            this.bgImageSrc = tg_4_1
+          }else if(this.devPosition.picture === '4'){
+            this.bgImageSrc = tg_4_5
+          }else{
+            this.$message.warning('该设备暂无位置信息')
+            return
+          }
+          this.devList = []
+          if (this.devPosition.x !== '' && this.devPosition.y !== '') {
+            this.devList.push(response.data)
+          }
+        }
+      })
+    }
+    const that = this
+    window.onresize = function() {
+      that.initWindowSize()
+      that.getBgImageSize()
+    }
+  },
+  methods: {
+    // 获取窗口大小
+    initWindowSize() {
+      // 获取窗体尺寸
+      this.winSize = {
+        width: document.documentElement.clientWidth,
+        height: document.documentElement.clientHeight
+      }
+    },
+    // 获取图像大小
+    getBgImageSize() {
+      // 获取图片尺寸
+      this.imgSize = {
+        width: this.$refs['bgImg'].width,
+        height: this.$refs['bgImg'].height
+      }
+      this.halfLeft = (this.winSize.width - this.imgSize.width) / 2
+    },
+    // 重新绘制设备点位
+    reDrawDevs() {
+      const halfLeft = (this.winSize.width - this.imgSize.width) / 2
+
+      // 调整球机的设备位置
+      const that = this
+      this.devList.forEach(function(item) {
+        const point = document.getElementById(item.id)
+
+        if (point !== null) {
+          if (item.x !== '' && item.y !== '') {
+            point.style.position = 'absolute'
+            point.style.top = item.y * that.imgSize.height / that.imgSizeOriginal.height + 'px'
+            point.style.left = (item.x * that.imgSize.width / that.imgSizeOriginal.width + halfLeft) + 'px'
+          } else {
+            point.style.display = 'none'
+          }
+        }
+      })
+    },
+    // 平面图就绪时执行函数
+    backgroundImageReady() {
+      this.getBgImageSize()
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    },
+    backToIndex() {
+      this.$router.push('/door/alarm/now')
+    },
+    // 查询并显示设备详情
+    detailDev(dev, event) {
+      this.resetDevDetail()
+      getDetailDevice(dev.id).then(response => {
+        if (response.code === 200) {
+          this.dataForm = {
+            id: dev.id,
+            name: dev.name,
+            devcode: dev.devcode,
+            typeName: response.data.typeName,
+            model: dev.model,
+            onlineStatusName: response.data.onlineStatusName,
+            position: dev.position,
+            installDate: dev.installDate,
+            inOutName: response.data.inOutName,
+            deviceStatusName: response.data.deviceStatusName
+          }
+        } else {
+          this.$message.error(response.message)
+        }
+      })
+
+      // 弹窗显示设备详情
+      const targetDev = event.currentTarget // 取到点击到的设备图标div
+
+      this.showDevDetail = true
+      let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+      top = top + 100
+      this.$refs['dev-detail-block'].style.position = 'absolute'
+      this.$refs['dev-detail-block'].style.top = top + 'px'
+      this.$refs['dev-detail-block'].style.left = targetDev.style.left
+    },
+    // 点击报警列表
+    alarmRowClick(dev, column, event) {
+
+    },
+    // 清除设备详情
+    resetDevDetail() {
+      this.dataForm = {
+        id: '', // id
+        name: '', // 设备名
+        devcode: '', // 设备编号
+        typeName: '', // 设备类型
+        model: '', // 设备型号
+        onlineStatusName: '', // 在线状态
+        deviceStatusName: '', // 设备状态
+        position: '', // 安装位置
+        installDate: '', // 安装日期
+        inOutName: '' // 进出营
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+  .main-page {
+    background-size: cover;
+    background-color: #023d83;
+    height: 100vh;
+  }
+
+  .main-header {
+    width: 100vw;
+  }
+  .main-title {
+    height: 90px;
+    text-align: center;
+    padding-top: 20px;
+    background: url("../../assets/overview_images/title-background-1920.png");
+  }
+
+  .main-title img {
+    display: inline-block;
+    margin-right: 15px;
+    width: 52px;
+    height: 32px;
+    vertical-align: text-bottom;
+  }
+
+  .home-icon {
+    width: 26px;
+    height: 26px;
+    position: fixed;
+    left: 20px;
+    top: 20px;
+  }
+  .exit-icon {
+    width: 26px;
+    height: 26px;
+    position: fixed;
+    right: 20px;
+    top: 20px;
+  }
+  .home-icon img, .exit-icon img {
+    width: 26px;
+    height: 26px;
+  }
+
+  .main-title span {
+    color: #FFFFFF;
+    font-size: 32px;
+    font-weight: bold;
+    font-family: 'Microsoft YaHei';
+  }
+
+  .map-overview {
+    /*margin-top: 50px;*/
+    /*width: 1100px;*/
+    height: calc(90vh - 200px);
+    text-align: center;
+    position: relative;
+  }
+  .point {
+    width: 24px;
+    height: 24px;
+    position: relative;
+    display: inline-block;
+    cursor: pointer;
+  }
+  .point-camera {
+    background: url("../../assets/overview_images/icons/icon-camera-point.png");
+    background-size: contain;
+    @extend .point;
+  }
+  .point-fence {
+    background: url("../../assets/overview_images/icons/icon-fence-unchecked.png");
+    background-size: contain;
+    @extend .point;
+  }
+
+  .statis-block {
+    text-align: center;
+    margin-top: 20px;
+    font-size: 48px;
+  }
+  .sub-title {
+    text-align: center;
+    font-size: 32px;
+  }
+  .sub-data-block {
+    width: 122px;
+    height: 155px;
+  }
+  .dev-normal {
+    background: url("../../assets/overview_images/normal.png");
+    background-size: contain;
+    color: #00ff0c;
+  }
+  .dev-alarm {
+    background: url("../../assets/overview_images/alarm.png");
+    background-size: contain;
+    color: #ff0000;
+  }
+  .dev-offline {
+    background: url("../../assets/overview_images/offline.png");
+    background-size: contain;
+    color: #fff000;
+  }
+  .dev-closed {
+    background: url("../../assets/overview_images/closed.png");
+    background-size: contain;
+    color: #00fff6;
+  }
+
+  .dev-status-block {
+    position: absolute;
+    top: 100px;
+    left: 20px;
+    color: #ffffff;
+  }
+
+  .alarm-now-block {
+    position: absolute;
+    z-index: 500;
+    top: 300px;
+    left: 20px;
+    width: 480px;
+    .map-alarm-div-header {
+      line-height: 40px;
+      padding-left: 10px;
+      color: #00fff6;
+      font-size: 24px;
+      .icon-right {
+        cursor: pointer;
+        margin-left: 20px;
+      }
+    }
+    .el-scrollbar {
+      /*height: 200px;*/
+      width: 100%;
+    }
+    .moredatascollor {
+      height: 200px;
+    }
+    .el-scrollbar__wrap {
+      overflow-y: auto;
+      overflow-x: hidden;
+      margin-bottom: 0px !important;
+    }
+    .el-table {
+      font-size: 12px;
+    }
+    .transition-box {
+      margin-bottom: 10px;
+      width: 200px;
+      height: 100px;
+      border-radius: 4px;
+      background-color: #409EFF;
+      text-align: center;
+      color: #fff;
+      padding: 40px 20px;
+      box-sizing: border-box;
+      margin-right: 20px;
+    }
+  }
+
+  .alarm-now-block /deep/ .el-table th {
+    background-color: #0757A0;
+    padding: 12px 0px;
+    font-size: 16px;
+    color: #00fff6;
+    font-weight: normal;
+  }
+
+  .alarm-now-block /deep/ .el-table td {
+    /*background-color: #0757A0;*/
+    padding: 10px 0px;
+    font-size: 15px;
+    color: #FFFFFF;
+    font-weight: normal;
+  }
+
+  .alarm-now-block /deep/ .el-table__row td {
+    background-color: #023D83;
+  }
+  .alarm-now-block /deep/ .el-table__body tr:hover > td {
+    background-color: #0757A0;
+  }
+  .alarm-now-block /deep/ tr.el-table__row--striped td {
+    background-color: #0757A0;
+  }
+
+  .map-tab {
+    position: absolute;
+    right: 20px;
+    top: 100px;
+    width: 300px;
+    button {
+      margin: 5px 0px;
+    }
+  }
+
+  .tab-top {
+    position: relative;
+    width: 284px;
+    height: 24px;
+    background: url("../../assets/overview_images/tab-top-bg.png");
+  }
+  .tab-bottom {
+    position: relative;
+    width: 284px;
+    height: 24px;
+    background: url("../../assets/overview_images/tab-bottom-bg.png");
+  }
+  .map-index-button {
+    position: relative;
+    width: 284px;
+    height: 74px;
+    background: url("../../assets/overview_images/tab-index-unchecked.png");
+    font-size: 32px;
+    line-height: 74px;
+    text-align: center;
+    color: #FFFFFF;
+    cursor: pointer;
+  }
+  .index-selected {
+    background: url("../../assets/overview_images/tab-index-checked.png");
+  }
+  .sub-tab-guider {
+    width: 149px;
+    height: 50px;
+    background: url("../../assets/overview_images/sub-tab-guider.png");
+  }
+  .sub-tab-border {
+    width: 204px;
+    height: 253px;
+    background: url("../../assets/overview_images/sub-tab-border.png");
+  }
+  .sub-tab-content {
+    text-align: center;
+    color: #FFFFFF;
+    font-size: 28px;
+    cursor: pointer;
+    width: 200px;
+  }
+
+  .dev-detail-block {
+    /*position: absolute;*/
+    /*right: 20px;*/
+    /*bottom: 100px;*/
+    width: 520px;
+    height: 335px;
+    color: #00FFFF;
+    font-size: 24px;
+    font-family: "Microsoft YaHei";
+    padding: 45px 60px;
+    line-height: 35px;
+    background: url("../../assets/overview_images/dev-info.png");
+    .dev-detail-span {
+      margin-left: 20px;
+    }
+    .dev-detail-close::before {
+      content: "\2716";
+      position: relative;
+      top: -20px;
+      right: -410px;
+      cursor: pointer;
+    }
+  }
+
+  .dev-footer {
+    position: absolute;
+    bottom: 25px;
+  }
+
+  .dev-icon {
+    width: 195px;
+    height: 105px;
+    vertical-align: middle;
+    line-height: 65px;
+    padding: 20px 30px !important;
+    margin-left: 15px;
+    cursor: pointer;
+    background: url("../../assets/overview_images/dev-type-border-unchecked.png");
+  }
+
+  .dev-icon img {
+    height: 40px;
+    vertical-align:middle;
+  }
+  .dev-icon span {
+    font-size: 20px;
+    color: #00D2FF;
+    line-height: 65px;
+    height: 65px;
+    vertical-align:middle;
+    float: right;
+  }
+
+  .dev-type-selected {
+    background: url("../../assets/overview_images/dev-type-border-checked.png");
+  }
+  .dev-type-selected span {
+    color: #f58a88 !important;
+  }
+
+  /*@media(max-width: 1440px) {*/
+  /*  .main-title {*/
+  /*    height: 68px;*/
+  /*    padding-top: 20px;*/
+  /*    background: url("../../assets/overview_images/title-background-1440.png");*/
+  /*  }*/
+  /*  .main-title span {*/
+  /*    font-size: 24px;*/
+  /*  }*/
+  /*  .main-title img {*/
+  /*    margin-right: 15px;*/
+  /*    width: 32px;*/
+  /*    height: 32px;*/
+  /*  }*/
+
+  /*  .home-icon {*/
+  /*    left: 18px;*/
+  /*    width: 18px;*/
+  /*    height: 18px;*/
+  /*  }*/
+  /*  .exit-icon {*/
+  /*    right: 18px;*/
+  /*    width: 18px;*/
+  /*    height: 18px;*/
+  /*  }*/
+
+  /*  .home-icon img, .exit-icon img {*/
+  /*    width: 18px;*/
+  /*    height: 18px;*/
+  /*  }*/
+
+  /*  .dev-icon span {*/
+  /*    font-size: 12px;*/
+  /*  }*/
+  /*}*/
+
+  @media(max-width: 1440px) {
+    .main-title {
+      height: 65px;
+      padding-top: 16px;
+      background: url("../../assets/overview_images/title-background-1366.png");
+    }
+    .main-title span {
+      font-size: 24px;
+    }
+    .main-title img {
+      margin-right: 15px;
+      width: 32px;
+      height: 32px;
+    }
+
+    .home-icon {
+      left: 16px;
+      width: 16px;
+      height: 16px;
+    }
+    .exit-icon {
+      right: 16px;
+      width: 16px;
+      height: 16px;
+    }
+
+    .home-icon img, .exit-icon img {
+      width: 20px;
+      height: 20px;
+    }
+
+    .map-overview {
+      margin-top: 35px;
+      height: calc(90vh - 150px);
+    }
+
+    .point {
+      width: 16px;
+      height: 16px;
+    }
+
+    .statis-block {
+      margin-top: 16px;
+      font-size: 36px;
+    }
+    .sub-title {
+      font-size: 24px;
+    }
+    .sub-data-block {
+      width: 90px;
+      height: 114px;
+    }
+
+    .dev-normal {
+      background: url("../../assets/overview_images/normal-1366.png");
+    }
+    .dev-alarm {
+      background: url("../../assets/overview_images/alarm-1366.png");
+    }
+    .dev-offline {
+      background: url("../../assets/overview_images/offline-1366.png");
+    }
+    .dev-closed {
+      background: url("../../assets/overview_images/closed-1366.png");
+    }
+
+    .dev-status-block {
+      top: 90px;
+      left: 16px;
+    }
+
+    .alarm-now-block {
+      top: 220px;
+      left: 16px;
+      width: 360px;
+      .map-alarm-div-header {
+        line-height: 32px;
+        font-size: 20px;
+      }
+    }
+
+    .alarm-now-block /deep/ .el-table th {
+      padding: 8px 0px;
+      font-size: 16px;
+    }
+    .alarm-now-block /deep/ .el-table td {
+      padding: 5px 0px;
+      font-size: 12px;
+    }
+
+    .map-tab {
+      right: 16px;
+      top: 90px;
+      width: 215px;
+      button {
+        margin: 5px 0px;
+      }
+    }
+    .tab-top {
+      width: 213px;
+      height: 18px;
+      background: url("../../assets/overview_images/tab-top-bg-1366.png");
+    }
+    .tab-bottom {
+      width: 213px;
+      height: 18px;
+      background: url("../../assets/overview_images/tab-bottom-bg-1366.png");
+    }
+    .map-index-button {
+      width: 210px;
+      height: 56px;
+      background: url("../../assets/overview_images/tab-index-unchecked-1366.png");
+      font-size: 24px;
+      line-height: 56px;
+    }
+    .index-selected {
+      background: url("../../assets/overview_images/tab-index-checked-1366.png");
+    }
+
+    .sub-tab-guider {
+      width: 110px;
+      height: 37px;
+      background: url("../../assets/overview_images/sub-tab-guider-1366.png");
+    }
+    .sub-tab-border {
+      width: 150px;
+      height: 186px;
+      background: url("../../assets/overview_images/sub-tab-border-1366.png");
+    }
+    .sub-tab-content {
+      font-size: 20px;
+      cursor: pointer;
+      width: 145px;
+    }
+
+    .dev-detail-block {
+      width: 390px;
+      height: 251px;
+      font-size: 16px;
+      padding: 30px 40px;
+      line-height: 28px;
+      background: url("../../assets/overview_images/dev-info-1366.png");
+      .dev-detail-close::before {
+        top: -12px;
+        right: -312px;
+      }
+    }
+
+    .dev-footer {
+      bottom: 20px;
+    }
+    .dev-icon {
+      width: 140px;
+      height: 76px;
+      line-height: 56px;
+      padding: 10px 16px !important;
+      margin-left: 15px;
+      background: url("../../assets/overview_images/dev-type-border-unchecked-1366.png");
+    }
+    .dev-icon img {
+      height: 32px;
+    }
+    .dev-icon span {
+      font-size: 16px;
+      line-height: 56px;
+      height: 56px;
+    }
+    .dev-type-selected {
+      background: url("../../assets/overview_images/dev-type-border-checked-1366.png");
+    }
+  }
+
+</style>
diff --git a/src/views/alarm/webPlay.vue b/src/views/alarm/webPlay.vue
new file mode 100644
index 0000000..97e5ed2
--- /dev/null
+++ b/src/views/alarm/webPlay.vue
@@ -0,0 +1,21 @@
+<template>
+  <div class="play-window-block">
+    <div style="height: 100%">
+      <iframe ref="play" src="/static/webCtrl/demo-easy.html" width="100%" height="100%" style="border: 0px; overflow: hidden;" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'WebPlay'
+}
+</script>
+
+<style scoped>
+  .play-window-block {
+    margin: 15px 15px 15px 0px;
+    box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
+    height: calc(100vh - 175px);
+  }
+</style>
diff --git a/src/views/area/areaList.vue b/src/views/area/areaList.vue
index 1950028..11dc51f 100644
--- a/src/views/area/areaList.vue
+++ b/src/views/area/areaList.vue
@@ -31,7 +31,7 @@
       <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="batchExport">导出</el-button>-->
+          <!--<el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>-->
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>
diff --git a/src/views/area/defenceDetail.vue b/src/views/area/defenceDetail.vue
index e29a258..703ec7d 100644
--- a/src/views/area/defenceDetail.vue
+++ b/src/views/area/defenceDetail.vue
@@ -4,12 +4,14 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="区域名称">
-            <span>{{ dataForm.name }}</span>
+            <el-input v-model="dataForm.name" disabled type="text"/>
+            <!--<span>{{ dataForm.name }}</span>-->
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="防卫状态">
-            <span>{{ dataForm.areaStatusName }}</span>
+            <el-input v-model="dataForm.areaStatusName" disabled type="text"/>
+            <!--<span>{{ dataForm.areaStatusName }}</span>-->
           </el-form-item>
         </el-col>
       </el-row>
@@ -17,12 +19,14 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="区域类别">
-            <span>{{ dataForm.areaTypeName }}</span>
+            <el-input v-model="dataForm.areaTypeName" disabled type="text"/>
+            <!--<span>{{ dataForm.areaTypeName }}</span>-->
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="区域位置">
-            <span>{{ dataForm.position }}</span>
+            <el-input v-model="dataForm.position" disabled type="text"/>
+            <!--<span>{{ dataForm.position }}</span>-->
           </el-form-item>
         </el-col>
       </el-row>
@@ -38,7 +42,8 @@
       <el-row v-show="isFence" :gutter="20">
         <el-col :span="12">
           <el-form-item label="电子围栏">
-            <span>{{ dataForm.deviceStatusName }}</span>
+            <el-input v-model="dataForm.deviceStatusName" disabled type="text"/>
+            <!--<span>{{ dataForm.deviceStatusName }}</span>-->
           </el-form-item>
         </el-col>
       </el-row>
@@ -46,7 +51,8 @@
       <el-row :gutter="20">
         <el-col :span="24">
           <el-form-item label="备注" prop="remark">
-            <span>{{ dataForm.remark }}</span>
+            <el-input v-model="dataForm.remark" disabled type="text"/>
+            <!--<span>{{ dataForm.remark }}</span>-->
           </el-form-item>
         </el-col>
       </el-row>
diff --git a/src/views/area/defenceList.vue b/src/views/area/defenceList.vue
index 9e2ed68..8649918 100644
--- a/src/views/area/defenceList.vue
+++ b/src/views/area/defenceList.vue
@@ -31,9 +31,9 @@
       <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">批量导入</el-button>
-          <el-button class="edit_btn" size="small">导入模板下载</el-button>
-          <!--<el-button class="edit_btn" size="small" @click="batchExport">导出</el-button>-->
+          <!--<el-button class="edit_btn" size="small">批量导入</el-button>-->
+          <!--<el-button class="edit_btn" size="small">导入模板下载</el-button>-->
+          <!--<el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>-->
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>
diff --git a/src/views/car/carAdd.vue b/src/views/car/carAdd.vue
index 6a35b7d..633e353 100644
--- a/src/views/car/carAdd.vue
+++ b/src/views/car/carAdd.vue
@@ -20,14 +20,14 @@
         <el-col :span="12">
           <el-form-item label="所属部门" prop="deptid">
             <!--<span v-show="isDetailMode">{{ dataForm.deptName }}</span>-->
-            <el-select :disabled="isDetailMode" v-model="dataForm.deptid" placeholder="请选择所属部门" filterable clearable>
+            <el-select :disabled="isDetailMode" v-model="dataForm.deptid" placeholder="请选择所属部门" filterable clearable @change="getStaffList">
               <el-option v-for="item in deptList" :key="item.id" :label="item.name" :value="item.id"/>
             </el-select>
             <!--<dept-select v-show="!isDetailMode" v-model="dataForm.deptid" :dept-show="true" :need-top="true" placeholder="所属组织" @change="fetchStaffList"/>-->
           </el-form-item>
         </el-col>
         <el-col v-if="dataForm.property==='2'" :span="12">
-          <el-form-item label="车主" prop="owner">
+          <el-form-item label="车主" prop="ownerId">
             <!--<span v-show="isDetailMode">{{ dataForm.ownerName }}</span>-->
             <el-select :disabled="isDetailMode" v-model="dataForm.ownerId" placeholder="请选择车主" filterable clearable @change="autoStaffPhone">
               <el-option v-for="item in staffList" :key="item.id" :label="item.name" :value="item.id"/>
@@ -91,7 +91,7 @@
       rules: {
         phone: [{ required: true, trigger: ['blur', 'change'], validator: phoneValidator }],
         plateNumber: [{ required: true, trigger: ['blur', 'change'], validator: plateValidator }],
-        owner: [{ required: true, trigger: ['blur', 'change'], message: '请选择车主' }]
+        ownerId: [{ required: true, trigger: ['blur', 'change'], message: '请选择车主' }]
       }, // 前端校验规则
       carProperties: [], // 车辆性质字典值
       staffList: [], // 车主人员列表
@@ -137,6 +137,7 @@
           phone: row.phone,
           remark: row.remark
         }
+        this.getStaffList()
       } else if (dialogStatus === 'detail') {
         this.isDetailMode = true
         this.isEditMode = false
@@ -151,6 +152,7 @@
           deptName: row.deptName,
           ownerName: row.ownerName
         }
+        this.getStaffList()
       }
     },
     // 清除数据
@@ -180,6 +182,13 @@
       })
       getStaffByDept({ deptId: this.dataForm.deptid }).then(response => {
         this.staffList = response.data
+        console.log(response)
+      })
+    },
+    getStaffList(){
+      getStaffByDept({ deptId: this.dataForm.deptid }).then(response => {
+        this.staffList = response.data
+        console.log(response)
       })
     },
     autoStaffPhone() {
@@ -190,7 +199,6 @@
             return item
           }
         })
-
         this.dataForm.phone = selectedStaff[0].phone
       } else {
         this.dataForm.phone = ''
diff --git a/src/views/car/carList.vue b/src/views/car/carList.vue
index ceb77ff..d0c0176 100644
--- a/src/views/car/carList.vue
+++ b/src/views/car/carList.vue
@@ -31,7 +31,7 @@
       <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="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
           <el-button v-if="hasPerm('/door/car/add')" class="edit_btn" size="small" @click="add">新增</el-button>
           <!--          <el-button v-if="hasPerm('/door/car/delete')" v-show="false" class="edit_btn" size="small" @click="batchDel">删除</el-button>-->
         </el-col>
diff --git a/src/views/deviceManage/deviceList.vue b/src/views/deviceManage/deviceList.vue
index 5966b45..feb4b36 100644
--- a/src/views/deviceManage/deviceList.vue
+++ b/src/views/deviceManage/deviceList.vue
@@ -48,7 +48,7 @@
       <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="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border @selection-change="handleSelectionChange">
diff --git a/src/views/overview/doorIndex.vue b/src/views/overview/doorIndex.vue
index 03624bb..4f48bd0 100644
--- a/src/views/overview/doorIndex.vue
+++ b/src/views/overview/doorIndex.vue
@@ -285,6 +285,7 @@
         if (response.code === 200) {
           const that = this
           this.devList = []
+          console.log(response)
           response.data.forEach(dev => {
             if (dev.x !== '' && dev.y !== '') {
               that.devList.push(dev)
diff --git a/src/views/staff/staffDetail.vue b/src/views/staff/staffDetail.vue
index 8fc4c6d..50f7166 100644
--- a/src/views/staff/staffDetail.vue
+++ b/src/views/staff/staffDetail.vue
@@ -16,12 +16,14 @@
           <el-row :gutter="20">
             <el-col :span="12">
               <el-form-item label="姓名">
-                <span>{{ dataForm.name }}</span>
+                <el-input v-model="dataForm.name" disabled type="text"/>
+                <!--<span>{{ dataForm.name }}</span>-->
               </el-form-item>
             </el-col>
             <el-col :span="12">
               <el-form-item label="身份证号">
-                <span>{{ dataForm.idCard }}</span>
+                <el-input v-model="dataForm.idCard" disabled type="text"/>
+                <!--<span>{{ dataForm.idCard }}</span>-->
               </el-form-item>
             </el-col>
           </el-row>
@@ -29,12 +31,14 @@
           <el-row :gutter="20">
             <el-col :span="12">
               <el-form-item label="出生日期">
-                <span>{{ dataForm.birthday }}</span>
+                <el-input v-model="dataForm.birthday" disabled type="text"/>
+                <!--<span>{{ dataForm.birthday }}</span>-->
               </el-form-item>
             </el-col>
             <el-col :span="12">
               <el-form-item label="性别">
-                <span>{{ dataForm.sex }}</span>
+                <el-input v-model="dataForm.sex" disabled type="text"/>
+                <!--<span>{{ dataForm.sex }}</span>-->
               </el-form-item>
             </el-col>
           </el-row>
@@ -42,13 +46,15 @@
           <el-row :gutter="20">
             <el-col :span="12">
               <el-form-item label="所在部门">
-                <span>{{ dataForm.deptName }}</span>
+                <el-input v-model="dataForm.deptName" disabled type="text"/>
+                <!--<span>{{ dataForm.deptName }}</span>-->
               </el-form-item>
             </el-col>
 
             <el-col :span="12">
               <el-form-item label="联系电话">
-                <span>{{ dataForm.phone }}</span>
+                <el-input v-model="dataForm.phone" disabled type="text"/>
+                <!--<span>{{ dataForm.phone }}</span>-->
               </el-form-item>
             </el-col>
           </el-row>
@@ -56,7 +62,8 @@
           <el-row>
             <el-col :span="24">
               <el-form-item label="住址">
-                <span>{{ dataForm.address }}</span>
+                <el-input v-model="dataForm.address" disabled type="text"/>
+                <!--<span>{{ dataForm.address }}</span>-->
               </el-form-item>
             </el-col>
           </el-row>
diff --git a/src/views/staff/staffList.vue b/src/views/staff/staffList.vue
index 4a92b0c..c6ad796 100644
--- a/src/views/staff/staffList.vue
+++ b/src/views/staff/staffList.vue
@@ -44,7 +44,7 @@
           </el-upload>
           <download-template :filename="personImpTem" btnname="导入模板下载"/>
           <el-button v-if="hasPerm('/staff/delete')" size="small" class="edit_btn" @click="del">删除</el-button>
-          <el-button class="edit_btn" size="small" @click="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
           <el-button v-if="hasPerm('/staff/add')" class="edit_btn" size="small" @click="add">新增</el-button>
         </el-col>
       </el-row>
diff --git a/src/views/statistics/carDuration.vue b/src/views/statistics/carDuration.vue
index e4093d5..9cb4041 100644
--- a/src/views/statistics/carDuration.vue
+++ b/src/views/statistics/carDuration.vue
@@ -41,7 +41,7 @@
       <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="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>
diff --git a/src/views/statistics/inOutCar.vue b/src/views/statistics/inOutCar.vue
index 9371b0d..effdfb7 100644
--- a/src/views/statistics/inOutCar.vue
+++ b/src/views/statistics/inOutCar.vue
@@ -48,7 +48,7 @@
       <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="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>

diff --git a/src/router/modules/doorSys.js b/src/router/modules/doorSys.js
index 8017e4b..6bd1506 100644
--- a/src/router/modules/doorSys.js
+++ b/src/router/modules/doorSys.js
@@ -87,6 +87,20 @@
         name: 'DoorAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/door/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/door/alarm/position',
+        name: 'DoorAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/door/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/door/alarm/video',
+        name: 'DoorAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/door/alarm/video'], keepAlive: true }
       }
     ]
   },
@@ -262,5 +276,26 @@
         meta: { title: '营门出入次数统计', icon: '', permission: ['/door/statistics/doorCount'], keepAlive: true }
       }
     ]
+  },
+  {
+    path: '/door/area',
+    component: Layout,
+    redirect: '/door/area',
+    name: 'DoorArea',
+    alwaysShow: true,
+    meta: {
+      title: '区域管理',
+      icon: 'icon-area', // 图标
+      permission: ['/door/area'], // 权限名称
+      sys: '/door'
+    },
+    children: [
+      {
+        path: '/door/area/list',
+        name: 'DoorAreaList',
+        component: () => import('@/views/area/areaList'),
+        meta: { title: '区域列表', icon: '', permission: ['/door/area/list'], keepAlive: true }
+      }
+    ]
   }
 ]
diff --git a/src/router/modules/fenceSys.js b/src/router/modules/fenceSys.js
index 0d784b0..e2962bd 100644
--- a/src/router/modules/fenceSys.js
+++ b/src/router/modules/fenceSys.js
@@ -85,6 +85,20 @@
         name: 'FenceAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/fence/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/fence/alarm/position',
+        name: 'FenceAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/fence/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/fence/alarm/video',
+        name: 'FenceAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/fence/alarm/video'], keepAlive: true }
       }
     ]
   },
diff --git a/src/router/modules/keySys.js b/src/router/modules/keySys.js
index f3a027b..832744b 100644
--- a/src/router/modules/keySys.js
+++ b/src/router/modules/keySys.js
@@ -85,6 +85,20 @@
         name: 'KeyAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/key/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/key/alarm/position',
+        name: 'KeyAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/key/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/key/alarm/video',
+        name: 'KeyAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/key/alarm/video'], keepAlive: true }
       }
     ]
   },
diff --git a/src/router/modules/regionSys.js b/src/router/modules/regionSys.js
index 9b4613a..43b8c38 100644
--- a/src/router/modules/regionSys.js
+++ b/src/router/modules/regionSys.js
@@ -85,6 +85,20 @@
         name: 'RegionAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/region/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/region/alarm/position',
+        name: 'RegionAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/region/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/region/alarm/video',
+        name: 'RegionAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/region/alarm/video'], keepAlive: true }
       }
     ]
   },
@@ -102,6 +116,20 @@
     },
     children: [
       {
+        path: '/region/staff/add',
+        name: 'RegionStaffAdd',
+        component: () => import('@/views/staff/staffAdd'),
+        hidden: true,
+        meta: { title: '人员登记', icon: '', permission: ['/region/staff/add'], keepAlive: true }
+      },
+      {
+        path: '/region/staff/edit',
+        name: 'RegionStaffEdit',
+        component: () => import('@/views/staff/staffEdit'),
+        hidden: true,
+        meta: { title: '人员编辑', icon: '', permission: ['/region/staff/edit'], keepAlive: true }
+      },
+      {
         path: '/region/staff/list',
         name: 'RegionStaffList',
         component: () => import('@/views/staff/staffList'),
diff --git a/src/views/alarm/alarmList.vue b/src/views/alarm/alarmList.vue
index 704f797..91967a0 100644
--- a/src/views/alarm/alarmList.vue
+++ b/src/views/alarm/alarmList.vue
@@ -37,7 +37,7 @@
             </el-col>
 
             <el-col :span="4" 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" @click="fetchData()">搜索</el-button>
             </el-col>
           </el-row>
         </el-form>
@@ -48,7 +48,7 @@
       <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="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>
@@ -66,8 +66,8 @@
         <!--操作列-->
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
-            <el-button type="text" @click="detail(scope.row)">位置</el-button>
-            <el-button v-if="hasPerm('/car/update')" type="text" @click="edit(scope.row)">视频</el-button>
+            <el-button type="text" @click="position(scope.row)">位置</el-button>
+            <el-button v-if="hasPerm('/car/update')" type="text" @click="video(scope.row)">视频</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -185,6 +185,14 @@
     this.fetchData() // 获取数据
   },
   methods: {
+    video(row){
+      const code = this.$store.getters.currentSystem.code
+      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId }})
+    },
+    position(row){
+      const code = this.$store.getters.currentSystem.code
+      this.$router.push({ path: '/' + code + '/alarm/position', query: {  id: row.deviceId }})
+    },
     batchExport() {
       // 全屏加载动画
       const loading = this.$loading({
@@ -254,6 +262,8 @@
       getAlarmList(this.listQuery).then(response => {
         if (response.code === 200) {
           this.list = response.data.rows
+          console.log('&&&')
+          console.log(this.list)
           this.total = parseInt(response.data.total)
         } else {
           this.$message.error(response.message)
diff --git a/src/views/alarm/alarmMonitor.vue b/src/views/alarm/alarmMonitor.vue
new file mode 100644
index 0000000..517d6e9
--- /dev/null
+++ b/src/views/alarm/alarmMonitor.vue
@@ -0,0 +1,80 @@
+<template>
+  <div>
+    <el-row>
+      <!--<el-col :span="6">-->
+        <!--&lt;!&ndash;<video-tree @click="handleCameraClicked"/>&ndash;&gt;-->
+      <!--</el-col>-->
+
+      <el-col :span="18" :offset="3">
+        <web-play ref="webCtrl" />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+// import VideoTree from './videoTree'
+import WebPlay from './webPlay'
+import { getDetailDevice } from '@/api/device'
+export default {
+  name: 'VideoMonitor',
+  components: { WebPlay },
+  data() {
+    return {
+      camera:{
+        ip:'',
+        port:'',
+        username:'',
+        password:''
+      }
+    }
+  },
+  mounted() {
+
+  },
+  activated() {
+    if (this.$route.query && this.$route.query.id) {
+      const id = this.$route.query.id
+      getDetailDevice(id).then(response => {
+          if (response.code === 200) {
+            console.log(response.data)
+            this.camera.ip = response.data.ip
+            this.camera.port = response.data.port
+            this.camera.username = response.data.username
+            this.camera.password = response.data.password
+            this.handleCamera()
+          }
+      })
+    }
+  },
+  methods: {
+    handleCamera(){
+      if (typeof this.camera.ip === 'undefined' || this.camera.ip === '') {
+        console.log('ip is null')
+        return false
+      }
+      if (typeof this.camera.port === 'undefined' || this.camera.port === '') {
+        console.log('port is null')
+        return false
+      }else{
+        this.camera.ip += (':'+ this.camera.port)
+      }
+      if (typeof this.camera.username === 'undefined' || this.camera.username === '') {
+        console.log('username is null')
+        return false
+      }
+      if (typeof this.camera.password === 'undefined' || this.camera.password === '') {
+        console.log('password is null')
+        return false
+      }
+
+      // 开始预览
+      this.$refs.webCtrl.$refs.play.contentWindow.startPlayReal(this.camera)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/alarm/alarmNow.vue b/src/views/alarm/alarmNow.vue
index 03bb5ea..66055b1 100644
--- a/src/views/alarm/alarmNow.vue
+++ b/src/views/alarm/alarmNow.vue
@@ -48,7 +48,7 @@
       <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="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>
@@ -66,8 +66,8 @@
         <el-table-column label="操作" align="center" width="180">
           <template slot-scope="scope">
             <el-button v-if="hasPerm('/alarm/cancel')" type="text" @click="alarmCancel(scope.row)">取消报警</el-button>
-            <el-button type="text" @click="detail(scope.row)">位置</el-button>
-            <el-button type="text" @click="edit(scope.row)">视频</el-button>
+            <el-button type="text" @click="position(scope.row)">位置</el-button>
+            <el-button v-if="hasPerm('/car/update')" type="text" @click="video(scope.row)">视频</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -183,6 +183,14 @@
     this.fetchData() // 获取数据
   },
   methods: {
+    video(row){
+      const code = this.$store.getters.currentSystem.code
+      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId }})
+    },
+    position(row){
+      const code = this.$store.getters.currentSystem.code
+      this.$router.push({ path: '/' + code + '/alarm/position', query: {  id: row.deviceId }})
+    },
     batchExport() {
       // 全屏加载动画
       const loading = this.$loading({
diff --git a/src/views/alarm/alarmPosition.vue b/src/views/alarm/alarmPosition.vue
new file mode 100644
index 0000000..51f915e
--- /dev/null
+++ b/src/views/alarm/alarmPosition.vue
@@ -0,0 +1,786 @@
+<template>
+  <div class="main-page">
+    <!-- 中间平面图区域 -->
+    <div class="map-overview">
+      <img ref="bgImg" :src="bgImageSrc" height="100%" @load="backgroundImageReady">
+
+      <div
+        v-for="item in devList"
+        :id="item.id"
+        :key="item.id"
+        :style="{ position: 'absolute', top: item.y * imgSize.height / imgSizeOriginal.height + 'px', left: (item.x * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
+        class="point-camera"
+        @click="detailDev(item, $event)" />
+    </div>
+    <!-- 右侧设备详情及操作区域 -->
+    <div v-show="showDevDetail" ref="dev-detail-block" class="dev-detail-block">
+      <span class="dev-detail-close" @click="showDevDetail=false" />
+      <el-row style="margin-top: -25px;">
+        <el-col :span="24">设备名称
+          <span class="dev-detail-span">{{ dataForm.name }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">设备编号
+          <span class="dev-detail-span">{{ dataForm.devcode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">设备类型
+          <span class="dev-detail-span">{{ dataForm.typeName }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">在线状态
+          <span class="dev-detail-span">{{ dataForm.onlineStatusName }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">安装日期
+          <span class="dev-detail-span">{{ dataForm.installDate }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">安装位置
+          <span class="dev-detail-span">{{ dataForm.position }}</span>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getProject } from '@/utils/baseConfig'
+import DeviceDetail from '@/views/deviceManage/deviceDetail'
+import tg_main from '../../assets/overview_images/tg/mapOverviewTg.jpg'
+import tg_3_1 from '../../assets/overview_images/tg/mapOverviewTg-3-1.jpg'
+import tg_4_1 from '../../assets/overview_images/tg/mapOverviewTg-4-1.jpg'
+import tg_4_5 from '../../assets/overview_images/tg/mapOverviewTg-4-5.jpg'
+import { getDetailDevice } from '@/api/device'
+
+// const cameraTypes = [4, 5, 8, 9, 10, 11]
+export default {
+  name: 'AlarmPosition',
+  components: { DeviceDetail },
+  data() {
+    return {
+      title: getProject().title,
+      bgImageSrc: tg_main,
+      devListParams: {
+        picture: '1',
+        areaTypeId: 1,
+        deviceTypes: []
+      },
+      dev: {
+        alarm: 0,
+        onLine: 0,
+        closed: 0,
+        offLine: 0
+      },
+      imgSizeOriginal: {
+        width: 2245,
+        height: 1586
+      }, // 图片原尺寸
+      imgSize: {
+        width: 2245,
+        height: 1586
+      }, // 图片显示尺寸
+      winSize: {
+        width: 1440,
+        height: 789
+      }, // 屏幕窗口尺寸
+      halfLeft: 0,
+      showDevDetail: false, // 是否显示设备详情
+      alarmList: [], // 报警列表
+      alarmColumns: [
+        {
+          text: '设备编号',
+          value: 'devcode',
+          align: 'center'
+        },
+        {
+          text: '报警内容',
+          value: 'alarmContent',
+          align: 'center'
+        },
+        {
+          text: '报警时间',
+          value: 'alarmTime',
+          align: 'center',
+          width: 165
+        }
+      ], // 报警列表显示列
+      tableShow: true, // 是否显示告警列表
+      devList: [], // 设备列表（在地图上显示）
+      dataForm: {
+        id: '', // id
+        name: '', // 设备名
+        devcode: '', // 设备编号
+        typeName: '', // 设备类型
+        model: '', // 设备型号
+        onlineStatusName: '', // 在线状态
+        deviceStatusName: '', // 设备状态
+        position: '', // 安装位置
+        installDate: '', // 安装日期
+        inOutName: '' // 进出营
+      }, // 设备详情表单
+      devPosition:{
+        picture: '',
+        x: '',
+        y: ''
+      },
+      checkDevType: [true, false] // 选中设备类型
+    }
+  },
+  mounted() {
+    this.initWindowSize()
+    if (this.$route.query && this.$route.query.id) {
+      const id = this.$route.query.id
+      getDetailDevice(id).then(response => {
+        if (response.code === 200) {
+          console.log(response.data)
+          this.devPosition.picture = response.data.picture
+          this.devPosition.x = response.data.x
+          this.devPosition.y = response.data.y
+          if(this.devPosition.picture === '1'){
+            this.bgImageSrc = tg_main
+          }else if(this.devPosition.picture === '2'){
+            this.bgImageSrc = tg_3_1
+          }else if(this.devPosition.picture === '3'){
+            this.bgImageSrc = tg_4_1
+          }else if(this.devPosition.picture === '4'){
+            this.bgImageSrc = tg_4_5
+          }else{
+            this.$message.warning('该设备暂无位置信息')
+            return
+          }
+          this.devList = []
+          if (this.devPosition.x !== '' && this.devPosition.y !== '') {
+            this.devList.push(response.data)
+          }
+        }
+      })
+    }
+    const that = this
+    window.onresize = function() {
+      that.initWindowSize()
+      that.getBgImageSize()
+    }
+  },
+  methods: {
+    // 获取窗口大小
+    initWindowSize() {
+      // 获取窗体尺寸
+      this.winSize = {
+        width: document.documentElement.clientWidth,
+        height: document.documentElement.clientHeight
+      }
+    },
+    // 获取图像大小
+    getBgImageSize() {
+      // 获取图片尺寸
+      this.imgSize = {
+        width: this.$refs['bgImg'].width,
+        height: this.$refs['bgImg'].height
+      }
+      this.halfLeft = (this.winSize.width - this.imgSize.width) / 2
+    },
+    // 重新绘制设备点位
+    reDrawDevs() {
+      const halfLeft = (this.winSize.width - this.imgSize.width) / 2
+
+      // 调整球机的设备位置
+      const that = this
+      this.devList.forEach(function(item) {
+        const point = document.getElementById(item.id)
+
+        if (point !== null) {
+          if (item.x !== '' && item.y !== '') {
+            point.style.position = 'absolute'
+            point.style.top = item.y * that.imgSize.height / that.imgSizeOriginal.height + 'px'
+            point.style.left = (item.x * that.imgSize.width / that.imgSizeOriginal.width + halfLeft) + 'px'
+          } else {
+            point.style.display = 'none'
+          }
+        }
+      })
+    },
+    // 平面图就绪时执行函数
+    backgroundImageReady() {
+      this.getBgImageSize()
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    },
+    backToIndex() {
+      this.$router.push('/door/alarm/now')
+    },
+    // 查询并显示设备详情
+    detailDev(dev, event) {
+      this.resetDevDetail()
+      getDetailDevice(dev.id).then(response => {
+        if (response.code === 200) {
+          this.dataForm = {
+            id: dev.id,
+            name: dev.name,
+            devcode: dev.devcode,
+            typeName: response.data.typeName,
+            model: dev.model,
+            onlineStatusName: response.data.onlineStatusName,
+            position: dev.position,
+            installDate: dev.installDate,
+            inOutName: response.data.inOutName,
+            deviceStatusName: response.data.deviceStatusName
+          }
+        } else {
+          this.$message.error(response.message)
+        }
+      })
+
+      // 弹窗显示设备详情
+      const targetDev = event.currentTarget // 取到点击到的设备图标div
+
+      this.showDevDetail = true
+      let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+      top = top + 100
+      this.$refs['dev-detail-block'].style.position = 'absolute'
+      this.$refs['dev-detail-block'].style.top = top + 'px'
+      this.$refs['dev-detail-block'].style.left = targetDev.style.left
+    },
+    // 点击报警列表
+    alarmRowClick(dev, column, event) {
+
+    },
+    // 清除设备详情
+    resetDevDetail() {
+      this.dataForm = {
+        id: '', // id
+        name: '', // 设备名
+        devcode: '', // 设备编号
+        typeName: '', // 设备类型
+        model: '', // 设备型号
+        onlineStatusName: '', // 在线状态
+        deviceStatusName: '', // 设备状态
+        position: '', // 安装位置
+        installDate: '', // 安装日期
+        inOutName: '' // 进出营
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+  .main-page {
+    background-size: cover;
+    background-color: #023d83;
+    height: 100vh;
+  }
+
+  .main-header {
+    width: 100vw;
+  }
+  .main-title {
+    height: 90px;
+    text-align: center;
+    padding-top: 20px;
+    background: url("../../assets/overview_images/title-background-1920.png");
+  }
+
+  .main-title img {
+    display: inline-block;
+    margin-right: 15px;
+    width: 52px;
+    height: 32px;
+    vertical-align: text-bottom;
+  }
+
+  .home-icon {
+    width: 26px;
+    height: 26px;
+    position: fixed;
+    left: 20px;
+    top: 20px;
+  }
+  .exit-icon {
+    width: 26px;
+    height: 26px;
+    position: fixed;
+    right: 20px;
+    top: 20px;
+  }
+  .home-icon img, .exit-icon img {
+    width: 26px;
+    height: 26px;
+  }
+
+  .main-title span {
+    color: #FFFFFF;
+    font-size: 32px;
+    font-weight: bold;
+    font-family: 'Microsoft YaHei';
+  }
+
+  .map-overview {
+    /*margin-top: 50px;*/
+    /*width: 1100px;*/
+    height: calc(90vh - 200px);
+    text-align: center;
+    position: relative;
+  }
+  .point {
+    width: 24px;
+    height: 24px;
+    position: relative;
+    display: inline-block;
+    cursor: pointer;
+  }
+  .point-camera {
+    background: url("../../assets/overview_images/icons/icon-camera-point.png");
+    background-size: contain;
+    @extend .point;
+  }
+  .point-fence {
+    background: url("../../assets/overview_images/icons/icon-fence-unchecked.png");
+    background-size: contain;
+    @extend .point;
+  }
+
+  .statis-block {
+    text-align: center;
+    margin-top: 20px;
+    font-size: 48px;
+  }
+  .sub-title {
+    text-align: center;
+    font-size: 32px;
+  }
+  .sub-data-block {
+    width: 122px;
+    height: 155px;
+  }
+  .dev-normal {
+    background: url("../../assets/overview_images/normal.png");
+    background-size: contain;
+    color: #00ff0c;
+  }
+  .dev-alarm {
+    background: url("../../assets/overview_images/alarm.png");
+    background-size: contain;
+    color: #ff0000;
+  }
+  .dev-offline {
+    background: url("../../assets/overview_images/offline.png");
+    background-size: contain;
+    color: #fff000;
+  }
+  .dev-closed {
+    background: url("../../assets/overview_images/closed.png");
+    background-size: contain;
+    color: #00fff6;
+  }
+
+  .dev-status-block {
+    position: absolute;
+    top: 100px;
+    left: 20px;
+    color: #ffffff;
+  }
+
+  .alarm-now-block {
+    position: absolute;
+    z-index: 500;
+    top: 300px;
+    left: 20px;
+    width: 480px;
+    .map-alarm-div-header {
+      line-height: 40px;
+      padding-left: 10px;
+      color: #00fff6;
+      font-size: 24px;
+      .icon-right {
+        cursor: pointer;
+        margin-left: 20px;
+      }
+    }
+    .el-scrollbar {
+      /*height: 200px;*/
+      width: 100%;
+    }
+    .moredatascollor {
+      height: 200px;
+    }
+    .el-scrollbar__wrap {
+      overflow-y: auto;
+      overflow-x: hidden;
+      margin-bottom: 0px !important;
+    }
+    .el-table {
+      font-size: 12px;
+    }
+    .transition-box {
+      margin-bottom: 10px;
+      width: 200px;
+      height: 100px;
+      border-radius: 4px;
+      background-color: #409EFF;
+      text-align: center;
+      color: #fff;
+      padding: 40px 20px;
+      box-sizing: border-box;
+      margin-right: 20px;
+    }
+  }
+
+  .alarm-now-block /deep/ .el-table th {
+    background-color: #0757A0;
+    padding: 12px 0px;
+    font-size: 16px;
+    color: #00fff6;
+    font-weight: normal;
+  }
+
+  .alarm-now-block /deep/ .el-table td {
+    /*background-color: #0757A0;*/
+    padding: 10px 0px;
+    font-size: 15px;
+    color: #FFFFFF;
+    font-weight: normal;
+  }
+
+  .alarm-now-block /deep/ .el-table__row td {
+    background-color: #023D83;
+  }
+  .alarm-now-block /deep/ .el-table__body tr:hover > td {
+    background-color: #0757A0;
+  }
+  .alarm-now-block /deep/ tr.el-table__row--striped td {
+    background-color: #0757A0;
+  }
+
+  .map-tab {
+    position: absolute;
+    right: 20px;
+    top: 100px;
+    width: 300px;
+    button {
+      margin: 5px 0px;
+    }
+  }
+
+  .tab-top {
+    position: relative;
+    width: 284px;
+    height: 24px;
+    background: url("../../assets/overview_images/tab-top-bg.png");
+  }
+  .tab-bottom {
+    position: relative;
+    width: 284px;
+    height: 24px;
+    background: url("../../assets/overview_images/tab-bottom-bg.png");
+  }
+  .map-index-button {
+    position: relative;
+    width: 284px;
+    height: 74px;
+    background: url("../../assets/overview_images/tab-index-unchecked.png");
+    font-size: 32px;
+    line-height: 74px;
+    text-align: center;
+    color: #FFFFFF;
+    cursor: pointer;
+  }
+  .index-selected {
+    background: url("../../assets/overview_images/tab-index-checked.png");
+  }
+  .sub-tab-guider {
+    width: 149px;
+    height: 50px;
+    background: url("../../assets/overview_images/sub-tab-guider.png");
+  }
+  .sub-tab-border {
+    width: 204px;
+    height: 253px;
+    background: url("../../assets/overview_images/sub-tab-border.png");
+  }
+  .sub-tab-content {
+    text-align: center;
+    color: #FFFFFF;
+    font-size: 28px;
+    cursor: pointer;
+    width: 200px;
+  }
+
+  .dev-detail-block {
+    /*position: absolute;*/
+    /*right: 20px;*/
+    /*bottom: 100px;*/
+    width: 520px;
+    height: 335px;
+    color: #00FFFF;
+    font-size: 24px;
+    font-family: "Microsoft YaHei";
+    padding: 45px 60px;
+    line-height: 35px;
+    background: url("../../assets/overview_images/dev-info.png");
+    .dev-detail-span {
+      margin-left: 20px;
+    }
+    .dev-detail-close::before {
+      content: "\2716";
+      position: relative;
+      top: -20px;
+      right: -410px;
+      cursor: pointer;
+    }
+  }
+
+  .dev-footer {
+    position: absolute;
+    bottom: 25px;
+  }
+
+  .dev-icon {
+    width: 195px;
+    height: 105px;
+    vertical-align: middle;
+    line-height: 65px;
+    padding: 20px 30px !important;
+    margin-left: 15px;
+    cursor: pointer;
+    background: url("../../assets/overview_images/dev-type-border-unchecked.png");
+  }
+
+  .dev-icon img {
+    height: 40px;
+    vertical-align:middle;
+  }
+  .dev-icon span {
+    font-size: 20px;
+    color: #00D2FF;
+    line-height: 65px;
+    height: 65px;
+    vertical-align:middle;
+    float: right;
+  }
+
+  .dev-type-selected {
+    background: url("../../assets/overview_images/dev-type-border-checked.png");
+  }
+  .dev-type-selected span {
+    color: #f58a88 !important;
+  }
+
+  /*@media(max-width: 1440px) {*/
+  /*  .main-title {*/
+  /*    height: 68px;*/
+  /*    padding-top: 20px;*/
+  /*    background: url("../../assets/overview_images/title-background-1440.png");*/
+  /*  }*/
+  /*  .main-title span {*/
+  /*    font-size: 24px;*/
+  /*  }*/
+  /*  .main-title img {*/
+  /*    margin-right: 15px;*/
+  /*    width: 32px;*/
+  /*    height: 32px;*/
+  /*  }*/
+
+  /*  .home-icon {*/
+  /*    left: 18px;*/
+  /*    width: 18px;*/
+  /*    height: 18px;*/
+  /*  }*/
+  /*  .exit-icon {*/
+  /*    right: 18px;*/
+  /*    width: 18px;*/
+  /*    height: 18px;*/
+  /*  }*/
+
+  /*  .home-icon img, .exit-icon img {*/
+  /*    width: 18px;*/
+  /*    height: 18px;*/
+  /*  }*/
+
+  /*  .dev-icon span {*/
+  /*    font-size: 12px;*/
+  /*  }*/
+  /*}*/
+
+  @media(max-width: 1440px) {
+    .main-title {
+      height: 65px;
+      padding-top: 16px;
+      background: url("../../assets/overview_images/title-background-1366.png");
+    }
+    .main-title span {
+      font-size: 24px;
+    }
+    .main-title img {
+      margin-right: 15px;
+      width: 32px;
+      height: 32px;
+    }
+
+    .home-icon {
+      left: 16px;
+      width: 16px;
+      height: 16px;
+    }
+    .exit-icon {
+      right: 16px;
+      width: 16px;
+      height: 16px;
+    }
+
+    .home-icon img, .exit-icon img {
+      width: 20px;
+      height: 20px;
+    }
+
+    .map-overview {
+      margin-top: 35px;
+      height: calc(90vh - 150px);
+    }
+
+    .point {
+      width: 16px;
+      height: 16px;
+    }
+
+    .statis-block {
+      margin-top: 16px;
+      font-size: 36px;
+    }
+    .sub-title {
+      font-size: 24px;
+    }
+    .sub-data-block {
+      width: 90px;
+      height: 114px;
+    }
+
+    .dev-normal {
+      background: url("../../assets/overview_images/normal-1366.png");
+    }
+    .dev-alarm {
+      background: url("../../assets/overview_images/alarm-1366.png");
+    }
+    .dev-offline {
+      background: url("../../assets/overview_images/offline-1366.png");
+    }
+    .dev-closed {
+      background: url("../../assets/overview_images/closed-1366.png");
+    }
+
+    .dev-status-block {
+      top: 90px;
+      left: 16px;
+    }
+
+    .alarm-now-block {
+      top: 220px;
+      left: 16px;
+      width: 360px;
+      .map-alarm-div-header {
+        line-height: 32px;
+        font-size: 20px;
+      }
+    }
+
+    .alarm-now-block /deep/ .el-table th {
+      padding: 8px 0px;
+      font-size: 16px;
+    }
+    .alarm-now-block /deep/ .el-table td {
+      padding: 5px 0px;
+      font-size: 12px;
+    }
+
+    .map-tab {
+      right: 16px;
+      top: 90px;
+      width: 215px;
+      button {
+        margin: 5px 0px;
+      }
+    }
+    .tab-top {
+      width: 213px;
+      height: 18px;
+      background: url("../../assets/overview_images/tab-top-bg-1366.png");
+    }
+    .tab-bottom {
+      width: 213px;
+      height: 18px;
+      background: url("../../assets/overview_images/tab-bottom-bg-1366.png");
+    }
+    .map-index-button {
+      width: 210px;
+      height: 56px;
+      background: url("../../assets/overview_images/tab-index-unchecked-1366.png");
+      font-size: 24px;
+      line-height: 56px;
+    }
+    .index-selected {
+      background: url("../../assets/overview_images/tab-index-checked-1366.png");
+    }
+
+    .sub-tab-guider {
+      width: 110px;
+      height: 37px;
+      background: url("../../assets/overview_images/sub-tab-guider-1366.png");
+    }
+    .sub-tab-border {
+      width: 150px;
+      height: 186px;
+      background: url("../../assets/overview_images/sub-tab-border-1366.png");
+    }
+    .sub-tab-content {
+      font-size: 20px;
+      cursor: pointer;
+      width: 145px;
+    }
+
+    .dev-detail-block {
+      width: 390px;
+      height: 251px;
+      font-size: 16px;
+      padding: 30px 40px;
+      line-height: 28px;
+      background: url("../../assets/overview_images/dev-info-1366.png");
+      .dev-detail-close::before {
+        top: -12px;
+        right: -312px;
+      }
+    }
+
+    .dev-footer {
+      bottom: 20px;
+    }
+    .dev-icon {
+      width: 140px;
+      height: 76px;
+      line-height: 56px;
+      padding: 10px 16px !important;
+      margin-left: 15px;
+      background: url("../../assets/overview_images/dev-type-border-unchecked-1366.png");
+    }
+    .dev-icon img {
+      height: 32px;
+    }
+    .dev-icon span {
+      font-size: 16px;
+      line-height: 56px;
+      height: 56px;
+    }
+    .dev-type-selected {
+      background: url("../../assets/overview_images/dev-type-border-checked-1366.png");
+    }
+  }
+
+</style>
diff --git a/src/views/alarm/webPlay.vue b/src/views/alarm/webPlay.vue
new file mode 100644
index 0000000..97e5ed2
--- /dev/null
+++ b/src/views/alarm/webPlay.vue
@@ -0,0 +1,21 @@
+<template>
+  <div class="play-window-block">
+    <div style="height: 100%">
+      <iframe ref="play" src="/static/webCtrl/demo-easy.html" width="100%" height="100%" style="border: 0px; overflow: hidden;" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'WebPlay'
+}
+</script>
+
+<style scoped>
+  .play-window-block {
+    margin: 15px 15px 15px 0px;
+    box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
+    height: calc(100vh - 175px);
+  }
+</style>
diff --git a/src/views/area/areaList.vue b/src/views/area/areaList.vue
index 1950028..11dc51f 100644
--- a/src/views/area/areaList.vue
+++ b/src/views/area/areaList.vue
@@ -31,7 +31,7 @@
       <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="batchExport">导出</el-button>-->
+          <!--<el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>-->
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>
diff --git a/src/views/area/defenceDetail.vue b/src/views/area/defenceDetail.vue
index e29a258..703ec7d 100644
--- a/src/views/area/defenceDetail.vue
+++ b/src/views/area/defenceDetail.vue
@@ -4,12 +4,14 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="区域名称">
-            <span>{{ dataForm.name }}</span>
+            <el-input v-model="dataForm.name" disabled type="text"/>
+            <!--<span>{{ dataForm.name }}</span>-->
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="防卫状态">
-            <span>{{ dataForm.areaStatusName }}</span>
+            <el-input v-model="dataForm.areaStatusName" disabled type="text"/>
+            <!--<span>{{ dataForm.areaStatusName }}</span>-->
           </el-form-item>
         </el-col>
       </el-row>
@@ -17,12 +19,14 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="区域类别">
-            <span>{{ dataForm.areaTypeName }}</span>
+            <el-input v-model="dataForm.areaTypeName" disabled type="text"/>
+            <!--<span>{{ dataForm.areaTypeName }}</span>-->
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="区域位置">
-            <span>{{ dataForm.position }}</span>
+            <el-input v-model="dataForm.position" disabled type="text"/>
+            <!--<span>{{ dataForm.position }}</span>-->
           </el-form-item>
         </el-col>
       </el-row>
@@ -38,7 +42,8 @@
       <el-row v-show="isFence" :gutter="20">
         <el-col :span="12">
           <el-form-item label="电子围栏">
-            <span>{{ dataForm.deviceStatusName }}</span>
+            <el-input v-model="dataForm.deviceStatusName" disabled type="text"/>
+            <!--<span>{{ dataForm.deviceStatusName }}</span>-->
           </el-form-item>
         </el-col>
       </el-row>
@@ -46,7 +51,8 @@
       <el-row :gutter="20">
         <el-col :span="24">
           <el-form-item label="备注" prop="remark">
-            <span>{{ dataForm.remark }}</span>
+            <el-input v-model="dataForm.remark" disabled type="text"/>
+            <!--<span>{{ dataForm.remark }}</span>-->
           </el-form-item>
         </el-col>
       </el-row>
diff --git a/src/views/area/defenceList.vue b/src/views/area/defenceList.vue
index 9e2ed68..8649918 100644
--- a/src/views/area/defenceList.vue
+++ b/src/views/area/defenceList.vue
@@ -31,9 +31,9 @@
       <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">批量导入</el-button>
-          <el-button class="edit_btn" size="small">导入模板下载</el-button>
-          <!--<el-button class="edit_btn" size="small" @click="batchExport">导出</el-button>-->
+          <!--<el-button class="edit_btn" size="small">批量导入</el-button>-->
+          <!--<el-button class="edit_btn" size="small">导入模板下载</el-button>-->
+          <!--<el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>-->
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>
diff --git a/src/views/car/carAdd.vue b/src/views/car/carAdd.vue
index 6a35b7d..633e353 100644
--- a/src/views/car/carAdd.vue
+++ b/src/views/car/carAdd.vue
@@ -20,14 +20,14 @@
         <el-col :span="12">
           <el-form-item label="所属部门" prop="deptid">
             <!--<span v-show="isDetailMode">{{ dataForm.deptName }}</span>-->
-            <el-select :disabled="isDetailMode" v-model="dataForm.deptid" placeholder="请选择所属部门" filterable clearable>
+            <el-select :disabled="isDetailMode" v-model="dataForm.deptid" placeholder="请选择所属部门" filterable clearable @change="getStaffList">
               <el-option v-for="item in deptList" :key="item.id" :label="item.name" :value="item.id"/>
             </el-select>
             <!--<dept-select v-show="!isDetailMode" v-model="dataForm.deptid" :dept-show="true" :need-top="true" placeholder="所属组织" @change="fetchStaffList"/>-->
           </el-form-item>
         </el-col>
         <el-col v-if="dataForm.property==='2'" :span="12">
-          <el-form-item label="车主" prop="owner">
+          <el-form-item label="车主" prop="ownerId">
             <!--<span v-show="isDetailMode">{{ dataForm.ownerName }}</span>-->
             <el-select :disabled="isDetailMode" v-model="dataForm.ownerId" placeholder="请选择车主" filterable clearable @change="autoStaffPhone">
               <el-option v-for="item in staffList" :key="item.id" :label="item.name" :value="item.id"/>
@@ -91,7 +91,7 @@
       rules: {
         phone: [{ required: true, trigger: ['blur', 'change'], validator: phoneValidator }],
         plateNumber: [{ required: true, trigger: ['blur', 'change'], validator: plateValidator }],
-        owner: [{ required: true, trigger: ['blur', 'change'], message: '请选择车主' }]
+        ownerId: [{ required: true, trigger: ['blur', 'change'], message: '请选择车主' }]
       }, // 前端校验规则
       carProperties: [], // 车辆性质字典值
       staffList: [], // 车主人员列表
@@ -137,6 +137,7 @@
           phone: row.phone,
           remark: row.remark
         }
+        this.getStaffList()
       } else if (dialogStatus === 'detail') {
         this.isDetailMode = true
         this.isEditMode = false
@@ -151,6 +152,7 @@
           deptName: row.deptName,
           ownerName: row.ownerName
         }
+        this.getStaffList()
       }
     },
     // 清除数据
@@ -180,6 +182,13 @@
       })
       getStaffByDept({ deptId: this.dataForm.deptid }).then(response => {
         this.staffList = response.data
+        console.log(response)
+      })
+    },
+    getStaffList(){
+      getStaffByDept({ deptId: this.dataForm.deptid }).then(response => {
+        this.staffList = response.data
+        console.log(response)
       })
     },
     autoStaffPhone() {
@@ -190,7 +199,6 @@
             return item
           }
         })
-
         this.dataForm.phone = selectedStaff[0].phone
       } else {
         this.dataForm.phone = ''
diff --git a/src/views/car/carList.vue b/src/views/car/carList.vue
index ceb77ff..d0c0176 100644
--- a/src/views/car/carList.vue
+++ b/src/views/car/carList.vue
@@ -31,7 +31,7 @@
       <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="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
           <el-button v-if="hasPerm('/door/car/add')" class="edit_btn" size="small" @click="add">新增</el-button>
           <!--          <el-button v-if="hasPerm('/door/car/delete')" v-show="false" class="edit_btn" size="small" @click="batchDel">删除</el-button>-->
         </el-col>
diff --git a/src/views/deviceManage/deviceList.vue b/src/views/deviceManage/deviceList.vue
index 5966b45..feb4b36 100644
--- a/src/views/deviceManage/deviceList.vue
+++ b/src/views/deviceManage/deviceList.vue
@@ -48,7 +48,7 @@
       <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="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border @selection-change="handleSelectionChange">
diff --git a/src/views/overview/doorIndex.vue b/src/views/overview/doorIndex.vue
index 03624bb..4f48bd0 100644
--- a/src/views/overview/doorIndex.vue
+++ b/src/views/overview/doorIndex.vue
@@ -285,6 +285,7 @@
         if (response.code === 200) {
           const that = this
           this.devList = []
+          console.log(response)
           response.data.forEach(dev => {
             if (dev.x !== '' && dev.y !== '') {
               that.devList.push(dev)
diff --git a/src/views/staff/staffDetail.vue b/src/views/staff/staffDetail.vue
index 8fc4c6d..50f7166 100644
--- a/src/views/staff/staffDetail.vue
+++ b/src/views/staff/staffDetail.vue
@@ -16,12 +16,14 @@
           <el-row :gutter="20">
             <el-col :span="12">
               <el-form-item label="姓名">
-                <span>{{ dataForm.name }}</span>
+                <el-input v-model="dataForm.name" disabled type="text"/>
+                <!--<span>{{ dataForm.name }}</span>-->
               </el-form-item>
             </el-col>
             <el-col :span="12">
               <el-form-item label="身份证号">
-                <span>{{ dataForm.idCard }}</span>
+                <el-input v-model="dataForm.idCard" disabled type="text"/>
+                <!--<span>{{ dataForm.idCard }}</span>-->
               </el-form-item>
             </el-col>
           </el-row>
@@ -29,12 +31,14 @@
           <el-row :gutter="20">
             <el-col :span="12">
               <el-form-item label="出生日期">
-                <span>{{ dataForm.birthday }}</span>
+                <el-input v-model="dataForm.birthday" disabled type="text"/>
+                <!--<span>{{ dataForm.birthday }}</span>-->
               </el-form-item>
             </el-col>
             <el-col :span="12">
               <el-form-item label="性别">
-                <span>{{ dataForm.sex }}</span>
+                <el-input v-model="dataForm.sex" disabled type="text"/>
+                <!--<span>{{ dataForm.sex }}</span>-->
               </el-form-item>
             </el-col>
           </el-row>
@@ -42,13 +46,15 @@
           <el-row :gutter="20">
             <el-col :span="12">
               <el-form-item label="所在部门">
-                <span>{{ dataForm.deptName }}</span>
+                <el-input v-model="dataForm.deptName" disabled type="text"/>
+                <!--<span>{{ dataForm.deptName }}</span>-->
               </el-form-item>
             </el-col>
 
             <el-col :span="12">
               <el-form-item label="联系电话">
-                <span>{{ dataForm.phone }}</span>
+                <el-input v-model="dataForm.phone" disabled type="text"/>
+                <!--<span>{{ dataForm.phone }}</span>-->
               </el-form-item>
             </el-col>
           </el-row>
@@ -56,7 +62,8 @@
           <el-row>
             <el-col :span="24">
               <el-form-item label="住址">
-                <span>{{ dataForm.address }}</span>
+                <el-input v-model="dataForm.address" disabled type="text"/>
+                <!--<span>{{ dataForm.address }}</span>-->
               </el-form-item>
             </el-col>
           </el-row>
diff --git a/src/views/staff/staffList.vue b/src/views/staff/staffList.vue
index 4a92b0c..c6ad796 100644
--- a/src/views/staff/staffList.vue
+++ b/src/views/staff/staffList.vue
@@ -44,7 +44,7 @@
           </el-upload>
           <download-template :filename="personImpTem" btnname="导入模板下载"/>
           <el-button v-if="hasPerm('/staff/delete')" size="small" class="edit_btn" @click="del">删除</el-button>
-          <el-button class="edit_btn" size="small" @click="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
           <el-button v-if="hasPerm('/staff/add')" class="edit_btn" size="small" @click="add">新增</el-button>
         </el-col>
       </el-row>
diff --git a/src/views/statistics/carDuration.vue b/src/views/statistics/carDuration.vue
index e4093d5..9cb4041 100644
--- a/src/views/statistics/carDuration.vue
+++ b/src/views/statistics/carDuration.vue
@@ -41,7 +41,7 @@
       <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="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>
diff --git a/src/views/statistics/inOutCar.vue b/src/views/statistics/inOutCar.vue
index 9371b0d..effdfb7 100644
--- a/src/views/statistics/inOutCar.vue
+++ b/src/views/statistics/inOutCar.vue
@@ -48,7 +48,7 @@
       <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="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>
diff --git a/src/views/statistics/inOutPerson.vue b/src/views/statistics/inOutPerson.vue
index 6827de3..43a0636 100644
--- a/src/views/statistics/inOutPerson.vue
+++ b/src/views/statistics/inOutPerson.vue
@@ -48,7 +48,7 @@
       <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="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>

diff --git a/src/router/modules/doorSys.js b/src/router/modules/doorSys.js
index 8017e4b..6bd1506 100644
--- a/src/router/modules/doorSys.js
+++ b/src/router/modules/doorSys.js
@@ -87,6 +87,20 @@
         name: 'DoorAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/door/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/door/alarm/position',
+        name: 'DoorAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/door/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/door/alarm/video',
+        name: 'DoorAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/door/alarm/video'], keepAlive: true }
       }
     ]
   },
@@ -262,5 +276,26 @@
         meta: { title: '营门出入次数统计', icon: '', permission: ['/door/statistics/doorCount'], keepAlive: true }
       }
     ]
+  },
+  {
+    path: '/door/area',
+    component: Layout,
+    redirect: '/door/area',
+    name: 'DoorArea',
+    alwaysShow: true,
+    meta: {
+      title: '区域管理',
+      icon: 'icon-area', // 图标
+      permission: ['/door/area'], // 权限名称
+      sys: '/door'
+    },
+    children: [
+      {
+        path: '/door/area/list',
+        name: 'DoorAreaList',
+        component: () => import('@/views/area/areaList'),
+        meta: { title: '区域列表', icon: '', permission: ['/door/area/list'], keepAlive: true }
+      }
+    ]
   }
 ]
diff --git a/src/router/modules/fenceSys.js b/src/router/modules/fenceSys.js
index 0d784b0..e2962bd 100644
--- a/src/router/modules/fenceSys.js
+++ b/src/router/modules/fenceSys.js
@@ -85,6 +85,20 @@
         name: 'FenceAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/fence/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/fence/alarm/position',
+        name: 'FenceAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/fence/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/fence/alarm/video',
+        name: 'FenceAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/fence/alarm/video'], keepAlive: true }
       }
     ]
   },
diff --git a/src/router/modules/keySys.js b/src/router/modules/keySys.js
index f3a027b..832744b 100644
--- a/src/router/modules/keySys.js
+++ b/src/router/modules/keySys.js
@@ -85,6 +85,20 @@
         name: 'KeyAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/key/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/key/alarm/position',
+        name: 'KeyAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/key/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/key/alarm/video',
+        name: 'KeyAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/key/alarm/video'], keepAlive: true }
       }
     ]
   },
diff --git a/src/router/modules/regionSys.js b/src/router/modules/regionSys.js
index 9b4613a..43b8c38 100644
--- a/src/router/modules/regionSys.js
+++ b/src/router/modules/regionSys.js
@@ -85,6 +85,20 @@
         name: 'RegionAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/region/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/region/alarm/position',
+        name: 'RegionAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/region/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/region/alarm/video',
+        name: 'RegionAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/region/alarm/video'], keepAlive: true }
       }
     ]
   },
@@ -102,6 +116,20 @@
     },
     children: [
       {
+        path: '/region/staff/add',
+        name: 'RegionStaffAdd',
+        component: () => import('@/views/staff/staffAdd'),
+        hidden: true,
+        meta: { title: '人员登记', icon: '', permission: ['/region/staff/add'], keepAlive: true }
+      },
+      {
+        path: '/region/staff/edit',
+        name: 'RegionStaffEdit',
+        component: () => import('@/views/staff/staffEdit'),
+        hidden: true,
+        meta: { title: '人员编辑', icon: '', permission: ['/region/staff/edit'], keepAlive: true }
+      },
+      {
         path: '/region/staff/list',
         name: 'RegionStaffList',
         component: () => import('@/views/staff/staffList'),
diff --git a/src/views/alarm/alarmList.vue b/src/views/alarm/alarmList.vue
index 704f797..91967a0 100644
--- a/src/views/alarm/alarmList.vue
+++ b/src/views/alarm/alarmList.vue
@@ -37,7 +37,7 @@
             </el-col>
 
             <el-col :span="4" 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" @click="fetchData()">搜索</el-button>
             </el-col>
           </el-row>
         </el-form>
@@ -48,7 +48,7 @@
       <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="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>
@@ -66,8 +66,8 @@
         <!--操作列-->
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
-            <el-button type="text" @click="detail(scope.row)">位置</el-button>
-            <el-button v-if="hasPerm('/car/update')" type="text" @click="edit(scope.row)">视频</el-button>
+            <el-button type="text" @click="position(scope.row)">位置</el-button>
+            <el-button v-if="hasPerm('/car/update')" type="text" @click="video(scope.row)">视频</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -185,6 +185,14 @@
     this.fetchData() // 获取数据
   },
   methods: {
+    video(row){
+      const code = this.$store.getters.currentSystem.code
+      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId }})
+    },
+    position(row){
+      const code = this.$store.getters.currentSystem.code
+      this.$router.push({ path: '/' + code + '/alarm/position', query: {  id: row.deviceId }})
+    },
     batchExport() {
       // 全屏加载动画
       const loading = this.$loading({
@@ -254,6 +262,8 @@
       getAlarmList(this.listQuery).then(response => {
         if (response.code === 200) {
           this.list = response.data.rows
+          console.log('&&&')
+          console.log(this.list)
           this.total = parseInt(response.data.total)
         } else {
           this.$message.error(response.message)
diff --git a/src/views/alarm/alarmMonitor.vue b/src/views/alarm/alarmMonitor.vue
new file mode 100644
index 0000000..517d6e9
--- /dev/null
+++ b/src/views/alarm/alarmMonitor.vue
@@ -0,0 +1,80 @@
+<template>
+  <div>
+    <el-row>
+      <!--<el-col :span="6">-->
+        <!--&lt;!&ndash;<video-tree @click="handleCameraClicked"/>&ndash;&gt;-->
+      <!--</el-col>-->
+
+      <el-col :span="18" :offset="3">
+        <web-play ref="webCtrl" />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+// import VideoTree from './videoTree'
+import WebPlay from './webPlay'
+import { getDetailDevice } from '@/api/device'
+export default {
+  name: 'VideoMonitor',
+  components: { WebPlay },
+  data() {
+    return {
+      camera:{
+        ip:'',
+        port:'',
+        username:'',
+        password:''
+      }
+    }
+  },
+  mounted() {
+
+  },
+  activated() {
+    if (this.$route.query && this.$route.query.id) {
+      const id = this.$route.query.id
+      getDetailDevice(id).then(response => {
+          if (response.code === 200) {
+            console.log(response.data)
+            this.camera.ip = response.data.ip
+            this.camera.port = response.data.port
+            this.camera.username = response.data.username
+            this.camera.password = response.data.password
+            this.handleCamera()
+          }
+      })
+    }
+  },
+  methods: {
+    handleCamera(){
+      if (typeof this.camera.ip === 'undefined' || this.camera.ip === '') {
+        console.log('ip is null')
+        return false
+      }
+      if (typeof this.camera.port === 'undefined' || this.camera.port === '') {
+        console.log('port is null')
+        return false
+      }else{
+        this.camera.ip += (':'+ this.camera.port)
+      }
+      if (typeof this.camera.username === 'undefined' || this.camera.username === '') {
+        console.log('username is null')
+        return false
+      }
+      if (typeof this.camera.password === 'undefined' || this.camera.password === '') {
+        console.log('password is null')
+        return false
+      }
+
+      // 开始预览
+      this.$refs.webCtrl.$refs.play.contentWindow.startPlayReal(this.camera)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/alarm/alarmNow.vue b/src/views/alarm/alarmNow.vue
index 03bb5ea..66055b1 100644
--- a/src/views/alarm/alarmNow.vue
+++ b/src/views/alarm/alarmNow.vue
@@ -48,7 +48,7 @@
       <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="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>
@@ -66,8 +66,8 @@
         <el-table-column label="操作" align="center" width="180">
           <template slot-scope="scope">
             <el-button v-if="hasPerm('/alarm/cancel')" type="text" @click="alarmCancel(scope.row)">取消报警</el-button>
-            <el-button type="text" @click="detail(scope.row)">位置</el-button>
-            <el-button type="text" @click="edit(scope.row)">视频</el-button>
+            <el-button type="text" @click="position(scope.row)">位置</el-button>
+            <el-button v-if="hasPerm('/car/update')" type="text" @click="video(scope.row)">视频</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -183,6 +183,14 @@
     this.fetchData() // 获取数据
   },
   methods: {
+    video(row){
+      const code = this.$store.getters.currentSystem.code
+      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId }})
+    },
+    position(row){
+      const code = this.$store.getters.currentSystem.code
+      this.$router.push({ path: '/' + code + '/alarm/position', query: {  id: row.deviceId }})
+    },
     batchExport() {
       // 全屏加载动画
       const loading = this.$loading({
diff --git a/src/views/alarm/alarmPosition.vue b/src/views/alarm/alarmPosition.vue
new file mode 100644
index 0000000..51f915e
--- /dev/null
+++ b/src/views/alarm/alarmPosition.vue
@@ -0,0 +1,786 @@
+<template>
+  <div class="main-page">
+    <!-- 中间平面图区域 -->
+    <div class="map-overview">
+      <img ref="bgImg" :src="bgImageSrc" height="100%" @load="backgroundImageReady">
+
+      <div
+        v-for="item in devList"
+        :id="item.id"
+        :key="item.id"
+        :style="{ position: 'absolute', top: item.y * imgSize.height / imgSizeOriginal.height + 'px', left: (item.x * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
+        class="point-camera"
+        @click="detailDev(item, $event)" />
+    </div>
+    <!-- 右侧设备详情及操作区域 -->
+    <div v-show="showDevDetail" ref="dev-detail-block" class="dev-detail-block">
+      <span class="dev-detail-close" @click="showDevDetail=false" />
+      <el-row style="margin-top: -25px;">
+        <el-col :span="24">设备名称
+          <span class="dev-detail-span">{{ dataForm.name }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">设备编号
+          <span class="dev-detail-span">{{ dataForm.devcode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">设备类型
+          <span class="dev-detail-span">{{ dataForm.typeName }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">在线状态
+          <span class="dev-detail-span">{{ dataForm.onlineStatusName }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">安装日期
+          <span class="dev-detail-span">{{ dataForm.installDate }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">安装位置
+          <span class="dev-detail-span">{{ dataForm.position }}</span>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getProject } from '@/utils/baseConfig'
+import DeviceDetail from '@/views/deviceManage/deviceDetail'
+import tg_main from '../../assets/overview_images/tg/mapOverviewTg.jpg'
+import tg_3_1 from '../../assets/overview_images/tg/mapOverviewTg-3-1.jpg'
+import tg_4_1 from '../../assets/overview_images/tg/mapOverviewTg-4-1.jpg'
+import tg_4_5 from '../../assets/overview_images/tg/mapOverviewTg-4-5.jpg'
+import { getDetailDevice } from '@/api/device'
+
+// const cameraTypes = [4, 5, 8, 9, 10, 11]
+export default {
+  name: 'AlarmPosition',
+  components: { DeviceDetail },
+  data() {
+    return {
+      title: getProject().title,
+      bgImageSrc: tg_main,
+      devListParams: {
+        picture: '1',
+        areaTypeId: 1,
+        deviceTypes: []
+      },
+      dev: {
+        alarm: 0,
+        onLine: 0,
+        closed: 0,
+        offLine: 0
+      },
+      imgSizeOriginal: {
+        width: 2245,
+        height: 1586
+      }, // 图片原尺寸
+      imgSize: {
+        width: 2245,
+        height: 1586
+      }, // 图片显示尺寸
+      winSize: {
+        width: 1440,
+        height: 789
+      }, // 屏幕窗口尺寸
+      halfLeft: 0,
+      showDevDetail: false, // 是否显示设备详情
+      alarmList: [], // 报警列表
+      alarmColumns: [
+        {
+          text: '设备编号',
+          value: 'devcode',
+          align: 'center'
+        },
+        {
+          text: '报警内容',
+          value: 'alarmContent',
+          align: 'center'
+        },
+        {
+          text: '报警时间',
+          value: 'alarmTime',
+          align: 'center',
+          width: 165
+        }
+      ], // 报警列表显示列
+      tableShow: true, // 是否显示告警列表
+      devList: [], // 设备列表（在地图上显示）
+      dataForm: {
+        id: '', // id
+        name: '', // 设备名
+        devcode: '', // 设备编号
+        typeName: '', // 设备类型
+        model: '', // 设备型号
+        onlineStatusName: '', // 在线状态
+        deviceStatusName: '', // 设备状态
+        position: '', // 安装位置
+        installDate: '', // 安装日期
+        inOutName: '' // 进出营
+      }, // 设备详情表单
+      devPosition:{
+        picture: '',
+        x: '',
+        y: ''
+      },
+      checkDevType: [true, false] // 选中设备类型
+    }
+  },
+  mounted() {
+    this.initWindowSize()
+    if (this.$route.query && this.$route.query.id) {
+      const id = this.$route.query.id
+      getDetailDevice(id).then(response => {
+        if (response.code === 200) {
+          console.log(response.data)
+          this.devPosition.picture = response.data.picture
+          this.devPosition.x = response.data.x
+          this.devPosition.y = response.data.y
+          if(this.devPosition.picture === '1'){
+            this.bgImageSrc = tg_main
+          }else if(this.devPosition.picture === '2'){
+            this.bgImageSrc = tg_3_1
+          }else if(this.devPosition.picture === '3'){
+            this.bgImageSrc = tg_4_1
+          }else if(this.devPosition.picture === '4'){
+            this.bgImageSrc = tg_4_5
+          }else{
+            this.$message.warning('该设备暂无位置信息')
+            return
+          }
+          this.devList = []
+          if (this.devPosition.x !== '' && this.devPosition.y !== '') {
+            this.devList.push(response.data)
+          }
+        }
+      })
+    }
+    const that = this
+    window.onresize = function() {
+      that.initWindowSize()
+      that.getBgImageSize()
+    }
+  },
+  methods: {
+    // 获取窗口大小
+    initWindowSize() {
+      // 获取窗体尺寸
+      this.winSize = {
+        width: document.documentElement.clientWidth,
+        height: document.documentElement.clientHeight
+      }
+    },
+    // 获取图像大小
+    getBgImageSize() {
+      // 获取图片尺寸
+      this.imgSize = {
+        width: this.$refs['bgImg'].width,
+        height: this.$refs['bgImg'].height
+      }
+      this.halfLeft = (this.winSize.width - this.imgSize.width) / 2
+    },
+    // 重新绘制设备点位
+    reDrawDevs() {
+      const halfLeft = (this.winSize.width - this.imgSize.width) / 2
+
+      // 调整球机的设备位置
+      const that = this
+      this.devList.forEach(function(item) {
+        const point = document.getElementById(item.id)
+
+        if (point !== null) {
+          if (item.x !== '' && item.y !== '') {
+            point.style.position = 'absolute'
+            point.style.top = item.y * that.imgSize.height / that.imgSizeOriginal.height + 'px'
+            point.style.left = (item.x * that.imgSize.width / that.imgSizeOriginal.width + halfLeft) + 'px'
+          } else {
+            point.style.display = 'none'
+          }
+        }
+      })
+    },
+    // 平面图就绪时执行函数
+    backgroundImageReady() {
+      this.getBgImageSize()
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    },
+    backToIndex() {
+      this.$router.push('/door/alarm/now')
+    },
+    // 查询并显示设备详情
+    detailDev(dev, event) {
+      this.resetDevDetail()
+      getDetailDevice(dev.id).then(response => {
+        if (response.code === 200) {
+          this.dataForm = {
+            id: dev.id,
+            name: dev.name,
+            devcode: dev.devcode,
+            typeName: response.data.typeName,
+            model: dev.model,
+            onlineStatusName: response.data.onlineStatusName,
+            position: dev.position,
+            installDate: dev.installDate,
+            inOutName: response.data.inOutName,
+            deviceStatusName: response.data.deviceStatusName
+          }
+        } else {
+          this.$message.error(response.message)
+        }
+      })
+
+      // 弹窗显示设备详情
+      const targetDev = event.currentTarget // 取到点击到的设备图标div
+
+      this.showDevDetail = true
+      let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+      top = top + 100
+      this.$refs['dev-detail-block'].style.position = 'absolute'
+      this.$refs['dev-detail-block'].style.top = top + 'px'
+      this.$refs['dev-detail-block'].style.left = targetDev.style.left
+    },
+    // 点击报警列表
+    alarmRowClick(dev, column, event) {
+
+    },
+    // 清除设备详情
+    resetDevDetail() {
+      this.dataForm = {
+        id: '', // id
+        name: '', // 设备名
+        devcode: '', // 设备编号
+        typeName: '', // 设备类型
+        model: '', // 设备型号
+        onlineStatusName: '', // 在线状态
+        deviceStatusName: '', // 设备状态
+        position: '', // 安装位置
+        installDate: '', // 安装日期
+        inOutName: '' // 进出营
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+  .main-page {
+    background-size: cover;
+    background-color: #023d83;
+    height: 100vh;
+  }
+
+  .main-header {
+    width: 100vw;
+  }
+  .main-title {
+    height: 90px;
+    text-align: center;
+    padding-top: 20px;
+    background: url("../../assets/overview_images/title-background-1920.png");
+  }
+
+  .main-title img {
+    display: inline-block;
+    margin-right: 15px;
+    width: 52px;
+    height: 32px;
+    vertical-align: text-bottom;
+  }
+
+  .home-icon {
+    width: 26px;
+    height: 26px;
+    position: fixed;
+    left: 20px;
+    top: 20px;
+  }
+  .exit-icon {
+    width: 26px;
+    height: 26px;
+    position: fixed;
+    right: 20px;
+    top: 20px;
+  }
+  .home-icon img, .exit-icon img {
+    width: 26px;
+    height: 26px;
+  }
+
+  .main-title span {
+    color: #FFFFFF;
+    font-size: 32px;
+    font-weight: bold;
+    font-family: 'Microsoft YaHei';
+  }
+
+  .map-overview {
+    /*margin-top: 50px;*/
+    /*width: 1100px;*/
+    height: calc(90vh - 200px);
+    text-align: center;
+    position: relative;
+  }
+  .point {
+    width: 24px;
+    height: 24px;
+    position: relative;
+    display: inline-block;
+    cursor: pointer;
+  }
+  .point-camera {
+    background: url("../../assets/overview_images/icons/icon-camera-point.png");
+    background-size: contain;
+    @extend .point;
+  }
+  .point-fence {
+    background: url("../../assets/overview_images/icons/icon-fence-unchecked.png");
+    background-size: contain;
+    @extend .point;
+  }
+
+  .statis-block {
+    text-align: center;
+    margin-top: 20px;
+    font-size: 48px;
+  }
+  .sub-title {
+    text-align: center;
+    font-size: 32px;
+  }
+  .sub-data-block {
+    width: 122px;
+    height: 155px;
+  }
+  .dev-normal {
+    background: url("../../assets/overview_images/normal.png");
+    background-size: contain;
+    color: #00ff0c;
+  }
+  .dev-alarm {
+    background: url("../../assets/overview_images/alarm.png");
+    background-size: contain;
+    color: #ff0000;
+  }
+  .dev-offline {
+    background: url("../../assets/overview_images/offline.png");
+    background-size: contain;
+    color: #fff000;
+  }
+  .dev-closed {
+    background: url("../../assets/overview_images/closed.png");
+    background-size: contain;
+    color: #00fff6;
+  }
+
+  .dev-status-block {
+    position: absolute;
+    top: 100px;
+    left: 20px;
+    color: #ffffff;
+  }
+
+  .alarm-now-block {
+    position: absolute;
+    z-index: 500;
+    top: 300px;
+    left: 20px;
+    width: 480px;
+    .map-alarm-div-header {
+      line-height: 40px;
+      padding-left: 10px;
+      color: #00fff6;
+      font-size: 24px;
+      .icon-right {
+        cursor: pointer;
+        margin-left: 20px;
+      }
+    }
+    .el-scrollbar {
+      /*height: 200px;*/
+      width: 100%;
+    }
+    .moredatascollor {
+      height: 200px;
+    }
+    .el-scrollbar__wrap {
+      overflow-y: auto;
+      overflow-x: hidden;
+      margin-bottom: 0px !important;
+    }
+    .el-table {
+      font-size: 12px;
+    }
+    .transition-box {
+      margin-bottom: 10px;
+      width: 200px;
+      height: 100px;
+      border-radius: 4px;
+      background-color: #409EFF;
+      text-align: center;
+      color: #fff;
+      padding: 40px 20px;
+      box-sizing: border-box;
+      margin-right: 20px;
+    }
+  }
+
+  .alarm-now-block /deep/ .el-table th {
+    background-color: #0757A0;
+    padding: 12px 0px;
+    font-size: 16px;
+    color: #00fff6;
+    font-weight: normal;
+  }
+
+  .alarm-now-block /deep/ .el-table td {
+    /*background-color: #0757A0;*/
+    padding: 10px 0px;
+    font-size: 15px;
+    color: #FFFFFF;
+    font-weight: normal;
+  }
+
+  .alarm-now-block /deep/ .el-table__row td {
+    background-color: #023D83;
+  }
+  .alarm-now-block /deep/ .el-table__body tr:hover > td {
+    background-color: #0757A0;
+  }
+  .alarm-now-block /deep/ tr.el-table__row--striped td {
+    background-color: #0757A0;
+  }
+
+  .map-tab {
+    position: absolute;
+    right: 20px;
+    top: 100px;
+    width: 300px;
+    button {
+      margin: 5px 0px;
+    }
+  }
+
+  .tab-top {
+    position: relative;
+    width: 284px;
+    height: 24px;
+    background: url("../../assets/overview_images/tab-top-bg.png");
+  }
+  .tab-bottom {
+    position: relative;
+    width: 284px;
+    height: 24px;
+    background: url("../../assets/overview_images/tab-bottom-bg.png");
+  }
+  .map-index-button {
+    position: relative;
+    width: 284px;
+    height: 74px;
+    background: url("../../assets/overview_images/tab-index-unchecked.png");
+    font-size: 32px;
+    line-height: 74px;
+    text-align: center;
+    color: #FFFFFF;
+    cursor: pointer;
+  }
+  .index-selected {
+    background: url("../../assets/overview_images/tab-index-checked.png");
+  }
+  .sub-tab-guider {
+    width: 149px;
+    height: 50px;
+    background: url("../../assets/overview_images/sub-tab-guider.png");
+  }
+  .sub-tab-border {
+    width: 204px;
+    height: 253px;
+    background: url("../../assets/overview_images/sub-tab-border.png");
+  }
+  .sub-tab-content {
+    text-align: center;
+    color: #FFFFFF;
+    font-size: 28px;
+    cursor: pointer;
+    width: 200px;
+  }
+
+  .dev-detail-block {
+    /*position: absolute;*/
+    /*right: 20px;*/
+    /*bottom: 100px;*/
+    width: 520px;
+    height: 335px;
+    color: #00FFFF;
+    font-size: 24px;
+    font-family: "Microsoft YaHei";
+    padding: 45px 60px;
+    line-height: 35px;
+    background: url("../../assets/overview_images/dev-info.png");
+    .dev-detail-span {
+      margin-left: 20px;
+    }
+    .dev-detail-close::before {
+      content: "\2716";
+      position: relative;
+      top: -20px;
+      right: -410px;
+      cursor: pointer;
+    }
+  }
+
+  .dev-footer {
+    position: absolute;
+    bottom: 25px;
+  }
+
+  .dev-icon {
+    width: 195px;
+    height: 105px;
+    vertical-align: middle;
+    line-height: 65px;
+    padding: 20px 30px !important;
+    margin-left: 15px;
+    cursor: pointer;
+    background: url("../../assets/overview_images/dev-type-border-unchecked.png");
+  }
+
+  .dev-icon img {
+    height: 40px;
+    vertical-align:middle;
+  }
+  .dev-icon span {
+    font-size: 20px;
+    color: #00D2FF;
+    line-height: 65px;
+    height: 65px;
+    vertical-align:middle;
+    float: right;
+  }
+
+  .dev-type-selected {
+    background: url("../../assets/overview_images/dev-type-border-checked.png");
+  }
+  .dev-type-selected span {
+    color: #f58a88 !important;
+  }
+
+  /*@media(max-width: 1440px) {*/
+  /*  .main-title {*/
+  /*    height: 68px;*/
+  /*    padding-top: 20px;*/
+  /*    background: url("../../assets/overview_images/title-background-1440.png");*/
+  /*  }*/
+  /*  .main-title span {*/
+  /*    font-size: 24px;*/
+  /*  }*/
+  /*  .main-title img {*/
+  /*    margin-right: 15px;*/
+  /*    width: 32px;*/
+  /*    height: 32px;*/
+  /*  }*/
+
+  /*  .home-icon {*/
+  /*    left: 18px;*/
+  /*    width: 18px;*/
+  /*    height: 18px;*/
+  /*  }*/
+  /*  .exit-icon {*/
+  /*    right: 18px;*/
+  /*    width: 18px;*/
+  /*    height: 18px;*/
+  /*  }*/
+
+  /*  .home-icon img, .exit-icon img {*/
+  /*    width: 18px;*/
+  /*    height: 18px;*/
+  /*  }*/
+
+  /*  .dev-icon span {*/
+  /*    font-size: 12px;*/
+  /*  }*/
+  /*}*/
+
+  @media(max-width: 1440px) {
+    .main-title {
+      height: 65px;
+      padding-top: 16px;
+      background: url("../../assets/overview_images/title-background-1366.png");
+    }
+    .main-title span {
+      font-size: 24px;
+    }
+    .main-title img {
+      margin-right: 15px;
+      width: 32px;
+      height: 32px;
+    }
+
+    .home-icon {
+      left: 16px;
+      width: 16px;
+      height: 16px;
+    }
+    .exit-icon {
+      right: 16px;
+      width: 16px;
+      height: 16px;
+    }
+
+    .home-icon img, .exit-icon img {
+      width: 20px;
+      height: 20px;
+    }
+
+    .map-overview {
+      margin-top: 35px;
+      height: calc(90vh - 150px);
+    }
+
+    .point {
+      width: 16px;
+      height: 16px;
+    }
+
+    .statis-block {
+      margin-top: 16px;
+      font-size: 36px;
+    }
+    .sub-title {
+      font-size: 24px;
+    }
+    .sub-data-block {
+      width: 90px;
+      height: 114px;
+    }
+
+    .dev-normal {
+      background: url("../../assets/overview_images/normal-1366.png");
+    }
+    .dev-alarm {
+      background: url("../../assets/overview_images/alarm-1366.png");
+    }
+    .dev-offline {
+      background: url("../../assets/overview_images/offline-1366.png");
+    }
+    .dev-closed {
+      background: url("../../assets/overview_images/closed-1366.png");
+    }
+
+    .dev-status-block {
+      top: 90px;
+      left: 16px;
+    }
+
+    .alarm-now-block {
+      top: 220px;
+      left: 16px;
+      width: 360px;
+      .map-alarm-div-header {
+        line-height: 32px;
+        font-size: 20px;
+      }
+    }
+
+    .alarm-now-block /deep/ .el-table th {
+      padding: 8px 0px;
+      font-size: 16px;
+    }
+    .alarm-now-block /deep/ .el-table td {
+      padding: 5px 0px;
+      font-size: 12px;
+    }
+
+    .map-tab {
+      right: 16px;
+      top: 90px;
+      width: 215px;
+      button {
+        margin: 5px 0px;
+      }
+    }
+    .tab-top {
+      width: 213px;
+      height: 18px;
+      background: url("../../assets/overview_images/tab-top-bg-1366.png");
+    }
+    .tab-bottom {
+      width: 213px;
+      height: 18px;
+      background: url("../../assets/overview_images/tab-bottom-bg-1366.png");
+    }
+    .map-index-button {
+      width: 210px;
+      height: 56px;
+      background: url("../../assets/overview_images/tab-index-unchecked-1366.png");
+      font-size: 24px;
+      line-height: 56px;
+    }
+    .index-selected {
+      background: url("../../assets/overview_images/tab-index-checked-1366.png");
+    }
+
+    .sub-tab-guider {
+      width: 110px;
+      height: 37px;
+      background: url("../../assets/overview_images/sub-tab-guider-1366.png");
+    }
+    .sub-tab-border {
+      width: 150px;
+      height: 186px;
+      background: url("../../assets/overview_images/sub-tab-border-1366.png");
+    }
+    .sub-tab-content {
+      font-size: 20px;
+      cursor: pointer;
+      width: 145px;
+    }
+
+    .dev-detail-block {
+      width: 390px;
+      height: 251px;
+      font-size: 16px;
+      padding: 30px 40px;
+      line-height: 28px;
+      background: url("../../assets/overview_images/dev-info-1366.png");
+      .dev-detail-close::before {
+        top: -12px;
+        right: -312px;
+      }
+    }
+
+    .dev-footer {
+      bottom: 20px;
+    }
+    .dev-icon {
+      width: 140px;
+      height: 76px;
+      line-height: 56px;
+      padding: 10px 16px !important;
+      margin-left: 15px;
+      background: url("../../assets/overview_images/dev-type-border-unchecked-1366.png");
+    }
+    .dev-icon img {
+      height: 32px;
+    }
+    .dev-icon span {
+      font-size: 16px;
+      line-height: 56px;
+      height: 56px;
+    }
+    .dev-type-selected {
+      background: url("../../assets/overview_images/dev-type-border-checked-1366.png");
+    }
+  }
+
+</style>
diff --git a/src/views/alarm/webPlay.vue b/src/views/alarm/webPlay.vue
new file mode 100644
index 0000000..97e5ed2
--- /dev/null
+++ b/src/views/alarm/webPlay.vue
@@ -0,0 +1,21 @@
+<template>
+  <div class="play-window-block">
+    <div style="height: 100%">
+      <iframe ref="play" src="/static/webCtrl/demo-easy.html" width="100%" height="100%" style="border: 0px; overflow: hidden;" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'WebPlay'
+}
+</script>
+
+<style scoped>
+  .play-window-block {
+    margin: 15px 15px 15px 0px;
+    box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
+    height: calc(100vh - 175px);
+  }
+</style>
diff --git a/src/views/area/areaList.vue b/src/views/area/areaList.vue
index 1950028..11dc51f 100644
--- a/src/views/area/areaList.vue
+++ b/src/views/area/areaList.vue
@@ -31,7 +31,7 @@
       <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="batchExport">导出</el-button>-->
+          <!--<el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>-->
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>
diff --git a/src/views/area/defenceDetail.vue b/src/views/area/defenceDetail.vue
index e29a258..703ec7d 100644
--- a/src/views/area/defenceDetail.vue
+++ b/src/views/area/defenceDetail.vue
@@ -4,12 +4,14 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="区域名称">
-            <span>{{ dataForm.name }}</span>
+            <el-input v-model="dataForm.name" disabled type="text"/>
+            <!--<span>{{ dataForm.name }}</span>-->
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="防卫状态">
-            <span>{{ dataForm.areaStatusName }}</span>
+            <el-input v-model="dataForm.areaStatusName" disabled type="text"/>
+            <!--<span>{{ dataForm.areaStatusName }}</span>-->
           </el-form-item>
         </el-col>
       </el-row>
@@ -17,12 +19,14 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="区域类别">
-            <span>{{ dataForm.areaTypeName }}</span>
+            <el-input v-model="dataForm.areaTypeName" disabled type="text"/>
+            <!--<span>{{ dataForm.areaTypeName }}</span>-->
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="区域位置">
-            <span>{{ dataForm.position }}</span>
+            <el-input v-model="dataForm.position" disabled type="text"/>
+            <!--<span>{{ dataForm.position }}</span>-->
           </el-form-item>
         </el-col>
       </el-row>
@@ -38,7 +42,8 @@
       <el-row v-show="isFence" :gutter="20">
         <el-col :span="12">
           <el-form-item label="电子围栏">
-            <span>{{ dataForm.deviceStatusName }}</span>
+            <el-input v-model="dataForm.deviceStatusName" disabled type="text"/>
+            <!--<span>{{ dataForm.deviceStatusName }}</span>-->
           </el-form-item>
         </el-col>
       </el-row>
@@ -46,7 +51,8 @@
       <el-row :gutter="20">
         <el-col :span="24">
           <el-form-item label="备注" prop="remark">
-            <span>{{ dataForm.remark }}</span>
+            <el-input v-model="dataForm.remark" disabled type="text"/>
+            <!--<span>{{ dataForm.remark }}</span>-->
           </el-form-item>
         </el-col>
       </el-row>
diff --git a/src/views/area/defenceList.vue b/src/views/area/defenceList.vue
index 9e2ed68..8649918 100644
--- a/src/views/area/defenceList.vue
+++ b/src/views/area/defenceList.vue
@@ -31,9 +31,9 @@
       <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">批量导入</el-button>
-          <el-button class="edit_btn" size="small">导入模板下载</el-button>
-          <!--<el-button class="edit_btn" size="small" @click="batchExport">导出</el-button>-->
+          <!--<el-button class="edit_btn" size="small">批量导入</el-button>-->
+          <!--<el-button class="edit_btn" size="small">导入模板下载</el-button>-->
+          <!--<el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>-->
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>
diff --git a/src/views/car/carAdd.vue b/src/views/car/carAdd.vue
index 6a35b7d..633e353 100644
--- a/src/views/car/carAdd.vue
+++ b/src/views/car/carAdd.vue
@@ -20,14 +20,14 @@
         <el-col :span="12">
           <el-form-item label="所属部门" prop="deptid">
             <!--<span v-show="isDetailMode">{{ dataForm.deptName }}</span>-->
-            <el-select :disabled="isDetailMode" v-model="dataForm.deptid" placeholder="请选择所属部门" filterable clearable>
+            <el-select :disabled="isDetailMode" v-model="dataForm.deptid" placeholder="请选择所属部门" filterable clearable @change="getStaffList">
               <el-option v-for="item in deptList" :key="item.id" :label="item.name" :value="item.id"/>
             </el-select>
             <!--<dept-select v-show="!isDetailMode" v-model="dataForm.deptid" :dept-show="true" :need-top="true" placeholder="所属组织" @change="fetchStaffList"/>-->
           </el-form-item>
         </el-col>
         <el-col v-if="dataForm.property==='2'" :span="12">
-          <el-form-item label="车主" prop="owner">
+          <el-form-item label="车主" prop="ownerId">
             <!--<span v-show="isDetailMode">{{ dataForm.ownerName }}</span>-->
             <el-select :disabled="isDetailMode" v-model="dataForm.ownerId" placeholder="请选择车主" filterable clearable @change="autoStaffPhone">
               <el-option v-for="item in staffList" :key="item.id" :label="item.name" :value="item.id"/>
@@ -91,7 +91,7 @@
       rules: {
         phone: [{ required: true, trigger: ['blur', 'change'], validator: phoneValidator }],
         plateNumber: [{ required: true, trigger: ['blur', 'change'], validator: plateValidator }],
-        owner: [{ required: true, trigger: ['blur', 'change'], message: '请选择车主' }]
+        ownerId: [{ required: true, trigger: ['blur', 'change'], message: '请选择车主' }]
       }, // 前端校验规则
       carProperties: [], // 车辆性质字典值
       staffList: [], // 车主人员列表
@@ -137,6 +137,7 @@
           phone: row.phone,
           remark: row.remark
         }
+        this.getStaffList()
       } else if (dialogStatus === 'detail') {
         this.isDetailMode = true
         this.isEditMode = false
@@ -151,6 +152,7 @@
           deptName: row.deptName,
           ownerName: row.ownerName
         }
+        this.getStaffList()
       }
     },
     // 清除数据
@@ -180,6 +182,13 @@
       })
       getStaffByDept({ deptId: this.dataForm.deptid }).then(response => {
         this.staffList = response.data
+        console.log(response)
+      })
+    },
+    getStaffList(){
+      getStaffByDept({ deptId: this.dataForm.deptid }).then(response => {
+        this.staffList = response.data
+        console.log(response)
       })
     },
     autoStaffPhone() {
@@ -190,7 +199,6 @@
             return item
           }
         })
-
         this.dataForm.phone = selectedStaff[0].phone
       } else {
         this.dataForm.phone = ''
diff --git a/src/views/car/carList.vue b/src/views/car/carList.vue
index ceb77ff..d0c0176 100644
--- a/src/views/car/carList.vue
+++ b/src/views/car/carList.vue
@@ -31,7 +31,7 @@
       <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="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
           <el-button v-if="hasPerm('/door/car/add')" class="edit_btn" size="small" @click="add">新增</el-button>
           <!--          <el-button v-if="hasPerm('/door/car/delete')" v-show="false" class="edit_btn" size="small" @click="batchDel">删除</el-button>-->
         </el-col>
diff --git a/src/views/deviceManage/deviceList.vue b/src/views/deviceManage/deviceList.vue
index 5966b45..feb4b36 100644
--- a/src/views/deviceManage/deviceList.vue
+++ b/src/views/deviceManage/deviceList.vue
@@ -48,7 +48,7 @@
       <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="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border @selection-change="handleSelectionChange">
diff --git a/src/views/overview/doorIndex.vue b/src/views/overview/doorIndex.vue
index 03624bb..4f48bd0 100644
--- a/src/views/overview/doorIndex.vue
+++ b/src/views/overview/doorIndex.vue
@@ -285,6 +285,7 @@
         if (response.code === 200) {
           const that = this
           this.devList = []
+          console.log(response)
           response.data.forEach(dev => {
             if (dev.x !== '' && dev.y !== '') {
               that.devList.push(dev)
diff --git a/src/views/staff/staffDetail.vue b/src/views/staff/staffDetail.vue
index 8fc4c6d..50f7166 100644
--- a/src/views/staff/staffDetail.vue
+++ b/src/views/staff/staffDetail.vue
@@ -16,12 +16,14 @@
           <el-row :gutter="20">
             <el-col :span="12">
               <el-form-item label="姓名">
-                <span>{{ dataForm.name }}</span>
+                <el-input v-model="dataForm.name" disabled type="text"/>
+                <!--<span>{{ dataForm.name }}</span>-->
               </el-form-item>
             </el-col>
             <el-col :span="12">
               <el-form-item label="身份证号">
-                <span>{{ dataForm.idCard }}</span>
+                <el-input v-model="dataForm.idCard" disabled type="text"/>
+                <!--<span>{{ dataForm.idCard }}</span>-->
               </el-form-item>
             </el-col>
           </el-row>
@@ -29,12 +31,14 @@
           <el-row :gutter="20">
             <el-col :span="12">
               <el-form-item label="出生日期">
-                <span>{{ dataForm.birthday }}</span>
+                <el-input v-model="dataForm.birthday" disabled type="text"/>
+                <!--<span>{{ dataForm.birthday }}</span>-->
               </el-form-item>
             </el-col>
             <el-col :span="12">
               <el-form-item label="性别">
-                <span>{{ dataForm.sex }}</span>
+                <el-input v-model="dataForm.sex" disabled type="text"/>
+                <!--<span>{{ dataForm.sex }}</span>-->
               </el-form-item>
             </el-col>
           </el-row>
@@ -42,13 +46,15 @@
           <el-row :gutter="20">
             <el-col :span="12">
               <el-form-item label="所在部门">
-                <span>{{ dataForm.deptName }}</span>
+                <el-input v-model="dataForm.deptName" disabled type="text"/>
+                <!--<span>{{ dataForm.deptName }}</span>-->
               </el-form-item>
             </el-col>
 
             <el-col :span="12">
               <el-form-item label="联系电话">
-                <span>{{ dataForm.phone }}</span>
+                <el-input v-model="dataForm.phone" disabled type="text"/>
+                <!--<span>{{ dataForm.phone }}</span>-->
               </el-form-item>
             </el-col>
           </el-row>
@@ -56,7 +62,8 @@
           <el-row>
             <el-col :span="24">
               <el-form-item label="住址">
-                <span>{{ dataForm.address }}</span>
+                <el-input v-model="dataForm.address" disabled type="text"/>
+                <!--<span>{{ dataForm.address }}</span>-->
               </el-form-item>
             </el-col>
           </el-row>
diff --git a/src/views/staff/staffList.vue b/src/views/staff/staffList.vue
index 4a92b0c..c6ad796 100644
--- a/src/views/staff/staffList.vue
+++ b/src/views/staff/staffList.vue
@@ -44,7 +44,7 @@
           </el-upload>
           <download-template :filename="personImpTem" btnname="导入模板下载"/>
           <el-button v-if="hasPerm('/staff/delete')" size="small" class="edit_btn" @click="del">删除</el-button>
-          <el-button class="edit_btn" size="small" @click="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
           <el-button v-if="hasPerm('/staff/add')" class="edit_btn" size="small" @click="add">新增</el-button>
         </el-col>
       </el-row>
diff --git a/src/views/statistics/carDuration.vue b/src/views/statistics/carDuration.vue
index e4093d5..9cb4041 100644
--- a/src/views/statistics/carDuration.vue
+++ b/src/views/statistics/carDuration.vue
@@ -41,7 +41,7 @@
       <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="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>
diff --git a/src/views/statistics/inOutCar.vue b/src/views/statistics/inOutCar.vue
index 9371b0d..effdfb7 100644
--- a/src/views/statistics/inOutCar.vue
+++ b/src/views/statistics/inOutCar.vue
@@ -48,7 +48,7 @@
       <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="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>
diff --git a/src/views/statistics/inOutPerson.vue b/src/views/statistics/inOutPerson.vue
index 6827de3..43a0636 100644
--- a/src/views/statistics/inOutPerson.vue
+++ b/src/views/statistics/inOutPerson.vue
@@ -48,7 +48,7 @@
       <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="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>
diff --git a/src/views/statistics/personDuration.vue b/src/views/statistics/personDuration.vue
index 063b247..6826319 100644
--- a/src/views/statistics/personDuration.vue
+++ b/src/views/statistics/personDuration.vue
@@ -41,7 +41,7 @@
       <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="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>

diff --git a/src/router/modules/doorSys.js b/src/router/modules/doorSys.js
index 8017e4b..6bd1506 100644
--- a/src/router/modules/doorSys.js
+++ b/src/router/modules/doorSys.js
@@ -87,6 +87,20 @@
         name: 'DoorAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/door/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/door/alarm/position',
+        name: 'DoorAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/door/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/door/alarm/video',
+        name: 'DoorAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/door/alarm/video'], keepAlive: true }
       }
     ]
   },
@@ -262,5 +276,26 @@
         meta: { title: '营门出入次数统计', icon: '', permission: ['/door/statistics/doorCount'], keepAlive: true }
       }
     ]
+  },
+  {
+    path: '/door/area',
+    component: Layout,
+    redirect: '/door/area',
+    name: 'DoorArea',
+    alwaysShow: true,
+    meta: {
+      title: '区域管理',
+      icon: 'icon-area', // 图标
+      permission: ['/door/area'], // 权限名称
+      sys: '/door'
+    },
+    children: [
+      {
+        path: '/door/area/list',
+        name: 'DoorAreaList',
+        component: () => import('@/views/area/areaList'),
+        meta: { title: '区域列表', icon: '', permission: ['/door/area/list'], keepAlive: true }
+      }
+    ]
   }
 ]
diff --git a/src/router/modules/fenceSys.js b/src/router/modules/fenceSys.js
index 0d784b0..e2962bd 100644
--- a/src/router/modules/fenceSys.js
+++ b/src/router/modules/fenceSys.js
@@ -85,6 +85,20 @@
         name: 'FenceAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/fence/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/fence/alarm/position',
+        name: 'FenceAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/fence/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/fence/alarm/video',
+        name: 'FenceAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/fence/alarm/video'], keepAlive: true }
       }
     ]
   },
diff --git a/src/router/modules/keySys.js b/src/router/modules/keySys.js
index f3a027b..832744b 100644
--- a/src/router/modules/keySys.js
+++ b/src/router/modules/keySys.js
@@ -85,6 +85,20 @@
         name: 'KeyAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/key/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/key/alarm/position',
+        name: 'KeyAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/key/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/key/alarm/video',
+        name: 'KeyAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/key/alarm/video'], keepAlive: true }
       }
     ]
   },
diff --git a/src/router/modules/regionSys.js b/src/router/modules/regionSys.js
index 9b4613a..43b8c38 100644
--- a/src/router/modules/regionSys.js
+++ b/src/router/modules/regionSys.js
@@ -85,6 +85,20 @@
         name: 'RegionAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/region/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/region/alarm/position',
+        name: 'RegionAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/region/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/region/alarm/video',
+        name: 'RegionAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/region/alarm/video'], keepAlive: true }
       }
     ]
   },
@@ -102,6 +116,20 @@
     },
     children: [
       {
+        path: '/region/staff/add',
+        name: 'RegionStaffAdd',
+        component: () => import('@/views/staff/staffAdd'),
+        hidden: true,
+        meta: { title: '人员登记', icon: '', permission: ['/region/staff/add'], keepAlive: true }
+      },
+      {
+        path: '/region/staff/edit',
+        name: 'RegionStaffEdit',
+        component: () => import('@/views/staff/staffEdit'),
+        hidden: true,
+        meta: { title: '人员编辑', icon: '', permission: ['/region/staff/edit'], keepAlive: true }
+      },
+      {
         path: '/region/staff/list',
         name: 'RegionStaffList',
         component: () => import('@/views/staff/staffList'),
diff --git a/src/views/alarm/alarmList.vue b/src/views/alarm/alarmList.vue
index 704f797..91967a0 100644
--- a/src/views/alarm/alarmList.vue
+++ b/src/views/alarm/alarmList.vue
@@ -37,7 +37,7 @@
             </el-col>
 
             <el-col :span="4" 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" @click="fetchData()">搜索</el-button>
             </el-col>
           </el-row>
         </el-form>
@@ -48,7 +48,7 @@
       <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="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>
@@ -66,8 +66,8 @@
         <!--操作列-->
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
-            <el-button type="text" @click="detail(scope.row)">位置</el-button>
-            <el-button v-if="hasPerm('/car/update')" type="text" @click="edit(scope.row)">视频</el-button>
+            <el-button type="text" @click="position(scope.row)">位置</el-button>
+            <el-button v-if="hasPerm('/car/update')" type="text" @click="video(scope.row)">视频</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -185,6 +185,14 @@
     this.fetchData() // 获取数据
   },
   methods: {
+    video(row){
+      const code = this.$store.getters.currentSystem.code
+      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId }})
+    },
+    position(row){
+      const code = this.$store.getters.currentSystem.code
+      this.$router.push({ path: '/' + code + '/alarm/position', query: {  id: row.deviceId }})
+    },
     batchExport() {
       // 全屏加载动画
       const loading = this.$loading({
@@ -254,6 +262,8 @@
       getAlarmList(this.listQuery).then(response => {
         if (response.code === 200) {
           this.list = response.data.rows
+          console.log('&&&')
+          console.log(this.list)
           this.total = parseInt(response.data.total)
         } else {
           this.$message.error(response.message)
diff --git a/src/views/alarm/alarmMonitor.vue b/src/views/alarm/alarmMonitor.vue
new file mode 100644
index 0000000..517d6e9
--- /dev/null
+++ b/src/views/alarm/alarmMonitor.vue
@@ -0,0 +1,80 @@
+<template>
+  <div>
+    <el-row>
+      <!--<el-col :span="6">-->
+        <!--&lt;!&ndash;<video-tree @click="handleCameraClicked"/>&ndash;&gt;-->
+      <!--</el-col>-->
+
+      <el-col :span="18" :offset="3">
+        <web-play ref="webCtrl" />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+// import VideoTree from './videoTree'
+import WebPlay from './webPlay'
+import { getDetailDevice } from '@/api/device'
+export default {
+  name: 'VideoMonitor',
+  components: { WebPlay },
+  data() {
+    return {
+      camera:{
+        ip:'',
+        port:'',
+        username:'',
+        password:''
+      }
+    }
+  },
+  mounted() {
+
+  },
+  activated() {
+    if (this.$route.query && this.$route.query.id) {
+      const id = this.$route.query.id
+      getDetailDevice(id).then(response => {
+          if (response.code === 200) {
+            console.log(response.data)
+            this.camera.ip = response.data.ip
+            this.camera.port = response.data.port
+            this.camera.username = response.data.username
+            this.camera.password = response.data.password
+            this.handleCamera()
+          }
+      })
+    }
+  },
+  methods: {
+    handleCamera(){
+      if (typeof this.camera.ip === 'undefined' || this.camera.ip === '') {
+        console.log('ip is null')
+        return false
+      }
+      if (typeof this.camera.port === 'undefined' || this.camera.port === '') {
+        console.log('port is null')
+        return false
+      }else{
+        this.camera.ip += (':'+ this.camera.port)
+      }
+      if (typeof this.camera.username === 'undefined' || this.camera.username === '') {
+        console.log('username is null')
+        return false
+      }
+      if (typeof this.camera.password === 'undefined' || this.camera.password === '') {
+        console.log('password is null')
+        return false
+      }
+
+      // 开始预览
+      this.$refs.webCtrl.$refs.play.contentWindow.startPlayReal(this.camera)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/alarm/alarmNow.vue b/src/views/alarm/alarmNow.vue
index 03bb5ea..66055b1 100644
--- a/src/views/alarm/alarmNow.vue
+++ b/src/views/alarm/alarmNow.vue
@@ -48,7 +48,7 @@
       <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="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>
@@ -66,8 +66,8 @@
         <el-table-column label="操作" align="center" width="180">
           <template slot-scope="scope">
             <el-button v-if="hasPerm('/alarm/cancel')" type="text" @click="alarmCancel(scope.row)">取消报警</el-button>
-            <el-button type="text" @click="detail(scope.row)">位置</el-button>
-            <el-button type="text" @click="edit(scope.row)">视频</el-button>
+            <el-button type="text" @click="position(scope.row)">位置</el-button>
+            <el-button v-if="hasPerm('/car/update')" type="text" @click="video(scope.row)">视频</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -183,6 +183,14 @@
     this.fetchData() // 获取数据
   },
   methods: {
+    video(row){
+      const code = this.$store.getters.currentSystem.code
+      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId }})
+    },
+    position(row){
+      const code = this.$store.getters.currentSystem.code
+      this.$router.push({ path: '/' + code + '/alarm/position', query: {  id: row.deviceId }})
+    },
     batchExport() {
       // 全屏加载动画
       const loading = this.$loading({
diff --git a/src/views/alarm/alarmPosition.vue b/src/views/alarm/alarmPosition.vue
new file mode 100644
index 0000000..51f915e
--- /dev/null
+++ b/src/views/alarm/alarmPosition.vue
@@ -0,0 +1,786 @@
+<template>
+  <div class="main-page">
+    <!-- 中间平面图区域 -->
+    <div class="map-overview">
+      <img ref="bgImg" :src="bgImageSrc" height="100%" @load="backgroundImageReady">
+
+      <div
+        v-for="item in devList"
+        :id="item.id"
+        :key="item.id"
+        :style="{ position: 'absolute', top: item.y * imgSize.height / imgSizeOriginal.height + 'px', left: (item.x * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
+        class="point-camera"
+        @click="detailDev(item, $event)" />
+    </div>
+    <!-- 右侧设备详情及操作区域 -->
+    <div v-show="showDevDetail" ref="dev-detail-block" class="dev-detail-block">
+      <span class="dev-detail-close" @click="showDevDetail=false" />
+      <el-row style="margin-top: -25px;">
+        <el-col :span="24">设备名称
+          <span class="dev-detail-span">{{ dataForm.name }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">设备编号
+          <span class="dev-detail-span">{{ dataForm.devcode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">设备类型
+          <span class="dev-detail-span">{{ dataForm.typeName }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">在线状态
+          <span class="dev-detail-span">{{ dataForm.onlineStatusName }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">安装日期
+          <span class="dev-detail-span">{{ dataForm.installDate }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">安装位置
+          <span class="dev-detail-span">{{ dataForm.position }}</span>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getProject } from '@/utils/baseConfig'
+import DeviceDetail from '@/views/deviceManage/deviceDetail'
+import tg_main from '../../assets/overview_images/tg/mapOverviewTg.jpg'
+import tg_3_1 from '../../assets/overview_images/tg/mapOverviewTg-3-1.jpg'
+import tg_4_1 from '../../assets/overview_images/tg/mapOverviewTg-4-1.jpg'
+import tg_4_5 from '../../assets/overview_images/tg/mapOverviewTg-4-5.jpg'
+import { getDetailDevice } from '@/api/device'
+
+// const cameraTypes = [4, 5, 8, 9, 10, 11]
+export default {
+  name: 'AlarmPosition',
+  components: { DeviceDetail },
+  data() {
+    return {
+      title: getProject().title,
+      bgImageSrc: tg_main,
+      devListParams: {
+        picture: '1',
+        areaTypeId: 1,
+        deviceTypes: []
+      },
+      dev: {
+        alarm: 0,
+        onLine: 0,
+        closed: 0,
+        offLine: 0
+      },
+      imgSizeOriginal: {
+        width: 2245,
+        height: 1586
+      }, // 图片原尺寸
+      imgSize: {
+        width: 2245,
+        height: 1586
+      }, // 图片显示尺寸
+      winSize: {
+        width: 1440,
+        height: 789
+      }, // 屏幕窗口尺寸
+      halfLeft: 0,
+      showDevDetail: false, // 是否显示设备详情
+      alarmList: [], // 报警列表
+      alarmColumns: [
+        {
+          text: '设备编号',
+          value: 'devcode',
+          align: 'center'
+        },
+        {
+          text: '报警内容',
+          value: 'alarmContent',
+          align: 'center'
+        },
+        {
+          text: '报警时间',
+          value: 'alarmTime',
+          align: 'center',
+          width: 165
+        }
+      ], // 报警列表显示列
+      tableShow: true, // 是否显示告警列表
+      devList: [], // 设备列表（在地图上显示）
+      dataForm: {
+        id: '', // id
+        name: '', // 设备名
+        devcode: '', // 设备编号
+        typeName: '', // 设备类型
+        model: '', // 设备型号
+        onlineStatusName: '', // 在线状态
+        deviceStatusName: '', // 设备状态
+        position: '', // 安装位置
+        installDate: '', // 安装日期
+        inOutName: '' // 进出营
+      }, // 设备详情表单
+      devPosition:{
+        picture: '',
+        x: '',
+        y: ''
+      },
+      checkDevType: [true, false] // 选中设备类型
+    }
+  },
+  mounted() {
+    this.initWindowSize()
+    if (this.$route.query && this.$route.query.id) {
+      const id = this.$route.query.id
+      getDetailDevice(id).then(response => {
+        if (response.code === 200) {
+          console.log(response.data)
+          this.devPosition.picture = response.data.picture
+          this.devPosition.x = response.data.x
+          this.devPosition.y = response.data.y
+          if(this.devPosition.picture === '1'){
+            this.bgImageSrc = tg_main
+          }else if(this.devPosition.picture === '2'){
+            this.bgImageSrc = tg_3_1
+          }else if(this.devPosition.picture === '3'){
+            this.bgImageSrc = tg_4_1
+          }else if(this.devPosition.picture === '4'){
+            this.bgImageSrc = tg_4_5
+          }else{
+            this.$message.warning('该设备暂无位置信息')
+            return
+          }
+          this.devList = []
+          if (this.devPosition.x !== '' && this.devPosition.y !== '') {
+            this.devList.push(response.data)
+          }
+        }
+      })
+    }
+    const that = this
+    window.onresize = function() {
+      that.initWindowSize()
+      that.getBgImageSize()
+    }
+  },
+  methods: {
+    // 获取窗口大小
+    initWindowSize() {
+      // 获取窗体尺寸
+      this.winSize = {
+        width: document.documentElement.clientWidth,
+        height: document.documentElement.clientHeight
+      }
+    },
+    // 获取图像大小
+    getBgImageSize() {
+      // 获取图片尺寸
+      this.imgSize = {
+        width: this.$refs['bgImg'].width,
+        height: this.$refs['bgImg'].height
+      }
+      this.halfLeft = (this.winSize.width - this.imgSize.width) / 2
+    },
+    // 重新绘制设备点位
+    reDrawDevs() {
+      const halfLeft = (this.winSize.width - this.imgSize.width) / 2
+
+      // 调整球机的设备位置
+      const that = this
+      this.devList.forEach(function(item) {
+        const point = document.getElementById(item.id)
+
+        if (point !== null) {
+          if (item.x !== '' && item.y !== '') {
+            point.style.position = 'absolute'
+            point.style.top = item.y * that.imgSize.height / that.imgSizeOriginal.height + 'px'
+            point.style.left = (item.x * that.imgSize.width / that.imgSizeOriginal.width + halfLeft) + 'px'
+          } else {
+            point.style.display = 'none'
+          }
+        }
+      })
+    },
+    // 平面图就绪时执行函数
+    backgroundImageReady() {
+      this.getBgImageSize()
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    },
+    backToIndex() {
+      this.$router.push('/door/alarm/now')
+    },
+    // 查询并显示设备详情
+    detailDev(dev, event) {
+      this.resetDevDetail()
+      getDetailDevice(dev.id).then(response => {
+        if (response.code === 200) {
+          this.dataForm = {
+            id: dev.id,
+            name: dev.name,
+            devcode: dev.devcode,
+            typeName: response.data.typeName,
+            model: dev.model,
+            onlineStatusName: response.data.onlineStatusName,
+            position: dev.position,
+            installDate: dev.installDate,
+            inOutName: response.data.inOutName,
+            deviceStatusName: response.data.deviceStatusName
+          }
+        } else {
+          this.$message.error(response.message)
+        }
+      })
+
+      // 弹窗显示设备详情
+      const targetDev = event.currentTarget // 取到点击到的设备图标div
+
+      this.showDevDetail = true
+      let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+      top = top + 100
+      this.$refs['dev-detail-block'].style.position = 'absolute'
+      this.$refs['dev-detail-block'].style.top = top + 'px'
+      this.$refs['dev-detail-block'].style.left = targetDev.style.left
+    },
+    // 点击报警列表
+    alarmRowClick(dev, column, event) {
+
+    },
+    // 清除设备详情
+    resetDevDetail() {
+      this.dataForm = {
+        id: '', // id
+        name: '', // 设备名
+        devcode: '', // 设备编号
+        typeName: '', // 设备类型
+        model: '', // 设备型号
+        onlineStatusName: '', // 在线状态
+        deviceStatusName: '', // 设备状态
+        position: '', // 安装位置
+        installDate: '', // 安装日期
+        inOutName: '' // 进出营
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+  .main-page {
+    background-size: cover;
+    background-color: #023d83;
+    height: 100vh;
+  }
+
+  .main-header {
+    width: 100vw;
+  }
+  .main-title {
+    height: 90px;
+    text-align: center;
+    padding-top: 20px;
+    background: url("../../assets/overview_images/title-background-1920.png");
+  }
+
+  .main-title img {
+    display: inline-block;
+    margin-right: 15px;
+    width: 52px;
+    height: 32px;
+    vertical-align: text-bottom;
+  }
+
+  .home-icon {
+    width: 26px;
+    height: 26px;
+    position: fixed;
+    left: 20px;
+    top: 20px;
+  }
+  .exit-icon {
+    width: 26px;
+    height: 26px;
+    position: fixed;
+    right: 20px;
+    top: 20px;
+  }
+  .home-icon img, .exit-icon img {
+    width: 26px;
+    height: 26px;
+  }
+
+  .main-title span {
+    color: #FFFFFF;
+    font-size: 32px;
+    font-weight: bold;
+    font-family: 'Microsoft YaHei';
+  }
+
+  .map-overview {
+    /*margin-top: 50px;*/
+    /*width: 1100px;*/
+    height: calc(90vh - 200px);
+    text-align: center;
+    position: relative;
+  }
+  .point {
+    width: 24px;
+    height: 24px;
+    position: relative;
+    display: inline-block;
+    cursor: pointer;
+  }
+  .point-camera {
+    background: url("../../assets/overview_images/icons/icon-camera-point.png");
+    background-size: contain;
+    @extend .point;
+  }
+  .point-fence {
+    background: url("../../assets/overview_images/icons/icon-fence-unchecked.png");
+    background-size: contain;
+    @extend .point;
+  }
+
+  .statis-block {
+    text-align: center;
+    margin-top: 20px;
+    font-size: 48px;
+  }
+  .sub-title {
+    text-align: center;
+    font-size: 32px;
+  }
+  .sub-data-block {
+    width: 122px;
+    height: 155px;
+  }
+  .dev-normal {
+    background: url("../../assets/overview_images/normal.png");
+    background-size: contain;
+    color: #00ff0c;
+  }
+  .dev-alarm {
+    background: url("../../assets/overview_images/alarm.png");
+    background-size: contain;
+    color: #ff0000;
+  }
+  .dev-offline {
+    background: url("../../assets/overview_images/offline.png");
+    background-size: contain;
+    color: #fff000;
+  }
+  .dev-closed {
+    background: url("../../assets/overview_images/closed.png");
+    background-size: contain;
+    color: #00fff6;
+  }
+
+  .dev-status-block {
+    position: absolute;
+    top: 100px;
+    left: 20px;
+    color: #ffffff;
+  }
+
+  .alarm-now-block {
+    position: absolute;
+    z-index: 500;
+    top: 300px;
+    left: 20px;
+    width: 480px;
+    .map-alarm-div-header {
+      line-height: 40px;
+      padding-left: 10px;
+      color: #00fff6;
+      font-size: 24px;
+      .icon-right {
+        cursor: pointer;
+        margin-left: 20px;
+      }
+    }
+    .el-scrollbar {
+      /*height: 200px;*/
+      width: 100%;
+    }
+    .moredatascollor {
+      height: 200px;
+    }
+    .el-scrollbar__wrap {
+      overflow-y: auto;
+      overflow-x: hidden;
+      margin-bottom: 0px !important;
+    }
+    .el-table {
+      font-size: 12px;
+    }
+    .transition-box {
+      margin-bottom: 10px;
+      width: 200px;
+      height: 100px;
+      border-radius: 4px;
+      background-color: #409EFF;
+      text-align: center;
+      color: #fff;
+      padding: 40px 20px;
+      box-sizing: border-box;
+      margin-right: 20px;
+    }
+  }
+
+  .alarm-now-block /deep/ .el-table th {
+    background-color: #0757A0;
+    padding: 12px 0px;
+    font-size: 16px;
+    color: #00fff6;
+    font-weight: normal;
+  }
+
+  .alarm-now-block /deep/ .el-table td {
+    /*background-color: #0757A0;*/
+    padding: 10px 0px;
+    font-size: 15px;
+    color: #FFFFFF;
+    font-weight: normal;
+  }
+
+  .alarm-now-block /deep/ .el-table__row td {
+    background-color: #023D83;
+  }
+  .alarm-now-block /deep/ .el-table__body tr:hover > td {
+    background-color: #0757A0;
+  }
+  .alarm-now-block /deep/ tr.el-table__row--striped td {
+    background-color: #0757A0;
+  }
+
+  .map-tab {
+    position: absolute;
+    right: 20px;
+    top: 100px;
+    width: 300px;
+    button {
+      margin: 5px 0px;
+    }
+  }
+
+  .tab-top {
+    position: relative;
+    width: 284px;
+    height: 24px;
+    background: url("../../assets/overview_images/tab-top-bg.png");
+  }
+  .tab-bottom {
+    position: relative;
+    width: 284px;
+    height: 24px;
+    background: url("../../assets/overview_images/tab-bottom-bg.png");
+  }
+  .map-index-button {
+    position: relative;
+    width: 284px;
+    height: 74px;
+    background: url("../../assets/overview_images/tab-index-unchecked.png");
+    font-size: 32px;
+    line-height: 74px;
+    text-align: center;
+    color: #FFFFFF;
+    cursor: pointer;
+  }
+  .index-selected {
+    background: url("../../assets/overview_images/tab-index-checked.png");
+  }
+  .sub-tab-guider {
+    width: 149px;
+    height: 50px;
+    background: url("../../assets/overview_images/sub-tab-guider.png");
+  }
+  .sub-tab-border {
+    width: 204px;
+    height: 253px;
+    background: url("../../assets/overview_images/sub-tab-border.png");
+  }
+  .sub-tab-content {
+    text-align: center;
+    color: #FFFFFF;
+    font-size: 28px;
+    cursor: pointer;
+    width: 200px;
+  }
+
+  .dev-detail-block {
+    /*position: absolute;*/
+    /*right: 20px;*/
+    /*bottom: 100px;*/
+    width: 520px;
+    height: 335px;
+    color: #00FFFF;
+    font-size: 24px;
+    font-family: "Microsoft YaHei";
+    padding: 45px 60px;
+    line-height: 35px;
+    background: url("../../assets/overview_images/dev-info.png");
+    .dev-detail-span {
+      margin-left: 20px;
+    }
+    .dev-detail-close::before {
+      content: "\2716";
+      position: relative;
+      top: -20px;
+      right: -410px;
+      cursor: pointer;
+    }
+  }
+
+  .dev-footer {
+    position: absolute;
+    bottom: 25px;
+  }
+
+  .dev-icon {
+    width: 195px;
+    height: 105px;
+    vertical-align: middle;
+    line-height: 65px;
+    padding: 20px 30px !important;
+    margin-left: 15px;
+    cursor: pointer;
+    background: url("../../assets/overview_images/dev-type-border-unchecked.png");
+  }
+
+  .dev-icon img {
+    height: 40px;
+    vertical-align:middle;
+  }
+  .dev-icon span {
+    font-size: 20px;
+    color: #00D2FF;
+    line-height: 65px;
+    height: 65px;
+    vertical-align:middle;
+    float: right;
+  }
+
+  .dev-type-selected {
+    background: url("../../assets/overview_images/dev-type-border-checked.png");
+  }
+  .dev-type-selected span {
+    color: #f58a88 !important;
+  }
+
+  /*@media(max-width: 1440px) {*/
+  /*  .main-title {*/
+  /*    height: 68px;*/
+  /*    padding-top: 20px;*/
+  /*    background: url("../../assets/overview_images/title-background-1440.png");*/
+  /*  }*/
+  /*  .main-title span {*/
+  /*    font-size: 24px;*/
+  /*  }*/
+  /*  .main-title img {*/
+  /*    margin-right: 15px;*/
+  /*    width: 32px;*/
+  /*    height: 32px;*/
+  /*  }*/
+
+  /*  .home-icon {*/
+  /*    left: 18px;*/
+  /*    width: 18px;*/
+  /*    height: 18px;*/
+  /*  }*/
+  /*  .exit-icon {*/
+  /*    right: 18px;*/
+  /*    width: 18px;*/
+  /*    height: 18px;*/
+  /*  }*/
+
+  /*  .home-icon img, .exit-icon img {*/
+  /*    width: 18px;*/
+  /*    height: 18px;*/
+  /*  }*/
+
+  /*  .dev-icon span {*/
+  /*    font-size: 12px;*/
+  /*  }*/
+  /*}*/
+
+  @media(max-width: 1440px) {
+    .main-title {
+      height: 65px;
+      padding-top: 16px;
+      background: url("../../assets/overview_images/title-background-1366.png");
+    }
+    .main-title span {
+      font-size: 24px;
+    }
+    .main-title img {
+      margin-right: 15px;
+      width: 32px;
+      height: 32px;
+    }
+
+    .home-icon {
+      left: 16px;
+      width: 16px;
+      height: 16px;
+    }
+    .exit-icon {
+      right: 16px;
+      width: 16px;
+      height: 16px;
+    }
+
+    .home-icon img, .exit-icon img {
+      width: 20px;
+      height: 20px;
+    }
+
+    .map-overview {
+      margin-top: 35px;
+      height: calc(90vh - 150px);
+    }
+
+    .point {
+      width: 16px;
+      height: 16px;
+    }
+
+    .statis-block {
+      margin-top: 16px;
+      font-size: 36px;
+    }
+    .sub-title {
+      font-size: 24px;
+    }
+    .sub-data-block {
+      width: 90px;
+      height: 114px;
+    }
+
+    .dev-normal {
+      background: url("../../assets/overview_images/normal-1366.png");
+    }
+    .dev-alarm {
+      background: url("../../assets/overview_images/alarm-1366.png");
+    }
+    .dev-offline {
+      background: url("../../assets/overview_images/offline-1366.png");
+    }
+    .dev-closed {
+      background: url("../../assets/overview_images/closed-1366.png");
+    }
+
+    .dev-status-block {
+      top: 90px;
+      left: 16px;
+    }
+
+    .alarm-now-block {
+      top: 220px;
+      left: 16px;
+      width: 360px;
+      .map-alarm-div-header {
+        line-height: 32px;
+        font-size: 20px;
+      }
+    }
+
+    .alarm-now-block /deep/ .el-table th {
+      padding: 8px 0px;
+      font-size: 16px;
+    }
+    .alarm-now-block /deep/ .el-table td {
+      padding: 5px 0px;
+      font-size: 12px;
+    }
+
+    .map-tab {
+      right: 16px;
+      top: 90px;
+      width: 215px;
+      button {
+        margin: 5px 0px;
+      }
+    }
+    .tab-top {
+      width: 213px;
+      height: 18px;
+      background: url("../../assets/overview_images/tab-top-bg-1366.png");
+    }
+    .tab-bottom {
+      width: 213px;
+      height: 18px;
+      background: url("../../assets/overview_images/tab-bottom-bg-1366.png");
+    }
+    .map-index-button {
+      width: 210px;
+      height: 56px;
+      background: url("../../assets/overview_images/tab-index-unchecked-1366.png");
+      font-size: 24px;
+      line-height: 56px;
+    }
+    .index-selected {
+      background: url("../../assets/overview_images/tab-index-checked-1366.png");
+    }
+
+    .sub-tab-guider {
+      width: 110px;
+      height: 37px;
+      background: url("../../assets/overview_images/sub-tab-guider-1366.png");
+    }
+    .sub-tab-border {
+      width: 150px;
+      height: 186px;
+      background: url("../../assets/overview_images/sub-tab-border-1366.png");
+    }
+    .sub-tab-content {
+      font-size: 20px;
+      cursor: pointer;
+      width: 145px;
+    }
+
+    .dev-detail-block {
+      width: 390px;
+      height: 251px;
+      font-size: 16px;
+      padding: 30px 40px;
+      line-height: 28px;
+      background: url("../../assets/overview_images/dev-info-1366.png");
+      .dev-detail-close::before {
+        top: -12px;
+        right: -312px;
+      }
+    }
+
+    .dev-footer {
+      bottom: 20px;
+    }
+    .dev-icon {
+      width: 140px;
+      height: 76px;
+      line-height: 56px;
+      padding: 10px 16px !important;
+      margin-left: 15px;
+      background: url("../../assets/overview_images/dev-type-border-unchecked-1366.png");
+    }
+    .dev-icon img {
+      height: 32px;
+    }
+    .dev-icon span {
+      font-size: 16px;
+      line-height: 56px;
+      height: 56px;
+    }
+    .dev-type-selected {
+      background: url("../../assets/overview_images/dev-type-border-checked-1366.png");
+    }
+  }
+
+</style>
diff --git a/src/views/alarm/webPlay.vue b/src/views/alarm/webPlay.vue
new file mode 100644
index 0000000..97e5ed2
--- /dev/null
+++ b/src/views/alarm/webPlay.vue
@@ -0,0 +1,21 @@
+<template>
+  <div class="play-window-block">
+    <div style="height: 100%">
+      <iframe ref="play" src="/static/webCtrl/demo-easy.html" width="100%" height="100%" style="border: 0px; overflow: hidden;" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'WebPlay'
+}
+</script>
+
+<style scoped>
+  .play-window-block {
+    margin: 15px 15px 15px 0px;
+    box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
+    height: calc(100vh - 175px);
+  }
+</style>
diff --git a/src/views/area/areaList.vue b/src/views/area/areaList.vue
index 1950028..11dc51f 100644
--- a/src/views/area/areaList.vue
+++ b/src/views/area/areaList.vue
@@ -31,7 +31,7 @@
       <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="batchExport">导出</el-button>-->
+          <!--<el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>-->
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>
diff --git a/src/views/area/defenceDetail.vue b/src/views/area/defenceDetail.vue
index e29a258..703ec7d 100644
--- a/src/views/area/defenceDetail.vue
+++ b/src/views/area/defenceDetail.vue
@@ -4,12 +4,14 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="区域名称">
-            <span>{{ dataForm.name }}</span>
+            <el-input v-model="dataForm.name" disabled type="text"/>
+            <!--<span>{{ dataForm.name }}</span>-->
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="防卫状态">
-            <span>{{ dataForm.areaStatusName }}</span>
+            <el-input v-model="dataForm.areaStatusName" disabled type="text"/>
+            <!--<span>{{ dataForm.areaStatusName }}</span>-->
           </el-form-item>
         </el-col>
       </el-row>
@@ -17,12 +19,14 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="区域类别">
-            <span>{{ dataForm.areaTypeName }}</span>
+            <el-input v-model="dataForm.areaTypeName" disabled type="text"/>
+            <!--<span>{{ dataForm.areaTypeName }}</span>-->
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="区域位置">
-            <span>{{ dataForm.position }}</span>
+            <el-input v-model="dataForm.position" disabled type="text"/>
+            <!--<span>{{ dataForm.position }}</span>-->
           </el-form-item>
         </el-col>
       </el-row>
@@ -38,7 +42,8 @@
       <el-row v-show="isFence" :gutter="20">
         <el-col :span="12">
           <el-form-item label="电子围栏">
-            <span>{{ dataForm.deviceStatusName }}</span>
+            <el-input v-model="dataForm.deviceStatusName" disabled type="text"/>
+            <!--<span>{{ dataForm.deviceStatusName }}</span>-->
           </el-form-item>
         </el-col>
       </el-row>
@@ -46,7 +51,8 @@
       <el-row :gutter="20">
         <el-col :span="24">
           <el-form-item label="备注" prop="remark">
-            <span>{{ dataForm.remark }}</span>
+            <el-input v-model="dataForm.remark" disabled type="text"/>
+            <!--<span>{{ dataForm.remark }}</span>-->
           </el-form-item>
         </el-col>
       </el-row>
diff --git a/src/views/area/defenceList.vue b/src/views/area/defenceList.vue
index 9e2ed68..8649918 100644
--- a/src/views/area/defenceList.vue
+++ b/src/views/area/defenceList.vue
@@ -31,9 +31,9 @@
       <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">批量导入</el-button>
-          <el-button class="edit_btn" size="small">导入模板下载</el-button>
-          <!--<el-button class="edit_btn" size="small" @click="batchExport">导出</el-button>-->
+          <!--<el-button class="edit_btn" size="small">批量导入</el-button>-->
+          <!--<el-button class="edit_btn" size="small">导入模板下载</el-button>-->
+          <!--<el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>-->
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>
diff --git a/src/views/car/carAdd.vue b/src/views/car/carAdd.vue
index 6a35b7d..633e353 100644
--- a/src/views/car/carAdd.vue
+++ b/src/views/car/carAdd.vue
@@ -20,14 +20,14 @@
         <el-col :span="12">
           <el-form-item label="所属部门" prop="deptid">
             <!--<span v-show="isDetailMode">{{ dataForm.deptName }}</span>-->
-            <el-select :disabled="isDetailMode" v-model="dataForm.deptid" placeholder="请选择所属部门" filterable clearable>
+            <el-select :disabled="isDetailMode" v-model="dataForm.deptid" placeholder="请选择所属部门" filterable clearable @change="getStaffList">
               <el-option v-for="item in deptList" :key="item.id" :label="item.name" :value="item.id"/>
             </el-select>
             <!--<dept-select v-show="!isDetailMode" v-model="dataForm.deptid" :dept-show="true" :need-top="true" placeholder="所属组织" @change="fetchStaffList"/>-->
           </el-form-item>
         </el-col>
         <el-col v-if="dataForm.property==='2'" :span="12">
-          <el-form-item label="车主" prop="owner">
+          <el-form-item label="车主" prop="ownerId">
             <!--<span v-show="isDetailMode">{{ dataForm.ownerName }}</span>-->
             <el-select :disabled="isDetailMode" v-model="dataForm.ownerId" placeholder="请选择车主" filterable clearable @change="autoStaffPhone">
               <el-option v-for="item in staffList" :key="item.id" :label="item.name" :value="item.id"/>
@@ -91,7 +91,7 @@
       rules: {
         phone: [{ required: true, trigger: ['blur', 'change'], validator: phoneValidator }],
         plateNumber: [{ required: true, trigger: ['blur', 'change'], validator: plateValidator }],
-        owner: [{ required: true, trigger: ['blur', 'change'], message: '请选择车主' }]
+        ownerId: [{ required: true, trigger: ['blur', 'change'], message: '请选择车主' }]
       }, // 前端校验规则
       carProperties: [], // 车辆性质字典值
       staffList: [], // 车主人员列表
@@ -137,6 +137,7 @@
           phone: row.phone,
           remark: row.remark
         }
+        this.getStaffList()
       } else if (dialogStatus === 'detail') {
         this.isDetailMode = true
         this.isEditMode = false
@@ -151,6 +152,7 @@
           deptName: row.deptName,
           ownerName: row.ownerName
         }
+        this.getStaffList()
       }
     },
     // 清除数据
@@ -180,6 +182,13 @@
       })
       getStaffByDept({ deptId: this.dataForm.deptid }).then(response => {
         this.staffList = response.data
+        console.log(response)
+      })
+    },
+    getStaffList(){
+      getStaffByDept({ deptId: this.dataForm.deptid }).then(response => {
+        this.staffList = response.data
+        console.log(response)
       })
     },
     autoStaffPhone() {
@@ -190,7 +199,6 @@
             return item
           }
         })
-
         this.dataForm.phone = selectedStaff[0].phone
       } else {
         this.dataForm.phone = ''
diff --git a/src/views/car/carList.vue b/src/views/car/carList.vue
index ceb77ff..d0c0176 100644
--- a/src/views/car/carList.vue
+++ b/src/views/car/carList.vue
@@ -31,7 +31,7 @@
       <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="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
           <el-button v-if="hasPerm('/door/car/add')" class="edit_btn" size="small" @click="add">新增</el-button>
           <!--          <el-button v-if="hasPerm('/door/car/delete')" v-show="false" class="edit_btn" size="small" @click="batchDel">删除</el-button>-->
         </el-col>
diff --git a/src/views/deviceManage/deviceList.vue b/src/views/deviceManage/deviceList.vue
index 5966b45..feb4b36 100644
--- a/src/views/deviceManage/deviceList.vue
+++ b/src/views/deviceManage/deviceList.vue
@@ -48,7 +48,7 @@
       <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="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border @selection-change="handleSelectionChange">
diff --git a/src/views/overview/doorIndex.vue b/src/views/overview/doorIndex.vue
index 03624bb..4f48bd0 100644
--- a/src/views/overview/doorIndex.vue
+++ b/src/views/overview/doorIndex.vue
@@ -285,6 +285,7 @@
         if (response.code === 200) {
           const that = this
           this.devList = []
+          console.log(response)
           response.data.forEach(dev => {
             if (dev.x !== '' && dev.y !== '') {
               that.devList.push(dev)
diff --git a/src/views/staff/staffDetail.vue b/src/views/staff/staffDetail.vue
index 8fc4c6d..50f7166 100644
--- a/src/views/staff/staffDetail.vue
+++ b/src/views/staff/staffDetail.vue
@@ -16,12 +16,14 @@
           <el-row :gutter="20">
             <el-col :span="12">
               <el-form-item label="姓名">
-                <span>{{ dataForm.name }}</span>
+                <el-input v-model="dataForm.name" disabled type="text"/>
+                <!--<span>{{ dataForm.name }}</span>-->
               </el-form-item>
             </el-col>
             <el-col :span="12">
               <el-form-item label="身份证号">
-                <span>{{ dataForm.idCard }}</span>
+                <el-input v-model="dataForm.idCard" disabled type="text"/>
+                <!--<span>{{ dataForm.idCard }}</span>-->
               </el-form-item>
             </el-col>
           </el-row>
@@ -29,12 +31,14 @@
           <el-row :gutter="20">
             <el-col :span="12">
               <el-form-item label="出生日期">
-                <span>{{ dataForm.birthday }}</span>
+                <el-input v-model="dataForm.birthday" disabled type="text"/>
+                <!--<span>{{ dataForm.birthday }}</span>-->
               </el-form-item>
             </el-col>
             <el-col :span="12">
               <el-form-item label="性别">
-                <span>{{ dataForm.sex }}</span>
+                <el-input v-model="dataForm.sex" disabled type="text"/>
+                <!--<span>{{ dataForm.sex }}</span>-->
               </el-form-item>
             </el-col>
           </el-row>
@@ -42,13 +46,15 @@
           <el-row :gutter="20">
             <el-col :span="12">
               <el-form-item label="所在部门">
-                <span>{{ dataForm.deptName }}</span>
+                <el-input v-model="dataForm.deptName" disabled type="text"/>
+                <!--<span>{{ dataForm.deptName }}</span>-->
               </el-form-item>
             </el-col>
 
             <el-col :span="12">
               <el-form-item label="联系电话">
-                <span>{{ dataForm.phone }}</span>
+                <el-input v-model="dataForm.phone" disabled type="text"/>
+                <!--<span>{{ dataForm.phone }}</span>-->
               </el-form-item>
             </el-col>
           </el-row>
@@ -56,7 +62,8 @@
           <el-row>
             <el-col :span="24">
               <el-form-item label="住址">
-                <span>{{ dataForm.address }}</span>
+                <el-input v-model="dataForm.address" disabled type="text"/>
+                <!--<span>{{ dataForm.address }}</span>-->
               </el-form-item>
             </el-col>
           </el-row>
diff --git a/src/views/staff/staffList.vue b/src/views/staff/staffList.vue
index 4a92b0c..c6ad796 100644
--- a/src/views/staff/staffList.vue
+++ b/src/views/staff/staffList.vue
@@ -44,7 +44,7 @@
           </el-upload>
           <download-template :filename="personImpTem" btnname="导入模板下载"/>
           <el-button v-if="hasPerm('/staff/delete')" size="small" class="edit_btn" @click="del">删除</el-button>
-          <el-button class="edit_btn" size="small" @click="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
           <el-button v-if="hasPerm('/staff/add')" class="edit_btn" size="small" @click="add">新增</el-button>
         </el-col>
       </el-row>
diff --git a/src/views/statistics/carDuration.vue b/src/views/statistics/carDuration.vue
index e4093d5..9cb4041 100644
--- a/src/views/statistics/carDuration.vue
+++ b/src/views/statistics/carDuration.vue
@@ -41,7 +41,7 @@
       <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="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>
diff --git a/src/views/statistics/inOutCar.vue b/src/views/statistics/inOutCar.vue
index 9371b0d..effdfb7 100644
--- a/src/views/statistics/inOutCar.vue
+++ b/src/views/statistics/inOutCar.vue
@@ -48,7 +48,7 @@
       <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="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>
diff --git a/src/views/statistics/inOutPerson.vue b/src/views/statistics/inOutPerson.vue
index 6827de3..43a0636 100644
--- a/src/views/statistics/inOutPerson.vue
+++ b/src/views/statistics/inOutPerson.vue
@@ -48,7 +48,7 @@
       <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="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>
diff --git a/src/views/statistics/personDuration.vue b/src/views/statistics/personDuration.vue
index 063b247..6826319 100644
--- a/src/views/statistics/personDuration.vue
+++ b/src/views/statistics/personDuration.vue
@@ -41,7 +41,7 @@
       <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="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>
diff --git a/src/views/visitor/visitorCarTodayList.vue b/src/views/visitor/visitorCarTodayList.vue
index f8e00aa..828fe6d 100644
--- a/src/views/visitor/visitorCarTodayList.vue
+++ b/src/views/visitor/visitorCarTodayList.vue
@@ -35,7 +35,7 @@
       <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="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>

diff --git a/src/router/modules/doorSys.js b/src/router/modules/doorSys.js
index 8017e4b..6bd1506 100644
--- a/src/router/modules/doorSys.js
+++ b/src/router/modules/doorSys.js
@@ -87,6 +87,20 @@
         name: 'DoorAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/door/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/door/alarm/position',
+        name: 'DoorAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/door/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/door/alarm/video',
+        name: 'DoorAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/door/alarm/video'], keepAlive: true }
       }
     ]
   },
@@ -262,5 +276,26 @@
         meta: { title: '营门出入次数统计', icon: '', permission: ['/door/statistics/doorCount'], keepAlive: true }
       }
     ]
+  },
+  {
+    path: '/door/area',
+    component: Layout,
+    redirect: '/door/area',
+    name: 'DoorArea',
+    alwaysShow: true,
+    meta: {
+      title: '区域管理',
+      icon: 'icon-area', // 图标
+      permission: ['/door/area'], // 权限名称
+      sys: '/door'
+    },
+    children: [
+      {
+        path: '/door/area/list',
+        name: 'DoorAreaList',
+        component: () => import('@/views/area/areaList'),
+        meta: { title: '区域列表', icon: '', permission: ['/door/area/list'], keepAlive: true }
+      }
+    ]
   }
 ]
diff --git a/src/router/modules/fenceSys.js b/src/router/modules/fenceSys.js
index 0d784b0..e2962bd 100644
--- a/src/router/modules/fenceSys.js
+++ b/src/router/modules/fenceSys.js
@@ -85,6 +85,20 @@
         name: 'FenceAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/fence/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/fence/alarm/position',
+        name: 'FenceAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/fence/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/fence/alarm/video',
+        name: 'FenceAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/fence/alarm/video'], keepAlive: true }
       }
     ]
   },
diff --git a/src/router/modules/keySys.js b/src/router/modules/keySys.js
index f3a027b..832744b 100644
--- a/src/router/modules/keySys.js
+++ b/src/router/modules/keySys.js
@@ -85,6 +85,20 @@
         name: 'KeyAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/key/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/key/alarm/position',
+        name: 'KeyAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/key/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/key/alarm/video',
+        name: 'KeyAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/key/alarm/video'], keepAlive: true }
       }
     ]
   },
diff --git a/src/router/modules/regionSys.js b/src/router/modules/regionSys.js
index 9b4613a..43b8c38 100644
--- a/src/router/modules/regionSys.js
+++ b/src/router/modules/regionSys.js
@@ -85,6 +85,20 @@
         name: 'RegionAlarmList',
         component: () => import('@/views/alarm/alarmList'),
         meta: { title: '报警记录', icon: '', permission: ['/region/alarm/list'], keepAlive: true }
+      },
+      {
+        path: '/region/alarm/position',
+        name: 'RegionAlarmPostion',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmPosition'),
+        meta: { title: '报警位置', icon: '', permission: ['/region/alarm/position'], keepAlive: true }
+      },
+      {
+        path: '/region/alarm/video',
+        name: 'RegionAlarmVideo',
+        hidden: true,
+        component: () => import('@/views/alarm/alarmMonitor'),
+        meta: { title: '报警视频', icon: '', permission: ['/region/alarm/video'], keepAlive: true }
       }
     ]
   },
@@ -102,6 +116,20 @@
     },
     children: [
       {
+        path: '/region/staff/add',
+        name: 'RegionStaffAdd',
+        component: () => import('@/views/staff/staffAdd'),
+        hidden: true,
+        meta: { title: '人员登记', icon: '', permission: ['/region/staff/add'], keepAlive: true }
+      },
+      {
+        path: '/region/staff/edit',
+        name: 'RegionStaffEdit',
+        component: () => import('@/views/staff/staffEdit'),
+        hidden: true,
+        meta: { title: '人员编辑', icon: '', permission: ['/region/staff/edit'], keepAlive: true }
+      },
+      {
         path: '/region/staff/list',
         name: 'RegionStaffList',
         component: () => import('@/views/staff/staffList'),
diff --git a/src/views/alarm/alarmList.vue b/src/views/alarm/alarmList.vue
index 704f797..91967a0 100644
--- a/src/views/alarm/alarmList.vue
+++ b/src/views/alarm/alarmList.vue
@@ -37,7 +37,7 @@
             </el-col>
 
             <el-col :span="4" 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" @click="fetchData()">搜索</el-button>
             </el-col>
           </el-row>
         </el-form>
@@ -48,7 +48,7 @@
       <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="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>
@@ -66,8 +66,8 @@
         <!--操作列-->
         <el-table-column label="操作" align="center" width="160">
           <template slot-scope="scope">
-            <el-button type="text" @click="detail(scope.row)">位置</el-button>
-            <el-button v-if="hasPerm('/car/update')" type="text" @click="edit(scope.row)">视频</el-button>
+            <el-button type="text" @click="position(scope.row)">位置</el-button>
+            <el-button v-if="hasPerm('/car/update')" type="text" @click="video(scope.row)">视频</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -185,6 +185,14 @@
     this.fetchData() // 获取数据
   },
   methods: {
+    video(row){
+      const code = this.$store.getters.currentSystem.code
+      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId }})
+    },
+    position(row){
+      const code = this.$store.getters.currentSystem.code
+      this.$router.push({ path: '/' + code + '/alarm/position', query: {  id: row.deviceId }})
+    },
     batchExport() {
       // 全屏加载动画
       const loading = this.$loading({
@@ -254,6 +262,8 @@
       getAlarmList(this.listQuery).then(response => {
         if (response.code === 200) {
           this.list = response.data.rows
+          console.log('&&&')
+          console.log(this.list)
           this.total = parseInt(response.data.total)
         } else {
           this.$message.error(response.message)
diff --git a/src/views/alarm/alarmMonitor.vue b/src/views/alarm/alarmMonitor.vue
new file mode 100644
index 0000000..517d6e9
--- /dev/null
+++ b/src/views/alarm/alarmMonitor.vue
@@ -0,0 +1,80 @@
+<template>
+  <div>
+    <el-row>
+      <!--<el-col :span="6">-->
+        <!--&lt;!&ndash;<video-tree @click="handleCameraClicked"/>&ndash;&gt;-->
+      <!--</el-col>-->
+
+      <el-col :span="18" :offset="3">
+        <web-play ref="webCtrl" />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+// import VideoTree from './videoTree'
+import WebPlay from './webPlay'
+import { getDetailDevice } from '@/api/device'
+export default {
+  name: 'VideoMonitor',
+  components: { WebPlay },
+  data() {
+    return {
+      camera:{
+        ip:'',
+        port:'',
+        username:'',
+        password:''
+      }
+    }
+  },
+  mounted() {
+
+  },
+  activated() {
+    if (this.$route.query && this.$route.query.id) {
+      const id = this.$route.query.id
+      getDetailDevice(id).then(response => {
+          if (response.code === 200) {
+            console.log(response.data)
+            this.camera.ip = response.data.ip
+            this.camera.port = response.data.port
+            this.camera.username = response.data.username
+            this.camera.password = response.data.password
+            this.handleCamera()
+          }
+      })
+    }
+  },
+  methods: {
+    handleCamera(){
+      if (typeof this.camera.ip === 'undefined' || this.camera.ip === '') {
+        console.log('ip is null')
+        return false
+      }
+      if (typeof this.camera.port === 'undefined' || this.camera.port === '') {
+        console.log('port is null')
+        return false
+      }else{
+        this.camera.ip += (':'+ this.camera.port)
+      }
+      if (typeof this.camera.username === 'undefined' || this.camera.username === '') {
+        console.log('username is null')
+        return false
+      }
+      if (typeof this.camera.password === 'undefined' || this.camera.password === '') {
+        console.log('password is null')
+        return false
+      }
+
+      // 开始预览
+      this.$refs.webCtrl.$refs.play.contentWindow.startPlayReal(this.camera)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/alarm/alarmNow.vue b/src/views/alarm/alarmNow.vue
index 03bb5ea..66055b1 100644
--- a/src/views/alarm/alarmNow.vue
+++ b/src/views/alarm/alarmNow.vue
@@ -48,7 +48,7 @@
       <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="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>
@@ -66,8 +66,8 @@
         <el-table-column label="操作" align="center" width="180">
           <template slot-scope="scope">
             <el-button v-if="hasPerm('/alarm/cancel')" type="text" @click="alarmCancel(scope.row)">取消报警</el-button>
-            <el-button type="text" @click="detail(scope.row)">位置</el-button>
-            <el-button type="text" @click="edit(scope.row)">视频</el-button>
+            <el-button type="text" @click="position(scope.row)">位置</el-button>
+            <el-button v-if="hasPerm('/car/update')" type="text" @click="video(scope.row)">视频</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -183,6 +183,14 @@
     this.fetchData() // 获取数据
   },
   methods: {
+    video(row){
+      const code = this.$store.getters.currentSystem.code
+      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId }})
+    },
+    position(row){
+      const code = this.$store.getters.currentSystem.code
+      this.$router.push({ path: '/' + code + '/alarm/position', query: {  id: row.deviceId }})
+    },
     batchExport() {
       // 全屏加载动画
       const loading = this.$loading({
diff --git a/src/views/alarm/alarmPosition.vue b/src/views/alarm/alarmPosition.vue
new file mode 100644
index 0000000..51f915e
--- /dev/null
+++ b/src/views/alarm/alarmPosition.vue
@@ -0,0 +1,786 @@
+<template>
+  <div class="main-page">
+    <!-- 中间平面图区域 -->
+    <div class="map-overview">
+      <img ref="bgImg" :src="bgImageSrc" height="100%" @load="backgroundImageReady">
+
+      <div
+        v-for="item in devList"
+        :id="item.id"
+        :key="item.id"
+        :style="{ position: 'absolute', top: item.y * imgSize.height / imgSizeOriginal.height + 'px', left: (item.x * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
+        class="point-camera"
+        @click="detailDev(item, $event)" />
+    </div>
+    <!-- 右侧设备详情及操作区域 -->
+    <div v-show="showDevDetail" ref="dev-detail-block" class="dev-detail-block">
+      <span class="dev-detail-close" @click="showDevDetail=false" />
+      <el-row style="margin-top: -25px;">
+        <el-col :span="24">设备名称
+          <span class="dev-detail-span">{{ dataForm.name }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">设备编号
+          <span class="dev-detail-span">{{ dataForm.devcode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">设备类型
+          <span class="dev-detail-span">{{ dataForm.typeName }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">在线状态
+          <span class="dev-detail-span">{{ dataForm.onlineStatusName }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">安装日期
+          <span class="dev-detail-span">{{ dataForm.installDate }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">安装位置
+          <span class="dev-detail-span">{{ dataForm.position }}</span>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getProject } from '@/utils/baseConfig'
+import DeviceDetail from '@/views/deviceManage/deviceDetail'
+import tg_main from '../../assets/overview_images/tg/mapOverviewTg.jpg'
+import tg_3_1 from '../../assets/overview_images/tg/mapOverviewTg-3-1.jpg'
+import tg_4_1 from '../../assets/overview_images/tg/mapOverviewTg-4-1.jpg'
+import tg_4_5 from '../../assets/overview_images/tg/mapOverviewTg-4-5.jpg'
+import { getDetailDevice } from '@/api/device'
+
+// const cameraTypes = [4, 5, 8, 9, 10, 11]
+export default {
+  name: 'AlarmPosition',
+  components: { DeviceDetail },
+  data() {
+    return {
+      title: getProject().title,
+      bgImageSrc: tg_main,
+      devListParams: {
+        picture: '1',
+        areaTypeId: 1,
+        deviceTypes: []
+      },
+      dev: {
+        alarm: 0,
+        onLine: 0,
+        closed: 0,
+        offLine: 0
+      },
+      imgSizeOriginal: {
+        width: 2245,
+        height: 1586
+      }, // 图片原尺寸
+      imgSize: {
+        width: 2245,
+        height: 1586
+      }, // 图片显示尺寸
+      winSize: {
+        width: 1440,
+        height: 789
+      }, // 屏幕窗口尺寸
+      halfLeft: 0,
+      showDevDetail: false, // 是否显示设备详情
+      alarmList: [], // 报警列表
+      alarmColumns: [
+        {
+          text: '设备编号',
+          value: 'devcode',
+          align: 'center'
+        },
+        {
+          text: '报警内容',
+          value: 'alarmContent',
+          align: 'center'
+        },
+        {
+          text: '报警时间',
+          value: 'alarmTime',
+          align: 'center',
+          width: 165
+        }
+      ], // 报警列表显示列
+      tableShow: true, // 是否显示告警列表
+      devList: [], // 设备列表（在地图上显示）
+      dataForm: {
+        id: '', // id
+        name: '', // 设备名
+        devcode: '', // 设备编号
+        typeName: '', // 设备类型
+        model: '', // 设备型号
+        onlineStatusName: '', // 在线状态
+        deviceStatusName: '', // 设备状态
+        position: '', // 安装位置
+        installDate: '', // 安装日期
+        inOutName: '' // 进出营
+      }, // 设备详情表单
+      devPosition:{
+        picture: '',
+        x: '',
+        y: ''
+      },
+      checkDevType: [true, false] // 选中设备类型
+    }
+  },
+  mounted() {
+    this.initWindowSize()
+    if (this.$route.query && this.$route.query.id) {
+      const id = this.$route.query.id
+      getDetailDevice(id).then(response => {
+        if (response.code === 200) {
+          console.log(response.data)
+          this.devPosition.picture = response.data.picture
+          this.devPosition.x = response.data.x
+          this.devPosition.y = response.data.y
+          if(this.devPosition.picture === '1'){
+            this.bgImageSrc = tg_main
+          }else if(this.devPosition.picture === '2'){
+            this.bgImageSrc = tg_3_1
+          }else if(this.devPosition.picture === '3'){
+            this.bgImageSrc = tg_4_1
+          }else if(this.devPosition.picture === '4'){
+            this.bgImageSrc = tg_4_5
+          }else{
+            this.$message.warning('该设备暂无位置信息')
+            return
+          }
+          this.devList = []
+          if (this.devPosition.x !== '' && this.devPosition.y !== '') {
+            this.devList.push(response.data)
+          }
+        }
+      })
+    }
+    const that = this
+    window.onresize = function() {
+      that.initWindowSize()
+      that.getBgImageSize()
+    }
+  },
+  methods: {
+    // 获取窗口大小
+    initWindowSize() {
+      // 获取窗体尺寸
+      this.winSize = {
+        width: document.documentElement.clientWidth,
+        height: document.documentElement.clientHeight
+      }
+    },
+    // 获取图像大小
+    getBgImageSize() {
+      // 获取图片尺寸
+      this.imgSize = {
+        width: this.$refs['bgImg'].width,
+        height: this.$refs['bgImg'].height
+      }
+      this.halfLeft = (this.winSize.width - this.imgSize.width) / 2
+    },
+    // 重新绘制设备点位
+    reDrawDevs() {
+      const halfLeft = (this.winSize.width - this.imgSize.width) / 2
+
+      // 调整球机的设备位置
+      const that = this
+      this.devList.forEach(function(item) {
+        const point = document.getElementById(item.id)
+
+        if (point !== null) {
+          if (item.x !== '' && item.y !== '') {
+            point.style.position = 'absolute'
+            point.style.top = item.y * that.imgSize.height / that.imgSizeOriginal.height + 'px'
+            point.style.left = (item.x * that.imgSize.width / that.imgSizeOriginal.width + halfLeft) + 'px'
+          } else {
+            point.style.display = 'none'
+          }
+        }
+      })
+    },
+    // 平面图就绪时执行函数
+    backgroundImageReady() {
+      this.getBgImageSize()
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    },
+    backToIndex() {
+      this.$router.push('/door/alarm/now')
+    },
+    // 查询并显示设备详情
+    detailDev(dev, event) {
+      this.resetDevDetail()
+      getDetailDevice(dev.id).then(response => {
+        if (response.code === 200) {
+          this.dataForm = {
+            id: dev.id,
+            name: dev.name,
+            devcode: dev.devcode,
+            typeName: response.data.typeName,
+            model: dev.model,
+            onlineStatusName: response.data.onlineStatusName,
+            position: dev.position,
+            installDate: dev.installDate,
+            inOutName: response.data.inOutName,
+            deviceStatusName: response.data.deviceStatusName
+          }
+        } else {
+          this.$message.error(response.message)
+        }
+      })
+
+      // 弹窗显示设备详情
+      const targetDev = event.currentTarget // 取到点击到的设备图标div
+
+      this.showDevDetail = true
+      let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+      top = top + 100
+      this.$refs['dev-detail-block'].style.position = 'absolute'
+      this.$refs['dev-detail-block'].style.top = top + 'px'
+      this.$refs['dev-detail-block'].style.left = targetDev.style.left
+    },
+    // 点击报警列表
+    alarmRowClick(dev, column, event) {
+
+    },
+    // 清除设备详情
+    resetDevDetail() {
+      this.dataForm = {
+        id: '', // id
+        name: '', // 设备名
+        devcode: '', // 设备编号
+        typeName: '', // 设备类型
+        model: '', // 设备型号
+        onlineStatusName: '', // 在线状态
+        deviceStatusName: '', // 设备状态
+        position: '', // 安装位置
+        installDate: '', // 安装日期
+        inOutName: '' // 进出营
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+  .main-page {
+    background-size: cover;
+    background-color: #023d83;
+    height: 100vh;
+  }
+
+  .main-header {
+    width: 100vw;
+  }
+  .main-title {
+    height: 90px;
+    text-align: center;
+    padding-top: 20px;
+    background: url("../../assets/overview_images/title-background-1920.png");
+  }
+
+  .main-title img {
+    display: inline-block;
+    margin-right: 15px;
+    width: 52px;
+    height: 32px;
+    vertical-align: text-bottom;
+  }
+
+  .home-icon {
+    width: 26px;
+    height: 26px;
+    position: fixed;
+    left: 20px;
+    top: 20px;
+  }
+  .exit-icon {
+    width: 26px;
+    height: 26px;
+    position: fixed;
+    right: 20px;
+    top: 20px;
+  }
+  .home-icon img, .exit-icon img {
+    width: 26px;
+    height: 26px;
+  }
+
+  .main-title span {
+    color: #FFFFFF;
+    font-size: 32px;
+    font-weight: bold;
+    font-family: 'Microsoft YaHei';
+  }
+
+  .map-overview {
+    /*margin-top: 50px;*/
+    /*width: 1100px;*/
+    height: calc(90vh - 200px);
+    text-align: center;
+    position: relative;
+  }
+  .point {
+    width: 24px;
+    height: 24px;
+    position: relative;
+    display: inline-block;
+    cursor: pointer;
+  }
+  .point-camera {
+    background: url("../../assets/overview_images/icons/icon-camera-point.png");
+    background-size: contain;
+    @extend .point;
+  }
+  .point-fence {
+    background: url("../../assets/overview_images/icons/icon-fence-unchecked.png");
+    background-size: contain;
+    @extend .point;
+  }
+
+  .statis-block {
+    text-align: center;
+    margin-top: 20px;
+    font-size: 48px;
+  }
+  .sub-title {
+    text-align: center;
+    font-size: 32px;
+  }
+  .sub-data-block {
+    width: 122px;
+    height: 155px;
+  }
+  .dev-normal {
+    background: url("../../assets/overview_images/normal.png");
+    background-size: contain;
+    color: #00ff0c;
+  }
+  .dev-alarm {
+    background: url("../../assets/overview_images/alarm.png");
+    background-size: contain;
+    color: #ff0000;
+  }
+  .dev-offline {
+    background: url("../../assets/overview_images/offline.png");
+    background-size: contain;
+    color: #fff000;
+  }
+  .dev-closed {
+    background: url("../../assets/overview_images/closed.png");
+    background-size: contain;
+    color: #00fff6;
+  }
+
+  .dev-status-block {
+    position: absolute;
+    top: 100px;
+    left: 20px;
+    color: #ffffff;
+  }
+
+  .alarm-now-block {
+    position: absolute;
+    z-index: 500;
+    top: 300px;
+    left: 20px;
+    width: 480px;
+    .map-alarm-div-header {
+      line-height: 40px;
+      padding-left: 10px;
+      color: #00fff6;
+      font-size: 24px;
+      .icon-right {
+        cursor: pointer;
+        margin-left: 20px;
+      }
+    }
+    .el-scrollbar {
+      /*height: 200px;*/
+      width: 100%;
+    }
+    .moredatascollor {
+      height: 200px;
+    }
+    .el-scrollbar__wrap {
+      overflow-y: auto;
+      overflow-x: hidden;
+      margin-bottom: 0px !important;
+    }
+    .el-table {
+      font-size: 12px;
+    }
+    .transition-box {
+      margin-bottom: 10px;
+      width: 200px;
+      height: 100px;
+      border-radius: 4px;
+      background-color: #409EFF;
+      text-align: center;
+      color: #fff;
+      padding: 40px 20px;
+      box-sizing: border-box;
+      margin-right: 20px;
+    }
+  }
+
+  .alarm-now-block /deep/ .el-table th {
+    background-color: #0757A0;
+    padding: 12px 0px;
+    font-size: 16px;
+    color: #00fff6;
+    font-weight: normal;
+  }
+
+  .alarm-now-block /deep/ .el-table td {
+    /*background-color: #0757A0;*/
+    padding: 10px 0px;
+    font-size: 15px;
+    color: #FFFFFF;
+    font-weight: normal;
+  }
+
+  .alarm-now-block /deep/ .el-table__row td {
+    background-color: #023D83;
+  }
+  .alarm-now-block /deep/ .el-table__body tr:hover > td {
+    background-color: #0757A0;
+  }
+  .alarm-now-block /deep/ tr.el-table__row--striped td {
+    background-color: #0757A0;
+  }
+
+  .map-tab {
+    position: absolute;
+    right: 20px;
+    top: 100px;
+    width: 300px;
+    button {
+      margin: 5px 0px;
+    }
+  }
+
+  .tab-top {
+    position: relative;
+    width: 284px;
+    height: 24px;
+    background: url("../../assets/overview_images/tab-top-bg.png");
+  }
+  .tab-bottom {
+    position: relative;
+    width: 284px;
+    height: 24px;
+    background: url("../../assets/overview_images/tab-bottom-bg.png");
+  }
+  .map-index-button {
+    position: relative;
+    width: 284px;
+    height: 74px;
+    background: url("../../assets/overview_images/tab-index-unchecked.png");
+    font-size: 32px;
+    line-height: 74px;
+    text-align: center;
+    color: #FFFFFF;
+    cursor: pointer;
+  }
+  .index-selected {
+    background: url("../../assets/overview_images/tab-index-checked.png");
+  }
+  .sub-tab-guider {
+    width: 149px;
+    height: 50px;
+    background: url("../../assets/overview_images/sub-tab-guider.png");
+  }
+  .sub-tab-border {
+    width: 204px;
+    height: 253px;
+    background: url("../../assets/overview_images/sub-tab-border.png");
+  }
+  .sub-tab-content {
+    text-align: center;
+    color: #FFFFFF;
+    font-size: 28px;
+    cursor: pointer;
+    width: 200px;
+  }
+
+  .dev-detail-block {
+    /*position: absolute;*/
+    /*right: 20px;*/
+    /*bottom: 100px;*/
+    width: 520px;
+    height: 335px;
+    color: #00FFFF;
+    font-size: 24px;
+    font-family: "Microsoft YaHei";
+    padding: 45px 60px;
+    line-height: 35px;
+    background: url("../../assets/overview_images/dev-info.png");
+    .dev-detail-span {
+      margin-left: 20px;
+    }
+    .dev-detail-close::before {
+      content: "\2716";
+      position: relative;
+      top: -20px;
+      right: -410px;
+      cursor: pointer;
+    }
+  }
+
+  .dev-footer {
+    position: absolute;
+    bottom: 25px;
+  }
+
+  .dev-icon {
+    width: 195px;
+    height: 105px;
+    vertical-align: middle;
+    line-height: 65px;
+    padding: 20px 30px !important;
+    margin-left: 15px;
+    cursor: pointer;
+    background: url("../../assets/overview_images/dev-type-border-unchecked.png");
+  }
+
+  .dev-icon img {
+    height: 40px;
+    vertical-align:middle;
+  }
+  .dev-icon span {
+    font-size: 20px;
+    color: #00D2FF;
+    line-height: 65px;
+    height: 65px;
+    vertical-align:middle;
+    float: right;
+  }
+
+  .dev-type-selected {
+    background: url("../../assets/overview_images/dev-type-border-checked.png");
+  }
+  .dev-type-selected span {
+    color: #f58a88 !important;
+  }
+
+  /*@media(max-width: 1440px) {*/
+  /*  .main-title {*/
+  /*    height: 68px;*/
+  /*    padding-top: 20px;*/
+  /*    background: url("../../assets/overview_images/title-background-1440.png");*/
+  /*  }*/
+  /*  .main-title span {*/
+  /*    font-size: 24px;*/
+  /*  }*/
+  /*  .main-title img {*/
+  /*    margin-right: 15px;*/
+  /*    width: 32px;*/
+  /*    height: 32px;*/
+  /*  }*/
+
+  /*  .home-icon {*/
+  /*    left: 18px;*/
+  /*    width: 18px;*/
+  /*    height: 18px;*/
+  /*  }*/
+  /*  .exit-icon {*/
+  /*    right: 18px;*/
+  /*    width: 18px;*/
+  /*    height: 18px;*/
+  /*  }*/
+
+  /*  .home-icon img, .exit-icon img {*/
+  /*    width: 18px;*/
+  /*    height: 18px;*/
+  /*  }*/
+
+  /*  .dev-icon span {*/
+  /*    font-size: 12px;*/
+  /*  }*/
+  /*}*/
+
+  @media(max-width: 1440px) {
+    .main-title {
+      height: 65px;
+      padding-top: 16px;
+      background: url("../../assets/overview_images/title-background-1366.png");
+    }
+    .main-title span {
+      font-size: 24px;
+    }
+    .main-title img {
+      margin-right: 15px;
+      width: 32px;
+      height: 32px;
+    }
+
+    .home-icon {
+      left: 16px;
+      width: 16px;
+      height: 16px;
+    }
+    .exit-icon {
+      right: 16px;
+      width: 16px;
+      height: 16px;
+    }
+
+    .home-icon img, .exit-icon img {
+      width: 20px;
+      height: 20px;
+    }
+
+    .map-overview {
+      margin-top: 35px;
+      height: calc(90vh - 150px);
+    }
+
+    .point {
+      width: 16px;
+      height: 16px;
+    }
+
+    .statis-block {
+      margin-top: 16px;
+      font-size: 36px;
+    }
+    .sub-title {
+      font-size: 24px;
+    }
+    .sub-data-block {
+      width: 90px;
+      height: 114px;
+    }
+
+    .dev-normal {
+      background: url("../../assets/overview_images/normal-1366.png");
+    }
+    .dev-alarm {
+      background: url("../../assets/overview_images/alarm-1366.png");
+    }
+    .dev-offline {
+      background: url("../../assets/overview_images/offline-1366.png");
+    }
+    .dev-closed {
+      background: url("../../assets/overview_images/closed-1366.png");
+    }
+
+    .dev-status-block {
+      top: 90px;
+      left: 16px;
+    }
+
+    .alarm-now-block {
+      top: 220px;
+      left: 16px;
+      width: 360px;
+      .map-alarm-div-header {
+        line-height: 32px;
+        font-size: 20px;
+      }
+    }
+
+    .alarm-now-block /deep/ .el-table th {
+      padding: 8px 0px;
+      font-size: 16px;
+    }
+    .alarm-now-block /deep/ .el-table td {
+      padding: 5px 0px;
+      font-size: 12px;
+    }
+
+    .map-tab {
+      right: 16px;
+      top: 90px;
+      width: 215px;
+      button {
+        margin: 5px 0px;
+      }
+    }
+    .tab-top {
+      width: 213px;
+      height: 18px;
+      background: url("../../assets/overview_images/tab-top-bg-1366.png");
+    }
+    .tab-bottom {
+      width: 213px;
+      height: 18px;
+      background: url("../../assets/overview_images/tab-bottom-bg-1366.png");
+    }
+    .map-index-button {
+      width: 210px;
+      height: 56px;
+      background: url("../../assets/overview_images/tab-index-unchecked-1366.png");
+      font-size: 24px;
+      line-height: 56px;
+    }
+    .index-selected {
+      background: url("../../assets/overview_images/tab-index-checked-1366.png");
+    }
+
+    .sub-tab-guider {
+      width: 110px;
+      height: 37px;
+      background: url("../../assets/overview_images/sub-tab-guider-1366.png");
+    }
+    .sub-tab-border {
+      width: 150px;
+      height: 186px;
+      background: url("../../assets/overview_images/sub-tab-border-1366.png");
+    }
+    .sub-tab-content {
+      font-size: 20px;
+      cursor: pointer;
+      width: 145px;
+    }
+
+    .dev-detail-block {
+      width: 390px;
+      height: 251px;
+      font-size: 16px;
+      padding: 30px 40px;
+      line-height: 28px;
+      background: url("../../assets/overview_images/dev-info-1366.png");
+      .dev-detail-close::before {
+        top: -12px;
+        right: -312px;
+      }
+    }
+
+    .dev-footer {
+      bottom: 20px;
+    }
+    .dev-icon {
+      width: 140px;
+      height: 76px;
+      line-height: 56px;
+      padding: 10px 16px !important;
+      margin-left: 15px;
+      background: url("../../assets/overview_images/dev-type-border-unchecked-1366.png");
+    }
+    .dev-icon img {
+      height: 32px;
+    }
+    .dev-icon span {
+      font-size: 16px;
+      line-height: 56px;
+      height: 56px;
+    }
+    .dev-type-selected {
+      background: url("../../assets/overview_images/dev-type-border-checked-1366.png");
+    }
+  }
+
+</style>
diff --git a/src/views/alarm/webPlay.vue b/src/views/alarm/webPlay.vue
new file mode 100644
index 0000000..97e5ed2
--- /dev/null
+++ b/src/views/alarm/webPlay.vue
@@ -0,0 +1,21 @@
+<template>
+  <div class="play-window-block">
+    <div style="height: 100%">
+      <iframe ref="play" src="/static/webCtrl/demo-easy.html" width="100%" height="100%" style="border: 0px; overflow: hidden;" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'WebPlay'
+}
+</script>
+
+<style scoped>
+  .play-window-block {
+    margin: 15px 15px 15px 0px;
+    box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
+    height: calc(100vh - 175px);
+  }
+</style>
diff --git a/src/views/area/areaList.vue b/src/views/area/areaList.vue
index 1950028..11dc51f 100644
--- a/src/views/area/areaList.vue
+++ b/src/views/area/areaList.vue
@@ -31,7 +31,7 @@
       <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="batchExport">导出</el-button>-->
+          <!--<el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>-->
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>
diff --git a/src/views/area/defenceDetail.vue b/src/views/area/defenceDetail.vue
index e29a258..703ec7d 100644
--- a/src/views/area/defenceDetail.vue
+++ b/src/views/area/defenceDetail.vue
@@ -4,12 +4,14 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="区域名称">
-            <span>{{ dataForm.name }}</span>
+            <el-input v-model="dataForm.name" disabled type="text"/>
+            <!--<span>{{ dataForm.name }}</span>-->
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="防卫状态">
-            <span>{{ dataForm.areaStatusName }}</span>
+            <el-input v-model="dataForm.areaStatusName" disabled type="text"/>
+            <!--<span>{{ dataForm.areaStatusName }}</span>-->
           </el-form-item>
         </el-col>
       </el-row>
@@ -17,12 +19,14 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="区域类别">
-            <span>{{ dataForm.areaTypeName }}</span>
+            <el-input v-model="dataForm.areaTypeName" disabled type="text"/>
+            <!--<span>{{ dataForm.areaTypeName }}</span>-->
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="区域位置">
-            <span>{{ dataForm.position }}</span>
+            <el-input v-model="dataForm.position" disabled type="text"/>
+            <!--<span>{{ dataForm.position }}</span>-->
           </el-form-item>
         </el-col>
       </el-row>
@@ -38,7 +42,8 @@
       <el-row v-show="isFence" :gutter="20">
         <el-col :span="12">
           <el-form-item label="电子围栏">
-            <span>{{ dataForm.deviceStatusName }}</span>
+            <el-input v-model="dataForm.deviceStatusName" disabled type="text"/>
+            <!--<span>{{ dataForm.deviceStatusName }}</span>-->
           </el-form-item>
         </el-col>
       </el-row>
@@ -46,7 +51,8 @@
       <el-row :gutter="20">
         <el-col :span="24">
           <el-form-item label="备注" prop="remark">
-            <span>{{ dataForm.remark }}</span>
+            <el-input v-model="dataForm.remark" disabled type="text"/>
+            <!--<span>{{ dataForm.remark }}</span>-->
           </el-form-item>
         </el-col>
       </el-row>
diff --git a/src/views/area/defenceList.vue b/src/views/area/defenceList.vue
index 9e2ed68..8649918 100644
--- a/src/views/area/defenceList.vue
+++ b/src/views/area/defenceList.vue
@@ -31,9 +31,9 @@
       <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">批量导入</el-button>
-          <el-button class="edit_btn" size="small">导入模板下载</el-button>
-          <!--<el-button class="edit_btn" size="small" @click="batchExport">导出</el-button>-->
+          <!--<el-button class="edit_btn" size="small">批量导入</el-button>-->
+          <!--<el-button class="edit_btn" size="small">导入模板下载</el-button>-->
+          <!--<el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>-->
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>
diff --git a/src/views/car/carAdd.vue b/src/views/car/carAdd.vue
index 6a35b7d..633e353 100644
--- a/src/views/car/carAdd.vue
+++ b/src/views/car/carAdd.vue
@@ -20,14 +20,14 @@
         <el-col :span="12">
           <el-form-item label="所属部门" prop="deptid">
             <!--<span v-show="isDetailMode">{{ dataForm.deptName }}</span>-->
-            <el-select :disabled="isDetailMode" v-model="dataForm.deptid" placeholder="请选择所属部门" filterable clearable>
+            <el-select :disabled="isDetailMode" v-model="dataForm.deptid" placeholder="请选择所属部门" filterable clearable @change="getStaffList">
               <el-option v-for="item in deptList" :key="item.id" :label="item.name" :value="item.id"/>
             </el-select>
             <!--<dept-select v-show="!isDetailMode" v-model="dataForm.deptid" :dept-show="true" :need-top="true" placeholder="所属组织" @change="fetchStaffList"/>-->
           </el-form-item>
         </el-col>
         <el-col v-if="dataForm.property==='2'" :span="12">
-          <el-form-item label="车主" prop="owner">
+          <el-form-item label="车主" prop="ownerId">
             <!--<span v-show="isDetailMode">{{ dataForm.ownerName }}</span>-->
             <el-select :disabled="isDetailMode" v-model="dataForm.ownerId" placeholder="请选择车主" filterable clearable @change="autoStaffPhone">
               <el-option v-for="item in staffList" :key="item.id" :label="item.name" :value="item.id"/>
@@ -91,7 +91,7 @@
       rules: {
         phone: [{ required: true, trigger: ['blur', 'change'], validator: phoneValidator }],
         plateNumber: [{ required: true, trigger: ['blur', 'change'], validator: plateValidator }],
-        owner: [{ required: true, trigger: ['blur', 'change'], message: '请选择车主' }]
+        ownerId: [{ required: true, trigger: ['blur', 'change'], message: '请选择车主' }]
       }, // 前端校验规则
       carProperties: [], // 车辆性质字典值
       staffList: [], // 车主人员列表
@@ -137,6 +137,7 @@
           phone: row.phone,
           remark: row.remark
         }
+        this.getStaffList()
       } else if (dialogStatus === 'detail') {
         this.isDetailMode = true
         this.isEditMode = false
@@ -151,6 +152,7 @@
           deptName: row.deptName,
           ownerName: row.ownerName
         }
+        this.getStaffList()
       }
     },
     // 清除数据
@@ -180,6 +182,13 @@
       })
       getStaffByDept({ deptId: this.dataForm.deptid }).then(response => {
         this.staffList = response.data
+        console.log(response)
+      })
+    },
+    getStaffList(){
+      getStaffByDept({ deptId: this.dataForm.deptid }).then(response => {
+        this.staffList = response.data
+        console.log(response)
       })
     },
     autoStaffPhone() {
@@ -190,7 +199,6 @@
             return item
           }
         })
-
         this.dataForm.phone = selectedStaff[0].phone
       } else {
         this.dataForm.phone = ''
diff --git a/src/views/car/carList.vue b/src/views/car/carList.vue
index ceb77ff..d0c0176 100644
--- a/src/views/car/carList.vue
+++ b/src/views/car/carList.vue
@@ -31,7 +31,7 @@
       <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="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
           <el-button v-if="hasPerm('/door/car/add')" class="edit_btn" size="small" @click="add">新增</el-button>
           <!--          <el-button v-if="hasPerm('/door/car/delete')" v-show="false" class="edit_btn" size="small" @click="batchDel">删除</el-button>-->
         </el-col>
diff --git a/src/views/deviceManage/deviceList.vue b/src/views/deviceManage/deviceList.vue
index 5966b45..feb4b36 100644
--- a/src/views/deviceManage/deviceList.vue
+++ b/src/views/deviceManage/deviceList.vue
@@ -48,7 +48,7 @@
       <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="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border @selection-change="handleSelectionChange">
diff --git a/src/views/overview/doorIndex.vue b/src/views/overview/doorIndex.vue
index 03624bb..4f48bd0 100644
--- a/src/views/overview/doorIndex.vue
+++ b/src/views/overview/doorIndex.vue
@@ -285,6 +285,7 @@
         if (response.code === 200) {
           const that = this
           this.devList = []
+          console.log(response)
           response.data.forEach(dev => {
             if (dev.x !== '' && dev.y !== '') {
               that.devList.push(dev)
diff --git a/src/views/staff/staffDetail.vue b/src/views/staff/staffDetail.vue
index 8fc4c6d..50f7166 100644
--- a/src/views/staff/staffDetail.vue
+++ b/src/views/staff/staffDetail.vue
@@ -16,12 +16,14 @@
           <el-row :gutter="20">
             <el-col :span="12">
               <el-form-item label="姓名">
-                <span>{{ dataForm.name }}</span>
+                <el-input v-model="dataForm.name" disabled type="text"/>
+                <!--<span>{{ dataForm.name }}</span>-->
               </el-form-item>
             </el-col>
             <el-col :span="12">
               <el-form-item label="身份证号">
-                <span>{{ dataForm.idCard }}</span>
+                <el-input v-model="dataForm.idCard" disabled type="text"/>
+                <!--<span>{{ dataForm.idCard }}</span>-->
               </el-form-item>
             </el-col>
           </el-row>
@@ -29,12 +31,14 @@
           <el-row :gutter="20">
             <el-col :span="12">
               <el-form-item label="出生日期">
-                <span>{{ dataForm.birthday }}</span>
+                <el-input v-model="dataForm.birthday" disabled type="text"/>
+                <!--<span>{{ dataForm.birthday }}</span>-->
               </el-form-item>
             </el-col>
             <el-col :span="12">
               <el-form-item label="性别">
-                <span>{{ dataForm.sex }}</span>
+                <el-input v-model="dataForm.sex" disabled type="text"/>
+                <!--<span>{{ dataForm.sex }}</span>-->
               </el-form-item>
             </el-col>
           </el-row>
@@ -42,13 +46,15 @@
           <el-row :gutter="20">
             <el-col :span="12">
               <el-form-item label="所在部门">
-                <span>{{ dataForm.deptName }}</span>
+                <el-input v-model="dataForm.deptName" disabled type="text"/>
+                <!--<span>{{ dataForm.deptName }}</span>-->
               </el-form-item>
             </el-col>
 
             <el-col :span="12">
               <el-form-item label="联系电话">
-                <span>{{ dataForm.phone }}</span>
+                <el-input v-model="dataForm.phone" disabled type="text"/>
+                <!--<span>{{ dataForm.phone }}</span>-->
               </el-form-item>
             </el-col>
           </el-row>
@@ -56,7 +62,8 @@
           <el-row>
             <el-col :span="24">
               <el-form-item label="住址">
-                <span>{{ dataForm.address }}</span>
+                <el-input v-model="dataForm.address" disabled type="text"/>
+                <!--<span>{{ dataForm.address }}</span>-->
               </el-form-item>
             </el-col>
           </el-row>
diff --git a/src/views/staff/staffList.vue b/src/views/staff/staffList.vue
index 4a92b0c..c6ad796 100644
--- a/src/views/staff/staffList.vue
+++ b/src/views/staff/staffList.vue
@@ -44,7 +44,7 @@
           </el-upload>
           <download-template :filename="personImpTem" btnname="导入模板下载"/>
           <el-button v-if="hasPerm('/staff/delete')" size="small" class="edit_btn" @click="del">删除</el-button>
-          <el-button class="edit_btn" size="small" @click="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
           <el-button v-if="hasPerm('/staff/add')" class="edit_btn" size="small" @click="add">新增</el-button>
         </el-col>
       </el-row>
diff --git a/src/views/statistics/carDuration.vue b/src/views/statistics/carDuration.vue
index e4093d5..9cb4041 100644
--- a/src/views/statistics/carDuration.vue
+++ b/src/views/statistics/carDuration.vue
@@ -41,7 +41,7 @@
       <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="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>
diff --git a/src/views/statistics/inOutCar.vue b/src/views/statistics/inOutCar.vue
index 9371b0d..effdfb7 100644
--- a/src/views/statistics/inOutCar.vue
+++ b/src/views/statistics/inOutCar.vue
@@ -48,7 +48,7 @@
       <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="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>
diff --git a/src/views/statistics/inOutPerson.vue b/src/views/statistics/inOutPerson.vue
index 6827de3..43a0636 100644
--- a/src/views/statistics/inOutPerson.vue
+++ b/src/views/statistics/inOutPerson.vue
@@ -48,7 +48,7 @@
       <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="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>
diff --git a/src/views/statistics/personDuration.vue b/src/views/statistics/personDuration.vue
index 063b247..6826319 100644
--- a/src/views/statistics/personDuration.vue
+++ b/src/views/statistics/personDuration.vue
@@ -41,7 +41,7 @@
       <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="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>
diff --git a/src/views/visitor/visitorCarTodayList.vue b/src/views/visitor/visitorCarTodayList.vue
index f8e00aa..828fe6d 100644
--- a/src/views/visitor/visitorCarTodayList.vue
+++ b/src/views/visitor/visitorCarTodayList.vue
@@ -35,7 +35,7 @@
       <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="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>
diff --git a/src/views/visitor/visitorTodayList.vue b/src/views/visitor/visitorTodayList.vue
index 26d8da6..9976e90 100644
--- a/src/views/visitor/visitorTodayList.vue
+++ b/src/views/visitor/visitorTodayList.vue
@@ -35,7 +35,7 @@
       <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="batchExport">导出</el-button>
+          <el-button class="edit_btn" size="small" @click="batchExport" :disabled="list.length===0">导出</el-button>
         </el-col>
       </el-row>
       <el-table v-loading="listLoading" :data="list" class="table" row-class-name="small-row-class" border>