diff --git a/config/dev.env.js b/config/dev.env.js
index 6b4622a..095ba33 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -8,4 +8,5 @@
   NODE_ENV: '"development"',
   // BASE_API: '"http://192.168.5.220:20311"'
   BASE_API: '"http://111.198.10.15:11631"'
+  // BASE_API: '"http://192.168.5.220:20311"'
 })

diff --git a/config/dev.env.js b/config/dev.env.js
index 6b4622a..095ba33 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -8,4 +8,5 @@
   NODE_ENV: '"development"',
   // BASE_API: '"http://192.168.5.220:20311"'
   BASE_API: '"http://111.198.10.15:11631"'
+  // BASE_API: '"http://192.168.5.220:20311"'
 })
diff --git a/config/prod.env.js b/config/prod.env.js
index f2501d0..ccbc615 100644
--- a/config/prod.env.js
+++ b/config/prod.env.js
@@ -1,5 +1,6 @@
 'use strict'
 module.exports = {
   NODE_ENV: '"production"',
-  BASE_API: '"http://192.168.5.220:20311"'
+  // BASE_API: '"http://192.168.5.220:20311"'
+  BASE_API: '"http://111.198.10.15:11631"'
 }

diff --git a/config/dev.env.js b/config/dev.env.js
index 6b4622a..095ba33 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -8,4 +8,5 @@
   NODE_ENV: '"development"',
   // BASE_API: '"http://192.168.5.220:20311"'
   BASE_API: '"http://111.198.10.15:11631"'
+  // BASE_API: '"http://192.168.5.220:20311"'
 })
diff --git a/config/prod.env.js b/config/prod.env.js
index f2501d0..ccbc615 100644
--- a/config/prod.env.js
+++ b/config/prod.env.js
@@ -1,5 +1,6 @@
 'use strict'
 module.exports = {
   NODE_ENV: '"production"',
-  BASE_API: '"http://192.168.5.220:20311"'
+  // BASE_API: '"http://192.168.5.220:20311"'
+  BASE_API: '"http://111.198.10.15:11631"'
 }
diff --git a/favicon.ico b/favicon.ico
index 34b63ac..bc1bfc5 100644
--- a/favicon.ico
+++ b/favicon.ico
Binary files differ

diff --git a/config/dev.env.js b/config/dev.env.js
index 6b4622a..095ba33 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -8,4 +8,5 @@
   NODE_ENV: '"development"',
   // BASE_API: '"http://192.168.5.220:20311"'
   BASE_API: '"http://111.198.10.15:11631"'
+  // BASE_API: '"http://192.168.5.220:20311"'
 })
diff --git a/config/prod.env.js b/config/prod.env.js
index f2501d0..ccbc615 100644
--- a/config/prod.env.js
+++ b/config/prod.env.js
@@ -1,5 +1,6 @@
 'use strict'
 module.exports = {
   NODE_ENV: '"production"',
-  BASE_API: '"http://192.168.5.220:20311"'
+  // BASE_API: '"http://192.168.5.220:20311"'
+  BASE_API: '"http://111.198.10.15:11631"'
 }
diff --git a/favicon.ico b/favicon.ico
index 34b63ac..bc1bfc5 100644
--- a/favicon.ico
+++ b/favicon.ico
Binary files differ
diff --git a/src/api/visitor.js b/src/api/visitor.js
index 05ed6ea..01a6c26 100644
--- a/src/api/visitor.js
+++ b/src/api/visitor.js
@@ -74,3 +74,14 @@
   })
 }
 
+// 查询人员轨迹
+export function getDetail(devcode) {
+  return request({
+    url: '/device/capturePhoto',
+    method: 'post',
+    params:{
+      devcode: devcode
+    }
+  })
+}
+

diff --git a/config/dev.env.js b/config/dev.env.js
index 6b4622a..095ba33 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -8,4 +8,5 @@
   NODE_ENV: '"development"',
   // BASE_API: '"http://192.168.5.220:20311"'
   BASE_API: '"http://111.198.10.15:11631"'
+  // BASE_API: '"http://192.168.5.220:20311"'
 })
diff --git a/config/prod.env.js b/config/prod.env.js
index f2501d0..ccbc615 100644
--- a/config/prod.env.js
+++ b/config/prod.env.js
@@ -1,5 +1,6 @@
 'use strict'
 module.exports = {
   NODE_ENV: '"production"',
-  BASE_API: '"http://192.168.5.220:20311"'
+  // BASE_API: '"http://192.168.5.220:20311"'
+  BASE_API: '"http://111.198.10.15:11631"'
 }
diff --git a/favicon.ico b/favicon.ico
index 34b63ac..bc1bfc5 100644
--- a/favicon.ico
+++ b/favicon.ico
Binary files differ
diff --git a/src/api/visitor.js b/src/api/visitor.js
index 05ed6ea..01a6c26 100644
--- a/src/api/visitor.js
+++ b/src/api/visitor.js
@@ -74,3 +74,14 @@
   })
 }
 
+// 查询人员轨迹
+export function getDetail(devcode) {
+  return request({
+    url: '/device/capturePhoto',
+    method: 'post',
+    params:{
+      devcode: devcode
+    }
+  })
+}
+
diff --git a/src/assets/dashboard_images/icon-defence.png b/src/assets/dashboard_images/icon-defence.png
index 8069376..11b41cb 100644
--- a/src/assets/dashboard_images/icon-defence.png
+++ b/src/assets/dashboard_images/icon-defence.png
Binary files differ

diff --git a/config/dev.env.js b/config/dev.env.js
index 6b4622a..095ba33 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -8,4 +8,5 @@
   NODE_ENV: '"development"',
   // BASE_API: '"http://192.168.5.220:20311"'
   BASE_API: '"http://111.198.10.15:11631"'
+  // BASE_API: '"http://192.168.5.220:20311"'
 })
diff --git a/config/prod.env.js b/config/prod.env.js
index f2501d0..ccbc615 100644
--- a/config/prod.env.js
+++ b/config/prod.env.js
@@ -1,5 +1,6 @@
 'use strict'
 module.exports = {
   NODE_ENV: '"production"',
-  BASE_API: '"http://192.168.5.220:20311"'
+  // BASE_API: '"http://192.168.5.220:20311"'
+  BASE_API: '"http://111.198.10.15:11631"'
 }
diff --git a/favicon.ico b/favicon.ico
index 34b63ac..bc1bfc5 100644
--- a/favicon.ico
+++ b/favicon.ico
Binary files differ
diff --git a/src/api/visitor.js b/src/api/visitor.js
index 05ed6ea..01a6c26 100644
--- a/src/api/visitor.js
+++ b/src/api/visitor.js
@@ -74,3 +74,14 @@
   })
 }
 
+// 查询人员轨迹
+export function getDetail(devcode) {
+  return request({
+    url: '/device/capturePhoto',
+    method: 'post',
+    params:{
+      devcode: devcode
+    }
+  })
+}
+
diff --git a/src/assets/dashboard_images/icon-defence.png b/src/assets/dashboard_images/icon-defence.png
index 8069376..11b41cb 100644
--- a/src/assets/dashboard_images/icon-defence.png
+++ b/src/assets/dashboard_images/icon-defence.png
Binary files differ
diff --git a/src/utils/calendarUtil.js b/src/utils/calendarUtil.js
index da840c3..e599bdd 100644
--- a/src/utils/calendarUtil.js
+++ b/src/utils/calendarUtil.js
@@ -61,7 +61,32 @@
 
   return yearMonth + '-' + format(day)
 }
+export function formatDateTime(cellval) {
+  var dateVal = cellval + "";//把时间戳转成字符串格式
+  if (cellval != null) {
+    //取得时间戳部分 如：获取 /Date(1545299299910)/ 中的 1545299299910 部分
+    var date = new Date(parseInt(dateVal.replace("/Date(", "")
+      .replace(")/", ""), 10));
+    //获取年，不需要其他操作所以可以直接返回	date.getFullYear()
+    //月份为0-11，所以+1，月份小于10时补个0
+    var month = date.getMonth() + 1 < 10 ? "0"
+      + (date.getMonth() + 1) : date.getMonth() + 1;
+    //获取日
+    var currentDate = date.getDate() < 10 ? "0" + date.getDate()
+      : date.getDate();
+    //获取时间
+    var hours = date.getHours() < 10 ? "0" + date.getHours() : date
+      .getHours();
+    var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes()
+      : date.getMinutes();
+    var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds()
+      : date.getSeconds();
 
+    //返回日期结果，需要时间的话在加上时间
+    return date.getFullYear() + "-" + month + "-" + currentDate+" "+hours+":"+
+      minutes+":"+seconds;
+  }
+}
 // 格式化日期为字符串
 export function formatToString(value, level) {
   const date = new Date(value)

diff --git a/config/dev.env.js b/config/dev.env.js
index 6b4622a..095ba33 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -8,4 +8,5 @@
   NODE_ENV: '"development"',
   // BASE_API: '"http://192.168.5.220:20311"'
   BASE_API: '"http://111.198.10.15:11631"'
+  // BASE_API: '"http://192.168.5.220:20311"'
 })
diff --git a/config/prod.env.js b/config/prod.env.js
index f2501d0..ccbc615 100644
--- a/config/prod.env.js
+++ b/config/prod.env.js
@@ -1,5 +1,6 @@
 'use strict'
 module.exports = {
   NODE_ENV: '"production"',
-  BASE_API: '"http://192.168.5.220:20311"'
+  // BASE_API: '"http://192.168.5.220:20311"'
+  BASE_API: '"http://111.198.10.15:11631"'
 }
diff --git a/favicon.ico b/favicon.ico
index 34b63ac..bc1bfc5 100644
--- a/favicon.ico
+++ b/favicon.ico
Binary files differ
diff --git a/src/api/visitor.js b/src/api/visitor.js
index 05ed6ea..01a6c26 100644
--- a/src/api/visitor.js
+++ b/src/api/visitor.js
@@ -74,3 +74,14 @@
   })
 }
 
+// 查询人员轨迹
+export function getDetail(devcode) {
+  return request({
+    url: '/device/capturePhoto',
+    method: 'post',
+    params:{
+      devcode: devcode
+    }
+  })
+}
+
diff --git a/src/assets/dashboard_images/icon-defence.png b/src/assets/dashboard_images/icon-defence.png
index 8069376..11b41cb 100644
--- a/src/assets/dashboard_images/icon-defence.png
+++ b/src/assets/dashboard_images/icon-defence.png
Binary files differ
diff --git a/src/utils/calendarUtil.js b/src/utils/calendarUtil.js
index da840c3..e599bdd 100644
--- a/src/utils/calendarUtil.js
+++ b/src/utils/calendarUtil.js
@@ -61,7 +61,32 @@
 
   return yearMonth + '-' + format(day)
 }
+export function formatDateTime(cellval) {
+  var dateVal = cellval + "";//把时间戳转成字符串格式
+  if (cellval != null) {
+    //取得时间戳部分 如：获取 /Date(1545299299910)/ 中的 1545299299910 部分
+    var date = new Date(parseInt(dateVal.replace("/Date(", "")
+      .replace(")/", ""), 10));
+    //获取年，不需要其他操作所以可以直接返回	date.getFullYear()
+    //月份为0-11，所以+1，月份小于10时补个0
+    var month = date.getMonth() + 1 < 10 ? "0"
+      + (date.getMonth() + 1) : date.getMonth() + 1;
+    //获取日
+    var currentDate = date.getDate() < 10 ? "0" + date.getDate()
+      : date.getDate();
+    //获取时间
+    var hours = date.getHours() < 10 ? "0" + date.getHours() : date
+      .getHours();
+    var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes()
+      : date.getMinutes();
+    var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds()
+      : date.getSeconds();
 
+    //返回日期结果，需要时间的话在加上时间
+    return date.getFullYear() + "-" + month + "-" + currentDate+" "+hours+":"+
+      minutes+":"+seconds;
+  }
+}
 // 格式化日期为字符串
 export function formatToString(value, level) {
   const date = new Date(value)
diff --git a/src/views/alarm/alarmDetail.vue b/src/views/alarm/alarmDetail.vue
index 2c94629..8c32ee5 100644
--- a/src/views/alarm/alarmDetail.vue
+++ b/src/views/alarm/alarmDetail.vue
@@ -1,7 +1,7 @@
 <!-- 报警详情 -->
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :model="dataForm" label-well-code="right" label-width="110px">
+    <el-form v-loading="loading" ref="dataForm" :model="dataForm" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="报警编号">
@@ -86,6 +86,7 @@
   name: 'AlarmDetail',
   data() {
     return {
+      loading: true,
       dialogFormVisible: false, // 对话框是否显示
       dialogStatus: '', // 对话框类型：create,update,detail
       dataForm: {
@@ -123,7 +124,7 @@
         this.dataForm = {
           id: row.id
         }
-
+        this.loading = true
         alarmDetail(this.dataForm.id).then(response => {
           if (response.code === 200) {
             this.dataForm = {
@@ -140,7 +141,7 @@
               reason: response.data.reason,
               remark: response.data.remark
             }
-
+            this.loading = false
             // 格式化报警状态
             if (response.data.valid === 1) {
               this.dataForm.validStr = '正在报警'

diff --git a/config/dev.env.js b/config/dev.env.js
index 6b4622a..095ba33 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -8,4 +8,5 @@
   NODE_ENV: '"development"',
   // BASE_API: '"http://192.168.5.220:20311"'
   BASE_API: '"http://111.198.10.15:11631"'
+  // BASE_API: '"http://192.168.5.220:20311"'
 })
diff --git a/config/prod.env.js b/config/prod.env.js
index f2501d0..ccbc615 100644
--- a/config/prod.env.js
+++ b/config/prod.env.js
@@ -1,5 +1,6 @@
 'use strict'
 module.exports = {
   NODE_ENV: '"production"',
-  BASE_API: '"http://192.168.5.220:20311"'
+  // BASE_API: '"http://192.168.5.220:20311"'
+  BASE_API: '"http://111.198.10.15:11631"'
 }
diff --git a/favicon.ico b/favicon.ico
index 34b63ac..bc1bfc5 100644
--- a/favicon.ico
+++ b/favicon.ico
Binary files differ
diff --git a/src/api/visitor.js b/src/api/visitor.js
index 05ed6ea..01a6c26 100644
--- a/src/api/visitor.js
+++ b/src/api/visitor.js
@@ -74,3 +74,14 @@
   })
 }
 
+// 查询人员轨迹
+export function getDetail(devcode) {
+  return request({
+    url: '/device/capturePhoto',
+    method: 'post',
+    params:{
+      devcode: devcode
+    }
+  })
+}
+
diff --git a/src/assets/dashboard_images/icon-defence.png b/src/assets/dashboard_images/icon-defence.png
index 8069376..11b41cb 100644
--- a/src/assets/dashboard_images/icon-defence.png
+++ b/src/assets/dashboard_images/icon-defence.png
Binary files differ
diff --git a/src/utils/calendarUtil.js b/src/utils/calendarUtil.js
index da840c3..e599bdd 100644
--- a/src/utils/calendarUtil.js
+++ b/src/utils/calendarUtil.js
@@ -61,7 +61,32 @@
 
   return yearMonth + '-' + format(day)
 }
+export function formatDateTime(cellval) {
+  var dateVal = cellval + "";//把时间戳转成字符串格式
+  if (cellval != null) {
+    //取得时间戳部分 如：获取 /Date(1545299299910)/ 中的 1545299299910 部分
+    var date = new Date(parseInt(dateVal.replace("/Date(", "")
+      .replace(")/", ""), 10));
+    //获取年，不需要其他操作所以可以直接返回	date.getFullYear()
+    //月份为0-11，所以+1，月份小于10时补个0
+    var month = date.getMonth() + 1 < 10 ? "0"
+      + (date.getMonth() + 1) : date.getMonth() + 1;
+    //获取日
+    var currentDate = date.getDate() < 10 ? "0" + date.getDate()
+      : date.getDate();
+    //获取时间
+    var hours = date.getHours() < 10 ? "0" + date.getHours() : date
+      .getHours();
+    var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes()
+      : date.getMinutes();
+    var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds()
+      : date.getSeconds();
 
+    //返回日期结果，需要时间的话在加上时间
+    return date.getFullYear() + "-" + month + "-" + currentDate+" "+hours+":"+
+      minutes+":"+seconds;
+  }
+}
 // 格式化日期为字符串
 export function formatToString(value, level) {
   const date = new Date(value)
diff --git a/src/views/alarm/alarmDetail.vue b/src/views/alarm/alarmDetail.vue
index 2c94629..8c32ee5 100644
--- a/src/views/alarm/alarmDetail.vue
+++ b/src/views/alarm/alarmDetail.vue
@@ -1,7 +1,7 @@
 <!-- 报警详情 -->
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :model="dataForm" label-well-code="right" label-width="110px">
+    <el-form v-loading="loading" ref="dataForm" :model="dataForm" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="报警编号">
@@ -86,6 +86,7 @@
   name: 'AlarmDetail',
   data() {
     return {
+      loading: true,
       dialogFormVisible: false, // 对话框是否显示
       dialogStatus: '', // 对话框类型：create,update,detail
       dataForm: {
@@ -123,7 +124,7 @@
         this.dataForm = {
           id: row.id
         }
-
+        this.loading = true
         alarmDetail(this.dataForm.id).then(response => {
           if (response.code === 200) {
             this.dataForm = {
@@ -140,7 +141,7 @@
               reason: response.data.reason,
               remark: response.data.remark
             }
-
+            this.loading = false
             // 格式化报警状态
             if (response.data.valid === 1) {
               this.dataForm.validStr = '正在报警'
diff --git a/src/views/car/carAdd.vue b/src/views/car/carAdd.vue
index ddb215f..5f54c93 100644
--- a/src/views/car/carAdd.vue
+++ b/src/views/car/carAdd.vue
@@ -10,7 +10,7 @@
         </el-col>
         <el-col :span="12">
           <el-form-item label="车辆性质" prop="property">
-            <el-radio-group v-model="dataForm.property" :disabled="isDetailMode">
+            <el-radio-group v-model="dataForm.property" :disabled="isDetailMode" @change="resetOwner">
               <el-radio v-for="item in carProperties" :key="item.value" :label="item.value">{{ item.name }}</el-radio>
             </el-radio-group>
           </el-form-item>
@@ -106,6 +106,12 @@
     this.fetchStaffList()
   },
   methods: {
+    resetOwner(){
+      if(this.dataForm.property!=='2'){
+        this.dataForm.ownerId = ''
+        // this.dataForm.phone = ''
+      }
+    },
     // 初始化对话框
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.btnLoading = false
@@ -208,6 +214,7 @@
           }
         })
         this.dataForm.phone = selectedStaff[0].phone
+        this.dataForm.deptid = selectedStaff[0].deptid
       } else {
         this.dataForm.phone = ''
       }

diff --git a/config/dev.env.js b/config/dev.env.js
index 6b4622a..095ba33 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -8,4 +8,5 @@
   NODE_ENV: '"development"',
   // BASE_API: '"http://192.168.5.220:20311"'
   BASE_API: '"http://111.198.10.15:11631"'
+  // BASE_API: '"http://192.168.5.220:20311"'
 })
diff --git a/config/prod.env.js b/config/prod.env.js
index f2501d0..ccbc615 100644
--- a/config/prod.env.js
+++ b/config/prod.env.js
@@ -1,5 +1,6 @@
 'use strict'
 module.exports = {
   NODE_ENV: '"production"',
-  BASE_API: '"http://192.168.5.220:20311"'
+  // BASE_API: '"http://192.168.5.220:20311"'
+  BASE_API: '"http://111.198.10.15:11631"'
 }
diff --git a/favicon.ico b/favicon.ico
index 34b63ac..bc1bfc5 100644
--- a/favicon.ico
+++ b/favicon.ico
Binary files differ
diff --git a/src/api/visitor.js b/src/api/visitor.js
index 05ed6ea..01a6c26 100644
--- a/src/api/visitor.js
+++ b/src/api/visitor.js
@@ -74,3 +74,14 @@
   })
 }
 
+// 查询人员轨迹
+export function getDetail(devcode) {
+  return request({
+    url: '/device/capturePhoto',
+    method: 'post',
+    params:{
+      devcode: devcode
+    }
+  })
+}
+
diff --git a/src/assets/dashboard_images/icon-defence.png b/src/assets/dashboard_images/icon-defence.png
index 8069376..11b41cb 100644
--- a/src/assets/dashboard_images/icon-defence.png
+++ b/src/assets/dashboard_images/icon-defence.png
Binary files differ
diff --git a/src/utils/calendarUtil.js b/src/utils/calendarUtil.js
index da840c3..e599bdd 100644
--- a/src/utils/calendarUtil.js
+++ b/src/utils/calendarUtil.js
@@ -61,7 +61,32 @@
 
   return yearMonth + '-' + format(day)
 }
+export function formatDateTime(cellval) {
+  var dateVal = cellval + "";//把时间戳转成字符串格式
+  if (cellval != null) {
+    //取得时间戳部分 如：获取 /Date(1545299299910)/ 中的 1545299299910 部分
+    var date = new Date(parseInt(dateVal.replace("/Date(", "")
+      .replace(")/", ""), 10));
+    //获取年，不需要其他操作所以可以直接返回	date.getFullYear()
+    //月份为0-11，所以+1，月份小于10时补个0
+    var month = date.getMonth() + 1 < 10 ? "0"
+      + (date.getMonth() + 1) : date.getMonth() + 1;
+    //获取日
+    var currentDate = date.getDate() < 10 ? "0" + date.getDate()
+      : date.getDate();
+    //获取时间
+    var hours = date.getHours() < 10 ? "0" + date.getHours() : date
+      .getHours();
+    var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes()
+      : date.getMinutes();
+    var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds()
+      : date.getSeconds();
 
+    //返回日期结果，需要时间的话在加上时间
+    return date.getFullYear() + "-" + month + "-" + currentDate+" "+hours+":"+
+      minutes+":"+seconds;
+  }
+}
 // 格式化日期为字符串
 export function formatToString(value, level) {
   const date = new Date(value)
diff --git a/src/views/alarm/alarmDetail.vue b/src/views/alarm/alarmDetail.vue
index 2c94629..8c32ee5 100644
--- a/src/views/alarm/alarmDetail.vue
+++ b/src/views/alarm/alarmDetail.vue
@@ -1,7 +1,7 @@
 <!-- 报警详情 -->
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :model="dataForm" label-well-code="right" label-width="110px">
+    <el-form v-loading="loading" ref="dataForm" :model="dataForm" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="报警编号">
@@ -86,6 +86,7 @@
   name: 'AlarmDetail',
   data() {
     return {
+      loading: true,
       dialogFormVisible: false, // 对话框是否显示
       dialogStatus: '', // 对话框类型：create,update,detail
       dataForm: {
@@ -123,7 +124,7 @@
         this.dataForm = {
           id: row.id
         }
-
+        this.loading = true
         alarmDetail(this.dataForm.id).then(response => {
           if (response.code === 200) {
             this.dataForm = {
@@ -140,7 +141,7 @@
               reason: response.data.reason,
               remark: response.data.remark
             }
-
+            this.loading = false
             // 格式化报警状态
             if (response.data.valid === 1) {
               this.dataForm.validStr = '正在报警'
diff --git a/src/views/car/carAdd.vue b/src/views/car/carAdd.vue
index ddb215f..5f54c93 100644
--- a/src/views/car/carAdd.vue
+++ b/src/views/car/carAdd.vue
@@ -10,7 +10,7 @@
         </el-col>
         <el-col :span="12">
           <el-form-item label="车辆性质" prop="property">
-            <el-radio-group v-model="dataForm.property" :disabled="isDetailMode">
+            <el-radio-group v-model="dataForm.property" :disabled="isDetailMode" @change="resetOwner">
               <el-radio v-for="item in carProperties" :key="item.value" :label="item.value">{{ item.name }}</el-radio>
             </el-radio-group>
           </el-form-item>
@@ -106,6 +106,12 @@
     this.fetchStaffList()
   },
   methods: {
+    resetOwner(){
+      if(this.dataForm.property!=='2'){
+        this.dataForm.ownerId = ''
+        // this.dataForm.phone = ''
+      }
+    },
     // 初始化对话框
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.btnLoading = false
@@ -208,6 +214,7 @@
           }
         })
         this.dataForm.phone = selectedStaff[0].phone
+        this.dataForm.deptid = selectedStaff[0].deptid
       } else {
         this.dataForm.phone = ''
       }
diff --git a/src/views/car/carList.vue b/src/views/car/carList.vue
index 8d924ff..4ff07ab 100644
--- a/src/views/car/carList.vue
+++ b/src/views/car/carList.vue
@@ -105,11 +105,11 @@
           value: 'propertyStr',
           align: 'center'
         },
-        // {
-        //   text: '车主姓名',
-        //   value: 'ownerName',
-        //   align: 'center'
-        // },
+        {
+          text: '车主姓名',
+          value: 'ownerName',
+          align: 'center'
+        },
         {
           text: '车主联系电话',
           value: 'phone',

diff --git a/config/dev.env.js b/config/dev.env.js
index 6b4622a..095ba33 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -8,4 +8,5 @@
   NODE_ENV: '"development"',
   // BASE_API: '"http://192.168.5.220:20311"'
   BASE_API: '"http://111.198.10.15:11631"'
+  // BASE_API: '"http://192.168.5.220:20311"'
 })
diff --git a/config/prod.env.js b/config/prod.env.js
index f2501d0..ccbc615 100644
--- a/config/prod.env.js
+++ b/config/prod.env.js
@@ -1,5 +1,6 @@
 'use strict'
 module.exports = {
   NODE_ENV: '"production"',
-  BASE_API: '"http://192.168.5.220:20311"'
+  // BASE_API: '"http://192.168.5.220:20311"'
+  BASE_API: '"http://111.198.10.15:11631"'
 }
diff --git a/favicon.ico b/favicon.ico
index 34b63ac..bc1bfc5 100644
--- a/favicon.ico
+++ b/favicon.ico
Binary files differ
diff --git a/src/api/visitor.js b/src/api/visitor.js
index 05ed6ea..01a6c26 100644
--- a/src/api/visitor.js
+++ b/src/api/visitor.js
@@ -74,3 +74,14 @@
   })
 }
 
+// 查询人员轨迹
+export function getDetail(devcode) {
+  return request({
+    url: '/device/capturePhoto',
+    method: 'post',
+    params:{
+      devcode: devcode
+    }
+  })
+}
+
diff --git a/src/assets/dashboard_images/icon-defence.png b/src/assets/dashboard_images/icon-defence.png
index 8069376..11b41cb 100644
--- a/src/assets/dashboard_images/icon-defence.png
+++ b/src/assets/dashboard_images/icon-defence.png
Binary files differ
diff --git a/src/utils/calendarUtil.js b/src/utils/calendarUtil.js
index da840c3..e599bdd 100644
--- a/src/utils/calendarUtil.js
+++ b/src/utils/calendarUtil.js
@@ -61,7 +61,32 @@
 
   return yearMonth + '-' + format(day)
 }
+export function formatDateTime(cellval) {
+  var dateVal = cellval + "";//把时间戳转成字符串格式
+  if (cellval != null) {
+    //取得时间戳部分 如：获取 /Date(1545299299910)/ 中的 1545299299910 部分
+    var date = new Date(parseInt(dateVal.replace("/Date(", "")
+      .replace(")/", ""), 10));
+    //获取年，不需要其他操作所以可以直接返回	date.getFullYear()
+    //月份为0-11，所以+1，月份小于10时补个0
+    var month = date.getMonth() + 1 < 10 ? "0"
+      + (date.getMonth() + 1) : date.getMonth() + 1;
+    //获取日
+    var currentDate = date.getDate() < 10 ? "0" + date.getDate()
+      : date.getDate();
+    //获取时间
+    var hours = date.getHours() < 10 ? "0" + date.getHours() : date
+      .getHours();
+    var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes()
+      : date.getMinutes();
+    var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds()
+      : date.getSeconds();
 
+    //返回日期结果，需要时间的话在加上时间
+    return date.getFullYear() + "-" + month + "-" + currentDate+" "+hours+":"+
+      minutes+":"+seconds;
+  }
+}
 // 格式化日期为字符串
 export function formatToString(value, level) {
   const date = new Date(value)
diff --git a/src/views/alarm/alarmDetail.vue b/src/views/alarm/alarmDetail.vue
index 2c94629..8c32ee5 100644
--- a/src/views/alarm/alarmDetail.vue
+++ b/src/views/alarm/alarmDetail.vue
@@ -1,7 +1,7 @@
 <!-- 报警详情 -->
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :model="dataForm" label-well-code="right" label-width="110px">
+    <el-form v-loading="loading" ref="dataForm" :model="dataForm" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="报警编号">
@@ -86,6 +86,7 @@
   name: 'AlarmDetail',
   data() {
     return {
+      loading: true,
       dialogFormVisible: false, // 对话框是否显示
       dialogStatus: '', // 对话框类型：create,update,detail
       dataForm: {
@@ -123,7 +124,7 @@
         this.dataForm = {
           id: row.id
         }
-
+        this.loading = true
         alarmDetail(this.dataForm.id).then(response => {
           if (response.code === 200) {
             this.dataForm = {
@@ -140,7 +141,7 @@
               reason: response.data.reason,
               remark: response.data.remark
             }
-
+            this.loading = false
             // 格式化报警状态
             if (response.data.valid === 1) {
               this.dataForm.validStr = '正在报警'
diff --git a/src/views/car/carAdd.vue b/src/views/car/carAdd.vue
index ddb215f..5f54c93 100644
--- a/src/views/car/carAdd.vue
+++ b/src/views/car/carAdd.vue
@@ -10,7 +10,7 @@
         </el-col>
         <el-col :span="12">
           <el-form-item label="车辆性质" prop="property">
-            <el-radio-group v-model="dataForm.property" :disabled="isDetailMode">
+            <el-radio-group v-model="dataForm.property" :disabled="isDetailMode" @change="resetOwner">
               <el-radio v-for="item in carProperties" :key="item.value" :label="item.value">{{ item.name }}</el-radio>
             </el-radio-group>
           </el-form-item>
@@ -106,6 +106,12 @@
     this.fetchStaffList()
   },
   methods: {
+    resetOwner(){
+      if(this.dataForm.property!=='2'){
+        this.dataForm.ownerId = ''
+        // this.dataForm.phone = ''
+      }
+    },
     // 初始化对话框
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.btnLoading = false
@@ -208,6 +214,7 @@
           }
         })
         this.dataForm.phone = selectedStaff[0].phone
+        this.dataForm.deptid = selectedStaff[0].deptid
       } else {
         this.dataForm.phone = ''
       }
diff --git a/src/views/car/carList.vue b/src/views/car/carList.vue
index 8d924ff..4ff07ab 100644
--- a/src/views/car/carList.vue
+++ b/src/views/car/carList.vue
@@ -105,11 +105,11 @@
           value: 'propertyStr',
           align: 'center'
         },
-        // {
-        //   text: '车主姓名',
-        //   value: 'ownerName',
-        //   align: 'center'
-        // },
+        {
+          text: '车主姓名',
+          value: 'ownerName',
+          align: 'center'
+        },
         {
           text: '车主联系电话',
           value: 'phone',
diff --git a/src/views/ctrl/index.vue b/src/views/ctrl/index.vue
index fd36f2b..29923af 100644
--- a/src/views/ctrl/index.vue
+++ b/src/views/ctrl/index.vue
@@ -50,12 +50,13 @@
         <in-out-today />
       </el-col>
 
-      <el-col :span="7" class="chart-block">
+      <el-col id="dev-count"  :span="10" class="chart-block">
         <div class="chart-title">各类型设备安装数量</div>
         <dev-count />
       </el-col>
 
-      <el-col id="pass-count" :span="10" class="chart-block">
+      <!--<el-col id="pass-count" class="chart-block">-->
+      <el-col :span="7" class="chart-block">
         <div class="chart-title">进出营数量统计</div>
         <in-out-count />
       </el-col>
@@ -121,7 +122,7 @@
 <style scoped>
   .app-wrapper {
     background-color: #e9e9e9;
-    padding-bottom: 20px;
+    padding-bottom: 10px;
   }
 
   .sub-data-block {
@@ -129,6 +130,7 @@
     border-radius: 16px;
     float: left;
     margin: 10px;
+    margin-bottom: 0px;
     box-shadow: 1px 1px 5px #999;
   }
   .sub-title {
@@ -136,36 +138,38 @@
     text-align: center;
     font-family: 'Microsoft YaHei';
     color: #fff;
-    font-size: 24px;
-    padding: 10px;
+    font-size: 20px;
+    padding-top: 10px;
+    padding-bottom: 0px;
   }
   .statis-block {
     text-align: center;
     margin: 0px 10px 0px 10px;
-    padding: 0px 10px 10px 10px;
+    padding: 0px 10px 5px 10px;
     color: #fff;
     font-weight: bold;
     letter-spacing: 1px;
-    font-size: 24px;
+    font-size: 20px;
   }
   .big-size {
-    font-size: 64px;
+    font-size: 35px;
   }
 
   .chart-title {
     font-family: 'Microsoft YaHei';
     color: #000000;
     font-weight: bold;
-    font-size: 20px;
+    font-size: 18px;
     text-align: center;
     padding: 10px;
   }
   .chart-block {
     margin-left: 20px;
-    margin-top: 20px;
+    margin-top: 10px;
     border-radius: 16px;
     background-color: #FFFFFF;
     box-shadow: 1px 1px 5px #999;
+    height: 37vh;
   }
 
   #today-visitor {
@@ -187,7 +191,7 @@
     background-image: linear-gradient(to right, #ffa800, #ce7e00);
   }
 
-  #pass-count, #dev-alarm-count {
+  #dev-count, #dev-alarm-count {
     width: calc(250vw / 6 - 70px);
   }
 </style>

diff --git a/config/dev.env.js b/config/dev.env.js
index 6b4622a..095ba33 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -8,4 +8,5 @@
   NODE_ENV: '"development"',
   // BASE_API: '"http://192.168.5.220:20311"'
   BASE_API: '"http://111.198.10.15:11631"'
+  // BASE_API: '"http://192.168.5.220:20311"'
 })
diff --git a/config/prod.env.js b/config/prod.env.js
index f2501d0..ccbc615 100644
--- a/config/prod.env.js
+++ b/config/prod.env.js
@@ -1,5 +1,6 @@
 'use strict'
 module.exports = {
   NODE_ENV: '"production"',
-  BASE_API: '"http://192.168.5.220:20311"'
+  // BASE_API: '"http://192.168.5.220:20311"'
+  BASE_API: '"http://111.198.10.15:11631"'
 }
diff --git a/favicon.ico b/favicon.ico
index 34b63ac..bc1bfc5 100644
--- a/favicon.ico
+++ b/favicon.ico
Binary files differ
diff --git a/src/api/visitor.js b/src/api/visitor.js
index 05ed6ea..01a6c26 100644
--- a/src/api/visitor.js
+++ b/src/api/visitor.js
@@ -74,3 +74,14 @@
   })
 }
 
+// 查询人员轨迹
+export function getDetail(devcode) {
+  return request({
+    url: '/device/capturePhoto',
+    method: 'post',
+    params:{
+      devcode: devcode
+    }
+  })
+}
+
diff --git a/src/assets/dashboard_images/icon-defence.png b/src/assets/dashboard_images/icon-defence.png
index 8069376..11b41cb 100644
--- a/src/assets/dashboard_images/icon-defence.png
+++ b/src/assets/dashboard_images/icon-defence.png
Binary files differ
diff --git a/src/utils/calendarUtil.js b/src/utils/calendarUtil.js
index da840c3..e599bdd 100644
--- a/src/utils/calendarUtil.js
+++ b/src/utils/calendarUtil.js
@@ -61,7 +61,32 @@
 
   return yearMonth + '-' + format(day)
 }
+export function formatDateTime(cellval) {
+  var dateVal = cellval + "";//把时间戳转成字符串格式
+  if (cellval != null) {
+    //取得时间戳部分 如：获取 /Date(1545299299910)/ 中的 1545299299910 部分
+    var date = new Date(parseInt(dateVal.replace("/Date(", "")
+      .replace(")/", ""), 10));
+    //获取年，不需要其他操作所以可以直接返回	date.getFullYear()
+    //月份为0-11，所以+1，月份小于10时补个0
+    var month = date.getMonth() + 1 < 10 ? "0"
+      + (date.getMonth() + 1) : date.getMonth() + 1;
+    //获取日
+    var currentDate = date.getDate() < 10 ? "0" + date.getDate()
+      : date.getDate();
+    //获取时间
+    var hours = date.getHours() < 10 ? "0" + date.getHours() : date
+      .getHours();
+    var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes()
+      : date.getMinutes();
+    var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds()
+      : date.getSeconds();
 
+    //返回日期结果，需要时间的话在加上时间
+    return date.getFullYear() + "-" + month + "-" + currentDate+" "+hours+":"+
+      minutes+":"+seconds;
+  }
+}
 // 格式化日期为字符串
 export function formatToString(value, level) {
   const date = new Date(value)
diff --git a/src/views/alarm/alarmDetail.vue b/src/views/alarm/alarmDetail.vue
index 2c94629..8c32ee5 100644
--- a/src/views/alarm/alarmDetail.vue
+++ b/src/views/alarm/alarmDetail.vue
@@ -1,7 +1,7 @@
 <!-- 报警详情 -->
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :model="dataForm" label-well-code="right" label-width="110px">
+    <el-form v-loading="loading" ref="dataForm" :model="dataForm" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="报警编号">
@@ -86,6 +86,7 @@
   name: 'AlarmDetail',
   data() {
     return {
+      loading: true,
       dialogFormVisible: false, // 对话框是否显示
       dialogStatus: '', // 对话框类型：create,update,detail
       dataForm: {
@@ -123,7 +124,7 @@
         this.dataForm = {
           id: row.id
         }
-
+        this.loading = true
         alarmDetail(this.dataForm.id).then(response => {
           if (response.code === 200) {
             this.dataForm = {
@@ -140,7 +141,7 @@
               reason: response.data.reason,
               remark: response.data.remark
             }
-
+            this.loading = false
             // 格式化报警状态
             if (response.data.valid === 1) {
               this.dataForm.validStr = '正在报警'
diff --git a/src/views/car/carAdd.vue b/src/views/car/carAdd.vue
index ddb215f..5f54c93 100644
--- a/src/views/car/carAdd.vue
+++ b/src/views/car/carAdd.vue
@@ -10,7 +10,7 @@
         </el-col>
         <el-col :span="12">
           <el-form-item label="车辆性质" prop="property">
-            <el-radio-group v-model="dataForm.property" :disabled="isDetailMode">
+            <el-radio-group v-model="dataForm.property" :disabled="isDetailMode" @change="resetOwner">
               <el-radio v-for="item in carProperties" :key="item.value" :label="item.value">{{ item.name }}</el-radio>
             </el-radio-group>
           </el-form-item>
@@ -106,6 +106,12 @@
     this.fetchStaffList()
   },
   methods: {
+    resetOwner(){
+      if(this.dataForm.property!=='2'){
+        this.dataForm.ownerId = ''
+        // this.dataForm.phone = ''
+      }
+    },
     // 初始化对话框
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.btnLoading = false
@@ -208,6 +214,7 @@
           }
         })
         this.dataForm.phone = selectedStaff[0].phone
+        this.dataForm.deptid = selectedStaff[0].deptid
       } else {
         this.dataForm.phone = ''
       }
diff --git a/src/views/car/carList.vue b/src/views/car/carList.vue
index 8d924ff..4ff07ab 100644
--- a/src/views/car/carList.vue
+++ b/src/views/car/carList.vue
@@ -105,11 +105,11 @@
           value: 'propertyStr',
           align: 'center'
         },
-        // {
-        //   text: '车主姓名',
-        //   value: 'ownerName',
-        //   align: 'center'
-        // },
+        {
+          text: '车主姓名',
+          value: 'ownerName',
+          align: 'center'
+        },
         {
           text: '车主联系电话',
           value: 'phone',
diff --git a/src/views/ctrl/index.vue b/src/views/ctrl/index.vue
index fd36f2b..29923af 100644
--- a/src/views/ctrl/index.vue
+++ b/src/views/ctrl/index.vue
@@ -50,12 +50,13 @@
         <in-out-today />
       </el-col>
 
-      <el-col :span="7" class="chart-block">
+      <el-col id="dev-count"  :span="10" class="chart-block">
         <div class="chart-title">各类型设备安装数量</div>
         <dev-count />
       </el-col>
 
-      <el-col id="pass-count" :span="10" class="chart-block">
+      <!--<el-col id="pass-count" class="chart-block">-->
+      <el-col :span="7" class="chart-block">
         <div class="chart-title">进出营数量统计</div>
         <in-out-count />
       </el-col>
@@ -121,7 +122,7 @@
 <style scoped>
   .app-wrapper {
     background-color: #e9e9e9;
-    padding-bottom: 20px;
+    padding-bottom: 10px;
   }
 
   .sub-data-block {
@@ -129,6 +130,7 @@
     border-radius: 16px;
     float: left;
     margin: 10px;
+    margin-bottom: 0px;
     box-shadow: 1px 1px 5px #999;
   }
   .sub-title {
@@ -136,36 +138,38 @@
     text-align: center;
     font-family: 'Microsoft YaHei';
     color: #fff;
-    font-size: 24px;
-    padding: 10px;
+    font-size: 20px;
+    padding-top: 10px;
+    padding-bottom: 0px;
   }
   .statis-block {
     text-align: center;
     margin: 0px 10px 0px 10px;
-    padding: 0px 10px 10px 10px;
+    padding: 0px 10px 5px 10px;
     color: #fff;
     font-weight: bold;
     letter-spacing: 1px;
-    font-size: 24px;
+    font-size: 20px;
   }
   .big-size {
-    font-size: 64px;
+    font-size: 35px;
   }
 
   .chart-title {
     font-family: 'Microsoft YaHei';
     color: #000000;
     font-weight: bold;
-    font-size: 20px;
+    font-size: 18px;
     text-align: center;
     padding: 10px;
   }
   .chart-block {
     margin-left: 20px;
-    margin-top: 20px;
+    margin-top: 10px;
     border-radius: 16px;
     background-color: #FFFFFF;
     box-shadow: 1px 1px 5px #999;
+    height: 37vh;
   }
 
   #today-visitor {
@@ -187,7 +191,7 @@
     background-image: linear-gradient(to right, #ffa800, #ce7e00);
   }
 
-  #pass-count, #dev-alarm-count {
+  #dev-count, #dev-alarm-count {
     width: calc(250vw / 6 - 70px);
   }
 </style>
diff --git a/src/views/ctrl/overview.vue b/src/views/ctrl/overview.vue
index 62e1105..49ed928 100644
--- a/src/views/ctrl/overview.vue
+++ b/src/views/ctrl/overview.vue
@@ -59,26 +59,52 @@
           <i v-else class="el-icon-arrow-down"/>
         </span>
       </div>
-      <transition name="el-collapse-transition">
-        <el-scrollbar
-          v-show="tableShow"
-          :style="{ visibility: tableShow ? 'visible' : 'hidden'}"
-          :class="{ moredatascollor: alarmList.length > 6 }"
-          :native="false">
-          <el-table
-            :data="alarmList"
-            class="alarm-list-table"
-            border
-            stripe
-            @row-click="alarmRowClick">
-            <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{ scope.row[column.value] }}
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-scrollbar>
-      </transition>
+      <div v-show="alarmList.length > 4 && tableShow">
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 32px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 231px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          height="200"
+          style="border-left: 1px solid #2470AC;"
+          v-if="tableShow"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-show="alarmList.length < 5 && tableShow">
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          v-if="tableShow"
+          style="border: 1px solid #2470AC"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
     </div>
 
     <!-- 中间平面图区域 -->
@@ -145,9 +171,13 @@
         class="point-camera"
         @click="detailDev(item, $event)" />
     </div>
-
     <!-- 平面图区域设备类型按钮 -->
-    <div v-show="showType" class="bottom-center" :style="{ width: cameraTypeNum*btnwidth + 'px'}">
+    <div class="bottom-center" :style="{ width: btnNum*btnwidth + 'px'}">
+        <el-col v-show="btnNum!==1" ref="all" class="dev-icon dev-type-selected" @click.native="selectDevByType('all', $event)">
+          <img v-if="checkDevType[0]" src="@/assets/overview_images/icons/icon-all-checked.png">
+          <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
+          <span>全部</span>
+        </el-col>
       <el-col class="dev-icon" @click.native="selectDevByType('4', $event)">
         <img id="4-1-img" v-if="checkDevType1[0]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="4-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
@@ -178,20 +208,6 @@
         <img id="11-2-img" v-else src="@/assets/overview_images/icons/half-camera-blue.png">
         <span>标准半球</span>
       </el-col>
-    </div>
-    <!-- 平面图区域设备类型按钮 -->
-    <div v-show="!showType"class="bottom-center" :style="{ width: btnNum*btnwidth + 'px'}">
-        <el-col ref="all" class="dev-icon dev-type-selected" @click.native="selectDevByType('all', $event)">
-          <img v-if="checkDevType[0]" src="@/assets/overview_images/icons/icon-all-checked.png">
-          <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
-          <span>全部</span>
-        </el-col>
-        <el-col ref="camera" :class="cameraClass" @click.native="showType=!showType;selectDevByType('camera', $event)">
-        <!--<el-col ref="camera" class="dev-icon" @click.native="selectDevByType('camera', $event)">-->
-          <img id="cam_img_red" v-if="checkDevType[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-          <img id="cam_img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-          <span>摄像头</span>
-        </el-col>
         <el-col v-show="showFence" class="dev-icon" @click.native="selectDevByType('fence', $event)">
           <img v-if="checkDevType[2]" src="@/assets/overview_images/icons/icon-fence-checked.png">
           <img v-else src="@/assets/overview_images/icons/icon-fence-unchecked.png">
@@ -372,7 +388,7 @@
           height: 789
         }, // 屏幕窗口尺寸
         imgUrl: require('../../assets/overview_images/icons/icon-camera-point.png'),
-        btnNum: 3,
+        btnNum: 8,
         cameraTypeNum: 6,
         btnwidth: 210,
         halfLeft: 0,
@@ -498,25 +514,25 @@
             }
           }
         }
-        //跟换菜单
-        var item = ['人脸识别','车牌轨迹','周界防护','标准数字','智能球形','标准半球']
-        for(var i=0;i<item.length;i++){
-          if(item[i]===val.target.innerText){
-            return
-          }
-        }
-        if(val.target.id.endsWith('-1-img')||val.target.id.endsWith('-2-img')|| val.target.id==='cam_img' || val.target.id==='cam_img_red'){
-          return
-        }
-        if( val.target.innerText!=='摄像头') {
-          this.showType = false
-          const devTypes = document.querySelectorAll('.dev-icon')
-            for(var i=0;i<this.checkDevType.length;i++) {
-              if (this.checkDevType[i]) {
-                devTypes[i+6].className += ' dev-type-selected'
-              }
-            }
-        }
+        // //跟换菜单
+        // var item = ['人脸识别','车牌轨迹','周界防护','标准数字','智能球形','标准半球']
+        // for(var i=0;i<item.length;i++){
+        //   if(item[i]===val.target.innerText){
+        //     return
+        //   }
+        // }
+        // if(val.target.id.endsWith('-1-img')||val.target.id.endsWith('-2-img')|| val.target.id==='cam_img' || val.target.id==='cam_img_red'){
+        //   return
+        // }
+        // if( val.target.innerText!=='摄像头') {
+        //   this.showType = false
+        //   const devTypes = document.querySelectorAll('.dev-icon')
+        //     for(var i=0;i<this.checkDevType.length;i++) {
+        //       if (this.checkDevType[i]) {
+        //         devTypes[i+6].className += ' dev-type-selected'
+        //       }
+        //     }
+        // }
       },
       webSocket() {
         const that = this
@@ -586,7 +602,7 @@
         }else if(pic==='3'){
           this.changeMap('tg_4_1')
         }else if(pic==='4'){
-          this.changeMap('tg_4_1')
+          this.changeMap('tg_4_5')
         }
         setTimeout(() => {
           var obj = document.getElementById(val.toString());
@@ -771,7 +787,11 @@
           this.checkDevType1 = [false, false, false, false, false, false]
           // 添加选中的样式
           if (typeof event === 'undefined') {
-            devTypes[6].className += ' dev-type-selected'
+            if(this.btnNum===1){
+              devTypes[1].className += ' dev-type-selected'
+            }else{
+              devTypes[0].className += ' dev-type-selected'
+            }
           } else {
             event.currentTarget.className += ' dev-type-selected'
           }
@@ -1017,7 +1037,7 @@
           this.isMain = true
           // this.devListParams.picture = '1'
           this.imgSizeOriginal = { width: 2245, height: 1586 }
-          this.btnNum  = 3
+          this.btnNum  = 8
           this.cameraTypeNum  = 6
           this.showFence = true // 显示电子围栏
           this.showTemp = false // 隐藏温湿度设备
@@ -1027,6 +1047,7 @@
           this.showSubTabGuider = false
           this.showFloorThree = false
           this.showFloorFour = false
+          this.selectDevByType('all')
         } else if (index === 'tg_3_1') {
           this.bgImageSrc = tg_3_1
           // this.devListParams.picture = '2'
@@ -1037,6 +1058,7 @@
           this.showTemp = true // 隐藏温湿度
           this.showSmoking = true // 隐藏烟感
           this.showSound = true // 隐藏声光报警器
+          this.selectDevByType('all')
         } else if (index === 'tg_4_1') {
           this.bgImageSrc = tg_4_1
           // this.devListParams.picture = '3'
@@ -1048,18 +1070,19 @@
           this.showTemp = true // 显示温湿度
           this.showSmoking = true // 显示烟感
           this.showSound = true // 显示声光报警器
+          this.selectDevByType('all')
         } else if (index === 'tg_4_5') {
           this.bgImageSrc = tg_4_5
           // this.devListParams.picture = '4'
           this.imgSizeOriginal = { width: 2245, height: 1586 }
-          this.btnNum  = 2
+          this.btnNum  = 1
           this.cameraTypeNum  = 1
           this.showFence = false // 隐藏电子围栏
           this.showTemp = false // 隐藏温湿度
           this.showSmoking = false // 隐藏烟感
           this.showSound = false // 隐藏声光报警器
+          this.selectDevByType('4')
         }
-        this.selectDevByType('all')
       },
       // 查询并显示设备详情
       detailDev(dev, event) {
@@ -1201,10 +1224,14 @@
     left: 50%; transform: translateX(-50%);
     bottom: 25px;
   }
+  .tableLine {
+    margin-top: 9px;
+    width: 463px;
+  }
   .main-page {
     background-size: cover;
     background-color: #023d83;
-    height: 100vh;
+    height: 98vh;
   }
 
   .main-header {
@@ -1362,16 +1389,24 @@
         margin-left: 20px;
       }
     }
-    .el-scrollbar {
-      /*height: 200px;*/
-      width: 100%;
+    // 滚动条的滑块
+    /deep/ .el-table__body-wrapper  {
+      background-color: #023D83;
+      border: 0px solid white;
     }
-    .moredatascollor {
-      height: 200px;
+    /deep/ .el-table--border th.gutter:last-of-type {
+      border: 1px solid #023D83;
+      border-bottom-width: 1px;
+      background-color: #023D83;
     }
-    .el-scrollbar__wrap {
-      overflow-y: auto;
-      overflow-x: hidden;
+    /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
+      background-color: #023D83;
+    }
+    /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+      display: none;
+    }
+    /deep/ .el-scrollbar__wrap {
+      overflow-x: hidden !important;
       margin-bottom: 0px !important;
     }
     .el-table {
@@ -1405,16 +1440,25 @@
     font-size: 15px;
     color: #FFFFFF;
     font-weight: normal;
+    border-color: #2470AC;
   }
-
+  .el-table--border::after, .el-table--group::after, .el-table::before{
+    background-color: #023d83;
+  }
+  .alarm-now-block /deep/ .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
+    border-color: #023d83;
+  }
   .alarm-now-block /deep/ .el-table__row td {
     background-color: #023D83;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ .el-table__body tr:hover > td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ tr.el-table__row--striped td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
 
   .map-tab {
@@ -1601,6 +1645,10 @@
   /*}*/
 
   @media(max-width: 1440px) {
+    .tableLine {
+      margin-top: 0px;
+      width: 343px;
+    }
     .main-title {
       height: 65px;
       padding-top: 16px;

diff --git a/config/dev.env.js b/config/dev.env.js
index 6b4622a..095ba33 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -8,4 +8,5 @@
   NODE_ENV: '"development"',
   // BASE_API: '"http://192.168.5.220:20311"'
   BASE_API: '"http://111.198.10.15:11631"'
+  // BASE_API: '"http://192.168.5.220:20311"'
 })
diff --git a/config/prod.env.js b/config/prod.env.js
index f2501d0..ccbc615 100644
--- a/config/prod.env.js
+++ b/config/prod.env.js
@@ -1,5 +1,6 @@
 'use strict'
 module.exports = {
   NODE_ENV: '"production"',
-  BASE_API: '"http://192.168.5.220:20311"'
+  // BASE_API: '"http://192.168.5.220:20311"'
+  BASE_API: '"http://111.198.10.15:11631"'
 }
diff --git a/favicon.ico b/favicon.ico
index 34b63ac..bc1bfc5 100644
--- a/favicon.ico
+++ b/favicon.ico
Binary files differ
diff --git a/src/api/visitor.js b/src/api/visitor.js
index 05ed6ea..01a6c26 100644
--- a/src/api/visitor.js
+++ b/src/api/visitor.js
@@ -74,3 +74,14 @@
   })
 }
 
+// 查询人员轨迹
+export function getDetail(devcode) {
+  return request({
+    url: '/device/capturePhoto',
+    method: 'post',
+    params:{
+      devcode: devcode
+    }
+  })
+}
+
diff --git a/src/assets/dashboard_images/icon-defence.png b/src/assets/dashboard_images/icon-defence.png
index 8069376..11b41cb 100644
--- a/src/assets/dashboard_images/icon-defence.png
+++ b/src/assets/dashboard_images/icon-defence.png
Binary files differ
diff --git a/src/utils/calendarUtil.js b/src/utils/calendarUtil.js
index da840c3..e599bdd 100644
--- a/src/utils/calendarUtil.js
+++ b/src/utils/calendarUtil.js
@@ -61,7 +61,32 @@
 
   return yearMonth + '-' + format(day)
 }
+export function formatDateTime(cellval) {
+  var dateVal = cellval + "";//把时间戳转成字符串格式
+  if (cellval != null) {
+    //取得时间戳部分 如：获取 /Date(1545299299910)/ 中的 1545299299910 部分
+    var date = new Date(parseInt(dateVal.replace("/Date(", "")
+      .replace(")/", ""), 10));
+    //获取年，不需要其他操作所以可以直接返回	date.getFullYear()
+    //月份为0-11，所以+1，月份小于10时补个0
+    var month = date.getMonth() + 1 < 10 ? "0"
+      + (date.getMonth() + 1) : date.getMonth() + 1;
+    //获取日
+    var currentDate = date.getDate() < 10 ? "0" + date.getDate()
+      : date.getDate();
+    //获取时间
+    var hours = date.getHours() < 10 ? "0" + date.getHours() : date
+      .getHours();
+    var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes()
+      : date.getMinutes();
+    var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds()
+      : date.getSeconds();
 
+    //返回日期结果，需要时间的话在加上时间
+    return date.getFullYear() + "-" + month + "-" + currentDate+" "+hours+":"+
+      minutes+":"+seconds;
+  }
+}
 // 格式化日期为字符串
 export function formatToString(value, level) {
   const date = new Date(value)
diff --git a/src/views/alarm/alarmDetail.vue b/src/views/alarm/alarmDetail.vue
index 2c94629..8c32ee5 100644
--- a/src/views/alarm/alarmDetail.vue
+++ b/src/views/alarm/alarmDetail.vue
@@ -1,7 +1,7 @@
 <!-- 报警详情 -->
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :model="dataForm" label-well-code="right" label-width="110px">
+    <el-form v-loading="loading" ref="dataForm" :model="dataForm" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="报警编号">
@@ -86,6 +86,7 @@
   name: 'AlarmDetail',
   data() {
     return {
+      loading: true,
       dialogFormVisible: false, // 对话框是否显示
       dialogStatus: '', // 对话框类型：create,update,detail
       dataForm: {
@@ -123,7 +124,7 @@
         this.dataForm = {
           id: row.id
         }
-
+        this.loading = true
         alarmDetail(this.dataForm.id).then(response => {
           if (response.code === 200) {
             this.dataForm = {
@@ -140,7 +141,7 @@
               reason: response.data.reason,
               remark: response.data.remark
             }
-
+            this.loading = false
             // 格式化报警状态
             if (response.data.valid === 1) {
               this.dataForm.validStr = '正在报警'
diff --git a/src/views/car/carAdd.vue b/src/views/car/carAdd.vue
index ddb215f..5f54c93 100644
--- a/src/views/car/carAdd.vue
+++ b/src/views/car/carAdd.vue
@@ -10,7 +10,7 @@
         </el-col>
         <el-col :span="12">
           <el-form-item label="车辆性质" prop="property">
-            <el-radio-group v-model="dataForm.property" :disabled="isDetailMode">
+            <el-radio-group v-model="dataForm.property" :disabled="isDetailMode" @change="resetOwner">
               <el-radio v-for="item in carProperties" :key="item.value" :label="item.value">{{ item.name }}</el-radio>
             </el-radio-group>
           </el-form-item>
@@ -106,6 +106,12 @@
     this.fetchStaffList()
   },
   methods: {
+    resetOwner(){
+      if(this.dataForm.property!=='2'){
+        this.dataForm.ownerId = ''
+        // this.dataForm.phone = ''
+      }
+    },
     // 初始化对话框
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.btnLoading = false
@@ -208,6 +214,7 @@
           }
         })
         this.dataForm.phone = selectedStaff[0].phone
+        this.dataForm.deptid = selectedStaff[0].deptid
       } else {
         this.dataForm.phone = ''
       }
diff --git a/src/views/car/carList.vue b/src/views/car/carList.vue
index 8d924ff..4ff07ab 100644
--- a/src/views/car/carList.vue
+++ b/src/views/car/carList.vue
@@ -105,11 +105,11 @@
           value: 'propertyStr',
           align: 'center'
         },
-        // {
-        //   text: '车主姓名',
-        //   value: 'ownerName',
-        //   align: 'center'
-        // },
+        {
+          text: '车主姓名',
+          value: 'ownerName',
+          align: 'center'
+        },
         {
           text: '车主联系电话',
           value: 'phone',
diff --git a/src/views/ctrl/index.vue b/src/views/ctrl/index.vue
index fd36f2b..29923af 100644
--- a/src/views/ctrl/index.vue
+++ b/src/views/ctrl/index.vue
@@ -50,12 +50,13 @@
         <in-out-today />
       </el-col>
 
-      <el-col :span="7" class="chart-block">
+      <el-col id="dev-count"  :span="10" class="chart-block">
         <div class="chart-title">各类型设备安装数量</div>
         <dev-count />
       </el-col>
 
-      <el-col id="pass-count" :span="10" class="chart-block">
+      <!--<el-col id="pass-count" class="chart-block">-->
+      <el-col :span="7" class="chart-block">
         <div class="chart-title">进出营数量统计</div>
         <in-out-count />
       </el-col>
@@ -121,7 +122,7 @@
 <style scoped>
   .app-wrapper {
     background-color: #e9e9e9;
-    padding-bottom: 20px;
+    padding-bottom: 10px;
   }
 
   .sub-data-block {
@@ -129,6 +130,7 @@
     border-radius: 16px;
     float: left;
     margin: 10px;
+    margin-bottom: 0px;
     box-shadow: 1px 1px 5px #999;
   }
   .sub-title {
@@ -136,36 +138,38 @@
     text-align: center;
     font-family: 'Microsoft YaHei';
     color: #fff;
-    font-size: 24px;
-    padding: 10px;
+    font-size: 20px;
+    padding-top: 10px;
+    padding-bottom: 0px;
   }
   .statis-block {
     text-align: center;
     margin: 0px 10px 0px 10px;
-    padding: 0px 10px 10px 10px;
+    padding: 0px 10px 5px 10px;
     color: #fff;
     font-weight: bold;
     letter-spacing: 1px;
-    font-size: 24px;
+    font-size: 20px;
   }
   .big-size {
-    font-size: 64px;
+    font-size: 35px;
   }
 
   .chart-title {
     font-family: 'Microsoft YaHei';
     color: #000000;
     font-weight: bold;
-    font-size: 20px;
+    font-size: 18px;
     text-align: center;
     padding: 10px;
   }
   .chart-block {
     margin-left: 20px;
-    margin-top: 20px;
+    margin-top: 10px;
     border-radius: 16px;
     background-color: #FFFFFF;
     box-shadow: 1px 1px 5px #999;
+    height: 37vh;
   }
 
   #today-visitor {
@@ -187,7 +191,7 @@
     background-image: linear-gradient(to right, #ffa800, #ce7e00);
   }
 
-  #pass-count, #dev-alarm-count {
+  #dev-count, #dev-alarm-count {
     width: calc(250vw / 6 - 70px);
   }
 </style>
diff --git a/src/views/ctrl/overview.vue b/src/views/ctrl/overview.vue
index 62e1105..49ed928 100644
--- a/src/views/ctrl/overview.vue
+++ b/src/views/ctrl/overview.vue
@@ -59,26 +59,52 @@
           <i v-else class="el-icon-arrow-down"/>
         </span>
       </div>
-      <transition name="el-collapse-transition">
-        <el-scrollbar
-          v-show="tableShow"
-          :style="{ visibility: tableShow ? 'visible' : 'hidden'}"
-          :class="{ moredatascollor: alarmList.length > 6 }"
-          :native="false">
-          <el-table
-            :data="alarmList"
-            class="alarm-list-table"
-            border
-            stripe
-            @row-click="alarmRowClick">
-            <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{ scope.row[column.value] }}
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-scrollbar>
-      </transition>
+      <div v-show="alarmList.length > 4 && tableShow">
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 32px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 231px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          height="200"
+          style="border-left: 1px solid #2470AC;"
+          v-if="tableShow"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-show="alarmList.length < 5 && tableShow">
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          v-if="tableShow"
+          style="border: 1px solid #2470AC"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
     </div>
 
     <!-- 中间平面图区域 -->
@@ -145,9 +171,13 @@
         class="point-camera"
         @click="detailDev(item, $event)" />
     </div>
-
     <!-- 平面图区域设备类型按钮 -->
-    <div v-show="showType" class="bottom-center" :style="{ width: cameraTypeNum*btnwidth + 'px'}">
+    <div class="bottom-center" :style="{ width: btnNum*btnwidth + 'px'}">
+        <el-col v-show="btnNum!==1" ref="all" class="dev-icon dev-type-selected" @click.native="selectDevByType('all', $event)">
+          <img v-if="checkDevType[0]" src="@/assets/overview_images/icons/icon-all-checked.png">
+          <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
+          <span>全部</span>
+        </el-col>
       <el-col class="dev-icon" @click.native="selectDevByType('4', $event)">
         <img id="4-1-img" v-if="checkDevType1[0]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="4-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
@@ -178,20 +208,6 @@
         <img id="11-2-img" v-else src="@/assets/overview_images/icons/half-camera-blue.png">
         <span>标准半球</span>
       </el-col>
-    </div>
-    <!-- 平面图区域设备类型按钮 -->
-    <div v-show="!showType"class="bottom-center" :style="{ width: btnNum*btnwidth + 'px'}">
-        <el-col ref="all" class="dev-icon dev-type-selected" @click.native="selectDevByType('all', $event)">
-          <img v-if="checkDevType[0]" src="@/assets/overview_images/icons/icon-all-checked.png">
-          <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
-          <span>全部</span>
-        </el-col>
-        <el-col ref="camera" :class="cameraClass" @click.native="showType=!showType;selectDevByType('camera', $event)">
-        <!--<el-col ref="camera" class="dev-icon" @click.native="selectDevByType('camera', $event)">-->
-          <img id="cam_img_red" v-if="checkDevType[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-          <img id="cam_img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-          <span>摄像头</span>
-        </el-col>
         <el-col v-show="showFence" class="dev-icon" @click.native="selectDevByType('fence', $event)">
           <img v-if="checkDevType[2]" src="@/assets/overview_images/icons/icon-fence-checked.png">
           <img v-else src="@/assets/overview_images/icons/icon-fence-unchecked.png">
@@ -372,7 +388,7 @@
           height: 789
         }, // 屏幕窗口尺寸
         imgUrl: require('../../assets/overview_images/icons/icon-camera-point.png'),
-        btnNum: 3,
+        btnNum: 8,
         cameraTypeNum: 6,
         btnwidth: 210,
         halfLeft: 0,
@@ -498,25 +514,25 @@
             }
           }
         }
-        //跟换菜单
-        var item = ['人脸识别','车牌轨迹','周界防护','标准数字','智能球形','标准半球']
-        for(var i=0;i<item.length;i++){
-          if(item[i]===val.target.innerText){
-            return
-          }
-        }
-        if(val.target.id.endsWith('-1-img')||val.target.id.endsWith('-2-img')|| val.target.id==='cam_img' || val.target.id==='cam_img_red'){
-          return
-        }
-        if( val.target.innerText!=='摄像头') {
-          this.showType = false
-          const devTypes = document.querySelectorAll('.dev-icon')
-            for(var i=0;i<this.checkDevType.length;i++) {
-              if (this.checkDevType[i]) {
-                devTypes[i+6].className += ' dev-type-selected'
-              }
-            }
-        }
+        // //跟换菜单
+        // var item = ['人脸识别','车牌轨迹','周界防护','标准数字','智能球形','标准半球']
+        // for(var i=0;i<item.length;i++){
+        //   if(item[i]===val.target.innerText){
+        //     return
+        //   }
+        // }
+        // if(val.target.id.endsWith('-1-img')||val.target.id.endsWith('-2-img')|| val.target.id==='cam_img' || val.target.id==='cam_img_red'){
+        //   return
+        // }
+        // if( val.target.innerText!=='摄像头') {
+        //   this.showType = false
+        //   const devTypes = document.querySelectorAll('.dev-icon')
+        //     for(var i=0;i<this.checkDevType.length;i++) {
+        //       if (this.checkDevType[i]) {
+        //         devTypes[i+6].className += ' dev-type-selected'
+        //       }
+        //     }
+        // }
       },
       webSocket() {
         const that = this
@@ -586,7 +602,7 @@
         }else if(pic==='3'){
           this.changeMap('tg_4_1')
         }else if(pic==='4'){
-          this.changeMap('tg_4_1')
+          this.changeMap('tg_4_5')
         }
         setTimeout(() => {
           var obj = document.getElementById(val.toString());
@@ -771,7 +787,11 @@
           this.checkDevType1 = [false, false, false, false, false, false]
           // 添加选中的样式
           if (typeof event === 'undefined') {
-            devTypes[6].className += ' dev-type-selected'
+            if(this.btnNum===1){
+              devTypes[1].className += ' dev-type-selected'
+            }else{
+              devTypes[0].className += ' dev-type-selected'
+            }
           } else {
             event.currentTarget.className += ' dev-type-selected'
           }
@@ -1017,7 +1037,7 @@
           this.isMain = true
           // this.devListParams.picture = '1'
           this.imgSizeOriginal = { width: 2245, height: 1586 }
-          this.btnNum  = 3
+          this.btnNum  = 8
           this.cameraTypeNum  = 6
           this.showFence = true // 显示电子围栏
           this.showTemp = false // 隐藏温湿度设备
@@ -1027,6 +1047,7 @@
           this.showSubTabGuider = false
           this.showFloorThree = false
           this.showFloorFour = false
+          this.selectDevByType('all')
         } else if (index === 'tg_3_1') {
           this.bgImageSrc = tg_3_1
           // this.devListParams.picture = '2'
@@ -1037,6 +1058,7 @@
           this.showTemp = true // 隐藏温湿度
           this.showSmoking = true // 隐藏烟感
           this.showSound = true // 隐藏声光报警器
+          this.selectDevByType('all')
         } else if (index === 'tg_4_1') {
           this.bgImageSrc = tg_4_1
           // this.devListParams.picture = '3'
@@ -1048,18 +1070,19 @@
           this.showTemp = true // 显示温湿度
           this.showSmoking = true // 显示烟感
           this.showSound = true // 显示声光报警器
+          this.selectDevByType('all')
         } else if (index === 'tg_4_5') {
           this.bgImageSrc = tg_4_5
           // this.devListParams.picture = '4'
           this.imgSizeOriginal = { width: 2245, height: 1586 }
-          this.btnNum  = 2
+          this.btnNum  = 1
           this.cameraTypeNum  = 1
           this.showFence = false // 隐藏电子围栏
           this.showTemp = false // 隐藏温湿度
           this.showSmoking = false // 隐藏烟感
           this.showSound = false // 隐藏声光报警器
+          this.selectDevByType('4')
         }
-        this.selectDevByType('all')
       },
       // 查询并显示设备详情
       detailDev(dev, event) {
@@ -1201,10 +1224,14 @@
     left: 50%; transform: translateX(-50%);
     bottom: 25px;
   }
+  .tableLine {
+    margin-top: 9px;
+    width: 463px;
+  }
   .main-page {
     background-size: cover;
     background-color: #023d83;
-    height: 100vh;
+    height: 98vh;
   }
 
   .main-header {
@@ -1362,16 +1389,24 @@
         margin-left: 20px;
       }
     }
-    .el-scrollbar {
-      /*height: 200px;*/
-      width: 100%;
+    // 滚动条的滑块
+    /deep/ .el-table__body-wrapper  {
+      background-color: #023D83;
+      border: 0px solid white;
     }
-    .moredatascollor {
-      height: 200px;
+    /deep/ .el-table--border th.gutter:last-of-type {
+      border: 1px solid #023D83;
+      border-bottom-width: 1px;
+      background-color: #023D83;
     }
-    .el-scrollbar__wrap {
-      overflow-y: auto;
-      overflow-x: hidden;
+    /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
+      background-color: #023D83;
+    }
+    /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+      display: none;
+    }
+    /deep/ .el-scrollbar__wrap {
+      overflow-x: hidden !important;
       margin-bottom: 0px !important;
     }
     .el-table {
@@ -1405,16 +1440,25 @@
     font-size: 15px;
     color: #FFFFFF;
     font-weight: normal;
+    border-color: #2470AC;
   }
-
+  .el-table--border::after, .el-table--group::after, .el-table::before{
+    background-color: #023d83;
+  }
+  .alarm-now-block /deep/ .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
+    border-color: #023d83;
+  }
   .alarm-now-block /deep/ .el-table__row td {
     background-color: #023D83;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ .el-table__body tr:hover > td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ tr.el-table__row--striped td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
 
   .map-tab {
@@ -1601,6 +1645,10 @@
   /*}*/
 
   @media(max-width: 1440px) {
+    .tableLine {
+      margin-top: 0px;
+      width: 343px;
+    }
     .main-title {
       height: 65px;
       padding-top: 16px;
diff --git a/src/views/ctrl/statCharts/devAlarmCount.vue b/src/views/ctrl/statCharts/devAlarmCount.vue
index 7bea059..6b6939e 100644
--- a/src/views/ctrl/statCharts/devAlarmCount.vue
+++ b/src/views/ctrl/statCharts/devAlarmCount.vue
@@ -1,5 +1,6 @@
+<!--suppress ALL -->
 <template>
-  <div>
+  <div style="height: 90%">
     <el-date-picker
       v-model="timeRange"
       :picker-options="pickerOptions"
@@ -7,15 +8,16 @@
       range-separator="至"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
-      style="margin-bottom: 10px;" />
-    <ve-histogram :data="chartData" :settings="settings" height="350px" />
+      style="margin-bottom: 10px;z-index: 10000"
+      size="small"/>
+    <ve-histogram :data="chartData" :settings="settings" :extend="chartExtend" style="margin-top: -50px" height="100%"/>
   </div>
 </template>
 
 <script>
-import { formatToString, getDate, oneDayTime } from '@/utils/calendarUtil'
-import { devAlarmCount } from '@/api/statistics'
 
+import { devAlarmCount } from '@/api/statistics'
+import { formatToString, parseToDate, getDate, oneDayTime } from '@/utils/calendarUtil'
 const now = new Date()
 
 export default {
@@ -30,12 +32,22 @@
         columns: ['name', 'count'],
         rows: []
       },
+      chartExtend: {
+        series: {
+          barMaxWidth: 50
+        },
+        grid: {
+          containLabel: true,
+          bottom: '10%'
+        }
+      },
       settings: {
         labelMap: {
           'name': '设备类型',
-          'count': '报警数量'
+          'count': ''
         },
-        max: [4]
+        max: [4],
+        area: false
       },
       timeRange: [],
       pickerOptions: {
@@ -99,6 +111,13 @@
       devAlarmCount(this.params).then(response => {
         if (response.code === 200) {
           this.chartData.rows = response.data
+          var max = 4
+          for(var i=0;i<response.data.length;i++){
+            if(Number(response.data[i].count)>max){
+              max = Number(response.data[i].count)
+            }
+          }
+          this.settings.max = [max]
         }
       })
     }

diff --git a/config/dev.env.js b/config/dev.env.js
index 6b4622a..095ba33 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -8,4 +8,5 @@
   NODE_ENV: '"development"',
   // BASE_API: '"http://192.168.5.220:20311"'
   BASE_API: '"http://111.198.10.15:11631"'
+  // BASE_API: '"http://192.168.5.220:20311"'
 })
diff --git a/config/prod.env.js b/config/prod.env.js
index f2501d0..ccbc615 100644
--- a/config/prod.env.js
+++ b/config/prod.env.js
@@ -1,5 +1,6 @@
 'use strict'
 module.exports = {
   NODE_ENV: '"production"',
-  BASE_API: '"http://192.168.5.220:20311"'
+  // BASE_API: '"http://192.168.5.220:20311"'
+  BASE_API: '"http://111.198.10.15:11631"'
 }
diff --git a/favicon.ico b/favicon.ico
index 34b63ac..bc1bfc5 100644
--- a/favicon.ico
+++ b/favicon.ico
Binary files differ
diff --git a/src/api/visitor.js b/src/api/visitor.js
index 05ed6ea..01a6c26 100644
--- a/src/api/visitor.js
+++ b/src/api/visitor.js
@@ -74,3 +74,14 @@
   })
 }
 
+// 查询人员轨迹
+export function getDetail(devcode) {
+  return request({
+    url: '/device/capturePhoto',
+    method: 'post',
+    params:{
+      devcode: devcode
+    }
+  })
+}
+
diff --git a/src/assets/dashboard_images/icon-defence.png b/src/assets/dashboard_images/icon-defence.png
index 8069376..11b41cb 100644
--- a/src/assets/dashboard_images/icon-defence.png
+++ b/src/assets/dashboard_images/icon-defence.png
Binary files differ
diff --git a/src/utils/calendarUtil.js b/src/utils/calendarUtil.js
index da840c3..e599bdd 100644
--- a/src/utils/calendarUtil.js
+++ b/src/utils/calendarUtil.js
@@ -61,7 +61,32 @@
 
   return yearMonth + '-' + format(day)
 }
+export function formatDateTime(cellval) {
+  var dateVal = cellval + "";//把时间戳转成字符串格式
+  if (cellval != null) {
+    //取得时间戳部分 如：获取 /Date(1545299299910)/ 中的 1545299299910 部分
+    var date = new Date(parseInt(dateVal.replace("/Date(", "")
+      .replace(")/", ""), 10));
+    //获取年，不需要其他操作所以可以直接返回	date.getFullYear()
+    //月份为0-11，所以+1，月份小于10时补个0
+    var month = date.getMonth() + 1 < 10 ? "0"
+      + (date.getMonth() + 1) : date.getMonth() + 1;
+    //获取日
+    var currentDate = date.getDate() < 10 ? "0" + date.getDate()
+      : date.getDate();
+    //获取时间
+    var hours = date.getHours() < 10 ? "0" + date.getHours() : date
+      .getHours();
+    var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes()
+      : date.getMinutes();
+    var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds()
+      : date.getSeconds();
 
+    //返回日期结果，需要时间的话在加上时间
+    return date.getFullYear() + "-" + month + "-" + currentDate+" "+hours+":"+
+      minutes+":"+seconds;
+  }
+}
 // 格式化日期为字符串
 export function formatToString(value, level) {
   const date = new Date(value)
diff --git a/src/views/alarm/alarmDetail.vue b/src/views/alarm/alarmDetail.vue
index 2c94629..8c32ee5 100644
--- a/src/views/alarm/alarmDetail.vue
+++ b/src/views/alarm/alarmDetail.vue
@@ -1,7 +1,7 @@
 <!-- 报警详情 -->
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :model="dataForm" label-well-code="right" label-width="110px">
+    <el-form v-loading="loading" ref="dataForm" :model="dataForm" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="报警编号">
@@ -86,6 +86,7 @@
   name: 'AlarmDetail',
   data() {
     return {
+      loading: true,
       dialogFormVisible: false, // 对话框是否显示
       dialogStatus: '', // 对话框类型：create,update,detail
       dataForm: {
@@ -123,7 +124,7 @@
         this.dataForm = {
           id: row.id
         }
-
+        this.loading = true
         alarmDetail(this.dataForm.id).then(response => {
           if (response.code === 200) {
             this.dataForm = {
@@ -140,7 +141,7 @@
               reason: response.data.reason,
               remark: response.data.remark
             }
-
+            this.loading = false
             // 格式化报警状态
             if (response.data.valid === 1) {
               this.dataForm.validStr = '正在报警'
diff --git a/src/views/car/carAdd.vue b/src/views/car/carAdd.vue
index ddb215f..5f54c93 100644
--- a/src/views/car/carAdd.vue
+++ b/src/views/car/carAdd.vue
@@ -10,7 +10,7 @@
         </el-col>
         <el-col :span="12">
           <el-form-item label="车辆性质" prop="property">
-            <el-radio-group v-model="dataForm.property" :disabled="isDetailMode">
+            <el-radio-group v-model="dataForm.property" :disabled="isDetailMode" @change="resetOwner">
               <el-radio v-for="item in carProperties" :key="item.value" :label="item.value">{{ item.name }}</el-radio>
             </el-radio-group>
           </el-form-item>
@@ -106,6 +106,12 @@
     this.fetchStaffList()
   },
   methods: {
+    resetOwner(){
+      if(this.dataForm.property!=='2'){
+        this.dataForm.ownerId = ''
+        // this.dataForm.phone = ''
+      }
+    },
     // 初始化对话框
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.btnLoading = false
@@ -208,6 +214,7 @@
           }
         })
         this.dataForm.phone = selectedStaff[0].phone
+        this.dataForm.deptid = selectedStaff[0].deptid
       } else {
         this.dataForm.phone = ''
       }
diff --git a/src/views/car/carList.vue b/src/views/car/carList.vue
index 8d924ff..4ff07ab 100644
--- a/src/views/car/carList.vue
+++ b/src/views/car/carList.vue
@@ -105,11 +105,11 @@
           value: 'propertyStr',
           align: 'center'
         },
-        // {
-        //   text: '车主姓名',
-        //   value: 'ownerName',
-        //   align: 'center'
-        // },
+        {
+          text: '车主姓名',
+          value: 'ownerName',
+          align: 'center'
+        },
         {
           text: '车主联系电话',
           value: 'phone',
diff --git a/src/views/ctrl/index.vue b/src/views/ctrl/index.vue
index fd36f2b..29923af 100644
--- a/src/views/ctrl/index.vue
+++ b/src/views/ctrl/index.vue
@@ -50,12 +50,13 @@
         <in-out-today />
       </el-col>
 
-      <el-col :span="7" class="chart-block">
+      <el-col id="dev-count"  :span="10" class="chart-block">
         <div class="chart-title">各类型设备安装数量</div>
         <dev-count />
       </el-col>
 
-      <el-col id="pass-count" :span="10" class="chart-block">
+      <!--<el-col id="pass-count" class="chart-block">-->
+      <el-col :span="7" class="chart-block">
         <div class="chart-title">进出营数量统计</div>
         <in-out-count />
       </el-col>
@@ -121,7 +122,7 @@
 <style scoped>
   .app-wrapper {
     background-color: #e9e9e9;
-    padding-bottom: 20px;
+    padding-bottom: 10px;
   }
 
   .sub-data-block {
@@ -129,6 +130,7 @@
     border-radius: 16px;
     float: left;
     margin: 10px;
+    margin-bottom: 0px;
     box-shadow: 1px 1px 5px #999;
   }
   .sub-title {
@@ -136,36 +138,38 @@
     text-align: center;
     font-family: 'Microsoft YaHei';
     color: #fff;
-    font-size: 24px;
-    padding: 10px;
+    font-size: 20px;
+    padding-top: 10px;
+    padding-bottom: 0px;
   }
   .statis-block {
     text-align: center;
     margin: 0px 10px 0px 10px;
-    padding: 0px 10px 10px 10px;
+    padding: 0px 10px 5px 10px;
     color: #fff;
     font-weight: bold;
     letter-spacing: 1px;
-    font-size: 24px;
+    font-size: 20px;
   }
   .big-size {
-    font-size: 64px;
+    font-size: 35px;
   }
 
   .chart-title {
     font-family: 'Microsoft YaHei';
     color: #000000;
     font-weight: bold;
-    font-size: 20px;
+    font-size: 18px;
     text-align: center;
     padding: 10px;
   }
   .chart-block {
     margin-left: 20px;
-    margin-top: 20px;
+    margin-top: 10px;
     border-radius: 16px;
     background-color: #FFFFFF;
     box-shadow: 1px 1px 5px #999;
+    height: 37vh;
   }
 
   #today-visitor {
@@ -187,7 +191,7 @@
     background-image: linear-gradient(to right, #ffa800, #ce7e00);
   }
 
-  #pass-count, #dev-alarm-count {
+  #dev-count, #dev-alarm-count {
     width: calc(250vw / 6 - 70px);
   }
 </style>
diff --git a/src/views/ctrl/overview.vue b/src/views/ctrl/overview.vue
index 62e1105..49ed928 100644
--- a/src/views/ctrl/overview.vue
+++ b/src/views/ctrl/overview.vue
@@ -59,26 +59,52 @@
           <i v-else class="el-icon-arrow-down"/>
         </span>
       </div>
-      <transition name="el-collapse-transition">
-        <el-scrollbar
-          v-show="tableShow"
-          :style="{ visibility: tableShow ? 'visible' : 'hidden'}"
-          :class="{ moredatascollor: alarmList.length > 6 }"
-          :native="false">
-          <el-table
-            :data="alarmList"
-            class="alarm-list-table"
-            border
-            stripe
-            @row-click="alarmRowClick">
-            <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{ scope.row[column.value] }}
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-scrollbar>
-      </transition>
+      <div v-show="alarmList.length > 4 && tableShow">
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 32px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 231px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          height="200"
+          style="border-left: 1px solid #2470AC;"
+          v-if="tableShow"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-show="alarmList.length < 5 && tableShow">
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          v-if="tableShow"
+          style="border: 1px solid #2470AC"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
     </div>
 
     <!-- 中间平面图区域 -->
@@ -145,9 +171,13 @@
         class="point-camera"
         @click="detailDev(item, $event)" />
     </div>
-
     <!-- 平面图区域设备类型按钮 -->
-    <div v-show="showType" class="bottom-center" :style="{ width: cameraTypeNum*btnwidth + 'px'}">
+    <div class="bottom-center" :style="{ width: btnNum*btnwidth + 'px'}">
+        <el-col v-show="btnNum!==1" ref="all" class="dev-icon dev-type-selected" @click.native="selectDevByType('all', $event)">
+          <img v-if="checkDevType[0]" src="@/assets/overview_images/icons/icon-all-checked.png">
+          <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
+          <span>全部</span>
+        </el-col>
       <el-col class="dev-icon" @click.native="selectDevByType('4', $event)">
         <img id="4-1-img" v-if="checkDevType1[0]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="4-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
@@ -178,20 +208,6 @@
         <img id="11-2-img" v-else src="@/assets/overview_images/icons/half-camera-blue.png">
         <span>标准半球</span>
       </el-col>
-    </div>
-    <!-- 平面图区域设备类型按钮 -->
-    <div v-show="!showType"class="bottom-center" :style="{ width: btnNum*btnwidth + 'px'}">
-        <el-col ref="all" class="dev-icon dev-type-selected" @click.native="selectDevByType('all', $event)">
-          <img v-if="checkDevType[0]" src="@/assets/overview_images/icons/icon-all-checked.png">
-          <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
-          <span>全部</span>
-        </el-col>
-        <el-col ref="camera" :class="cameraClass" @click.native="showType=!showType;selectDevByType('camera', $event)">
-        <!--<el-col ref="camera" class="dev-icon" @click.native="selectDevByType('camera', $event)">-->
-          <img id="cam_img_red" v-if="checkDevType[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-          <img id="cam_img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-          <span>摄像头</span>
-        </el-col>
         <el-col v-show="showFence" class="dev-icon" @click.native="selectDevByType('fence', $event)">
           <img v-if="checkDevType[2]" src="@/assets/overview_images/icons/icon-fence-checked.png">
           <img v-else src="@/assets/overview_images/icons/icon-fence-unchecked.png">
@@ -372,7 +388,7 @@
           height: 789
         }, // 屏幕窗口尺寸
         imgUrl: require('../../assets/overview_images/icons/icon-camera-point.png'),
-        btnNum: 3,
+        btnNum: 8,
         cameraTypeNum: 6,
         btnwidth: 210,
         halfLeft: 0,
@@ -498,25 +514,25 @@
             }
           }
         }
-        //跟换菜单
-        var item = ['人脸识别','车牌轨迹','周界防护','标准数字','智能球形','标准半球']
-        for(var i=0;i<item.length;i++){
-          if(item[i]===val.target.innerText){
-            return
-          }
-        }
-        if(val.target.id.endsWith('-1-img')||val.target.id.endsWith('-2-img')|| val.target.id==='cam_img' || val.target.id==='cam_img_red'){
-          return
-        }
-        if( val.target.innerText!=='摄像头') {
-          this.showType = false
-          const devTypes = document.querySelectorAll('.dev-icon')
-            for(var i=0;i<this.checkDevType.length;i++) {
-              if (this.checkDevType[i]) {
-                devTypes[i+6].className += ' dev-type-selected'
-              }
-            }
-        }
+        // //跟换菜单
+        // var item = ['人脸识别','车牌轨迹','周界防护','标准数字','智能球形','标准半球']
+        // for(var i=0;i<item.length;i++){
+        //   if(item[i]===val.target.innerText){
+        //     return
+        //   }
+        // }
+        // if(val.target.id.endsWith('-1-img')||val.target.id.endsWith('-2-img')|| val.target.id==='cam_img' || val.target.id==='cam_img_red'){
+        //   return
+        // }
+        // if( val.target.innerText!=='摄像头') {
+        //   this.showType = false
+        //   const devTypes = document.querySelectorAll('.dev-icon')
+        //     for(var i=0;i<this.checkDevType.length;i++) {
+        //       if (this.checkDevType[i]) {
+        //         devTypes[i+6].className += ' dev-type-selected'
+        //       }
+        //     }
+        // }
       },
       webSocket() {
         const that = this
@@ -586,7 +602,7 @@
         }else if(pic==='3'){
           this.changeMap('tg_4_1')
         }else if(pic==='4'){
-          this.changeMap('tg_4_1')
+          this.changeMap('tg_4_5')
         }
         setTimeout(() => {
           var obj = document.getElementById(val.toString());
@@ -771,7 +787,11 @@
           this.checkDevType1 = [false, false, false, false, false, false]
           // 添加选中的样式
           if (typeof event === 'undefined') {
-            devTypes[6].className += ' dev-type-selected'
+            if(this.btnNum===1){
+              devTypes[1].className += ' dev-type-selected'
+            }else{
+              devTypes[0].className += ' dev-type-selected'
+            }
           } else {
             event.currentTarget.className += ' dev-type-selected'
           }
@@ -1017,7 +1037,7 @@
           this.isMain = true
           // this.devListParams.picture = '1'
           this.imgSizeOriginal = { width: 2245, height: 1586 }
-          this.btnNum  = 3
+          this.btnNum  = 8
           this.cameraTypeNum  = 6
           this.showFence = true // 显示电子围栏
           this.showTemp = false // 隐藏温湿度设备
@@ -1027,6 +1047,7 @@
           this.showSubTabGuider = false
           this.showFloorThree = false
           this.showFloorFour = false
+          this.selectDevByType('all')
         } else if (index === 'tg_3_1') {
           this.bgImageSrc = tg_3_1
           // this.devListParams.picture = '2'
@@ -1037,6 +1058,7 @@
           this.showTemp = true // 隐藏温湿度
           this.showSmoking = true // 隐藏烟感
           this.showSound = true // 隐藏声光报警器
+          this.selectDevByType('all')
         } else if (index === 'tg_4_1') {
           this.bgImageSrc = tg_4_1
           // this.devListParams.picture = '3'
@@ -1048,18 +1070,19 @@
           this.showTemp = true // 显示温湿度
           this.showSmoking = true // 显示烟感
           this.showSound = true // 显示声光报警器
+          this.selectDevByType('all')
         } else if (index === 'tg_4_5') {
           this.bgImageSrc = tg_4_5
           // this.devListParams.picture = '4'
           this.imgSizeOriginal = { width: 2245, height: 1586 }
-          this.btnNum  = 2
+          this.btnNum  = 1
           this.cameraTypeNum  = 1
           this.showFence = false // 隐藏电子围栏
           this.showTemp = false // 隐藏温湿度
           this.showSmoking = false // 隐藏烟感
           this.showSound = false // 隐藏声光报警器
+          this.selectDevByType('4')
         }
-        this.selectDevByType('all')
       },
       // 查询并显示设备详情
       detailDev(dev, event) {
@@ -1201,10 +1224,14 @@
     left: 50%; transform: translateX(-50%);
     bottom: 25px;
   }
+  .tableLine {
+    margin-top: 9px;
+    width: 463px;
+  }
   .main-page {
     background-size: cover;
     background-color: #023d83;
-    height: 100vh;
+    height: 98vh;
   }
 
   .main-header {
@@ -1362,16 +1389,24 @@
         margin-left: 20px;
       }
     }
-    .el-scrollbar {
-      /*height: 200px;*/
-      width: 100%;
+    // 滚动条的滑块
+    /deep/ .el-table__body-wrapper  {
+      background-color: #023D83;
+      border: 0px solid white;
     }
-    .moredatascollor {
-      height: 200px;
+    /deep/ .el-table--border th.gutter:last-of-type {
+      border: 1px solid #023D83;
+      border-bottom-width: 1px;
+      background-color: #023D83;
     }
-    .el-scrollbar__wrap {
-      overflow-y: auto;
-      overflow-x: hidden;
+    /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
+      background-color: #023D83;
+    }
+    /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+      display: none;
+    }
+    /deep/ .el-scrollbar__wrap {
+      overflow-x: hidden !important;
       margin-bottom: 0px !important;
     }
     .el-table {
@@ -1405,16 +1440,25 @@
     font-size: 15px;
     color: #FFFFFF;
     font-weight: normal;
+    border-color: #2470AC;
   }
-
+  .el-table--border::after, .el-table--group::after, .el-table::before{
+    background-color: #023d83;
+  }
+  .alarm-now-block /deep/ .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
+    border-color: #023d83;
+  }
   .alarm-now-block /deep/ .el-table__row td {
     background-color: #023D83;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ .el-table__body tr:hover > td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ tr.el-table__row--striped td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
 
   .map-tab {
@@ -1601,6 +1645,10 @@
   /*}*/
 
   @media(max-width: 1440px) {
+    .tableLine {
+      margin-top: 0px;
+      width: 343px;
+    }
     .main-title {
       height: 65px;
       padding-top: 16px;
diff --git a/src/views/ctrl/statCharts/devAlarmCount.vue b/src/views/ctrl/statCharts/devAlarmCount.vue
index 7bea059..6b6939e 100644
--- a/src/views/ctrl/statCharts/devAlarmCount.vue
+++ b/src/views/ctrl/statCharts/devAlarmCount.vue
@@ -1,5 +1,6 @@
+<!--suppress ALL -->
 <template>
-  <div>
+  <div style="height: 90%">
     <el-date-picker
       v-model="timeRange"
       :picker-options="pickerOptions"
@@ -7,15 +8,16 @@
       range-separator="至"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
-      style="margin-bottom: 10px;" />
-    <ve-histogram :data="chartData" :settings="settings" height="350px" />
+      style="margin-bottom: 10px;z-index: 10000"
+      size="small"/>
+    <ve-histogram :data="chartData" :settings="settings" :extend="chartExtend" style="margin-top: -50px" height="100%"/>
   </div>
 </template>
 
 <script>
-import { formatToString, getDate, oneDayTime } from '@/utils/calendarUtil'
-import { devAlarmCount } from '@/api/statistics'
 
+import { devAlarmCount } from '@/api/statistics'
+import { formatToString, parseToDate, getDate, oneDayTime } from '@/utils/calendarUtil'
 const now = new Date()
 
 export default {
@@ -30,12 +32,22 @@
         columns: ['name', 'count'],
         rows: []
       },
+      chartExtend: {
+        series: {
+          barMaxWidth: 50
+        },
+        grid: {
+          containLabel: true,
+          bottom: '10%'
+        }
+      },
       settings: {
         labelMap: {
           'name': '设备类型',
-          'count': '报警数量'
+          'count': ''
         },
-        max: [4]
+        max: [4],
+        area: false
       },
       timeRange: [],
       pickerOptions: {
@@ -99,6 +111,13 @@
       devAlarmCount(this.params).then(response => {
         if (response.code === 200) {
           this.chartData.rows = response.data
+          var max = 4
+          for(var i=0;i<response.data.length;i++){
+            if(Number(response.data[i].count)>max){
+              max = Number(response.data[i].count)
+            }
+          }
+          this.settings.max = [max]
         }
       })
     }
diff --git a/src/views/ctrl/statCharts/devCount.vue b/src/views/ctrl/statCharts/devCount.vue
index d3e2902..db55fbe 100644
--- a/src/views/ctrl/statCharts/devCount.vue
+++ b/src/views/ctrl/statCharts/devCount.vue
@@ -1,5 +1,6 @@
 <template>
-  <ve-ring :data="chartData" :settings="settings" />
+  <ve-histogram :data="chartData" :settings="settings" :extend="chartExtend" style="margin-top: -20px" height="100%"/>
+  <!--<ve-ring :data="chartData" :settings="settings" />-->
 </template>
 
 <script>
@@ -9,14 +10,55 @@
   name: 'DevCount',
   data() {
     return {
+      chartExtend: {
+        series: {
+          barMaxWidth: 50
+        },
+        xAxis: {
+          axisLabel: {
+            interval: 0,
+            //换行显示
+            formatter: function(value) {
+              let result = ""; //拼接加\n返回的类目项
+              let maxLength = 2; //每项显示文字个数
+              let valLength = value.length; //X轴类目项的文字个数
+              let rowNumber = Math.ceil(valLength / maxLength); //类目项需要换行的行数
+              if (rowNumber > 1) {
+                //如果文字大于3,
+                for (let i = 0; i < rowNumber; i++) {
+                  let temp = ""; //每次截取的字符串
+                  let start = i * maxLength; //开始截取的位置
+                  let end = start + maxLength; //结束截取的位置
+                  temp = value.substring(start, end) + "\n";
+                  result += temp; //拼接生成最终的字符串
+                }
+                return "{labelText|" + result + "}";
+              } else {
+                return "{labelText|" + value + "}";
+              }
+            },
+            rich: {
+              labelText: {
+                lineHeight: 18
+              }
+            }
+          }
+        }
+      },
       chartData: {
         columns: ['name', 'count'],
         rows: []
       },
       settings: {
-        // legendLimit: 4
-        radius: [60, 100]
-      }
+        labelMap: {
+          'name': '设备类型',
+          'count': ''
+        }
+      },
+      // settings: {
+      //   // legendLimit: 4
+      //   radius: [60, 100]
+      // }
     }
   },
   activated() {
@@ -26,6 +68,9 @@
     fetchData() {
       devCount().then(response => {
         if (response.code === 200) {
+          for(var i=0;i<response.data.length;i++){
+            response.data[i].name = response.data[i].name.replace('防护','')
+          }
           this.chartData.rows = response.data
         }
       })

diff --git a/config/dev.env.js b/config/dev.env.js
index 6b4622a..095ba33 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -8,4 +8,5 @@
   NODE_ENV: '"development"',
   // BASE_API: '"http://192.168.5.220:20311"'
   BASE_API: '"http://111.198.10.15:11631"'
+  // BASE_API: '"http://192.168.5.220:20311"'
 })
diff --git a/config/prod.env.js b/config/prod.env.js
index f2501d0..ccbc615 100644
--- a/config/prod.env.js
+++ b/config/prod.env.js
@@ -1,5 +1,6 @@
 'use strict'
 module.exports = {
   NODE_ENV: '"production"',
-  BASE_API: '"http://192.168.5.220:20311"'
+  // BASE_API: '"http://192.168.5.220:20311"'
+  BASE_API: '"http://111.198.10.15:11631"'
 }
diff --git a/favicon.ico b/favicon.ico
index 34b63ac..bc1bfc5 100644
--- a/favicon.ico
+++ b/favicon.ico
Binary files differ
diff --git a/src/api/visitor.js b/src/api/visitor.js
index 05ed6ea..01a6c26 100644
--- a/src/api/visitor.js
+++ b/src/api/visitor.js
@@ -74,3 +74,14 @@
   })
 }
 
+// 查询人员轨迹
+export function getDetail(devcode) {
+  return request({
+    url: '/device/capturePhoto',
+    method: 'post',
+    params:{
+      devcode: devcode
+    }
+  })
+}
+
diff --git a/src/assets/dashboard_images/icon-defence.png b/src/assets/dashboard_images/icon-defence.png
index 8069376..11b41cb 100644
--- a/src/assets/dashboard_images/icon-defence.png
+++ b/src/assets/dashboard_images/icon-defence.png
Binary files differ
diff --git a/src/utils/calendarUtil.js b/src/utils/calendarUtil.js
index da840c3..e599bdd 100644
--- a/src/utils/calendarUtil.js
+++ b/src/utils/calendarUtil.js
@@ -61,7 +61,32 @@
 
   return yearMonth + '-' + format(day)
 }
+export function formatDateTime(cellval) {
+  var dateVal = cellval + "";//把时间戳转成字符串格式
+  if (cellval != null) {
+    //取得时间戳部分 如：获取 /Date(1545299299910)/ 中的 1545299299910 部分
+    var date = new Date(parseInt(dateVal.replace("/Date(", "")
+      .replace(")/", ""), 10));
+    //获取年，不需要其他操作所以可以直接返回	date.getFullYear()
+    //月份为0-11，所以+1，月份小于10时补个0
+    var month = date.getMonth() + 1 < 10 ? "0"
+      + (date.getMonth() + 1) : date.getMonth() + 1;
+    //获取日
+    var currentDate = date.getDate() < 10 ? "0" + date.getDate()
+      : date.getDate();
+    //获取时间
+    var hours = date.getHours() < 10 ? "0" + date.getHours() : date
+      .getHours();
+    var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes()
+      : date.getMinutes();
+    var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds()
+      : date.getSeconds();
 
+    //返回日期结果，需要时间的话在加上时间
+    return date.getFullYear() + "-" + month + "-" + currentDate+" "+hours+":"+
+      minutes+":"+seconds;
+  }
+}
 // 格式化日期为字符串
 export function formatToString(value, level) {
   const date = new Date(value)
diff --git a/src/views/alarm/alarmDetail.vue b/src/views/alarm/alarmDetail.vue
index 2c94629..8c32ee5 100644
--- a/src/views/alarm/alarmDetail.vue
+++ b/src/views/alarm/alarmDetail.vue
@@ -1,7 +1,7 @@
 <!-- 报警详情 -->
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :model="dataForm" label-well-code="right" label-width="110px">
+    <el-form v-loading="loading" ref="dataForm" :model="dataForm" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="报警编号">
@@ -86,6 +86,7 @@
   name: 'AlarmDetail',
   data() {
     return {
+      loading: true,
       dialogFormVisible: false, // 对话框是否显示
       dialogStatus: '', // 对话框类型：create,update,detail
       dataForm: {
@@ -123,7 +124,7 @@
         this.dataForm = {
           id: row.id
         }
-
+        this.loading = true
         alarmDetail(this.dataForm.id).then(response => {
           if (response.code === 200) {
             this.dataForm = {
@@ -140,7 +141,7 @@
               reason: response.data.reason,
               remark: response.data.remark
             }
-
+            this.loading = false
             // 格式化报警状态
             if (response.data.valid === 1) {
               this.dataForm.validStr = '正在报警'
diff --git a/src/views/car/carAdd.vue b/src/views/car/carAdd.vue
index ddb215f..5f54c93 100644
--- a/src/views/car/carAdd.vue
+++ b/src/views/car/carAdd.vue
@@ -10,7 +10,7 @@
         </el-col>
         <el-col :span="12">
           <el-form-item label="车辆性质" prop="property">
-            <el-radio-group v-model="dataForm.property" :disabled="isDetailMode">
+            <el-radio-group v-model="dataForm.property" :disabled="isDetailMode" @change="resetOwner">
               <el-radio v-for="item in carProperties" :key="item.value" :label="item.value">{{ item.name }}</el-radio>
             </el-radio-group>
           </el-form-item>
@@ -106,6 +106,12 @@
     this.fetchStaffList()
   },
   methods: {
+    resetOwner(){
+      if(this.dataForm.property!=='2'){
+        this.dataForm.ownerId = ''
+        // this.dataForm.phone = ''
+      }
+    },
     // 初始化对话框
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.btnLoading = false
@@ -208,6 +214,7 @@
           }
         })
         this.dataForm.phone = selectedStaff[0].phone
+        this.dataForm.deptid = selectedStaff[0].deptid
       } else {
         this.dataForm.phone = ''
       }
diff --git a/src/views/car/carList.vue b/src/views/car/carList.vue
index 8d924ff..4ff07ab 100644
--- a/src/views/car/carList.vue
+++ b/src/views/car/carList.vue
@@ -105,11 +105,11 @@
           value: 'propertyStr',
           align: 'center'
         },
-        // {
-        //   text: '车主姓名',
-        //   value: 'ownerName',
-        //   align: 'center'
-        // },
+        {
+          text: '车主姓名',
+          value: 'ownerName',
+          align: 'center'
+        },
         {
           text: '车主联系电话',
           value: 'phone',
diff --git a/src/views/ctrl/index.vue b/src/views/ctrl/index.vue
index fd36f2b..29923af 100644
--- a/src/views/ctrl/index.vue
+++ b/src/views/ctrl/index.vue
@@ -50,12 +50,13 @@
         <in-out-today />
       </el-col>
 
-      <el-col :span="7" class="chart-block">
+      <el-col id="dev-count"  :span="10" class="chart-block">
         <div class="chart-title">各类型设备安装数量</div>
         <dev-count />
       </el-col>
 
-      <el-col id="pass-count" :span="10" class="chart-block">
+      <!--<el-col id="pass-count" class="chart-block">-->
+      <el-col :span="7" class="chart-block">
         <div class="chart-title">进出营数量统计</div>
         <in-out-count />
       </el-col>
@@ -121,7 +122,7 @@
 <style scoped>
   .app-wrapper {
     background-color: #e9e9e9;
-    padding-bottom: 20px;
+    padding-bottom: 10px;
   }
 
   .sub-data-block {
@@ -129,6 +130,7 @@
     border-radius: 16px;
     float: left;
     margin: 10px;
+    margin-bottom: 0px;
     box-shadow: 1px 1px 5px #999;
   }
   .sub-title {
@@ -136,36 +138,38 @@
     text-align: center;
     font-family: 'Microsoft YaHei';
     color: #fff;
-    font-size: 24px;
-    padding: 10px;
+    font-size: 20px;
+    padding-top: 10px;
+    padding-bottom: 0px;
   }
   .statis-block {
     text-align: center;
     margin: 0px 10px 0px 10px;
-    padding: 0px 10px 10px 10px;
+    padding: 0px 10px 5px 10px;
     color: #fff;
     font-weight: bold;
     letter-spacing: 1px;
-    font-size: 24px;
+    font-size: 20px;
   }
   .big-size {
-    font-size: 64px;
+    font-size: 35px;
   }
 
   .chart-title {
     font-family: 'Microsoft YaHei';
     color: #000000;
     font-weight: bold;
-    font-size: 20px;
+    font-size: 18px;
     text-align: center;
     padding: 10px;
   }
   .chart-block {
     margin-left: 20px;
-    margin-top: 20px;
+    margin-top: 10px;
     border-radius: 16px;
     background-color: #FFFFFF;
     box-shadow: 1px 1px 5px #999;
+    height: 37vh;
   }
 
   #today-visitor {
@@ -187,7 +191,7 @@
     background-image: linear-gradient(to right, #ffa800, #ce7e00);
   }
 
-  #pass-count, #dev-alarm-count {
+  #dev-count, #dev-alarm-count {
     width: calc(250vw / 6 - 70px);
   }
 </style>
diff --git a/src/views/ctrl/overview.vue b/src/views/ctrl/overview.vue
index 62e1105..49ed928 100644
--- a/src/views/ctrl/overview.vue
+++ b/src/views/ctrl/overview.vue
@@ -59,26 +59,52 @@
           <i v-else class="el-icon-arrow-down"/>
         </span>
       </div>
-      <transition name="el-collapse-transition">
-        <el-scrollbar
-          v-show="tableShow"
-          :style="{ visibility: tableShow ? 'visible' : 'hidden'}"
-          :class="{ moredatascollor: alarmList.length > 6 }"
-          :native="false">
-          <el-table
-            :data="alarmList"
-            class="alarm-list-table"
-            border
-            stripe
-            @row-click="alarmRowClick">
-            <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{ scope.row[column.value] }}
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-scrollbar>
-      </transition>
+      <div v-show="alarmList.length > 4 && tableShow">
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 32px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 231px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          height="200"
+          style="border-left: 1px solid #2470AC;"
+          v-if="tableShow"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-show="alarmList.length < 5 && tableShow">
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          v-if="tableShow"
+          style="border: 1px solid #2470AC"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
     </div>
 
     <!-- 中间平面图区域 -->
@@ -145,9 +171,13 @@
         class="point-camera"
         @click="detailDev(item, $event)" />
     </div>
-
     <!-- 平面图区域设备类型按钮 -->
-    <div v-show="showType" class="bottom-center" :style="{ width: cameraTypeNum*btnwidth + 'px'}">
+    <div class="bottom-center" :style="{ width: btnNum*btnwidth + 'px'}">
+        <el-col v-show="btnNum!==1" ref="all" class="dev-icon dev-type-selected" @click.native="selectDevByType('all', $event)">
+          <img v-if="checkDevType[0]" src="@/assets/overview_images/icons/icon-all-checked.png">
+          <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
+          <span>全部</span>
+        </el-col>
       <el-col class="dev-icon" @click.native="selectDevByType('4', $event)">
         <img id="4-1-img" v-if="checkDevType1[0]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="4-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
@@ -178,20 +208,6 @@
         <img id="11-2-img" v-else src="@/assets/overview_images/icons/half-camera-blue.png">
         <span>标准半球</span>
       </el-col>
-    </div>
-    <!-- 平面图区域设备类型按钮 -->
-    <div v-show="!showType"class="bottom-center" :style="{ width: btnNum*btnwidth + 'px'}">
-        <el-col ref="all" class="dev-icon dev-type-selected" @click.native="selectDevByType('all', $event)">
-          <img v-if="checkDevType[0]" src="@/assets/overview_images/icons/icon-all-checked.png">
-          <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
-          <span>全部</span>
-        </el-col>
-        <el-col ref="camera" :class="cameraClass" @click.native="showType=!showType;selectDevByType('camera', $event)">
-        <!--<el-col ref="camera" class="dev-icon" @click.native="selectDevByType('camera', $event)">-->
-          <img id="cam_img_red" v-if="checkDevType[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-          <img id="cam_img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-          <span>摄像头</span>
-        </el-col>
         <el-col v-show="showFence" class="dev-icon" @click.native="selectDevByType('fence', $event)">
           <img v-if="checkDevType[2]" src="@/assets/overview_images/icons/icon-fence-checked.png">
           <img v-else src="@/assets/overview_images/icons/icon-fence-unchecked.png">
@@ -372,7 +388,7 @@
           height: 789
         }, // 屏幕窗口尺寸
         imgUrl: require('../../assets/overview_images/icons/icon-camera-point.png'),
-        btnNum: 3,
+        btnNum: 8,
         cameraTypeNum: 6,
         btnwidth: 210,
         halfLeft: 0,
@@ -498,25 +514,25 @@
             }
           }
         }
-        //跟换菜单
-        var item = ['人脸识别','车牌轨迹','周界防护','标准数字','智能球形','标准半球']
-        for(var i=0;i<item.length;i++){
-          if(item[i]===val.target.innerText){
-            return
-          }
-        }
-        if(val.target.id.endsWith('-1-img')||val.target.id.endsWith('-2-img')|| val.target.id==='cam_img' || val.target.id==='cam_img_red'){
-          return
-        }
-        if( val.target.innerText!=='摄像头') {
-          this.showType = false
-          const devTypes = document.querySelectorAll('.dev-icon')
-            for(var i=0;i<this.checkDevType.length;i++) {
-              if (this.checkDevType[i]) {
-                devTypes[i+6].className += ' dev-type-selected'
-              }
-            }
-        }
+        // //跟换菜单
+        // var item = ['人脸识别','车牌轨迹','周界防护','标准数字','智能球形','标准半球']
+        // for(var i=0;i<item.length;i++){
+        //   if(item[i]===val.target.innerText){
+        //     return
+        //   }
+        // }
+        // if(val.target.id.endsWith('-1-img')||val.target.id.endsWith('-2-img')|| val.target.id==='cam_img' || val.target.id==='cam_img_red'){
+        //   return
+        // }
+        // if( val.target.innerText!=='摄像头') {
+        //   this.showType = false
+        //   const devTypes = document.querySelectorAll('.dev-icon')
+        //     for(var i=0;i<this.checkDevType.length;i++) {
+        //       if (this.checkDevType[i]) {
+        //         devTypes[i+6].className += ' dev-type-selected'
+        //       }
+        //     }
+        // }
       },
       webSocket() {
         const that = this
@@ -586,7 +602,7 @@
         }else if(pic==='3'){
           this.changeMap('tg_4_1')
         }else if(pic==='4'){
-          this.changeMap('tg_4_1')
+          this.changeMap('tg_4_5')
         }
         setTimeout(() => {
           var obj = document.getElementById(val.toString());
@@ -771,7 +787,11 @@
           this.checkDevType1 = [false, false, false, false, false, false]
           // 添加选中的样式
           if (typeof event === 'undefined') {
-            devTypes[6].className += ' dev-type-selected'
+            if(this.btnNum===1){
+              devTypes[1].className += ' dev-type-selected'
+            }else{
+              devTypes[0].className += ' dev-type-selected'
+            }
           } else {
             event.currentTarget.className += ' dev-type-selected'
           }
@@ -1017,7 +1037,7 @@
           this.isMain = true
           // this.devListParams.picture = '1'
           this.imgSizeOriginal = { width: 2245, height: 1586 }
-          this.btnNum  = 3
+          this.btnNum  = 8
           this.cameraTypeNum  = 6
           this.showFence = true // 显示电子围栏
           this.showTemp = false // 隐藏温湿度设备
@@ -1027,6 +1047,7 @@
           this.showSubTabGuider = false
           this.showFloorThree = false
           this.showFloorFour = false
+          this.selectDevByType('all')
         } else if (index === 'tg_3_1') {
           this.bgImageSrc = tg_3_1
           // this.devListParams.picture = '2'
@@ -1037,6 +1058,7 @@
           this.showTemp = true // 隐藏温湿度
           this.showSmoking = true // 隐藏烟感
           this.showSound = true // 隐藏声光报警器
+          this.selectDevByType('all')
         } else if (index === 'tg_4_1') {
           this.bgImageSrc = tg_4_1
           // this.devListParams.picture = '3'
@@ -1048,18 +1070,19 @@
           this.showTemp = true // 显示温湿度
           this.showSmoking = true // 显示烟感
           this.showSound = true // 显示声光报警器
+          this.selectDevByType('all')
         } else if (index === 'tg_4_5') {
           this.bgImageSrc = tg_4_5
           // this.devListParams.picture = '4'
           this.imgSizeOriginal = { width: 2245, height: 1586 }
-          this.btnNum  = 2
+          this.btnNum  = 1
           this.cameraTypeNum  = 1
           this.showFence = false // 隐藏电子围栏
           this.showTemp = false // 隐藏温湿度
           this.showSmoking = false // 隐藏烟感
           this.showSound = false // 隐藏声光报警器
+          this.selectDevByType('4')
         }
-        this.selectDevByType('all')
       },
       // 查询并显示设备详情
       detailDev(dev, event) {
@@ -1201,10 +1224,14 @@
     left: 50%; transform: translateX(-50%);
     bottom: 25px;
   }
+  .tableLine {
+    margin-top: 9px;
+    width: 463px;
+  }
   .main-page {
     background-size: cover;
     background-color: #023d83;
-    height: 100vh;
+    height: 98vh;
   }
 
   .main-header {
@@ -1362,16 +1389,24 @@
         margin-left: 20px;
       }
     }
-    .el-scrollbar {
-      /*height: 200px;*/
-      width: 100%;
+    // 滚动条的滑块
+    /deep/ .el-table__body-wrapper  {
+      background-color: #023D83;
+      border: 0px solid white;
     }
-    .moredatascollor {
-      height: 200px;
+    /deep/ .el-table--border th.gutter:last-of-type {
+      border: 1px solid #023D83;
+      border-bottom-width: 1px;
+      background-color: #023D83;
     }
-    .el-scrollbar__wrap {
-      overflow-y: auto;
-      overflow-x: hidden;
+    /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
+      background-color: #023D83;
+    }
+    /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+      display: none;
+    }
+    /deep/ .el-scrollbar__wrap {
+      overflow-x: hidden !important;
       margin-bottom: 0px !important;
     }
     .el-table {
@@ -1405,16 +1440,25 @@
     font-size: 15px;
     color: #FFFFFF;
     font-weight: normal;
+    border-color: #2470AC;
   }
-
+  .el-table--border::after, .el-table--group::after, .el-table::before{
+    background-color: #023d83;
+  }
+  .alarm-now-block /deep/ .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
+    border-color: #023d83;
+  }
   .alarm-now-block /deep/ .el-table__row td {
     background-color: #023D83;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ .el-table__body tr:hover > td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ tr.el-table__row--striped td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
 
   .map-tab {
@@ -1601,6 +1645,10 @@
   /*}*/
 
   @media(max-width: 1440px) {
+    .tableLine {
+      margin-top: 0px;
+      width: 343px;
+    }
     .main-title {
       height: 65px;
       padding-top: 16px;
diff --git a/src/views/ctrl/statCharts/devAlarmCount.vue b/src/views/ctrl/statCharts/devAlarmCount.vue
index 7bea059..6b6939e 100644
--- a/src/views/ctrl/statCharts/devAlarmCount.vue
+++ b/src/views/ctrl/statCharts/devAlarmCount.vue
@@ -1,5 +1,6 @@
+<!--suppress ALL -->
 <template>
-  <div>
+  <div style="height: 90%">
     <el-date-picker
       v-model="timeRange"
       :picker-options="pickerOptions"
@@ -7,15 +8,16 @@
       range-separator="至"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
-      style="margin-bottom: 10px;" />
-    <ve-histogram :data="chartData" :settings="settings" height="350px" />
+      style="margin-bottom: 10px;z-index: 10000"
+      size="small"/>
+    <ve-histogram :data="chartData" :settings="settings" :extend="chartExtend" style="margin-top: -50px" height="100%"/>
   </div>
 </template>
 
 <script>
-import { formatToString, getDate, oneDayTime } from '@/utils/calendarUtil'
-import { devAlarmCount } from '@/api/statistics'
 
+import { devAlarmCount } from '@/api/statistics'
+import { formatToString, parseToDate, getDate, oneDayTime } from '@/utils/calendarUtil'
 const now = new Date()
 
 export default {
@@ -30,12 +32,22 @@
         columns: ['name', 'count'],
         rows: []
       },
+      chartExtend: {
+        series: {
+          barMaxWidth: 50
+        },
+        grid: {
+          containLabel: true,
+          bottom: '10%'
+        }
+      },
       settings: {
         labelMap: {
           'name': '设备类型',
-          'count': '报警数量'
+          'count': ''
         },
-        max: [4]
+        max: [4],
+        area: false
       },
       timeRange: [],
       pickerOptions: {
@@ -99,6 +111,13 @@
       devAlarmCount(this.params).then(response => {
         if (response.code === 200) {
           this.chartData.rows = response.data
+          var max = 4
+          for(var i=0;i<response.data.length;i++){
+            if(Number(response.data[i].count)>max){
+              max = Number(response.data[i].count)
+            }
+          }
+          this.settings.max = [max]
         }
       })
     }
diff --git a/src/views/ctrl/statCharts/devCount.vue b/src/views/ctrl/statCharts/devCount.vue
index d3e2902..db55fbe 100644
--- a/src/views/ctrl/statCharts/devCount.vue
+++ b/src/views/ctrl/statCharts/devCount.vue
@@ -1,5 +1,6 @@
 <template>
-  <ve-ring :data="chartData" :settings="settings" />
+  <ve-histogram :data="chartData" :settings="settings" :extend="chartExtend" style="margin-top: -20px" height="100%"/>
+  <!--<ve-ring :data="chartData" :settings="settings" />-->
 </template>
 
 <script>
@@ -9,14 +10,55 @@
   name: 'DevCount',
   data() {
     return {
+      chartExtend: {
+        series: {
+          barMaxWidth: 50
+        },
+        xAxis: {
+          axisLabel: {
+            interval: 0,
+            //换行显示
+            formatter: function(value) {
+              let result = ""; //拼接加\n返回的类目项
+              let maxLength = 2; //每项显示文字个数
+              let valLength = value.length; //X轴类目项的文字个数
+              let rowNumber = Math.ceil(valLength / maxLength); //类目项需要换行的行数
+              if (rowNumber > 1) {
+                //如果文字大于3,
+                for (let i = 0; i < rowNumber; i++) {
+                  let temp = ""; //每次截取的字符串
+                  let start = i * maxLength; //开始截取的位置
+                  let end = start + maxLength; //结束截取的位置
+                  temp = value.substring(start, end) + "\n";
+                  result += temp; //拼接生成最终的字符串
+                }
+                return "{labelText|" + result + "}";
+              } else {
+                return "{labelText|" + value + "}";
+              }
+            },
+            rich: {
+              labelText: {
+                lineHeight: 18
+              }
+            }
+          }
+        }
+      },
       chartData: {
         columns: ['name', 'count'],
         rows: []
       },
       settings: {
-        // legendLimit: 4
-        radius: [60, 100]
-      }
+        labelMap: {
+          'name': '设备类型',
+          'count': ''
+        }
+      },
+      // settings: {
+      //   // legendLimit: 4
+      //   radius: [60, 100]
+      // }
     }
   },
   activated() {
@@ -26,6 +68,9 @@
     fetchData() {
       devCount().then(response => {
         if (response.code === 200) {
+          for(var i=0;i<response.data.length;i++){
+            response.data[i].name = response.data[i].name.replace('防护','')
+          }
           this.chartData.rows = response.data
         }
       })
diff --git a/src/views/ctrl/statCharts/inOutCount.vue b/src/views/ctrl/statCharts/inOutCount.vue
index 502157e..d65ec69 100644
--- a/src/views/ctrl/statCharts/inOutCount.vue
+++ b/src/views/ctrl/statCharts/inOutCount.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="height: 100%">
     <el-date-picker
       v-model="timeRange"
       :picker-options="pickerOptions"
@@ -7,8 +7,9 @@
       range-separator="至"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
-      style="margin-bottom: 10px"/>
-    <ve-line :data="chartData" :settings="settings" height="350px" />
+      size="small"
+      style="margin-bottom: 10px;z-index: 10000"/>
+    <ve-line :data="chartData" :settings="settings" :extend="barExtend" style="margin-top: -50px;" height="93%"/>
   </div>
 </template>
 
@@ -30,6 +31,17 @@
         columns: ['date', 'staff', 'visitor', 'car', 'visitorCar'],
         rows: []
       },
+
+      barExtend:{
+        legend:{  // 隐藏图例
+          x: 'center',
+          y: 'bottom'
+        },
+        grid: {
+          containLabel: true,
+          bottom: '10%'
+        },
+      },
       settings: {
         labelMap: {
           'staff': '内部人员',
@@ -37,11 +49,11 @@
           'car': '内部车辆',
           'visitorCar': '来访车辆'
         },
-        xAxisType: 'time',
+        // xAxisType: 'time',
         max: [4],
         area: false,
         metrics: ['staff', 'visitor', 'car', 'visitorCar'],
-        dimension: ['date']
+        dimension: ['date'],
       },
       timeRange: [],
       pickerOptions: {
@@ -106,7 +118,7 @@
         if (response.code === 200) {
           const data = this.parseStatisticsData(response.data)
           this.chartData.rows = data.rowDatas
-          this.chartData.max = [data.maxCount]
+          this.settings.max = [data.maxCount]
         }
       })
     },
@@ -164,7 +176,7 @@
 
         if (typeof visitorCar !== 'undefined') {
           if (visitorCar.date === date) {
-            visitorCarCount = car.count
+            visitorCarCount = visitorCar.count
             indexVc++
           }
         }
@@ -172,6 +184,18 @@
         if (staffCount + visitorCount + carCount + visitorCarCount > 0) {
           rowDatas.push({ date: date, staff: staffCount, visitor: visitorCount, car: carCount, visitorCar: visitorCarCount })
         }
+        if(maxCount<staffCount){
+          maxCount = staffCount
+        }
+        if(maxCount<visitorCount){
+          maxCount = visitorCount
+        }
+        if(maxCount<carCount){
+          maxCount = carCount
+        }
+        if(maxCount<visitorCarCount){
+          maxCount = visitorCarCount
+        }
         start += oneDayTime
       }
 

diff --git a/config/dev.env.js b/config/dev.env.js
index 6b4622a..095ba33 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -8,4 +8,5 @@
   NODE_ENV: '"development"',
   // BASE_API: '"http://192.168.5.220:20311"'
   BASE_API: '"http://111.198.10.15:11631"'
+  // BASE_API: '"http://192.168.5.220:20311"'
 })
diff --git a/config/prod.env.js b/config/prod.env.js
index f2501d0..ccbc615 100644
--- a/config/prod.env.js
+++ b/config/prod.env.js
@@ -1,5 +1,6 @@
 'use strict'
 module.exports = {
   NODE_ENV: '"production"',
-  BASE_API: '"http://192.168.5.220:20311"'
+  // BASE_API: '"http://192.168.5.220:20311"'
+  BASE_API: '"http://111.198.10.15:11631"'
 }
diff --git a/favicon.ico b/favicon.ico
index 34b63ac..bc1bfc5 100644
--- a/favicon.ico
+++ b/favicon.ico
Binary files differ
diff --git a/src/api/visitor.js b/src/api/visitor.js
index 05ed6ea..01a6c26 100644
--- a/src/api/visitor.js
+++ b/src/api/visitor.js
@@ -74,3 +74,14 @@
   })
 }
 
+// 查询人员轨迹
+export function getDetail(devcode) {
+  return request({
+    url: '/device/capturePhoto',
+    method: 'post',
+    params:{
+      devcode: devcode
+    }
+  })
+}
+
diff --git a/src/assets/dashboard_images/icon-defence.png b/src/assets/dashboard_images/icon-defence.png
index 8069376..11b41cb 100644
--- a/src/assets/dashboard_images/icon-defence.png
+++ b/src/assets/dashboard_images/icon-defence.png
Binary files differ
diff --git a/src/utils/calendarUtil.js b/src/utils/calendarUtil.js
index da840c3..e599bdd 100644
--- a/src/utils/calendarUtil.js
+++ b/src/utils/calendarUtil.js
@@ -61,7 +61,32 @@
 
   return yearMonth + '-' + format(day)
 }
+export function formatDateTime(cellval) {
+  var dateVal = cellval + "";//把时间戳转成字符串格式
+  if (cellval != null) {
+    //取得时间戳部分 如：获取 /Date(1545299299910)/ 中的 1545299299910 部分
+    var date = new Date(parseInt(dateVal.replace("/Date(", "")
+      .replace(")/", ""), 10));
+    //获取年，不需要其他操作所以可以直接返回	date.getFullYear()
+    //月份为0-11，所以+1，月份小于10时补个0
+    var month = date.getMonth() + 1 < 10 ? "0"
+      + (date.getMonth() + 1) : date.getMonth() + 1;
+    //获取日
+    var currentDate = date.getDate() < 10 ? "0" + date.getDate()
+      : date.getDate();
+    //获取时间
+    var hours = date.getHours() < 10 ? "0" + date.getHours() : date
+      .getHours();
+    var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes()
+      : date.getMinutes();
+    var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds()
+      : date.getSeconds();
 
+    //返回日期结果，需要时间的话在加上时间
+    return date.getFullYear() + "-" + month + "-" + currentDate+" "+hours+":"+
+      minutes+":"+seconds;
+  }
+}
 // 格式化日期为字符串
 export function formatToString(value, level) {
   const date = new Date(value)
diff --git a/src/views/alarm/alarmDetail.vue b/src/views/alarm/alarmDetail.vue
index 2c94629..8c32ee5 100644
--- a/src/views/alarm/alarmDetail.vue
+++ b/src/views/alarm/alarmDetail.vue
@@ -1,7 +1,7 @@
 <!-- 报警详情 -->
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :model="dataForm" label-well-code="right" label-width="110px">
+    <el-form v-loading="loading" ref="dataForm" :model="dataForm" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="报警编号">
@@ -86,6 +86,7 @@
   name: 'AlarmDetail',
   data() {
     return {
+      loading: true,
       dialogFormVisible: false, // 对话框是否显示
       dialogStatus: '', // 对话框类型：create,update,detail
       dataForm: {
@@ -123,7 +124,7 @@
         this.dataForm = {
           id: row.id
         }
-
+        this.loading = true
         alarmDetail(this.dataForm.id).then(response => {
           if (response.code === 200) {
             this.dataForm = {
@@ -140,7 +141,7 @@
               reason: response.data.reason,
               remark: response.data.remark
             }
-
+            this.loading = false
             // 格式化报警状态
             if (response.data.valid === 1) {
               this.dataForm.validStr = '正在报警'
diff --git a/src/views/car/carAdd.vue b/src/views/car/carAdd.vue
index ddb215f..5f54c93 100644
--- a/src/views/car/carAdd.vue
+++ b/src/views/car/carAdd.vue
@@ -10,7 +10,7 @@
         </el-col>
         <el-col :span="12">
           <el-form-item label="车辆性质" prop="property">
-            <el-radio-group v-model="dataForm.property" :disabled="isDetailMode">
+            <el-radio-group v-model="dataForm.property" :disabled="isDetailMode" @change="resetOwner">
               <el-radio v-for="item in carProperties" :key="item.value" :label="item.value">{{ item.name }}</el-radio>
             </el-radio-group>
           </el-form-item>
@@ -106,6 +106,12 @@
     this.fetchStaffList()
   },
   methods: {
+    resetOwner(){
+      if(this.dataForm.property!=='2'){
+        this.dataForm.ownerId = ''
+        // this.dataForm.phone = ''
+      }
+    },
     // 初始化对话框
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.btnLoading = false
@@ -208,6 +214,7 @@
           }
         })
         this.dataForm.phone = selectedStaff[0].phone
+        this.dataForm.deptid = selectedStaff[0].deptid
       } else {
         this.dataForm.phone = ''
       }
diff --git a/src/views/car/carList.vue b/src/views/car/carList.vue
index 8d924ff..4ff07ab 100644
--- a/src/views/car/carList.vue
+++ b/src/views/car/carList.vue
@@ -105,11 +105,11 @@
           value: 'propertyStr',
           align: 'center'
         },
-        // {
-        //   text: '车主姓名',
-        //   value: 'ownerName',
-        //   align: 'center'
-        // },
+        {
+          text: '车主姓名',
+          value: 'ownerName',
+          align: 'center'
+        },
         {
           text: '车主联系电话',
           value: 'phone',
diff --git a/src/views/ctrl/index.vue b/src/views/ctrl/index.vue
index fd36f2b..29923af 100644
--- a/src/views/ctrl/index.vue
+++ b/src/views/ctrl/index.vue
@@ -50,12 +50,13 @@
         <in-out-today />
       </el-col>
 
-      <el-col :span="7" class="chart-block">
+      <el-col id="dev-count"  :span="10" class="chart-block">
         <div class="chart-title">各类型设备安装数量</div>
         <dev-count />
       </el-col>
 
-      <el-col id="pass-count" :span="10" class="chart-block">
+      <!--<el-col id="pass-count" class="chart-block">-->
+      <el-col :span="7" class="chart-block">
         <div class="chart-title">进出营数量统计</div>
         <in-out-count />
       </el-col>
@@ -121,7 +122,7 @@
 <style scoped>
   .app-wrapper {
     background-color: #e9e9e9;
-    padding-bottom: 20px;
+    padding-bottom: 10px;
   }
 
   .sub-data-block {
@@ -129,6 +130,7 @@
     border-radius: 16px;
     float: left;
     margin: 10px;
+    margin-bottom: 0px;
     box-shadow: 1px 1px 5px #999;
   }
   .sub-title {
@@ -136,36 +138,38 @@
     text-align: center;
     font-family: 'Microsoft YaHei';
     color: #fff;
-    font-size: 24px;
-    padding: 10px;
+    font-size: 20px;
+    padding-top: 10px;
+    padding-bottom: 0px;
   }
   .statis-block {
     text-align: center;
     margin: 0px 10px 0px 10px;
-    padding: 0px 10px 10px 10px;
+    padding: 0px 10px 5px 10px;
     color: #fff;
     font-weight: bold;
     letter-spacing: 1px;
-    font-size: 24px;
+    font-size: 20px;
   }
   .big-size {
-    font-size: 64px;
+    font-size: 35px;
   }
 
   .chart-title {
     font-family: 'Microsoft YaHei';
     color: #000000;
     font-weight: bold;
-    font-size: 20px;
+    font-size: 18px;
     text-align: center;
     padding: 10px;
   }
   .chart-block {
     margin-left: 20px;
-    margin-top: 20px;
+    margin-top: 10px;
     border-radius: 16px;
     background-color: #FFFFFF;
     box-shadow: 1px 1px 5px #999;
+    height: 37vh;
   }
 
   #today-visitor {
@@ -187,7 +191,7 @@
     background-image: linear-gradient(to right, #ffa800, #ce7e00);
   }
 
-  #pass-count, #dev-alarm-count {
+  #dev-count, #dev-alarm-count {
     width: calc(250vw / 6 - 70px);
   }
 </style>
diff --git a/src/views/ctrl/overview.vue b/src/views/ctrl/overview.vue
index 62e1105..49ed928 100644
--- a/src/views/ctrl/overview.vue
+++ b/src/views/ctrl/overview.vue
@@ -59,26 +59,52 @@
           <i v-else class="el-icon-arrow-down"/>
         </span>
       </div>
-      <transition name="el-collapse-transition">
-        <el-scrollbar
-          v-show="tableShow"
-          :style="{ visibility: tableShow ? 'visible' : 'hidden'}"
-          :class="{ moredatascollor: alarmList.length > 6 }"
-          :native="false">
-          <el-table
-            :data="alarmList"
-            class="alarm-list-table"
-            border
-            stripe
-            @row-click="alarmRowClick">
-            <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{ scope.row[column.value] }}
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-scrollbar>
-      </transition>
+      <div v-show="alarmList.length > 4 && tableShow">
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 32px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 231px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          height="200"
+          style="border-left: 1px solid #2470AC;"
+          v-if="tableShow"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-show="alarmList.length < 5 && tableShow">
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          v-if="tableShow"
+          style="border: 1px solid #2470AC"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
     </div>
 
     <!-- 中间平面图区域 -->
@@ -145,9 +171,13 @@
         class="point-camera"
         @click="detailDev(item, $event)" />
     </div>
-
     <!-- 平面图区域设备类型按钮 -->
-    <div v-show="showType" class="bottom-center" :style="{ width: cameraTypeNum*btnwidth + 'px'}">
+    <div class="bottom-center" :style="{ width: btnNum*btnwidth + 'px'}">
+        <el-col v-show="btnNum!==1" ref="all" class="dev-icon dev-type-selected" @click.native="selectDevByType('all', $event)">
+          <img v-if="checkDevType[0]" src="@/assets/overview_images/icons/icon-all-checked.png">
+          <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
+          <span>全部</span>
+        </el-col>
       <el-col class="dev-icon" @click.native="selectDevByType('4', $event)">
         <img id="4-1-img" v-if="checkDevType1[0]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="4-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
@@ -178,20 +208,6 @@
         <img id="11-2-img" v-else src="@/assets/overview_images/icons/half-camera-blue.png">
         <span>标准半球</span>
       </el-col>
-    </div>
-    <!-- 平面图区域设备类型按钮 -->
-    <div v-show="!showType"class="bottom-center" :style="{ width: btnNum*btnwidth + 'px'}">
-        <el-col ref="all" class="dev-icon dev-type-selected" @click.native="selectDevByType('all', $event)">
-          <img v-if="checkDevType[0]" src="@/assets/overview_images/icons/icon-all-checked.png">
-          <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
-          <span>全部</span>
-        </el-col>
-        <el-col ref="camera" :class="cameraClass" @click.native="showType=!showType;selectDevByType('camera', $event)">
-        <!--<el-col ref="camera" class="dev-icon" @click.native="selectDevByType('camera', $event)">-->
-          <img id="cam_img_red" v-if="checkDevType[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-          <img id="cam_img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-          <span>摄像头</span>
-        </el-col>
         <el-col v-show="showFence" class="dev-icon" @click.native="selectDevByType('fence', $event)">
           <img v-if="checkDevType[2]" src="@/assets/overview_images/icons/icon-fence-checked.png">
           <img v-else src="@/assets/overview_images/icons/icon-fence-unchecked.png">
@@ -372,7 +388,7 @@
           height: 789
         }, // 屏幕窗口尺寸
         imgUrl: require('../../assets/overview_images/icons/icon-camera-point.png'),
-        btnNum: 3,
+        btnNum: 8,
         cameraTypeNum: 6,
         btnwidth: 210,
         halfLeft: 0,
@@ -498,25 +514,25 @@
             }
           }
         }
-        //跟换菜单
-        var item = ['人脸识别','车牌轨迹','周界防护','标准数字','智能球形','标准半球']
-        for(var i=0;i<item.length;i++){
-          if(item[i]===val.target.innerText){
-            return
-          }
-        }
-        if(val.target.id.endsWith('-1-img')||val.target.id.endsWith('-2-img')|| val.target.id==='cam_img' || val.target.id==='cam_img_red'){
-          return
-        }
-        if( val.target.innerText!=='摄像头') {
-          this.showType = false
-          const devTypes = document.querySelectorAll('.dev-icon')
-            for(var i=0;i<this.checkDevType.length;i++) {
-              if (this.checkDevType[i]) {
-                devTypes[i+6].className += ' dev-type-selected'
-              }
-            }
-        }
+        // //跟换菜单
+        // var item = ['人脸识别','车牌轨迹','周界防护','标准数字','智能球形','标准半球']
+        // for(var i=0;i<item.length;i++){
+        //   if(item[i]===val.target.innerText){
+        //     return
+        //   }
+        // }
+        // if(val.target.id.endsWith('-1-img')||val.target.id.endsWith('-2-img')|| val.target.id==='cam_img' || val.target.id==='cam_img_red'){
+        //   return
+        // }
+        // if( val.target.innerText!=='摄像头') {
+        //   this.showType = false
+        //   const devTypes = document.querySelectorAll('.dev-icon')
+        //     for(var i=0;i<this.checkDevType.length;i++) {
+        //       if (this.checkDevType[i]) {
+        //         devTypes[i+6].className += ' dev-type-selected'
+        //       }
+        //     }
+        // }
       },
       webSocket() {
         const that = this
@@ -586,7 +602,7 @@
         }else if(pic==='3'){
           this.changeMap('tg_4_1')
         }else if(pic==='4'){
-          this.changeMap('tg_4_1')
+          this.changeMap('tg_4_5')
         }
         setTimeout(() => {
           var obj = document.getElementById(val.toString());
@@ -771,7 +787,11 @@
           this.checkDevType1 = [false, false, false, false, false, false]
           // 添加选中的样式
           if (typeof event === 'undefined') {
-            devTypes[6].className += ' dev-type-selected'
+            if(this.btnNum===1){
+              devTypes[1].className += ' dev-type-selected'
+            }else{
+              devTypes[0].className += ' dev-type-selected'
+            }
           } else {
             event.currentTarget.className += ' dev-type-selected'
           }
@@ -1017,7 +1037,7 @@
           this.isMain = true
           // this.devListParams.picture = '1'
           this.imgSizeOriginal = { width: 2245, height: 1586 }
-          this.btnNum  = 3
+          this.btnNum  = 8
           this.cameraTypeNum  = 6
           this.showFence = true // 显示电子围栏
           this.showTemp = false // 隐藏温湿度设备
@@ -1027,6 +1047,7 @@
           this.showSubTabGuider = false
           this.showFloorThree = false
           this.showFloorFour = false
+          this.selectDevByType('all')
         } else if (index === 'tg_3_1') {
           this.bgImageSrc = tg_3_1
           // this.devListParams.picture = '2'
@@ -1037,6 +1058,7 @@
           this.showTemp = true // 隐藏温湿度
           this.showSmoking = true // 隐藏烟感
           this.showSound = true // 隐藏声光报警器
+          this.selectDevByType('all')
         } else if (index === 'tg_4_1') {
           this.bgImageSrc = tg_4_1
           // this.devListParams.picture = '3'
@@ -1048,18 +1070,19 @@
           this.showTemp = true // 显示温湿度
           this.showSmoking = true // 显示烟感
           this.showSound = true // 显示声光报警器
+          this.selectDevByType('all')
         } else if (index === 'tg_4_5') {
           this.bgImageSrc = tg_4_5
           // this.devListParams.picture = '4'
           this.imgSizeOriginal = { width: 2245, height: 1586 }
-          this.btnNum  = 2
+          this.btnNum  = 1
           this.cameraTypeNum  = 1
           this.showFence = false // 隐藏电子围栏
           this.showTemp = false // 隐藏温湿度
           this.showSmoking = false // 隐藏烟感
           this.showSound = false // 隐藏声光报警器
+          this.selectDevByType('4')
         }
-        this.selectDevByType('all')
       },
       // 查询并显示设备详情
       detailDev(dev, event) {
@@ -1201,10 +1224,14 @@
     left: 50%; transform: translateX(-50%);
     bottom: 25px;
   }
+  .tableLine {
+    margin-top: 9px;
+    width: 463px;
+  }
   .main-page {
     background-size: cover;
     background-color: #023d83;
-    height: 100vh;
+    height: 98vh;
   }
 
   .main-header {
@@ -1362,16 +1389,24 @@
         margin-left: 20px;
       }
     }
-    .el-scrollbar {
-      /*height: 200px;*/
-      width: 100%;
+    // 滚动条的滑块
+    /deep/ .el-table__body-wrapper  {
+      background-color: #023D83;
+      border: 0px solid white;
     }
-    .moredatascollor {
-      height: 200px;
+    /deep/ .el-table--border th.gutter:last-of-type {
+      border: 1px solid #023D83;
+      border-bottom-width: 1px;
+      background-color: #023D83;
     }
-    .el-scrollbar__wrap {
-      overflow-y: auto;
-      overflow-x: hidden;
+    /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
+      background-color: #023D83;
+    }
+    /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+      display: none;
+    }
+    /deep/ .el-scrollbar__wrap {
+      overflow-x: hidden !important;
       margin-bottom: 0px !important;
     }
     .el-table {
@@ -1405,16 +1440,25 @@
     font-size: 15px;
     color: #FFFFFF;
     font-weight: normal;
+    border-color: #2470AC;
   }
-
+  .el-table--border::after, .el-table--group::after, .el-table::before{
+    background-color: #023d83;
+  }
+  .alarm-now-block /deep/ .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
+    border-color: #023d83;
+  }
   .alarm-now-block /deep/ .el-table__row td {
     background-color: #023D83;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ .el-table__body tr:hover > td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ tr.el-table__row--striped td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
 
   .map-tab {
@@ -1601,6 +1645,10 @@
   /*}*/
 
   @media(max-width: 1440px) {
+    .tableLine {
+      margin-top: 0px;
+      width: 343px;
+    }
     .main-title {
       height: 65px;
       padding-top: 16px;
diff --git a/src/views/ctrl/statCharts/devAlarmCount.vue b/src/views/ctrl/statCharts/devAlarmCount.vue
index 7bea059..6b6939e 100644
--- a/src/views/ctrl/statCharts/devAlarmCount.vue
+++ b/src/views/ctrl/statCharts/devAlarmCount.vue
@@ -1,5 +1,6 @@
+<!--suppress ALL -->
 <template>
-  <div>
+  <div style="height: 90%">
     <el-date-picker
       v-model="timeRange"
       :picker-options="pickerOptions"
@@ -7,15 +8,16 @@
       range-separator="至"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
-      style="margin-bottom: 10px;" />
-    <ve-histogram :data="chartData" :settings="settings" height="350px" />
+      style="margin-bottom: 10px;z-index: 10000"
+      size="small"/>
+    <ve-histogram :data="chartData" :settings="settings" :extend="chartExtend" style="margin-top: -50px" height="100%"/>
   </div>
 </template>
 
 <script>
-import { formatToString, getDate, oneDayTime } from '@/utils/calendarUtil'
-import { devAlarmCount } from '@/api/statistics'
 
+import { devAlarmCount } from '@/api/statistics'
+import { formatToString, parseToDate, getDate, oneDayTime } from '@/utils/calendarUtil'
 const now = new Date()
 
 export default {
@@ -30,12 +32,22 @@
         columns: ['name', 'count'],
         rows: []
       },
+      chartExtend: {
+        series: {
+          barMaxWidth: 50
+        },
+        grid: {
+          containLabel: true,
+          bottom: '10%'
+        }
+      },
       settings: {
         labelMap: {
           'name': '设备类型',
-          'count': '报警数量'
+          'count': ''
         },
-        max: [4]
+        max: [4],
+        area: false
       },
       timeRange: [],
       pickerOptions: {
@@ -99,6 +111,13 @@
       devAlarmCount(this.params).then(response => {
         if (response.code === 200) {
           this.chartData.rows = response.data
+          var max = 4
+          for(var i=0;i<response.data.length;i++){
+            if(Number(response.data[i].count)>max){
+              max = Number(response.data[i].count)
+            }
+          }
+          this.settings.max = [max]
         }
       })
     }
diff --git a/src/views/ctrl/statCharts/devCount.vue b/src/views/ctrl/statCharts/devCount.vue
index d3e2902..db55fbe 100644
--- a/src/views/ctrl/statCharts/devCount.vue
+++ b/src/views/ctrl/statCharts/devCount.vue
@@ -1,5 +1,6 @@
 <template>
-  <ve-ring :data="chartData" :settings="settings" />
+  <ve-histogram :data="chartData" :settings="settings" :extend="chartExtend" style="margin-top: -20px" height="100%"/>
+  <!--<ve-ring :data="chartData" :settings="settings" />-->
 </template>
 
 <script>
@@ -9,14 +10,55 @@
   name: 'DevCount',
   data() {
     return {
+      chartExtend: {
+        series: {
+          barMaxWidth: 50
+        },
+        xAxis: {
+          axisLabel: {
+            interval: 0,
+            //换行显示
+            formatter: function(value) {
+              let result = ""; //拼接加\n返回的类目项
+              let maxLength = 2; //每项显示文字个数
+              let valLength = value.length; //X轴类目项的文字个数
+              let rowNumber = Math.ceil(valLength / maxLength); //类目项需要换行的行数
+              if (rowNumber > 1) {
+                //如果文字大于3,
+                for (let i = 0; i < rowNumber; i++) {
+                  let temp = ""; //每次截取的字符串
+                  let start = i * maxLength; //开始截取的位置
+                  let end = start + maxLength; //结束截取的位置
+                  temp = value.substring(start, end) + "\n";
+                  result += temp; //拼接生成最终的字符串
+                }
+                return "{labelText|" + result + "}";
+              } else {
+                return "{labelText|" + value + "}";
+              }
+            },
+            rich: {
+              labelText: {
+                lineHeight: 18
+              }
+            }
+          }
+        }
+      },
       chartData: {
         columns: ['name', 'count'],
         rows: []
       },
       settings: {
-        // legendLimit: 4
-        radius: [60, 100]
-      }
+        labelMap: {
+          'name': '设备类型',
+          'count': ''
+        }
+      },
+      // settings: {
+      //   // legendLimit: 4
+      //   radius: [60, 100]
+      // }
     }
   },
   activated() {
@@ -26,6 +68,9 @@
     fetchData() {
       devCount().then(response => {
         if (response.code === 200) {
+          for(var i=0;i<response.data.length;i++){
+            response.data[i].name = response.data[i].name.replace('防护','')
+          }
           this.chartData.rows = response.data
         }
       })
diff --git a/src/views/ctrl/statCharts/inOutCount.vue b/src/views/ctrl/statCharts/inOutCount.vue
index 502157e..d65ec69 100644
--- a/src/views/ctrl/statCharts/inOutCount.vue
+++ b/src/views/ctrl/statCharts/inOutCount.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="height: 100%">
     <el-date-picker
       v-model="timeRange"
       :picker-options="pickerOptions"
@@ -7,8 +7,9 @@
       range-separator="至"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
-      style="margin-bottom: 10px"/>
-    <ve-line :data="chartData" :settings="settings" height="350px" />
+      size="small"
+      style="margin-bottom: 10px;z-index: 10000"/>
+    <ve-line :data="chartData" :settings="settings" :extend="barExtend" style="margin-top: -50px;" height="93%"/>
   </div>
 </template>
 
@@ -30,6 +31,17 @@
         columns: ['date', 'staff', 'visitor', 'car', 'visitorCar'],
         rows: []
       },
+
+      barExtend:{
+        legend:{  // 隐藏图例
+          x: 'center',
+          y: 'bottom'
+        },
+        grid: {
+          containLabel: true,
+          bottom: '10%'
+        },
+      },
       settings: {
         labelMap: {
           'staff': '内部人员',
@@ -37,11 +49,11 @@
           'car': '内部车辆',
           'visitorCar': '来访车辆'
         },
-        xAxisType: 'time',
+        // xAxisType: 'time',
         max: [4],
         area: false,
         metrics: ['staff', 'visitor', 'car', 'visitorCar'],
-        dimension: ['date']
+        dimension: ['date'],
       },
       timeRange: [],
       pickerOptions: {
@@ -106,7 +118,7 @@
         if (response.code === 200) {
           const data = this.parseStatisticsData(response.data)
           this.chartData.rows = data.rowDatas
-          this.chartData.max = [data.maxCount]
+          this.settings.max = [data.maxCount]
         }
       })
     },
@@ -164,7 +176,7 @@
 
         if (typeof visitorCar !== 'undefined') {
           if (visitorCar.date === date) {
-            visitorCarCount = car.count
+            visitorCarCount = visitorCar.count
             indexVc++
           }
         }
@@ -172,6 +184,18 @@
         if (staffCount + visitorCount + carCount + visitorCarCount > 0) {
           rowDatas.push({ date: date, staff: staffCount, visitor: visitorCount, car: carCount, visitorCar: visitorCarCount })
         }
+        if(maxCount<staffCount){
+          maxCount = staffCount
+        }
+        if(maxCount<visitorCount){
+          maxCount = visitorCount
+        }
+        if(maxCount<carCount){
+          maxCount = carCount
+        }
+        if(maxCount<visitorCarCount){
+          maxCount = visitorCarCount
+        }
         start += oneDayTime
       }
 
diff --git a/src/views/ctrl/statCharts/inOutDoorCount.vue b/src/views/ctrl/statCharts/inOutDoorCount.vue
index ab28cdd..93f3458 100644
--- a/src/views/ctrl/statCharts/inOutDoorCount.vue
+++ b/src/views/ctrl/statCharts/inOutDoorCount.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="height: 100%">
     <el-date-picker
       v-model="timeRange"
       :picker-options="pickerOptions"
@@ -7,8 +7,9 @@
       range-separator="至"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
-      style="margin-bottom: 10px;" />
-    <ve-histogram :data="chartData" :settings="settings" height="350px" />
+      style="margin-bottom: 10px;z-index: 10000"
+      size="small"/>
+    <ve-histogram :data="chartData" :settings="settings" :extend="chartExtend" style="margin-top: -50px"height="93%"/>
   </div>
 </template>
 
@@ -26,11 +27,26 @@
         beginDate: '',
         endDate: ''
       },
+      chartExtend: {
+        legend:{  // 隐藏图例
+          x: 'center',
+          y: 'bottom'
+        },
+        grid: {
+          containLabel: true,
+          bottom: '10%'
+        },
+        series: {
+          barMaxWidth: 50,
+          center: ['50%', '50%']
+        }
+      },
       chartData: {
         columns: ['name', 'person', 'car'],
         rows: []
       },
       settings: {
+        radius: [60, 100],
         labelMap: {
           'person': '人员',
           'car': '车辆'
@@ -102,7 +118,7 @@
         if (response.code === 200) {
           const data = this.parseStatisticsData(response.data)
           this.chartData.rows = data.rowDatas
-          this.chartData.max = [data.maxCount]
+          this.settings.max = [data.maxCount]
         }
       })
     },

diff --git a/config/dev.env.js b/config/dev.env.js
index 6b4622a..095ba33 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -8,4 +8,5 @@
   NODE_ENV: '"development"',
   // BASE_API: '"http://192.168.5.220:20311"'
   BASE_API: '"http://111.198.10.15:11631"'
+  // BASE_API: '"http://192.168.5.220:20311"'
 })
diff --git a/config/prod.env.js b/config/prod.env.js
index f2501d0..ccbc615 100644
--- a/config/prod.env.js
+++ b/config/prod.env.js
@@ -1,5 +1,6 @@
 'use strict'
 module.exports = {
   NODE_ENV: '"production"',
-  BASE_API: '"http://192.168.5.220:20311"'
+  // BASE_API: '"http://192.168.5.220:20311"'
+  BASE_API: '"http://111.198.10.15:11631"'
 }
diff --git a/favicon.ico b/favicon.ico
index 34b63ac..bc1bfc5 100644
--- a/favicon.ico
+++ b/favicon.ico
Binary files differ
diff --git a/src/api/visitor.js b/src/api/visitor.js
index 05ed6ea..01a6c26 100644
--- a/src/api/visitor.js
+++ b/src/api/visitor.js
@@ -74,3 +74,14 @@
   })
 }
 
+// 查询人员轨迹
+export function getDetail(devcode) {
+  return request({
+    url: '/device/capturePhoto',
+    method: 'post',
+    params:{
+      devcode: devcode
+    }
+  })
+}
+
diff --git a/src/assets/dashboard_images/icon-defence.png b/src/assets/dashboard_images/icon-defence.png
index 8069376..11b41cb 100644
--- a/src/assets/dashboard_images/icon-defence.png
+++ b/src/assets/dashboard_images/icon-defence.png
Binary files differ
diff --git a/src/utils/calendarUtil.js b/src/utils/calendarUtil.js
index da840c3..e599bdd 100644
--- a/src/utils/calendarUtil.js
+++ b/src/utils/calendarUtil.js
@@ -61,7 +61,32 @@
 
   return yearMonth + '-' + format(day)
 }
+export function formatDateTime(cellval) {
+  var dateVal = cellval + "";//把时间戳转成字符串格式
+  if (cellval != null) {
+    //取得时间戳部分 如：获取 /Date(1545299299910)/ 中的 1545299299910 部分
+    var date = new Date(parseInt(dateVal.replace("/Date(", "")
+      .replace(")/", ""), 10));
+    //获取年，不需要其他操作所以可以直接返回	date.getFullYear()
+    //月份为0-11，所以+1，月份小于10时补个0
+    var month = date.getMonth() + 1 < 10 ? "0"
+      + (date.getMonth() + 1) : date.getMonth() + 1;
+    //获取日
+    var currentDate = date.getDate() < 10 ? "0" + date.getDate()
+      : date.getDate();
+    //获取时间
+    var hours = date.getHours() < 10 ? "0" + date.getHours() : date
+      .getHours();
+    var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes()
+      : date.getMinutes();
+    var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds()
+      : date.getSeconds();
 
+    //返回日期结果，需要时间的话在加上时间
+    return date.getFullYear() + "-" + month + "-" + currentDate+" "+hours+":"+
+      minutes+":"+seconds;
+  }
+}
 // 格式化日期为字符串
 export function formatToString(value, level) {
   const date = new Date(value)
diff --git a/src/views/alarm/alarmDetail.vue b/src/views/alarm/alarmDetail.vue
index 2c94629..8c32ee5 100644
--- a/src/views/alarm/alarmDetail.vue
+++ b/src/views/alarm/alarmDetail.vue
@@ -1,7 +1,7 @@
 <!-- 报警详情 -->
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :model="dataForm" label-well-code="right" label-width="110px">
+    <el-form v-loading="loading" ref="dataForm" :model="dataForm" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="报警编号">
@@ -86,6 +86,7 @@
   name: 'AlarmDetail',
   data() {
     return {
+      loading: true,
       dialogFormVisible: false, // 对话框是否显示
       dialogStatus: '', // 对话框类型：create,update,detail
       dataForm: {
@@ -123,7 +124,7 @@
         this.dataForm = {
           id: row.id
         }
-
+        this.loading = true
         alarmDetail(this.dataForm.id).then(response => {
           if (response.code === 200) {
             this.dataForm = {
@@ -140,7 +141,7 @@
               reason: response.data.reason,
               remark: response.data.remark
             }
-
+            this.loading = false
             // 格式化报警状态
             if (response.data.valid === 1) {
               this.dataForm.validStr = '正在报警'
diff --git a/src/views/car/carAdd.vue b/src/views/car/carAdd.vue
index ddb215f..5f54c93 100644
--- a/src/views/car/carAdd.vue
+++ b/src/views/car/carAdd.vue
@@ -10,7 +10,7 @@
         </el-col>
         <el-col :span="12">
           <el-form-item label="车辆性质" prop="property">
-            <el-radio-group v-model="dataForm.property" :disabled="isDetailMode">
+            <el-radio-group v-model="dataForm.property" :disabled="isDetailMode" @change="resetOwner">
               <el-radio v-for="item in carProperties" :key="item.value" :label="item.value">{{ item.name }}</el-radio>
             </el-radio-group>
           </el-form-item>
@@ -106,6 +106,12 @@
     this.fetchStaffList()
   },
   methods: {
+    resetOwner(){
+      if(this.dataForm.property!=='2'){
+        this.dataForm.ownerId = ''
+        // this.dataForm.phone = ''
+      }
+    },
     // 初始化对话框
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.btnLoading = false
@@ -208,6 +214,7 @@
           }
         })
         this.dataForm.phone = selectedStaff[0].phone
+        this.dataForm.deptid = selectedStaff[0].deptid
       } else {
         this.dataForm.phone = ''
       }
diff --git a/src/views/car/carList.vue b/src/views/car/carList.vue
index 8d924ff..4ff07ab 100644
--- a/src/views/car/carList.vue
+++ b/src/views/car/carList.vue
@@ -105,11 +105,11 @@
           value: 'propertyStr',
           align: 'center'
         },
-        // {
-        //   text: '车主姓名',
-        //   value: 'ownerName',
-        //   align: 'center'
-        // },
+        {
+          text: '车主姓名',
+          value: 'ownerName',
+          align: 'center'
+        },
         {
           text: '车主联系电话',
           value: 'phone',
diff --git a/src/views/ctrl/index.vue b/src/views/ctrl/index.vue
index fd36f2b..29923af 100644
--- a/src/views/ctrl/index.vue
+++ b/src/views/ctrl/index.vue
@@ -50,12 +50,13 @@
         <in-out-today />
       </el-col>
 
-      <el-col :span="7" class="chart-block">
+      <el-col id="dev-count"  :span="10" class="chart-block">
         <div class="chart-title">各类型设备安装数量</div>
         <dev-count />
       </el-col>
 
-      <el-col id="pass-count" :span="10" class="chart-block">
+      <!--<el-col id="pass-count" class="chart-block">-->
+      <el-col :span="7" class="chart-block">
         <div class="chart-title">进出营数量统计</div>
         <in-out-count />
       </el-col>
@@ -121,7 +122,7 @@
 <style scoped>
   .app-wrapper {
     background-color: #e9e9e9;
-    padding-bottom: 20px;
+    padding-bottom: 10px;
   }
 
   .sub-data-block {
@@ -129,6 +130,7 @@
     border-radius: 16px;
     float: left;
     margin: 10px;
+    margin-bottom: 0px;
     box-shadow: 1px 1px 5px #999;
   }
   .sub-title {
@@ -136,36 +138,38 @@
     text-align: center;
     font-family: 'Microsoft YaHei';
     color: #fff;
-    font-size: 24px;
-    padding: 10px;
+    font-size: 20px;
+    padding-top: 10px;
+    padding-bottom: 0px;
   }
   .statis-block {
     text-align: center;
     margin: 0px 10px 0px 10px;
-    padding: 0px 10px 10px 10px;
+    padding: 0px 10px 5px 10px;
     color: #fff;
     font-weight: bold;
     letter-spacing: 1px;
-    font-size: 24px;
+    font-size: 20px;
   }
   .big-size {
-    font-size: 64px;
+    font-size: 35px;
   }
 
   .chart-title {
     font-family: 'Microsoft YaHei';
     color: #000000;
     font-weight: bold;
-    font-size: 20px;
+    font-size: 18px;
     text-align: center;
     padding: 10px;
   }
   .chart-block {
     margin-left: 20px;
-    margin-top: 20px;
+    margin-top: 10px;
     border-radius: 16px;
     background-color: #FFFFFF;
     box-shadow: 1px 1px 5px #999;
+    height: 37vh;
   }
 
   #today-visitor {
@@ -187,7 +191,7 @@
     background-image: linear-gradient(to right, #ffa800, #ce7e00);
   }
 
-  #pass-count, #dev-alarm-count {
+  #dev-count, #dev-alarm-count {
     width: calc(250vw / 6 - 70px);
   }
 </style>
diff --git a/src/views/ctrl/overview.vue b/src/views/ctrl/overview.vue
index 62e1105..49ed928 100644
--- a/src/views/ctrl/overview.vue
+++ b/src/views/ctrl/overview.vue
@@ -59,26 +59,52 @@
           <i v-else class="el-icon-arrow-down"/>
         </span>
       </div>
-      <transition name="el-collapse-transition">
-        <el-scrollbar
-          v-show="tableShow"
-          :style="{ visibility: tableShow ? 'visible' : 'hidden'}"
-          :class="{ moredatascollor: alarmList.length > 6 }"
-          :native="false">
-          <el-table
-            :data="alarmList"
-            class="alarm-list-table"
-            border
-            stripe
-            @row-click="alarmRowClick">
-            <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{ scope.row[column.value] }}
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-scrollbar>
-      </transition>
+      <div v-show="alarmList.length > 4 && tableShow">
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 32px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 231px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          height="200"
+          style="border-left: 1px solid #2470AC;"
+          v-if="tableShow"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-show="alarmList.length < 5 && tableShow">
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          v-if="tableShow"
+          style="border: 1px solid #2470AC"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
     </div>
 
     <!-- 中间平面图区域 -->
@@ -145,9 +171,13 @@
         class="point-camera"
         @click="detailDev(item, $event)" />
     </div>
-
     <!-- 平面图区域设备类型按钮 -->
-    <div v-show="showType" class="bottom-center" :style="{ width: cameraTypeNum*btnwidth + 'px'}">
+    <div class="bottom-center" :style="{ width: btnNum*btnwidth + 'px'}">
+        <el-col v-show="btnNum!==1" ref="all" class="dev-icon dev-type-selected" @click.native="selectDevByType('all', $event)">
+          <img v-if="checkDevType[0]" src="@/assets/overview_images/icons/icon-all-checked.png">
+          <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
+          <span>全部</span>
+        </el-col>
       <el-col class="dev-icon" @click.native="selectDevByType('4', $event)">
         <img id="4-1-img" v-if="checkDevType1[0]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="4-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
@@ -178,20 +208,6 @@
         <img id="11-2-img" v-else src="@/assets/overview_images/icons/half-camera-blue.png">
         <span>标准半球</span>
       </el-col>
-    </div>
-    <!-- 平面图区域设备类型按钮 -->
-    <div v-show="!showType"class="bottom-center" :style="{ width: btnNum*btnwidth + 'px'}">
-        <el-col ref="all" class="dev-icon dev-type-selected" @click.native="selectDevByType('all', $event)">
-          <img v-if="checkDevType[0]" src="@/assets/overview_images/icons/icon-all-checked.png">
-          <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
-          <span>全部</span>
-        </el-col>
-        <el-col ref="camera" :class="cameraClass" @click.native="showType=!showType;selectDevByType('camera', $event)">
-        <!--<el-col ref="camera" class="dev-icon" @click.native="selectDevByType('camera', $event)">-->
-          <img id="cam_img_red" v-if="checkDevType[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-          <img id="cam_img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-          <span>摄像头</span>
-        </el-col>
         <el-col v-show="showFence" class="dev-icon" @click.native="selectDevByType('fence', $event)">
           <img v-if="checkDevType[2]" src="@/assets/overview_images/icons/icon-fence-checked.png">
           <img v-else src="@/assets/overview_images/icons/icon-fence-unchecked.png">
@@ -372,7 +388,7 @@
           height: 789
         }, // 屏幕窗口尺寸
         imgUrl: require('../../assets/overview_images/icons/icon-camera-point.png'),
-        btnNum: 3,
+        btnNum: 8,
         cameraTypeNum: 6,
         btnwidth: 210,
         halfLeft: 0,
@@ -498,25 +514,25 @@
             }
           }
         }
-        //跟换菜单
-        var item = ['人脸识别','车牌轨迹','周界防护','标准数字','智能球形','标准半球']
-        for(var i=0;i<item.length;i++){
-          if(item[i]===val.target.innerText){
-            return
-          }
-        }
-        if(val.target.id.endsWith('-1-img')||val.target.id.endsWith('-2-img')|| val.target.id==='cam_img' || val.target.id==='cam_img_red'){
-          return
-        }
-        if( val.target.innerText!=='摄像头') {
-          this.showType = false
-          const devTypes = document.querySelectorAll('.dev-icon')
-            for(var i=0;i<this.checkDevType.length;i++) {
-              if (this.checkDevType[i]) {
-                devTypes[i+6].className += ' dev-type-selected'
-              }
-            }
-        }
+        // //跟换菜单
+        // var item = ['人脸识别','车牌轨迹','周界防护','标准数字','智能球形','标准半球']
+        // for(var i=0;i<item.length;i++){
+        //   if(item[i]===val.target.innerText){
+        //     return
+        //   }
+        // }
+        // if(val.target.id.endsWith('-1-img')||val.target.id.endsWith('-2-img')|| val.target.id==='cam_img' || val.target.id==='cam_img_red'){
+        //   return
+        // }
+        // if( val.target.innerText!=='摄像头') {
+        //   this.showType = false
+        //   const devTypes = document.querySelectorAll('.dev-icon')
+        //     for(var i=0;i<this.checkDevType.length;i++) {
+        //       if (this.checkDevType[i]) {
+        //         devTypes[i+6].className += ' dev-type-selected'
+        //       }
+        //     }
+        // }
       },
       webSocket() {
         const that = this
@@ -586,7 +602,7 @@
         }else if(pic==='3'){
           this.changeMap('tg_4_1')
         }else if(pic==='4'){
-          this.changeMap('tg_4_1')
+          this.changeMap('tg_4_5')
         }
         setTimeout(() => {
           var obj = document.getElementById(val.toString());
@@ -771,7 +787,11 @@
           this.checkDevType1 = [false, false, false, false, false, false]
           // 添加选中的样式
           if (typeof event === 'undefined') {
-            devTypes[6].className += ' dev-type-selected'
+            if(this.btnNum===1){
+              devTypes[1].className += ' dev-type-selected'
+            }else{
+              devTypes[0].className += ' dev-type-selected'
+            }
           } else {
             event.currentTarget.className += ' dev-type-selected'
           }
@@ -1017,7 +1037,7 @@
           this.isMain = true
           // this.devListParams.picture = '1'
           this.imgSizeOriginal = { width: 2245, height: 1586 }
-          this.btnNum  = 3
+          this.btnNum  = 8
           this.cameraTypeNum  = 6
           this.showFence = true // 显示电子围栏
           this.showTemp = false // 隐藏温湿度设备
@@ -1027,6 +1047,7 @@
           this.showSubTabGuider = false
           this.showFloorThree = false
           this.showFloorFour = false
+          this.selectDevByType('all')
         } else if (index === 'tg_3_1') {
           this.bgImageSrc = tg_3_1
           // this.devListParams.picture = '2'
@@ -1037,6 +1058,7 @@
           this.showTemp = true // 隐藏温湿度
           this.showSmoking = true // 隐藏烟感
           this.showSound = true // 隐藏声光报警器
+          this.selectDevByType('all')
         } else if (index === 'tg_4_1') {
           this.bgImageSrc = tg_4_1
           // this.devListParams.picture = '3'
@@ -1048,18 +1070,19 @@
           this.showTemp = true // 显示温湿度
           this.showSmoking = true // 显示烟感
           this.showSound = true // 显示声光报警器
+          this.selectDevByType('all')
         } else if (index === 'tg_4_5') {
           this.bgImageSrc = tg_4_5
           // this.devListParams.picture = '4'
           this.imgSizeOriginal = { width: 2245, height: 1586 }
-          this.btnNum  = 2
+          this.btnNum  = 1
           this.cameraTypeNum  = 1
           this.showFence = false // 隐藏电子围栏
           this.showTemp = false // 隐藏温湿度
           this.showSmoking = false // 隐藏烟感
           this.showSound = false // 隐藏声光报警器
+          this.selectDevByType('4')
         }
-        this.selectDevByType('all')
       },
       // 查询并显示设备详情
       detailDev(dev, event) {
@@ -1201,10 +1224,14 @@
     left: 50%; transform: translateX(-50%);
     bottom: 25px;
   }
+  .tableLine {
+    margin-top: 9px;
+    width: 463px;
+  }
   .main-page {
     background-size: cover;
     background-color: #023d83;
-    height: 100vh;
+    height: 98vh;
   }
 
   .main-header {
@@ -1362,16 +1389,24 @@
         margin-left: 20px;
       }
     }
-    .el-scrollbar {
-      /*height: 200px;*/
-      width: 100%;
+    // 滚动条的滑块
+    /deep/ .el-table__body-wrapper  {
+      background-color: #023D83;
+      border: 0px solid white;
     }
-    .moredatascollor {
-      height: 200px;
+    /deep/ .el-table--border th.gutter:last-of-type {
+      border: 1px solid #023D83;
+      border-bottom-width: 1px;
+      background-color: #023D83;
     }
-    .el-scrollbar__wrap {
-      overflow-y: auto;
-      overflow-x: hidden;
+    /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
+      background-color: #023D83;
+    }
+    /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+      display: none;
+    }
+    /deep/ .el-scrollbar__wrap {
+      overflow-x: hidden !important;
       margin-bottom: 0px !important;
     }
     .el-table {
@@ -1405,16 +1440,25 @@
     font-size: 15px;
     color: #FFFFFF;
     font-weight: normal;
+    border-color: #2470AC;
   }
-
+  .el-table--border::after, .el-table--group::after, .el-table::before{
+    background-color: #023d83;
+  }
+  .alarm-now-block /deep/ .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
+    border-color: #023d83;
+  }
   .alarm-now-block /deep/ .el-table__row td {
     background-color: #023D83;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ .el-table__body tr:hover > td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ tr.el-table__row--striped td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
 
   .map-tab {
@@ -1601,6 +1645,10 @@
   /*}*/
 
   @media(max-width: 1440px) {
+    .tableLine {
+      margin-top: 0px;
+      width: 343px;
+    }
     .main-title {
       height: 65px;
       padding-top: 16px;
diff --git a/src/views/ctrl/statCharts/devAlarmCount.vue b/src/views/ctrl/statCharts/devAlarmCount.vue
index 7bea059..6b6939e 100644
--- a/src/views/ctrl/statCharts/devAlarmCount.vue
+++ b/src/views/ctrl/statCharts/devAlarmCount.vue
@@ -1,5 +1,6 @@
+<!--suppress ALL -->
 <template>
-  <div>
+  <div style="height: 90%">
     <el-date-picker
       v-model="timeRange"
       :picker-options="pickerOptions"
@@ -7,15 +8,16 @@
       range-separator="至"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
-      style="margin-bottom: 10px;" />
-    <ve-histogram :data="chartData" :settings="settings" height="350px" />
+      style="margin-bottom: 10px;z-index: 10000"
+      size="small"/>
+    <ve-histogram :data="chartData" :settings="settings" :extend="chartExtend" style="margin-top: -50px" height="100%"/>
   </div>
 </template>
 
 <script>
-import { formatToString, getDate, oneDayTime } from '@/utils/calendarUtil'
-import { devAlarmCount } from '@/api/statistics'
 
+import { devAlarmCount } from '@/api/statistics'
+import { formatToString, parseToDate, getDate, oneDayTime } from '@/utils/calendarUtil'
 const now = new Date()
 
 export default {
@@ -30,12 +32,22 @@
         columns: ['name', 'count'],
         rows: []
       },
+      chartExtend: {
+        series: {
+          barMaxWidth: 50
+        },
+        grid: {
+          containLabel: true,
+          bottom: '10%'
+        }
+      },
       settings: {
         labelMap: {
           'name': '设备类型',
-          'count': '报警数量'
+          'count': ''
         },
-        max: [4]
+        max: [4],
+        area: false
       },
       timeRange: [],
       pickerOptions: {
@@ -99,6 +111,13 @@
       devAlarmCount(this.params).then(response => {
         if (response.code === 200) {
           this.chartData.rows = response.data
+          var max = 4
+          for(var i=0;i<response.data.length;i++){
+            if(Number(response.data[i].count)>max){
+              max = Number(response.data[i].count)
+            }
+          }
+          this.settings.max = [max]
         }
       })
     }
diff --git a/src/views/ctrl/statCharts/devCount.vue b/src/views/ctrl/statCharts/devCount.vue
index d3e2902..db55fbe 100644
--- a/src/views/ctrl/statCharts/devCount.vue
+++ b/src/views/ctrl/statCharts/devCount.vue
@@ -1,5 +1,6 @@
 <template>
-  <ve-ring :data="chartData" :settings="settings" />
+  <ve-histogram :data="chartData" :settings="settings" :extend="chartExtend" style="margin-top: -20px" height="100%"/>
+  <!--<ve-ring :data="chartData" :settings="settings" />-->
 </template>
 
 <script>
@@ -9,14 +10,55 @@
   name: 'DevCount',
   data() {
     return {
+      chartExtend: {
+        series: {
+          barMaxWidth: 50
+        },
+        xAxis: {
+          axisLabel: {
+            interval: 0,
+            //换行显示
+            formatter: function(value) {
+              let result = ""; //拼接加\n返回的类目项
+              let maxLength = 2; //每项显示文字个数
+              let valLength = value.length; //X轴类目项的文字个数
+              let rowNumber = Math.ceil(valLength / maxLength); //类目项需要换行的行数
+              if (rowNumber > 1) {
+                //如果文字大于3,
+                for (let i = 0; i < rowNumber; i++) {
+                  let temp = ""; //每次截取的字符串
+                  let start = i * maxLength; //开始截取的位置
+                  let end = start + maxLength; //结束截取的位置
+                  temp = value.substring(start, end) + "\n";
+                  result += temp; //拼接生成最终的字符串
+                }
+                return "{labelText|" + result + "}";
+              } else {
+                return "{labelText|" + value + "}";
+              }
+            },
+            rich: {
+              labelText: {
+                lineHeight: 18
+              }
+            }
+          }
+        }
+      },
       chartData: {
         columns: ['name', 'count'],
         rows: []
       },
       settings: {
-        // legendLimit: 4
-        radius: [60, 100]
-      }
+        labelMap: {
+          'name': '设备类型',
+          'count': ''
+        }
+      },
+      // settings: {
+      //   // legendLimit: 4
+      //   radius: [60, 100]
+      // }
     }
   },
   activated() {
@@ -26,6 +68,9 @@
     fetchData() {
       devCount().then(response => {
         if (response.code === 200) {
+          for(var i=0;i<response.data.length;i++){
+            response.data[i].name = response.data[i].name.replace('防护','')
+          }
           this.chartData.rows = response.data
         }
       })
diff --git a/src/views/ctrl/statCharts/inOutCount.vue b/src/views/ctrl/statCharts/inOutCount.vue
index 502157e..d65ec69 100644
--- a/src/views/ctrl/statCharts/inOutCount.vue
+++ b/src/views/ctrl/statCharts/inOutCount.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="height: 100%">
     <el-date-picker
       v-model="timeRange"
       :picker-options="pickerOptions"
@@ -7,8 +7,9 @@
       range-separator="至"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
-      style="margin-bottom: 10px"/>
-    <ve-line :data="chartData" :settings="settings" height="350px" />
+      size="small"
+      style="margin-bottom: 10px;z-index: 10000"/>
+    <ve-line :data="chartData" :settings="settings" :extend="barExtend" style="margin-top: -50px;" height="93%"/>
   </div>
 </template>
 
@@ -30,6 +31,17 @@
         columns: ['date', 'staff', 'visitor', 'car', 'visitorCar'],
         rows: []
       },
+
+      barExtend:{
+        legend:{  // 隐藏图例
+          x: 'center',
+          y: 'bottom'
+        },
+        grid: {
+          containLabel: true,
+          bottom: '10%'
+        },
+      },
       settings: {
         labelMap: {
           'staff': '内部人员',
@@ -37,11 +49,11 @@
           'car': '内部车辆',
           'visitorCar': '来访车辆'
         },
-        xAxisType: 'time',
+        // xAxisType: 'time',
         max: [4],
         area: false,
         metrics: ['staff', 'visitor', 'car', 'visitorCar'],
-        dimension: ['date']
+        dimension: ['date'],
       },
       timeRange: [],
       pickerOptions: {
@@ -106,7 +118,7 @@
         if (response.code === 200) {
           const data = this.parseStatisticsData(response.data)
           this.chartData.rows = data.rowDatas
-          this.chartData.max = [data.maxCount]
+          this.settings.max = [data.maxCount]
         }
       })
     },
@@ -164,7 +176,7 @@
 
         if (typeof visitorCar !== 'undefined') {
           if (visitorCar.date === date) {
-            visitorCarCount = car.count
+            visitorCarCount = visitorCar.count
             indexVc++
           }
         }
@@ -172,6 +184,18 @@
         if (staffCount + visitorCount + carCount + visitorCarCount > 0) {
           rowDatas.push({ date: date, staff: staffCount, visitor: visitorCount, car: carCount, visitorCar: visitorCarCount })
         }
+        if(maxCount<staffCount){
+          maxCount = staffCount
+        }
+        if(maxCount<visitorCount){
+          maxCount = visitorCount
+        }
+        if(maxCount<carCount){
+          maxCount = carCount
+        }
+        if(maxCount<visitorCarCount){
+          maxCount = visitorCarCount
+        }
         start += oneDayTime
       }
 
diff --git a/src/views/ctrl/statCharts/inOutDoorCount.vue b/src/views/ctrl/statCharts/inOutDoorCount.vue
index ab28cdd..93f3458 100644
--- a/src/views/ctrl/statCharts/inOutDoorCount.vue
+++ b/src/views/ctrl/statCharts/inOutDoorCount.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="height: 100%">
     <el-date-picker
       v-model="timeRange"
       :picker-options="pickerOptions"
@@ -7,8 +7,9 @@
       range-separator="至"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
-      style="margin-bottom: 10px;" />
-    <ve-histogram :data="chartData" :settings="settings" height="350px" />
+      style="margin-bottom: 10px;z-index: 10000"
+      size="small"/>
+    <ve-histogram :data="chartData" :settings="settings" :extend="chartExtend" style="margin-top: -50px"height="93%"/>
   </div>
 </template>
 
@@ -26,11 +27,26 @@
         beginDate: '',
         endDate: ''
       },
+      chartExtend: {
+        legend:{  // 隐藏图例
+          x: 'center',
+          y: 'bottom'
+        },
+        grid: {
+          containLabel: true,
+          bottom: '10%'
+        },
+        series: {
+          barMaxWidth: 50,
+          center: ['50%', '50%']
+        }
+      },
       chartData: {
         columns: ['name', 'person', 'car'],
         rows: []
       },
       settings: {
+        radius: [60, 100],
         labelMap: {
           'person': '人员',
           'car': '车辆'
@@ -102,7 +118,7 @@
         if (response.code === 200) {
           const data = this.parseStatisticsData(response.data)
           this.chartData.rows = data.rowDatas
-          this.chartData.max = [data.maxCount]
+          this.settings.max = [data.maxCount]
         }
       })
     },
diff --git a/src/views/ctrl/statCharts/inOutKeyCount.vue b/src/views/ctrl/statCharts/inOutKeyCount.vue
index fa9a0b7..10108d6 100644
--- a/src/views/ctrl/statCharts/inOutKeyCount.vue
+++ b/src/views/ctrl/statCharts/inOutKeyCount.vue
@@ -1,5 +1,7 @@
 <template>
-  <ve-ring :data="chartData" :settings="settings" />
+  <div style="height: 100%">
+    <ve-ring :data="chartData" :settings="settings" :extend="chartExtend"  height="90%"/>
+  </div>
 </template>
 
 <script>
@@ -9,6 +11,19 @@
   name: 'InOutKeyCount',
   data() {
     return {
+      chartExtend: {
+        legend:{  // 隐藏图例
+          x: 'center',
+          y: 'top'
+        },
+        grid: {
+          containLabel: true,
+          top: '10%'
+        },
+        series: {
+          center: ['50%', '50%']
+        }
+      },
       chartData: {
         columns: ['name', 'count'],
         rows: []

diff --git a/config/dev.env.js b/config/dev.env.js
index 6b4622a..095ba33 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -8,4 +8,5 @@
   NODE_ENV: '"development"',
   // BASE_API: '"http://192.168.5.220:20311"'
   BASE_API: '"http://111.198.10.15:11631"'
+  // BASE_API: '"http://192.168.5.220:20311"'
 })
diff --git a/config/prod.env.js b/config/prod.env.js
index f2501d0..ccbc615 100644
--- a/config/prod.env.js
+++ b/config/prod.env.js
@@ -1,5 +1,6 @@
 'use strict'
 module.exports = {
   NODE_ENV: '"production"',
-  BASE_API: '"http://192.168.5.220:20311"'
+  // BASE_API: '"http://192.168.5.220:20311"'
+  BASE_API: '"http://111.198.10.15:11631"'
 }
diff --git a/favicon.ico b/favicon.ico
index 34b63ac..bc1bfc5 100644
--- a/favicon.ico
+++ b/favicon.ico
Binary files differ
diff --git a/src/api/visitor.js b/src/api/visitor.js
index 05ed6ea..01a6c26 100644
--- a/src/api/visitor.js
+++ b/src/api/visitor.js
@@ -74,3 +74,14 @@
   })
 }
 
+// 查询人员轨迹
+export function getDetail(devcode) {
+  return request({
+    url: '/device/capturePhoto',
+    method: 'post',
+    params:{
+      devcode: devcode
+    }
+  })
+}
+
diff --git a/src/assets/dashboard_images/icon-defence.png b/src/assets/dashboard_images/icon-defence.png
index 8069376..11b41cb 100644
--- a/src/assets/dashboard_images/icon-defence.png
+++ b/src/assets/dashboard_images/icon-defence.png
Binary files differ
diff --git a/src/utils/calendarUtil.js b/src/utils/calendarUtil.js
index da840c3..e599bdd 100644
--- a/src/utils/calendarUtil.js
+++ b/src/utils/calendarUtil.js
@@ -61,7 +61,32 @@
 
   return yearMonth + '-' + format(day)
 }
+export function formatDateTime(cellval) {
+  var dateVal = cellval + "";//把时间戳转成字符串格式
+  if (cellval != null) {
+    //取得时间戳部分 如：获取 /Date(1545299299910)/ 中的 1545299299910 部分
+    var date = new Date(parseInt(dateVal.replace("/Date(", "")
+      .replace(")/", ""), 10));
+    //获取年，不需要其他操作所以可以直接返回	date.getFullYear()
+    //月份为0-11，所以+1，月份小于10时补个0
+    var month = date.getMonth() + 1 < 10 ? "0"
+      + (date.getMonth() + 1) : date.getMonth() + 1;
+    //获取日
+    var currentDate = date.getDate() < 10 ? "0" + date.getDate()
+      : date.getDate();
+    //获取时间
+    var hours = date.getHours() < 10 ? "0" + date.getHours() : date
+      .getHours();
+    var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes()
+      : date.getMinutes();
+    var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds()
+      : date.getSeconds();
 
+    //返回日期结果，需要时间的话在加上时间
+    return date.getFullYear() + "-" + month + "-" + currentDate+" "+hours+":"+
+      minutes+":"+seconds;
+  }
+}
 // 格式化日期为字符串
 export function formatToString(value, level) {
   const date = new Date(value)
diff --git a/src/views/alarm/alarmDetail.vue b/src/views/alarm/alarmDetail.vue
index 2c94629..8c32ee5 100644
--- a/src/views/alarm/alarmDetail.vue
+++ b/src/views/alarm/alarmDetail.vue
@@ -1,7 +1,7 @@
 <!-- 报警详情 -->
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :model="dataForm" label-well-code="right" label-width="110px">
+    <el-form v-loading="loading" ref="dataForm" :model="dataForm" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="报警编号">
@@ -86,6 +86,7 @@
   name: 'AlarmDetail',
   data() {
     return {
+      loading: true,
       dialogFormVisible: false, // 对话框是否显示
       dialogStatus: '', // 对话框类型：create,update,detail
       dataForm: {
@@ -123,7 +124,7 @@
         this.dataForm = {
           id: row.id
         }
-
+        this.loading = true
         alarmDetail(this.dataForm.id).then(response => {
           if (response.code === 200) {
             this.dataForm = {
@@ -140,7 +141,7 @@
               reason: response.data.reason,
               remark: response.data.remark
             }
-
+            this.loading = false
             // 格式化报警状态
             if (response.data.valid === 1) {
               this.dataForm.validStr = '正在报警'
diff --git a/src/views/car/carAdd.vue b/src/views/car/carAdd.vue
index ddb215f..5f54c93 100644
--- a/src/views/car/carAdd.vue
+++ b/src/views/car/carAdd.vue
@@ -10,7 +10,7 @@
         </el-col>
         <el-col :span="12">
           <el-form-item label="车辆性质" prop="property">
-            <el-radio-group v-model="dataForm.property" :disabled="isDetailMode">
+            <el-radio-group v-model="dataForm.property" :disabled="isDetailMode" @change="resetOwner">
               <el-radio v-for="item in carProperties" :key="item.value" :label="item.value">{{ item.name }}</el-radio>
             </el-radio-group>
           </el-form-item>
@@ -106,6 +106,12 @@
     this.fetchStaffList()
   },
   methods: {
+    resetOwner(){
+      if(this.dataForm.property!=='2'){
+        this.dataForm.ownerId = ''
+        // this.dataForm.phone = ''
+      }
+    },
     // 初始化对话框
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.btnLoading = false
@@ -208,6 +214,7 @@
           }
         })
         this.dataForm.phone = selectedStaff[0].phone
+        this.dataForm.deptid = selectedStaff[0].deptid
       } else {
         this.dataForm.phone = ''
       }
diff --git a/src/views/car/carList.vue b/src/views/car/carList.vue
index 8d924ff..4ff07ab 100644
--- a/src/views/car/carList.vue
+++ b/src/views/car/carList.vue
@@ -105,11 +105,11 @@
           value: 'propertyStr',
           align: 'center'
         },
-        // {
-        //   text: '车主姓名',
-        //   value: 'ownerName',
-        //   align: 'center'
-        // },
+        {
+          text: '车主姓名',
+          value: 'ownerName',
+          align: 'center'
+        },
         {
           text: '车主联系电话',
           value: 'phone',
diff --git a/src/views/ctrl/index.vue b/src/views/ctrl/index.vue
index fd36f2b..29923af 100644
--- a/src/views/ctrl/index.vue
+++ b/src/views/ctrl/index.vue
@@ -50,12 +50,13 @@
         <in-out-today />
       </el-col>
 
-      <el-col :span="7" class="chart-block">
+      <el-col id="dev-count"  :span="10" class="chart-block">
         <div class="chart-title">各类型设备安装数量</div>
         <dev-count />
       </el-col>
 
-      <el-col id="pass-count" :span="10" class="chart-block">
+      <!--<el-col id="pass-count" class="chart-block">-->
+      <el-col :span="7" class="chart-block">
         <div class="chart-title">进出营数量统计</div>
         <in-out-count />
       </el-col>
@@ -121,7 +122,7 @@
 <style scoped>
   .app-wrapper {
     background-color: #e9e9e9;
-    padding-bottom: 20px;
+    padding-bottom: 10px;
   }
 
   .sub-data-block {
@@ -129,6 +130,7 @@
     border-radius: 16px;
     float: left;
     margin: 10px;
+    margin-bottom: 0px;
     box-shadow: 1px 1px 5px #999;
   }
   .sub-title {
@@ -136,36 +138,38 @@
     text-align: center;
     font-family: 'Microsoft YaHei';
     color: #fff;
-    font-size: 24px;
-    padding: 10px;
+    font-size: 20px;
+    padding-top: 10px;
+    padding-bottom: 0px;
   }
   .statis-block {
     text-align: center;
     margin: 0px 10px 0px 10px;
-    padding: 0px 10px 10px 10px;
+    padding: 0px 10px 5px 10px;
     color: #fff;
     font-weight: bold;
     letter-spacing: 1px;
-    font-size: 24px;
+    font-size: 20px;
   }
   .big-size {
-    font-size: 64px;
+    font-size: 35px;
   }
 
   .chart-title {
     font-family: 'Microsoft YaHei';
     color: #000000;
     font-weight: bold;
-    font-size: 20px;
+    font-size: 18px;
     text-align: center;
     padding: 10px;
   }
   .chart-block {
     margin-left: 20px;
-    margin-top: 20px;
+    margin-top: 10px;
     border-radius: 16px;
     background-color: #FFFFFF;
     box-shadow: 1px 1px 5px #999;
+    height: 37vh;
   }
 
   #today-visitor {
@@ -187,7 +191,7 @@
     background-image: linear-gradient(to right, #ffa800, #ce7e00);
   }
 
-  #pass-count, #dev-alarm-count {
+  #dev-count, #dev-alarm-count {
     width: calc(250vw / 6 - 70px);
   }
 </style>
diff --git a/src/views/ctrl/overview.vue b/src/views/ctrl/overview.vue
index 62e1105..49ed928 100644
--- a/src/views/ctrl/overview.vue
+++ b/src/views/ctrl/overview.vue
@@ -59,26 +59,52 @@
           <i v-else class="el-icon-arrow-down"/>
         </span>
       </div>
-      <transition name="el-collapse-transition">
-        <el-scrollbar
-          v-show="tableShow"
-          :style="{ visibility: tableShow ? 'visible' : 'hidden'}"
-          :class="{ moredatascollor: alarmList.length > 6 }"
-          :native="false">
-          <el-table
-            :data="alarmList"
-            class="alarm-list-table"
-            border
-            stripe
-            @row-click="alarmRowClick">
-            <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{ scope.row[column.value] }}
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-scrollbar>
-      </transition>
+      <div v-show="alarmList.length > 4 && tableShow">
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 32px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 231px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          height="200"
+          style="border-left: 1px solid #2470AC;"
+          v-if="tableShow"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-show="alarmList.length < 5 && tableShow">
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          v-if="tableShow"
+          style="border: 1px solid #2470AC"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
     </div>
 
     <!-- 中间平面图区域 -->
@@ -145,9 +171,13 @@
         class="point-camera"
         @click="detailDev(item, $event)" />
     </div>
-
     <!-- 平面图区域设备类型按钮 -->
-    <div v-show="showType" class="bottom-center" :style="{ width: cameraTypeNum*btnwidth + 'px'}">
+    <div class="bottom-center" :style="{ width: btnNum*btnwidth + 'px'}">
+        <el-col v-show="btnNum!==1" ref="all" class="dev-icon dev-type-selected" @click.native="selectDevByType('all', $event)">
+          <img v-if="checkDevType[0]" src="@/assets/overview_images/icons/icon-all-checked.png">
+          <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
+          <span>全部</span>
+        </el-col>
       <el-col class="dev-icon" @click.native="selectDevByType('4', $event)">
         <img id="4-1-img" v-if="checkDevType1[0]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="4-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
@@ -178,20 +208,6 @@
         <img id="11-2-img" v-else src="@/assets/overview_images/icons/half-camera-blue.png">
         <span>标准半球</span>
       </el-col>
-    </div>
-    <!-- 平面图区域设备类型按钮 -->
-    <div v-show="!showType"class="bottom-center" :style="{ width: btnNum*btnwidth + 'px'}">
-        <el-col ref="all" class="dev-icon dev-type-selected" @click.native="selectDevByType('all', $event)">
-          <img v-if="checkDevType[0]" src="@/assets/overview_images/icons/icon-all-checked.png">
-          <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
-          <span>全部</span>
-        </el-col>
-        <el-col ref="camera" :class="cameraClass" @click.native="showType=!showType;selectDevByType('camera', $event)">
-        <!--<el-col ref="camera" class="dev-icon" @click.native="selectDevByType('camera', $event)">-->
-          <img id="cam_img_red" v-if="checkDevType[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-          <img id="cam_img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-          <span>摄像头</span>
-        </el-col>
         <el-col v-show="showFence" class="dev-icon" @click.native="selectDevByType('fence', $event)">
           <img v-if="checkDevType[2]" src="@/assets/overview_images/icons/icon-fence-checked.png">
           <img v-else src="@/assets/overview_images/icons/icon-fence-unchecked.png">
@@ -372,7 +388,7 @@
           height: 789
         }, // 屏幕窗口尺寸
         imgUrl: require('../../assets/overview_images/icons/icon-camera-point.png'),
-        btnNum: 3,
+        btnNum: 8,
         cameraTypeNum: 6,
         btnwidth: 210,
         halfLeft: 0,
@@ -498,25 +514,25 @@
             }
           }
         }
-        //跟换菜单
-        var item = ['人脸识别','车牌轨迹','周界防护','标准数字','智能球形','标准半球']
-        for(var i=0;i<item.length;i++){
-          if(item[i]===val.target.innerText){
-            return
-          }
-        }
-        if(val.target.id.endsWith('-1-img')||val.target.id.endsWith('-2-img')|| val.target.id==='cam_img' || val.target.id==='cam_img_red'){
-          return
-        }
-        if( val.target.innerText!=='摄像头') {
-          this.showType = false
-          const devTypes = document.querySelectorAll('.dev-icon')
-            for(var i=0;i<this.checkDevType.length;i++) {
-              if (this.checkDevType[i]) {
-                devTypes[i+6].className += ' dev-type-selected'
-              }
-            }
-        }
+        // //跟换菜单
+        // var item = ['人脸识别','车牌轨迹','周界防护','标准数字','智能球形','标准半球']
+        // for(var i=0;i<item.length;i++){
+        //   if(item[i]===val.target.innerText){
+        //     return
+        //   }
+        // }
+        // if(val.target.id.endsWith('-1-img')||val.target.id.endsWith('-2-img')|| val.target.id==='cam_img' || val.target.id==='cam_img_red'){
+        //   return
+        // }
+        // if( val.target.innerText!=='摄像头') {
+        //   this.showType = false
+        //   const devTypes = document.querySelectorAll('.dev-icon')
+        //     for(var i=0;i<this.checkDevType.length;i++) {
+        //       if (this.checkDevType[i]) {
+        //         devTypes[i+6].className += ' dev-type-selected'
+        //       }
+        //     }
+        // }
       },
       webSocket() {
         const that = this
@@ -586,7 +602,7 @@
         }else if(pic==='3'){
           this.changeMap('tg_4_1')
         }else if(pic==='4'){
-          this.changeMap('tg_4_1')
+          this.changeMap('tg_4_5')
         }
         setTimeout(() => {
           var obj = document.getElementById(val.toString());
@@ -771,7 +787,11 @@
           this.checkDevType1 = [false, false, false, false, false, false]
           // 添加选中的样式
           if (typeof event === 'undefined') {
-            devTypes[6].className += ' dev-type-selected'
+            if(this.btnNum===1){
+              devTypes[1].className += ' dev-type-selected'
+            }else{
+              devTypes[0].className += ' dev-type-selected'
+            }
           } else {
             event.currentTarget.className += ' dev-type-selected'
           }
@@ -1017,7 +1037,7 @@
           this.isMain = true
           // this.devListParams.picture = '1'
           this.imgSizeOriginal = { width: 2245, height: 1586 }
-          this.btnNum  = 3
+          this.btnNum  = 8
           this.cameraTypeNum  = 6
           this.showFence = true // 显示电子围栏
           this.showTemp = false // 隐藏温湿度设备
@@ -1027,6 +1047,7 @@
           this.showSubTabGuider = false
           this.showFloorThree = false
           this.showFloorFour = false
+          this.selectDevByType('all')
         } else if (index === 'tg_3_1') {
           this.bgImageSrc = tg_3_1
           // this.devListParams.picture = '2'
@@ -1037,6 +1058,7 @@
           this.showTemp = true // 隐藏温湿度
           this.showSmoking = true // 隐藏烟感
           this.showSound = true // 隐藏声光报警器
+          this.selectDevByType('all')
         } else if (index === 'tg_4_1') {
           this.bgImageSrc = tg_4_1
           // this.devListParams.picture = '3'
@@ -1048,18 +1070,19 @@
           this.showTemp = true // 显示温湿度
           this.showSmoking = true // 显示烟感
           this.showSound = true // 显示声光报警器
+          this.selectDevByType('all')
         } else if (index === 'tg_4_5') {
           this.bgImageSrc = tg_4_5
           // this.devListParams.picture = '4'
           this.imgSizeOriginal = { width: 2245, height: 1586 }
-          this.btnNum  = 2
+          this.btnNum  = 1
           this.cameraTypeNum  = 1
           this.showFence = false // 隐藏电子围栏
           this.showTemp = false // 隐藏温湿度
           this.showSmoking = false // 隐藏烟感
           this.showSound = false // 隐藏声光报警器
+          this.selectDevByType('4')
         }
-        this.selectDevByType('all')
       },
       // 查询并显示设备详情
       detailDev(dev, event) {
@@ -1201,10 +1224,14 @@
     left: 50%; transform: translateX(-50%);
     bottom: 25px;
   }
+  .tableLine {
+    margin-top: 9px;
+    width: 463px;
+  }
   .main-page {
     background-size: cover;
     background-color: #023d83;
-    height: 100vh;
+    height: 98vh;
   }
 
   .main-header {
@@ -1362,16 +1389,24 @@
         margin-left: 20px;
       }
     }
-    .el-scrollbar {
-      /*height: 200px;*/
-      width: 100%;
+    // 滚动条的滑块
+    /deep/ .el-table__body-wrapper  {
+      background-color: #023D83;
+      border: 0px solid white;
     }
-    .moredatascollor {
-      height: 200px;
+    /deep/ .el-table--border th.gutter:last-of-type {
+      border: 1px solid #023D83;
+      border-bottom-width: 1px;
+      background-color: #023D83;
     }
-    .el-scrollbar__wrap {
-      overflow-y: auto;
-      overflow-x: hidden;
+    /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
+      background-color: #023D83;
+    }
+    /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+      display: none;
+    }
+    /deep/ .el-scrollbar__wrap {
+      overflow-x: hidden !important;
       margin-bottom: 0px !important;
     }
     .el-table {
@@ -1405,16 +1440,25 @@
     font-size: 15px;
     color: #FFFFFF;
     font-weight: normal;
+    border-color: #2470AC;
   }
-
+  .el-table--border::after, .el-table--group::after, .el-table::before{
+    background-color: #023d83;
+  }
+  .alarm-now-block /deep/ .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
+    border-color: #023d83;
+  }
   .alarm-now-block /deep/ .el-table__row td {
     background-color: #023D83;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ .el-table__body tr:hover > td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ tr.el-table__row--striped td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
 
   .map-tab {
@@ -1601,6 +1645,10 @@
   /*}*/
 
   @media(max-width: 1440px) {
+    .tableLine {
+      margin-top: 0px;
+      width: 343px;
+    }
     .main-title {
       height: 65px;
       padding-top: 16px;
diff --git a/src/views/ctrl/statCharts/devAlarmCount.vue b/src/views/ctrl/statCharts/devAlarmCount.vue
index 7bea059..6b6939e 100644
--- a/src/views/ctrl/statCharts/devAlarmCount.vue
+++ b/src/views/ctrl/statCharts/devAlarmCount.vue
@@ -1,5 +1,6 @@
+<!--suppress ALL -->
 <template>
-  <div>
+  <div style="height: 90%">
     <el-date-picker
       v-model="timeRange"
       :picker-options="pickerOptions"
@@ -7,15 +8,16 @@
       range-separator="至"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
-      style="margin-bottom: 10px;" />
-    <ve-histogram :data="chartData" :settings="settings" height="350px" />
+      style="margin-bottom: 10px;z-index: 10000"
+      size="small"/>
+    <ve-histogram :data="chartData" :settings="settings" :extend="chartExtend" style="margin-top: -50px" height="100%"/>
   </div>
 </template>
 
 <script>
-import { formatToString, getDate, oneDayTime } from '@/utils/calendarUtil'
-import { devAlarmCount } from '@/api/statistics'
 
+import { devAlarmCount } from '@/api/statistics'
+import { formatToString, parseToDate, getDate, oneDayTime } from '@/utils/calendarUtil'
 const now = new Date()
 
 export default {
@@ -30,12 +32,22 @@
         columns: ['name', 'count'],
         rows: []
       },
+      chartExtend: {
+        series: {
+          barMaxWidth: 50
+        },
+        grid: {
+          containLabel: true,
+          bottom: '10%'
+        }
+      },
       settings: {
         labelMap: {
           'name': '设备类型',
-          'count': '报警数量'
+          'count': ''
         },
-        max: [4]
+        max: [4],
+        area: false
       },
       timeRange: [],
       pickerOptions: {
@@ -99,6 +111,13 @@
       devAlarmCount(this.params).then(response => {
         if (response.code === 200) {
           this.chartData.rows = response.data
+          var max = 4
+          for(var i=0;i<response.data.length;i++){
+            if(Number(response.data[i].count)>max){
+              max = Number(response.data[i].count)
+            }
+          }
+          this.settings.max = [max]
         }
       })
     }
diff --git a/src/views/ctrl/statCharts/devCount.vue b/src/views/ctrl/statCharts/devCount.vue
index d3e2902..db55fbe 100644
--- a/src/views/ctrl/statCharts/devCount.vue
+++ b/src/views/ctrl/statCharts/devCount.vue
@@ -1,5 +1,6 @@
 <template>
-  <ve-ring :data="chartData" :settings="settings" />
+  <ve-histogram :data="chartData" :settings="settings" :extend="chartExtend" style="margin-top: -20px" height="100%"/>
+  <!--<ve-ring :data="chartData" :settings="settings" />-->
 </template>
 
 <script>
@@ -9,14 +10,55 @@
   name: 'DevCount',
   data() {
     return {
+      chartExtend: {
+        series: {
+          barMaxWidth: 50
+        },
+        xAxis: {
+          axisLabel: {
+            interval: 0,
+            //换行显示
+            formatter: function(value) {
+              let result = ""; //拼接加\n返回的类目项
+              let maxLength = 2; //每项显示文字个数
+              let valLength = value.length; //X轴类目项的文字个数
+              let rowNumber = Math.ceil(valLength / maxLength); //类目项需要换行的行数
+              if (rowNumber > 1) {
+                //如果文字大于3,
+                for (let i = 0; i < rowNumber; i++) {
+                  let temp = ""; //每次截取的字符串
+                  let start = i * maxLength; //开始截取的位置
+                  let end = start + maxLength; //结束截取的位置
+                  temp = value.substring(start, end) + "\n";
+                  result += temp; //拼接生成最终的字符串
+                }
+                return "{labelText|" + result + "}";
+              } else {
+                return "{labelText|" + value + "}";
+              }
+            },
+            rich: {
+              labelText: {
+                lineHeight: 18
+              }
+            }
+          }
+        }
+      },
       chartData: {
         columns: ['name', 'count'],
         rows: []
       },
       settings: {
-        // legendLimit: 4
-        radius: [60, 100]
-      }
+        labelMap: {
+          'name': '设备类型',
+          'count': ''
+        }
+      },
+      // settings: {
+      //   // legendLimit: 4
+      //   radius: [60, 100]
+      // }
     }
   },
   activated() {
@@ -26,6 +68,9 @@
     fetchData() {
       devCount().then(response => {
         if (response.code === 200) {
+          for(var i=0;i<response.data.length;i++){
+            response.data[i].name = response.data[i].name.replace('防护','')
+          }
           this.chartData.rows = response.data
         }
       })
diff --git a/src/views/ctrl/statCharts/inOutCount.vue b/src/views/ctrl/statCharts/inOutCount.vue
index 502157e..d65ec69 100644
--- a/src/views/ctrl/statCharts/inOutCount.vue
+++ b/src/views/ctrl/statCharts/inOutCount.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="height: 100%">
     <el-date-picker
       v-model="timeRange"
       :picker-options="pickerOptions"
@@ -7,8 +7,9 @@
       range-separator="至"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
-      style="margin-bottom: 10px"/>
-    <ve-line :data="chartData" :settings="settings" height="350px" />
+      size="small"
+      style="margin-bottom: 10px;z-index: 10000"/>
+    <ve-line :data="chartData" :settings="settings" :extend="barExtend" style="margin-top: -50px;" height="93%"/>
   </div>
 </template>
 
@@ -30,6 +31,17 @@
         columns: ['date', 'staff', 'visitor', 'car', 'visitorCar'],
         rows: []
       },
+
+      barExtend:{
+        legend:{  // 隐藏图例
+          x: 'center',
+          y: 'bottom'
+        },
+        grid: {
+          containLabel: true,
+          bottom: '10%'
+        },
+      },
       settings: {
         labelMap: {
           'staff': '内部人员',
@@ -37,11 +49,11 @@
           'car': '内部车辆',
           'visitorCar': '来访车辆'
         },
-        xAxisType: 'time',
+        // xAxisType: 'time',
         max: [4],
         area: false,
         metrics: ['staff', 'visitor', 'car', 'visitorCar'],
-        dimension: ['date']
+        dimension: ['date'],
       },
       timeRange: [],
       pickerOptions: {
@@ -106,7 +118,7 @@
         if (response.code === 200) {
           const data = this.parseStatisticsData(response.data)
           this.chartData.rows = data.rowDatas
-          this.chartData.max = [data.maxCount]
+          this.settings.max = [data.maxCount]
         }
       })
     },
@@ -164,7 +176,7 @@
 
         if (typeof visitorCar !== 'undefined') {
           if (visitorCar.date === date) {
-            visitorCarCount = car.count
+            visitorCarCount = visitorCar.count
             indexVc++
           }
         }
@@ -172,6 +184,18 @@
         if (staffCount + visitorCount + carCount + visitorCarCount > 0) {
           rowDatas.push({ date: date, staff: staffCount, visitor: visitorCount, car: carCount, visitorCar: visitorCarCount })
         }
+        if(maxCount<staffCount){
+          maxCount = staffCount
+        }
+        if(maxCount<visitorCount){
+          maxCount = visitorCount
+        }
+        if(maxCount<carCount){
+          maxCount = carCount
+        }
+        if(maxCount<visitorCarCount){
+          maxCount = visitorCarCount
+        }
         start += oneDayTime
       }
 
diff --git a/src/views/ctrl/statCharts/inOutDoorCount.vue b/src/views/ctrl/statCharts/inOutDoorCount.vue
index ab28cdd..93f3458 100644
--- a/src/views/ctrl/statCharts/inOutDoorCount.vue
+++ b/src/views/ctrl/statCharts/inOutDoorCount.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="height: 100%">
     <el-date-picker
       v-model="timeRange"
       :picker-options="pickerOptions"
@@ -7,8 +7,9 @@
       range-separator="至"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
-      style="margin-bottom: 10px;" />
-    <ve-histogram :data="chartData" :settings="settings" height="350px" />
+      style="margin-bottom: 10px;z-index: 10000"
+      size="small"/>
+    <ve-histogram :data="chartData" :settings="settings" :extend="chartExtend" style="margin-top: -50px"height="93%"/>
   </div>
 </template>
 
@@ -26,11 +27,26 @@
         beginDate: '',
         endDate: ''
       },
+      chartExtend: {
+        legend:{  // 隐藏图例
+          x: 'center',
+          y: 'bottom'
+        },
+        grid: {
+          containLabel: true,
+          bottom: '10%'
+        },
+        series: {
+          barMaxWidth: 50,
+          center: ['50%', '50%']
+        }
+      },
       chartData: {
         columns: ['name', 'person', 'car'],
         rows: []
       },
       settings: {
+        radius: [60, 100],
         labelMap: {
           'person': '人员',
           'car': '车辆'
@@ -102,7 +118,7 @@
         if (response.code === 200) {
           const data = this.parseStatisticsData(response.data)
           this.chartData.rows = data.rowDatas
-          this.chartData.max = [data.maxCount]
+          this.settings.max = [data.maxCount]
         }
       })
     },
diff --git a/src/views/ctrl/statCharts/inOutKeyCount.vue b/src/views/ctrl/statCharts/inOutKeyCount.vue
index fa9a0b7..10108d6 100644
--- a/src/views/ctrl/statCharts/inOutKeyCount.vue
+++ b/src/views/ctrl/statCharts/inOutKeyCount.vue
@@ -1,5 +1,7 @@
 <template>
-  <ve-ring :data="chartData" :settings="settings" />
+  <div style="height: 100%">
+    <ve-ring :data="chartData" :settings="settings" :extend="chartExtend"  height="90%"/>
+  </div>
 </template>
 
 <script>
@@ -9,6 +11,19 @@
   name: 'InOutKeyCount',
   data() {
     return {
+      chartExtend: {
+        legend:{  // 隐藏图例
+          x: 'center',
+          y: 'top'
+        },
+        grid: {
+          containLabel: true,
+          top: '10%'
+        },
+        series: {
+          center: ['50%', '50%']
+        }
+      },
       chartData: {
         columns: ['name', 'count'],
         rows: []
diff --git a/src/views/ctrl/statCharts/inOutToday.vue b/src/views/ctrl/statCharts/inOutToday.vue
index c37fa7b..ae67856 100644
--- a/src/views/ctrl/statCharts/inOutToday.vue
+++ b/src/views/ctrl/statCharts/inOutToday.vue
@@ -1,5 +1,7 @@
 <template>
-  <ve-ring :data="chartData" :settings="settings" />
+  <div style="height: 100%">
+    <ve-ring :data="chartData" :settings="settings" :extend="chartExtend"  height="90%"/>
+  </div>
 </template>
 
 <script>
@@ -18,6 +20,15 @@
           { count: 1, name: '来访车辆' }
         ]
       },
+      chartExtend: {
+        legend:{  // 隐藏图例
+          x: 'center',
+          y: 'top'
+        },
+        series: {
+          center: ['50%', '50%']
+        }
+      },
       settings: {
         radius: [60, 100]
       }

diff --git a/config/dev.env.js b/config/dev.env.js
index 6b4622a..095ba33 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -8,4 +8,5 @@
   NODE_ENV: '"development"',
   // BASE_API: '"http://192.168.5.220:20311"'
   BASE_API: '"http://111.198.10.15:11631"'
+  // BASE_API: '"http://192.168.5.220:20311"'
 })
diff --git a/config/prod.env.js b/config/prod.env.js
index f2501d0..ccbc615 100644
--- a/config/prod.env.js
+++ b/config/prod.env.js
@@ -1,5 +1,6 @@
 'use strict'
 module.exports = {
   NODE_ENV: '"production"',
-  BASE_API: '"http://192.168.5.220:20311"'
+  // BASE_API: '"http://192.168.5.220:20311"'
+  BASE_API: '"http://111.198.10.15:11631"'
 }
diff --git a/favicon.ico b/favicon.ico
index 34b63ac..bc1bfc5 100644
--- a/favicon.ico
+++ b/favicon.ico
Binary files differ
diff --git a/src/api/visitor.js b/src/api/visitor.js
index 05ed6ea..01a6c26 100644
--- a/src/api/visitor.js
+++ b/src/api/visitor.js
@@ -74,3 +74,14 @@
   })
 }
 
+// 查询人员轨迹
+export function getDetail(devcode) {
+  return request({
+    url: '/device/capturePhoto',
+    method: 'post',
+    params:{
+      devcode: devcode
+    }
+  })
+}
+
diff --git a/src/assets/dashboard_images/icon-defence.png b/src/assets/dashboard_images/icon-defence.png
index 8069376..11b41cb 100644
--- a/src/assets/dashboard_images/icon-defence.png
+++ b/src/assets/dashboard_images/icon-defence.png
Binary files differ
diff --git a/src/utils/calendarUtil.js b/src/utils/calendarUtil.js
index da840c3..e599bdd 100644
--- a/src/utils/calendarUtil.js
+++ b/src/utils/calendarUtil.js
@@ -61,7 +61,32 @@
 
   return yearMonth + '-' + format(day)
 }
+export function formatDateTime(cellval) {
+  var dateVal = cellval + "";//把时间戳转成字符串格式
+  if (cellval != null) {
+    //取得时间戳部分 如：获取 /Date(1545299299910)/ 中的 1545299299910 部分
+    var date = new Date(parseInt(dateVal.replace("/Date(", "")
+      .replace(")/", ""), 10));
+    //获取年，不需要其他操作所以可以直接返回	date.getFullYear()
+    //月份为0-11，所以+1，月份小于10时补个0
+    var month = date.getMonth() + 1 < 10 ? "0"
+      + (date.getMonth() + 1) : date.getMonth() + 1;
+    //获取日
+    var currentDate = date.getDate() < 10 ? "0" + date.getDate()
+      : date.getDate();
+    //获取时间
+    var hours = date.getHours() < 10 ? "0" + date.getHours() : date
+      .getHours();
+    var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes()
+      : date.getMinutes();
+    var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds()
+      : date.getSeconds();
 
+    //返回日期结果，需要时间的话在加上时间
+    return date.getFullYear() + "-" + month + "-" + currentDate+" "+hours+":"+
+      minutes+":"+seconds;
+  }
+}
 // 格式化日期为字符串
 export function formatToString(value, level) {
   const date = new Date(value)
diff --git a/src/views/alarm/alarmDetail.vue b/src/views/alarm/alarmDetail.vue
index 2c94629..8c32ee5 100644
--- a/src/views/alarm/alarmDetail.vue
+++ b/src/views/alarm/alarmDetail.vue
@@ -1,7 +1,7 @@
 <!-- 报警详情 -->
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :model="dataForm" label-well-code="right" label-width="110px">
+    <el-form v-loading="loading" ref="dataForm" :model="dataForm" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="报警编号">
@@ -86,6 +86,7 @@
   name: 'AlarmDetail',
   data() {
     return {
+      loading: true,
       dialogFormVisible: false, // 对话框是否显示
       dialogStatus: '', // 对话框类型：create,update,detail
       dataForm: {
@@ -123,7 +124,7 @@
         this.dataForm = {
           id: row.id
         }
-
+        this.loading = true
         alarmDetail(this.dataForm.id).then(response => {
           if (response.code === 200) {
             this.dataForm = {
@@ -140,7 +141,7 @@
               reason: response.data.reason,
               remark: response.data.remark
             }
-
+            this.loading = false
             // 格式化报警状态
             if (response.data.valid === 1) {
               this.dataForm.validStr = '正在报警'
diff --git a/src/views/car/carAdd.vue b/src/views/car/carAdd.vue
index ddb215f..5f54c93 100644
--- a/src/views/car/carAdd.vue
+++ b/src/views/car/carAdd.vue
@@ -10,7 +10,7 @@
         </el-col>
         <el-col :span="12">
           <el-form-item label="车辆性质" prop="property">
-            <el-radio-group v-model="dataForm.property" :disabled="isDetailMode">
+            <el-radio-group v-model="dataForm.property" :disabled="isDetailMode" @change="resetOwner">
               <el-radio v-for="item in carProperties" :key="item.value" :label="item.value">{{ item.name }}</el-radio>
             </el-radio-group>
           </el-form-item>
@@ -106,6 +106,12 @@
     this.fetchStaffList()
   },
   methods: {
+    resetOwner(){
+      if(this.dataForm.property!=='2'){
+        this.dataForm.ownerId = ''
+        // this.dataForm.phone = ''
+      }
+    },
     // 初始化对话框
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.btnLoading = false
@@ -208,6 +214,7 @@
           }
         })
         this.dataForm.phone = selectedStaff[0].phone
+        this.dataForm.deptid = selectedStaff[0].deptid
       } else {
         this.dataForm.phone = ''
       }
diff --git a/src/views/car/carList.vue b/src/views/car/carList.vue
index 8d924ff..4ff07ab 100644
--- a/src/views/car/carList.vue
+++ b/src/views/car/carList.vue
@@ -105,11 +105,11 @@
           value: 'propertyStr',
           align: 'center'
         },
-        // {
-        //   text: '车主姓名',
-        //   value: 'ownerName',
-        //   align: 'center'
-        // },
+        {
+          text: '车主姓名',
+          value: 'ownerName',
+          align: 'center'
+        },
         {
           text: '车主联系电话',
           value: 'phone',
diff --git a/src/views/ctrl/index.vue b/src/views/ctrl/index.vue
index fd36f2b..29923af 100644
--- a/src/views/ctrl/index.vue
+++ b/src/views/ctrl/index.vue
@@ -50,12 +50,13 @@
         <in-out-today />
       </el-col>
 
-      <el-col :span="7" class="chart-block">
+      <el-col id="dev-count"  :span="10" class="chart-block">
         <div class="chart-title">各类型设备安装数量</div>
         <dev-count />
       </el-col>
 
-      <el-col id="pass-count" :span="10" class="chart-block">
+      <!--<el-col id="pass-count" class="chart-block">-->
+      <el-col :span="7" class="chart-block">
         <div class="chart-title">进出营数量统计</div>
         <in-out-count />
       </el-col>
@@ -121,7 +122,7 @@
 <style scoped>
   .app-wrapper {
     background-color: #e9e9e9;
-    padding-bottom: 20px;
+    padding-bottom: 10px;
   }
 
   .sub-data-block {
@@ -129,6 +130,7 @@
     border-radius: 16px;
     float: left;
     margin: 10px;
+    margin-bottom: 0px;
     box-shadow: 1px 1px 5px #999;
   }
   .sub-title {
@@ -136,36 +138,38 @@
     text-align: center;
     font-family: 'Microsoft YaHei';
     color: #fff;
-    font-size: 24px;
-    padding: 10px;
+    font-size: 20px;
+    padding-top: 10px;
+    padding-bottom: 0px;
   }
   .statis-block {
     text-align: center;
     margin: 0px 10px 0px 10px;
-    padding: 0px 10px 10px 10px;
+    padding: 0px 10px 5px 10px;
     color: #fff;
     font-weight: bold;
     letter-spacing: 1px;
-    font-size: 24px;
+    font-size: 20px;
   }
   .big-size {
-    font-size: 64px;
+    font-size: 35px;
   }
 
   .chart-title {
     font-family: 'Microsoft YaHei';
     color: #000000;
     font-weight: bold;
-    font-size: 20px;
+    font-size: 18px;
     text-align: center;
     padding: 10px;
   }
   .chart-block {
     margin-left: 20px;
-    margin-top: 20px;
+    margin-top: 10px;
     border-radius: 16px;
     background-color: #FFFFFF;
     box-shadow: 1px 1px 5px #999;
+    height: 37vh;
   }
 
   #today-visitor {
@@ -187,7 +191,7 @@
     background-image: linear-gradient(to right, #ffa800, #ce7e00);
   }
 
-  #pass-count, #dev-alarm-count {
+  #dev-count, #dev-alarm-count {
     width: calc(250vw / 6 - 70px);
   }
 </style>
diff --git a/src/views/ctrl/overview.vue b/src/views/ctrl/overview.vue
index 62e1105..49ed928 100644
--- a/src/views/ctrl/overview.vue
+++ b/src/views/ctrl/overview.vue
@@ -59,26 +59,52 @@
           <i v-else class="el-icon-arrow-down"/>
         </span>
       </div>
-      <transition name="el-collapse-transition">
-        <el-scrollbar
-          v-show="tableShow"
-          :style="{ visibility: tableShow ? 'visible' : 'hidden'}"
-          :class="{ moredatascollor: alarmList.length > 6 }"
-          :native="false">
-          <el-table
-            :data="alarmList"
-            class="alarm-list-table"
-            border
-            stripe
-            @row-click="alarmRowClick">
-            <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{ scope.row[column.value] }}
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-scrollbar>
-      </transition>
+      <div v-show="alarmList.length > 4 && tableShow">
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 32px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 231px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          height="200"
+          style="border-left: 1px solid #2470AC;"
+          v-if="tableShow"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-show="alarmList.length < 5 && tableShow">
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          v-if="tableShow"
+          style="border: 1px solid #2470AC"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
     </div>
 
     <!-- 中间平面图区域 -->
@@ -145,9 +171,13 @@
         class="point-camera"
         @click="detailDev(item, $event)" />
     </div>
-
     <!-- 平面图区域设备类型按钮 -->
-    <div v-show="showType" class="bottom-center" :style="{ width: cameraTypeNum*btnwidth + 'px'}">
+    <div class="bottom-center" :style="{ width: btnNum*btnwidth + 'px'}">
+        <el-col v-show="btnNum!==1" ref="all" class="dev-icon dev-type-selected" @click.native="selectDevByType('all', $event)">
+          <img v-if="checkDevType[0]" src="@/assets/overview_images/icons/icon-all-checked.png">
+          <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
+          <span>全部</span>
+        </el-col>
       <el-col class="dev-icon" @click.native="selectDevByType('4', $event)">
         <img id="4-1-img" v-if="checkDevType1[0]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="4-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
@@ -178,20 +208,6 @@
         <img id="11-2-img" v-else src="@/assets/overview_images/icons/half-camera-blue.png">
         <span>标准半球</span>
       </el-col>
-    </div>
-    <!-- 平面图区域设备类型按钮 -->
-    <div v-show="!showType"class="bottom-center" :style="{ width: btnNum*btnwidth + 'px'}">
-        <el-col ref="all" class="dev-icon dev-type-selected" @click.native="selectDevByType('all', $event)">
-          <img v-if="checkDevType[0]" src="@/assets/overview_images/icons/icon-all-checked.png">
-          <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
-          <span>全部</span>
-        </el-col>
-        <el-col ref="camera" :class="cameraClass" @click.native="showType=!showType;selectDevByType('camera', $event)">
-        <!--<el-col ref="camera" class="dev-icon" @click.native="selectDevByType('camera', $event)">-->
-          <img id="cam_img_red" v-if="checkDevType[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-          <img id="cam_img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-          <span>摄像头</span>
-        </el-col>
         <el-col v-show="showFence" class="dev-icon" @click.native="selectDevByType('fence', $event)">
           <img v-if="checkDevType[2]" src="@/assets/overview_images/icons/icon-fence-checked.png">
           <img v-else src="@/assets/overview_images/icons/icon-fence-unchecked.png">
@@ -372,7 +388,7 @@
           height: 789
         }, // 屏幕窗口尺寸
         imgUrl: require('../../assets/overview_images/icons/icon-camera-point.png'),
-        btnNum: 3,
+        btnNum: 8,
         cameraTypeNum: 6,
         btnwidth: 210,
         halfLeft: 0,
@@ -498,25 +514,25 @@
             }
           }
         }
-        //跟换菜单
-        var item = ['人脸识别','车牌轨迹','周界防护','标准数字','智能球形','标准半球']
-        for(var i=0;i<item.length;i++){
-          if(item[i]===val.target.innerText){
-            return
-          }
-        }
-        if(val.target.id.endsWith('-1-img')||val.target.id.endsWith('-2-img')|| val.target.id==='cam_img' || val.target.id==='cam_img_red'){
-          return
-        }
-        if( val.target.innerText!=='摄像头') {
-          this.showType = false
-          const devTypes = document.querySelectorAll('.dev-icon')
-            for(var i=0;i<this.checkDevType.length;i++) {
-              if (this.checkDevType[i]) {
-                devTypes[i+6].className += ' dev-type-selected'
-              }
-            }
-        }
+        // //跟换菜单
+        // var item = ['人脸识别','车牌轨迹','周界防护','标准数字','智能球形','标准半球']
+        // for(var i=0;i<item.length;i++){
+        //   if(item[i]===val.target.innerText){
+        //     return
+        //   }
+        // }
+        // if(val.target.id.endsWith('-1-img')||val.target.id.endsWith('-2-img')|| val.target.id==='cam_img' || val.target.id==='cam_img_red'){
+        //   return
+        // }
+        // if( val.target.innerText!=='摄像头') {
+        //   this.showType = false
+        //   const devTypes = document.querySelectorAll('.dev-icon')
+        //     for(var i=0;i<this.checkDevType.length;i++) {
+        //       if (this.checkDevType[i]) {
+        //         devTypes[i+6].className += ' dev-type-selected'
+        //       }
+        //     }
+        // }
       },
       webSocket() {
         const that = this
@@ -586,7 +602,7 @@
         }else if(pic==='3'){
           this.changeMap('tg_4_1')
         }else if(pic==='4'){
-          this.changeMap('tg_4_1')
+          this.changeMap('tg_4_5')
         }
         setTimeout(() => {
           var obj = document.getElementById(val.toString());
@@ -771,7 +787,11 @@
           this.checkDevType1 = [false, false, false, false, false, false]
           // 添加选中的样式
           if (typeof event === 'undefined') {
-            devTypes[6].className += ' dev-type-selected'
+            if(this.btnNum===1){
+              devTypes[1].className += ' dev-type-selected'
+            }else{
+              devTypes[0].className += ' dev-type-selected'
+            }
           } else {
             event.currentTarget.className += ' dev-type-selected'
           }
@@ -1017,7 +1037,7 @@
           this.isMain = true
           // this.devListParams.picture = '1'
           this.imgSizeOriginal = { width: 2245, height: 1586 }
-          this.btnNum  = 3
+          this.btnNum  = 8
           this.cameraTypeNum  = 6
           this.showFence = true // 显示电子围栏
           this.showTemp = false // 隐藏温湿度设备
@@ -1027,6 +1047,7 @@
           this.showSubTabGuider = false
           this.showFloorThree = false
           this.showFloorFour = false
+          this.selectDevByType('all')
         } else if (index === 'tg_3_1') {
           this.bgImageSrc = tg_3_1
           // this.devListParams.picture = '2'
@@ -1037,6 +1058,7 @@
           this.showTemp = true // 隐藏温湿度
           this.showSmoking = true // 隐藏烟感
           this.showSound = true // 隐藏声光报警器
+          this.selectDevByType('all')
         } else if (index === 'tg_4_1') {
           this.bgImageSrc = tg_4_1
           // this.devListParams.picture = '3'
@@ -1048,18 +1070,19 @@
           this.showTemp = true // 显示温湿度
           this.showSmoking = true // 显示烟感
           this.showSound = true // 显示声光报警器
+          this.selectDevByType('all')
         } else if (index === 'tg_4_5') {
           this.bgImageSrc = tg_4_5
           // this.devListParams.picture = '4'
           this.imgSizeOriginal = { width: 2245, height: 1586 }
-          this.btnNum  = 2
+          this.btnNum  = 1
           this.cameraTypeNum  = 1
           this.showFence = false // 隐藏电子围栏
           this.showTemp = false // 隐藏温湿度
           this.showSmoking = false // 隐藏烟感
           this.showSound = false // 隐藏声光报警器
+          this.selectDevByType('4')
         }
-        this.selectDevByType('all')
       },
       // 查询并显示设备详情
       detailDev(dev, event) {
@@ -1201,10 +1224,14 @@
     left: 50%; transform: translateX(-50%);
     bottom: 25px;
   }
+  .tableLine {
+    margin-top: 9px;
+    width: 463px;
+  }
   .main-page {
     background-size: cover;
     background-color: #023d83;
-    height: 100vh;
+    height: 98vh;
   }
 
   .main-header {
@@ -1362,16 +1389,24 @@
         margin-left: 20px;
       }
     }
-    .el-scrollbar {
-      /*height: 200px;*/
-      width: 100%;
+    // 滚动条的滑块
+    /deep/ .el-table__body-wrapper  {
+      background-color: #023D83;
+      border: 0px solid white;
     }
-    .moredatascollor {
-      height: 200px;
+    /deep/ .el-table--border th.gutter:last-of-type {
+      border: 1px solid #023D83;
+      border-bottom-width: 1px;
+      background-color: #023D83;
     }
-    .el-scrollbar__wrap {
-      overflow-y: auto;
-      overflow-x: hidden;
+    /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
+      background-color: #023D83;
+    }
+    /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+      display: none;
+    }
+    /deep/ .el-scrollbar__wrap {
+      overflow-x: hidden !important;
       margin-bottom: 0px !important;
     }
     .el-table {
@@ -1405,16 +1440,25 @@
     font-size: 15px;
     color: #FFFFFF;
     font-weight: normal;
+    border-color: #2470AC;
   }
-
+  .el-table--border::after, .el-table--group::after, .el-table::before{
+    background-color: #023d83;
+  }
+  .alarm-now-block /deep/ .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
+    border-color: #023d83;
+  }
   .alarm-now-block /deep/ .el-table__row td {
     background-color: #023D83;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ .el-table__body tr:hover > td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ tr.el-table__row--striped td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
 
   .map-tab {
@@ -1601,6 +1645,10 @@
   /*}*/
 
   @media(max-width: 1440px) {
+    .tableLine {
+      margin-top: 0px;
+      width: 343px;
+    }
     .main-title {
       height: 65px;
       padding-top: 16px;
diff --git a/src/views/ctrl/statCharts/devAlarmCount.vue b/src/views/ctrl/statCharts/devAlarmCount.vue
index 7bea059..6b6939e 100644
--- a/src/views/ctrl/statCharts/devAlarmCount.vue
+++ b/src/views/ctrl/statCharts/devAlarmCount.vue
@@ -1,5 +1,6 @@
+<!--suppress ALL -->
 <template>
-  <div>
+  <div style="height: 90%">
     <el-date-picker
       v-model="timeRange"
       :picker-options="pickerOptions"
@@ -7,15 +8,16 @@
       range-separator="至"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
-      style="margin-bottom: 10px;" />
-    <ve-histogram :data="chartData" :settings="settings" height="350px" />
+      style="margin-bottom: 10px;z-index: 10000"
+      size="small"/>
+    <ve-histogram :data="chartData" :settings="settings" :extend="chartExtend" style="margin-top: -50px" height="100%"/>
   </div>
 </template>
 
 <script>
-import { formatToString, getDate, oneDayTime } from '@/utils/calendarUtil'
-import { devAlarmCount } from '@/api/statistics'
 
+import { devAlarmCount } from '@/api/statistics'
+import { formatToString, parseToDate, getDate, oneDayTime } from '@/utils/calendarUtil'
 const now = new Date()
 
 export default {
@@ -30,12 +32,22 @@
         columns: ['name', 'count'],
         rows: []
       },
+      chartExtend: {
+        series: {
+          barMaxWidth: 50
+        },
+        grid: {
+          containLabel: true,
+          bottom: '10%'
+        }
+      },
       settings: {
         labelMap: {
           'name': '设备类型',
-          'count': '报警数量'
+          'count': ''
         },
-        max: [4]
+        max: [4],
+        area: false
       },
       timeRange: [],
       pickerOptions: {
@@ -99,6 +111,13 @@
       devAlarmCount(this.params).then(response => {
         if (response.code === 200) {
           this.chartData.rows = response.data
+          var max = 4
+          for(var i=0;i<response.data.length;i++){
+            if(Number(response.data[i].count)>max){
+              max = Number(response.data[i].count)
+            }
+          }
+          this.settings.max = [max]
         }
       })
     }
diff --git a/src/views/ctrl/statCharts/devCount.vue b/src/views/ctrl/statCharts/devCount.vue
index d3e2902..db55fbe 100644
--- a/src/views/ctrl/statCharts/devCount.vue
+++ b/src/views/ctrl/statCharts/devCount.vue
@@ -1,5 +1,6 @@
 <template>
-  <ve-ring :data="chartData" :settings="settings" />
+  <ve-histogram :data="chartData" :settings="settings" :extend="chartExtend" style="margin-top: -20px" height="100%"/>
+  <!--<ve-ring :data="chartData" :settings="settings" />-->
 </template>
 
 <script>
@@ -9,14 +10,55 @@
   name: 'DevCount',
   data() {
     return {
+      chartExtend: {
+        series: {
+          barMaxWidth: 50
+        },
+        xAxis: {
+          axisLabel: {
+            interval: 0,
+            //换行显示
+            formatter: function(value) {
+              let result = ""; //拼接加\n返回的类目项
+              let maxLength = 2; //每项显示文字个数
+              let valLength = value.length; //X轴类目项的文字个数
+              let rowNumber = Math.ceil(valLength / maxLength); //类目项需要换行的行数
+              if (rowNumber > 1) {
+                //如果文字大于3,
+                for (let i = 0; i < rowNumber; i++) {
+                  let temp = ""; //每次截取的字符串
+                  let start = i * maxLength; //开始截取的位置
+                  let end = start + maxLength; //结束截取的位置
+                  temp = value.substring(start, end) + "\n";
+                  result += temp; //拼接生成最终的字符串
+                }
+                return "{labelText|" + result + "}";
+              } else {
+                return "{labelText|" + value + "}";
+              }
+            },
+            rich: {
+              labelText: {
+                lineHeight: 18
+              }
+            }
+          }
+        }
+      },
       chartData: {
         columns: ['name', 'count'],
         rows: []
       },
       settings: {
-        // legendLimit: 4
-        radius: [60, 100]
-      }
+        labelMap: {
+          'name': '设备类型',
+          'count': ''
+        }
+      },
+      // settings: {
+      //   // legendLimit: 4
+      //   radius: [60, 100]
+      // }
     }
   },
   activated() {
@@ -26,6 +68,9 @@
     fetchData() {
       devCount().then(response => {
         if (response.code === 200) {
+          for(var i=0;i<response.data.length;i++){
+            response.data[i].name = response.data[i].name.replace('防护','')
+          }
           this.chartData.rows = response.data
         }
       })
diff --git a/src/views/ctrl/statCharts/inOutCount.vue b/src/views/ctrl/statCharts/inOutCount.vue
index 502157e..d65ec69 100644
--- a/src/views/ctrl/statCharts/inOutCount.vue
+++ b/src/views/ctrl/statCharts/inOutCount.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="height: 100%">
     <el-date-picker
       v-model="timeRange"
       :picker-options="pickerOptions"
@@ -7,8 +7,9 @@
       range-separator="至"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
-      style="margin-bottom: 10px"/>
-    <ve-line :data="chartData" :settings="settings" height="350px" />
+      size="small"
+      style="margin-bottom: 10px;z-index: 10000"/>
+    <ve-line :data="chartData" :settings="settings" :extend="barExtend" style="margin-top: -50px;" height="93%"/>
   </div>
 </template>
 
@@ -30,6 +31,17 @@
         columns: ['date', 'staff', 'visitor', 'car', 'visitorCar'],
         rows: []
       },
+
+      barExtend:{
+        legend:{  // 隐藏图例
+          x: 'center',
+          y: 'bottom'
+        },
+        grid: {
+          containLabel: true,
+          bottom: '10%'
+        },
+      },
       settings: {
         labelMap: {
           'staff': '内部人员',
@@ -37,11 +49,11 @@
           'car': '内部车辆',
           'visitorCar': '来访车辆'
         },
-        xAxisType: 'time',
+        // xAxisType: 'time',
         max: [4],
         area: false,
         metrics: ['staff', 'visitor', 'car', 'visitorCar'],
-        dimension: ['date']
+        dimension: ['date'],
       },
       timeRange: [],
       pickerOptions: {
@@ -106,7 +118,7 @@
         if (response.code === 200) {
           const data = this.parseStatisticsData(response.data)
           this.chartData.rows = data.rowDatas
-          this.chartData.max = [data.maxCount]
+          this.settings.max = [data.maxCount]
         }
       })
     },
@@ -164,7 +176,7 @@
 
         if (typeof visitorCar !== 'undefined') {
           if (visitorCar.date === date) {
-            visitorCarCount = car.count
+            visitorCarCount = visitorCar.count
             indexVc++
           }
         }
@@ -172,6 +184,18 @@
         if (staffCount + visitorCount + carCount + visitorCarCount > 0) {
           rowDatas.push({ date: date, staff: staffCount, visitor: visitorCount, car: carCount, visitorCar: visitorCarCount })
         }
+        if(maxCount<staffCount){
+          maxCount = staffCount
+        }
+        if(maxCount<visitorCount){
+          maxCount = visitorCount
+        }
+        if(maxCount<carCount){
+          maxCount = carCount
+        }
+        if(maxCount<visitorCarCount){
+          maxCount = visitorCarCount
+        }
         start += oneDayTime
       }
 
diff --git a/src/views/ctrl/statCharts/inOutDoorCount.vue b/src/views/ctrl/statCharts/inOutDoorCount.vue
index ab28cdd..93f3458 100644
--- a/src/views/ctrl/statCharts/inOutDoorCount.vue
+++ b/src/views/ctrl/statCharts/inOutDoorCount.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="height: 100%">
     <el-date-picker
       v-model="timeRange"
       :picker-options="pickerOptions"
@@ -7,8 +7,9 @@
       range-separator="至"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
-      style="margin-bottom: 10px;" />
-    <ve-histogram :data="chartData" :settings="settings" height="350px" />
+      style="margin-bottom: 10px;z-index: 10000"
+      size="small"/>
+    <ve-histogram :data="chartData" :settings="settings" :extend="chartExtend" style="margin-top: -50px"height="93%"/>
   </div>
 </template>
 
@@ -26,11 +27,26 @@
         beginDate: '',
         endDate: ''
       },
+      chartExtend: {
+        legend:{  // 隐藏图例
+          x: 'center',
+          y: 'bottom'
+        },
+        grid: {
+          containLabel: true,
+          bottom: '10%'
+        },
+        series: {
+          barMaxWidth: 50,
+          center: ['50%', '50%']
+        }
+      },
       chartData: {
         columns: ['name', 'person', 'car'],
         rows: []
       },
       settings: {
+        radius: [60, 100],
         labelMap: {
           'person': '人员',
           'car': '车辆'
@@ -102,7 +118,7 @@
         if (response.code === 200) {
           const data = this.parseStatisticsData(response.data)
           this.chartData.rows = data.rowDatas
-          this.chartData.max = [data.maxCount]
+          this.settings.max = [data.maxCount]
         }
       })
     },
diff --git a/src/views/ctrl/statCharts/inOutKeyCount.vue b/src/views/ctrl/statCharts/inOutKeyCount.vue
index fa9a0b7..10108d6 100644
--- a/src/views/ctrl/statCharts/inOutKeyCount.vue
+++ b/src/views/ctrl/statCharts/inOutKeyCount.vue
@@ -1,5 +1,7 @@
 <template>
-  <ve-ring :data="chartData" :settings="settings" />
+  <div style="height: 100%">
+    <ve-ring :data="chartData" :settings="settings" :extend="chartExtend"  height="90%"/>
+  </div>
 </template>
 
 <script>
@@ -9,6 +11,19 @@
   name: 'InOutKeyCount',
   data() {
     return {
+      chartExtend: {
+        legend:{  // 隐藏图例
+          x: 'center',
+          y: 'top'
+        },
+        grid: {
+          containLabel: true,
+          top: '10%'
+        },
+        series: {
+          center: ['50%', '50%']
+        }
+      },
       chartData: {
         columns: ['name', 'count'],
         rows: []
diff --git a/src/views/ctrl/statCharts/inOutToday.vue b/src/views/ctrl/statCharts/inOutToday.vue
index c37fa7b..ae67856 100644
--- a/src/views/ctrl/statCharts/inOutToday.vue
+++ b/src/views/ctrl/statCharts/inOutToday.vue
@@ -1,5 +1,7 @@
 <template>
-  <ve-ring :data="chartData" :settings="settings" />
+  <div style="height: 100%">
+    <ve-ring :data="chartData" :settings="settings" :extend="chartExtend"  height="90%"/>
+  </div>
 </template>
 
 <script>
@@ -18,6 +20,15 @@
           { count: 1, name: '来访车辆' }
         ]
       },
+      chartExtend: {
+        legend:{  // 隐藏图例
+          x: 'center',
+          y: 'top'
+        },
+        series: {
+          center: ['50%', '50%']
+        }
+      },
       settings: {
         radius: [60, 100]
       }
diff --git a/src/views/deviceManage/deviceDetail.vue b/src/views/deviceManage/deviceDetail.vue
index 701052d..8245327 100644
--- a/src/views/deviceManage/deviceDetail.vue
+++ b/src/views/deviceManage/deviceDetail.vue
@@ -9,7 +9,7 @@
         <!--</el-col>-->
         <el-col :span="12">
           <el-form-item label="设备编号">
-            <el-input v-model.trim="dataForm.name" disabled type="text"/>
+            <el-input v-model.trim="dataForm.devcode" disabled type="text"/>
             <!--<span>{{ dataForm.devcode }}</span>-->
           </el-form-item>
         </el-col>

diff --git a/config/dev.env.js b/config/dev.env.js
index 6b4622a..095ba33 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -8,4 +8,5 @@
   NODE_ENV: '"development"',
   // BASE_API: '"http://192.168.5.220:20311"'
   BASE_API: '"http://111.198.10.15:11631"'
+  // BASE_API: '"http://192.168.5.220:20311"'
 })
diff --git a/config/prod.env.js b/config/prod.env.js
index f2501d0..ccbc615 100644
--- a/config/prod.env.js
+++ b/config/prod.env.js
@@ -1,5 +1,6 @@
 'use strict'
 module.exports = {
   NODE_ENV: '"production"',
-  BASE_API: '"http://192.168.5.220:20311"'
+  // BASE_API: '"http://192.168.5.220:20311"'
+  BASE_API: '"http://111.198.10.15:11631"'
 }
diff --git a/favicon.ico b/favicon.ico
index 34b63ac..bc1bfc5 100644
--- a/favicon.ico
+++ b/favicon.ico
Binary files differ
diff --git a/src/api/visitor.js b/src/api/visitor.js
index 05ed6ea..01a6c26 100644
--- a/src/api/visitor.js
+++ b/src/api/visitor.js
@@ -74,3 +74,14 @@
   })
 }
 
+// 查询人员轨迹
+export function getDetail(devcode) {
+  return request({
+    url: '/device/capturePhoto',
+    method: 'post',
+    params:{
+      devcode: devcode
+    }
+  })
+}
+
diff --git a/src/assets/dashboard_images/icon-defence.png b/src/assets/dashboard_images/icon-defence.png
index 8069376..11b41cb 100644
--- a/src/assets/dashboard_images/icon-defence.png
+++ b/src/assets/dashboard_images/icon-defence.png
Binary files differ
diff --git a/src/utils/calendarUtil.js b/src/utils/calendarUtil.js
index da840c3..e599bdd 100644
--- a/src/utils/calendarUtil.js
+++ b/src/utils/calendarUtil.js
@@ -61,7 +61,32 @@
 
   return yearMonth + '-' + format(day)
 }
+export function formatDateTime(cellval) {
+  var dateVal = cellval + "";//把时间戳转成字符串格式
+  if (cellval != null) {
+    //取得时间戳部分 如：获取 /Date(1545299299910)/ 中的 1545299299910 部分
+    var date = new Date(parseInt(dateVal.replace("/Date(", "")
+      .replace(")/", ""), 10));
+    //获取年，不需要其他操作所以可以直接返回	date.getFullYear()
+    //月份为0-11，所以+1，月份小于10时补个0
+    var month = date.getMonth() + 1 < 10 ? "0"
+      + (date.getMonth() + 1) : date.getMonth() + 1;
+    //获取日
+    var currentDate = date.getDate() < 10 ? "0" + date.getDate()
+      : date.getDate();
+    //获取时间
+    var hours = date.getHours() < 10 ? "0" + date.getHours() : date
+      .getHours();
+    var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes()
+      : date.getMinutes();
+    var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds()
+      : date.getSeconds();
 
+    //返回日期结果，需要时间的话在加上时间
+    return date.getFullYear() + "-" + month + "-" + currentDate+" "+hours+":"+
+      minutes+":"+seconds;
+  }
+}
 // 格式化日期为字符串
 export function formatToString(value, level) {
   const date = new Date(value)
diff --git a/src/views/alarm/alarmDetail.vue b/src/views/alarm/alarmDetail.vue
index 2c94629..8c32ee5 100644
--- a/src/views/alarm/alarmDetail.vue
+++ b/src/views/alarm/alarmDetail.vue
@@ -1,7 +1,7 @@
 <!-- 报警详情 -->
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :model="dataForm" label-well-code="right" label-width="110px">
+    <el-form v-loading="loading" ref="dataForm" :model="dataForm" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="报警编号">
@@ -86,6 +86,7 @@
   name: 'AlarmDetail',
   data() {
     return {
+      loading: true,
       dialogFormVisible: false, // 对话框是否显示
       dialogStatus: '', // 对话框类型：create,update,detail
       dataForm: {
@@ -123,7 +124,7 @@
         this.dataForm = {
           id: row.id
         }
-
+        this.loading = true
         alarmDetail(this.dataForm.id).then(response => {
           if (response.code === 200) {
             this.dataForm = {
@@ -140,7 +141,7 @@
               reason: response.data.reason,
               remark: response.data.remark
             }
-
+            this.loading = false
             // 格式化报警状态
             if (response.data.valid === 1) {
               this.dataForm.validStr = '正在报警'
diff --git a/src/views/car/carAdd.vue b/src/views/car/carAdd.vue
index ddb215f..5f54c93 100644
--- a/src/views/car/carAdd.vue
+++ b/src/views/car/carAdd.vue
@@ -10,7 +10,7 @@
         </el-col>
         <el-col :span="12">
           <el-form-item label="车辆性质" prop="property">
-            <el-radio-group v-model="dataForm.property" :disabled="isDetailMode">
+            <el-radio-group v-model="dataForm.property" :disabled="isDetailMode" @change="resetOwner">
               <el-radio v-for="item in carProperties" :key="item.value" :label="item.value">{{ item.name }}</el-radio>
             </el-radio-group>
           </el-form-item>
@@ -106,6 +106,12 @@
     this.fetchStaffList()
   },
   methods: {
+    resetOwner(){
+      if(this.dataForm.property!=='2'){
+        this.dataForm.ownerId = ''
+        // this.dataForm.phone = ''
+      }
+    },
     // 初始化对话框
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.btnLoading = false
@@ -208,6 +214,7 @@
           }
         })
         this.dataForm.phone = selectedStaff[0].phone
+        this.dataForm.deptid = selectedStaff[0].deptid
       } else {
         this.dataForm.phone = ''
       }
diff --git a/src/views/car/carList.vue b/src/views/car/carList.vue
index 8d924ff..4ff07ab 100644
--- a/src/views/car/carList.vue
+++ b/src/views/car/carList.vue
@@ -105,11 +105,11 @@
           value: 'propertyStr',
           align: 'center'
         },
-        // {
-        //   text: '车主姓名',
-        //   value: 'ownerName',
-        //   align: 'center'
-        // },
+        {
+          text: '车主姓名',
+          value: 'ownerName',
+          align: 'center'
+        },
         {
           text: '车主联系电话',
           value: 'phone',
diff --git a/src/views/ctrl/index.vue b/src/views/ctrl/index.vue
index fd36f2b..29923af 100644
--- a/src/views/ctrl/index.vue
+++ b/src/views/ctrl/index.vue
@@ -50,12 +50,13 @@
         <in-out-today />
       </el-col>
 
-      <el-col :span="7" class="chart-block">
+      <el-col id="dev-count"  :span="10" class="chart-block">
         <div class="chart-title">各类型设备安装数量</div>
         <dev-count />
       </el-col>
 
-      <el-col id="pass-count" :span="10" class="chart-block">
+      <!--<el-col id="pass-count" class="chart-block">-->
+      <el-col :span="7" class="chart-block">
         <div class="chart-title">进出营数量统计</div>
         <in-out-count />
       </el-col>
@@ -121,7 +122,7 @@
 <style scoped>
   .app-wrapper {
     background-color: #e9e9e9;
-    padding-bottom: 20px;
+    padding-bottom: 10px;
   }
 
   .sub-data-block {
@@ -129,6 +130,7 @@
     border-radius: 16px;
     float: left;
     margin: 10px;
+    margin-bottom: 0px;
     box-shadow: 1px 1px 5px #999;
   }
   .sub-title {
@@ -136,36 +138,38 @@
     text-align: center;
     font-family: 'Microsoft YaHei';
     color: #fff;
-    font-size: 24px;
-    padding: 10px;
+    font-size: 20px;
+    padding-top: 10px;
+    padding-bottom: 0px;
   }
   .statis-block {
     text-align: center;
     margin: 0px 10px 0px 10px;
-    padding: 0px 10px 10px 10px;
+    padding: 0px 10px 5px 10px;
     color: #fff;
     font-weight: bold;
     letter-spacing: 1px;
-    font-size: 24px;
+    font-size: 20px;
   }
   .big-size {
-    font-size: 64px;
+    font-size: 35px;
   }
 
   .chart-title {
     font-family: 'Microsoft YaHei';
     color: #000000;
     font-weight: bold;
-    font-size: 20px;
+    font-size: 18px;
     text-align: center;
     padding: 10px;
   }
   .chart-block {
     margin-left: 20px;
-    margin-top: 20px;
+    margin-top: 10px;
     border-radius: 16px;
     background-color: #FFFFFF;
     box-shadow: 1px 1px 5px #999;
+    height: 37vh;
   }
 
   #today-visitor {
@@ -187,7 +191,7 @@
     background-image: linear-gradient(to right, #ffa800, #ce7e00);
   }
 
-  #pass-count, #dev-alarm-count {
+  #dev-count, #dev-alarm-count {
     width: calc(250vw / 6 - 70px);
   }
 </style>
diff --git a/src/views/ctrl/overview.vue b/src/views/ctrl/overview.vue
index 62e1105..49ed928 100644
--- a/src/views/ctrl/overview.vue
+++ b/src/views/ctrl/overview.vue
@@ -59,26 +59,52 @@
           <i v-else class="el-icon-arrow-down"/>
         </span>
       </div>
-      <transition name="el-collapse-transition">
-        <el-scrollbar
-          v-show="tableShow"
-          :style="{ visibility: tableShow ? 'visible' : 'hidden'}"
-          :class="{ moredatascollor: alarmList.length > 6 }"
-          :native="false">
-          <el-table
-            :data="alarmList"
-            class="alarm-list-table"
-            border
-            stripe
-            @row-click="alarmRowClick">
-            <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{ scope.row[column.value] }}
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-scrollbar>
-      </transition>
+      <div v-show="alarmList.length > 4 && tableShow">
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 32px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 231px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          height="200"
+          style="border-left: 1px solid #2470AC;"
+          v-if="tableShow"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-show="alarmList.length < 5 && tableShow">
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          v-if="tableShow"
+          style="border: 1px solid #2470AC"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
     </div>
 
     <!-- 中间平面图区域 -->
@@ -145,9 +171,13 @@
         class="point-camera"
         @click="detailDev(item, $event)" />
     </div>
-
     <!-- 平面图区域设备类型按钮 -->
-    <div v-show="showType" class="bottom-center" :style="{ width: cameraTypeNum*btnwidth + 'px'}">
+    <div class="bottom-center" :style="{ width: btnNum*btnwidth + 'px'}">
+        <el-col v-show="btnNum!==1" ref="all" class="dev-icon dev-type-selected" @click.native="selectDevByType('all', $event)">
+          <img v-if="checkDevType[0]" src="@/assets/overview_images/icons/icon-all-checked.png">
+          <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
+          <span>全部</span>
+        </el-col>
       <el-col class="dev-icon" @click.native="selectDevByType('4', $event)">
         <img id="4-1-img" v-if="checkDevType1[0]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="4-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
@@ -178,20 +208,6 @@
         <img id="11-2-img" v-else src="@/assets/overview_images/icons/half-camera-blue.png">
         <span>标准半球</span>
       </el-col>
-    </div>
-    <!-- 平面图区域设备类型按钮 -->
-    <div v-show="!showType"class="bottom-center" :style="{ width: btnNum*btnwidth + 'px'}">
-        <el-col ref="all" class="dev-icon dev-type-selected" @click.native="selectDevByType('all', $event)">
-          <img v-if="checkDevType[0]" src="@/assets/overview_images/icons/icon-all-checked.png">
-          <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
-          <span>全部</span>
-        </el-col>
-        <el-col ref="camera" :class="cameraClass" @click.native="showType=!showType;selectDevByType('camera', $event)">
-        <!--<el-col ref="camera" class="dev-icon" @click.native="selectDevByType('camera', $event)">-->
-          <img id="cam_img_red" v-if="checkDevType[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-          <img id="cam_img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-          <span>摄像头</span>
-        </el-col>
         <el-col v-show="showFence" class="dev-icon" @click.native="selectDevByType('fence', $event)">
           <img v-if="checkDevType[2]" src="@/assets/overview_images/icons/icon-fence-checked.png">
           <img v-else src="@/assets/overview_images/icons/icon-fence-unchecked.png">
@@ -372,7 +388,7 @@
           height: 789
         }, // 屏幕窗口尺寸
         imgUrl: require('../../assets/overview_images/icons/icon-camera-point.png'),
-        btnNum: 3,
+        btnNum: 8,
         cameraTypeNum: 6,
         btnwidth: 210,
         halfLeft: 0,
@@ -498,25 +514,25 @@
             }
           }
         }
-        //跟换菜单
-        var item = ['人脸识别','车牌轨迹','周界防护','标准数字','智能球形','标准半球']
-        for(var i=0;i<item.length;i++){
-          if(item[i]===val.target.innerText){
-            return
-          }
-        }
-        if(val.target.id.endsWith('-1-img')||val.target.id.endsWith('-2-img')|| val.target.id==='cam_img' || val.target.id==='cam_img_red'){
-          return
-        }
-        if( val.target.innerText!=='摄像头') {
-          this.showType = false
-          const devTypes = document.querySelectorAll('.dev-icon')
-            for(var i=0;i<this.checkDevType.length;i++) {
-              if (this.checkDevType[i]) {
-                devTypes[i+6].className += ' dev-type-selected'
-              }
-            }
-        }
+        // //跟换菜单
+        // var item = ['人脸识别','车牌轨迹','周界防护','标准数字','智能球形','标准半球']
+        // for(var i=0;i<item.length;i++){
+        //   if(item[i]===val.target.innerText){
+        //     return
+        //   }
+        // }
+        // if(val.target.id.endsWith('-1-img')||val.target.id.endsWith('-2-img')|| val.target.id==='cam_img' || val.target.id==='cam_img_red'){
+        //   return
+        // }
+        // if( val.target.innerText!=='摄像头') {
+        //   this.showType = false
+        //   const devTypes = document.querySelectorAll('.dev-icon')
+        //     for(var i=0;i<this.checkDevType.length;i++) {
+        //       if (this.checkDevType[i]) {
+        //         devTypes[i+6].className += ' dev-type-selected'
+        //       }
+        //     }
+        // }
       },
       webSocket() {
         const that = this
@@ -586,7 +602,7 @@
         }else if(pic==='3'){
           this.changeMap('tg_4_1')
         }else if(pic==='4'){
-          this.changeMap('tg_4_1')
+          this.changeMap('tg_4_5')
         }
         setTimeout(() => {
           var obj = document.getElementById(val.toString());
@@ -771,7 +787,11 @@
           this.checkDevType1 = [false, false, false, false, false, false]
           // 添加选中的样式
           if (typeof event === 'undefined') {
-            devTypes[6].className += ' dev-type-selected'
+            if(this.btnNum===1){
+              devTypes[1].className += ' dev-type-selected'
+            }else{
+              devTypes[0].className += ' dev-type-selected'
+            }
           } else {
             event.currentTarget.className += ' dev-type-selected'
           }
@@ -1017,7 +1037,7 @@
           this.isMain = true
           // this.devListParams.picture = '1'
           this.imgSizeOriginal = { width: 2245, height: 1586 }
-          this.btnNum  = 3
+          this.btnNum  = 8
           this.cameraTypeNum  = 6
           this.showFence = true // 显示电子围栏
           this.showTemp = false // 隐藏温湿度设备
@@ -1027,6 +1047,7 @@
           this.showSubTabGuider = false
           this.showFloorThree = false
           this.showFloorFour = false
+          this.selectDevByType('all')
         } else if (index === 'tg_3_1') {
           this.bgImageSrc = tg_3_1
           // this.devListParams.picture = '2'
@@ -1037,6 +1058,7 @@
           this.showTemp = true // 隐藏温湿度
           this.showSmoking = true // 隐藏烟感
           this.showSound = true // 隐藏声光报警器
+          this.selectDevByType('all')
         } else if (index === 'tg_4_1') {
           this.bgImageSrc = tg_4_1
           // this.devListParams.picture = '3'
@@ -1048,18 +1070,19 @@
           this.showTemp = true // 显示温湿度
           this.showSmoking = true // 显示烟感
           this.showSound = true // 显示声光报警器
+          this.selectDevByType('all')
         } else if (index === 'tg_4_5') {
           this.bgImageSrc = tg_4_5
           // this.devListParams.picture = '4'
           this.imgSizeOriginal = { width: 2245, height: 1586 }
-          this.btnNum  = 2
+          this.btnNum  = 1
           this.cameraTypeNum  = 1
           this.showFence = false // 隐藏电子围栏
           this.showTemp = false // 隐藏温湿度
           this.showSmoking = false // 隐藏烟感
           this.showSound = false // 隐藏声光报警器
+          this.selectDevByType('4')
         }
-        this.selectDevByType('all')
       },
       // 查询并显示设备详情
       detailDev(dev, event) {
@@ -1201,10 +1224,14 @@
     left: 50%; transform: translateX(-50%);
     bottom: 25px;
   }
+  .tableLine {
+    margin-top: 9px;
+    width: 463px;
+  }
   .main-page {
     background-size: cover;
     background-color: #023d83;
-    height: 100vh;
+    height: 98vh;
   }
 
   .main-header {
@@ -1362,16 +1389,24 @@
         margin-left: 20px;
       }
     }
-    .el-scrollbar {
-      /*height: 200px;*/
-      width: 100%;
+    // 滚动条的滑块
+    /deep/ .el-table__body-wrapper  {
+      background-color: #023D83;
+      border: 0px solid white;
     }
-    .moredatascollor {
-      height: 200px;
+    /deep/ .el-table--border th.gutter:last-of-type {
+      border: 1px solid #023D83;
+      border-bottom-width: 1px;
+      background-color: #023D83;
     }
-    .el-scrollbar__wrap {
-      overflow-y: auto;
-      overflow-x: hidden;
+    /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
+      background-color: #023D83;
+    }
+    /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+      display: none;
+    }
+    /deep/ .el-scrollbar__wrap {
+      overflow-x: hidden !important;
       margin-bottom: 0px !important;
     }
     .el-table {
@@ -1405,16 +1440,25 @@
     font-size: 15px;
     color: #FFFFFF;
     font-weight: normal;
+    border-color: #2470AC;
   }
-
+  .el-table--border::after, .el-table--group::after, .el-table::before{
+    background-color: #023d83;
+  }
+  .alarm-now-block /deep/ .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
+    border-color: #023d83;
+  }
   .alarm-now-block /deep/ .el-table__row td {
     background-color: #023D83;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ .el-table__body tr:hover > td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ tr.el-table__row--striped td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
 
   .map-tab {
@@ -1601,6 +1645,10 @@
   /*}*/
 
   @media(max-width: 1440px) {
+    .tableLine {
+      margin-top: 0px;
+      width: 343px;
+    }
     .main-title {
       height: 65px;
       padding-top: 16px;
diff --git a/src/views/ctrl/statCharts/devAlarmCount.vue b/src/views/ctrl/statCharts/devAlarmCount.vue
index 7bea059..6b6939e 100644
--- a/src/views/ctrl/statCharts/devAlarmCount.vue
+++ b/src/views/ctrl/statCharts/devAlarmCount.vue
@@ -1,5 +1,6 @@
+<!--suppress ALL -->
 <template>
-  <div>
+  <div style="height: 90%">
     <el-date-picker
       v-model="timeRange"
       :picker-options="pickerOptions"
@@ -7,15 +8,16 @@
       range-separator="至"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
-      style="margin-bottom: 10px;" />
-    <ve-histogram :data="chartData" :settings="settings" height="350px" />
+      style="margin-bottom: 10px;z-index: 10000"
+      size="small"/>
+    <ve-histogram :data="chartData" :settings="settings" :extend="chartExtend" style="margin-top: -50px" height="100%"/>
   </div>
 </template>
 
 <script>
-import { formatToString, getDate, oneDayTime } from '@/utils/calendarUtil'
-import { devAlarmCount } from '@/api/statistics'
 
+import { devAlarmCount } from '@/api/statistics'
+import { formatToString, parseToDate, getDate, oneDayTime } from '@/utils/calendarUtil'
 const now = new Date()
 
 export default {
@@ -30,12 +32,22 @@
         columns: ['name', 'count'],
         rows: []
       },
+      chartExtend: {
+        series: {
+          barMaxWidth: 50
+        },
+        grid: {
+          containLabel: true,
+          bottom: '10%'
+        }
+      },
       settings: {
         labelMap: {
           'name': '设备类型',
-          'count': '报警数量'
+          'count': ''
         },
-        max: [4]
+        max: [4],
+        area: false
       },
       timeRange: [],
       pickerOptions: {
@@ -99,6 +111,13 @@
       devAlarmCount(this.params).then(response => {
         if (response.code === 200) {
           this.chartData.rows = response.data
+          var max = 4
+          for(var i=0;i<response.data.length;i++){
+            if(Number(response.data[i].count)>max){
+              max = Number(response.data[i].count)
+            }
+          }
+          this.settings.max = [max]
         }
       })
     }
diff --git a/src/views/ctrl/statCharts/devCount.vue b/src/views/ctrl/statCharts/devCount.vue
index d3e2902..db55fbe 100644
--- a/src/views/ctrl/statCharts/devCount.vue
+++ b/src/views/ctrl/statCharts/devCount.vue
@@ -1,5 +1,6 @@
 <template>
-  <ve-ring :data="chartData" :settings="settings" />
+  <ve-histogram :data="chartData" :settings="settings" :extend="chartExtend" style="margin-top: -20px" height="100%"/>
+  <!--<ve-ring :data="chartData" :settings="settings" />-->
 </template>
 
 <script>
@@ -9,14 +10,55 @@
   name: 'DevCount',
   data() {
     return {
+      chartExtend: {
+        series: {
+          barMaxWidth: 50
+        },
+        xAxis: {
+          axisLabel: {
+            interval: 0,
+            //换行显示
+            formatter: function(value) {
+              let result = ""; //拼接加\n返回的类目项
+              let maxLength = 2; //每项显示文字个数
+              let valLength = value.length; //X轴类目项的文字个数
+              let rowNumber = Math.ceil(valLength / maxLength); //类目项需要换行的行数
+              if (rowNumber > 1) {
+                //如果文字大于3,
+                for (let i = 0; i < rowNumber; i++) {
+                  let temp = ""; //每次截取的字符串
+                  let start = i * maxLength; //开始截取的位置
+                  let end = start + maxLength; //结束截取的位置
+                  temp = value.substring(start, end) + "\n";
+                  result += temp; //拼接生成最终的字符串
+                }
+                return "{labelText|" + result + "}";
+              } else {
+                return "{labelText|" + value + "}";
+              }
+            },
+            rich: {
+              labelText: {
+                lineHeight: 18
+              }
+            }
+          }
+        }
+      },
       chartData: {
         columns: ['name', 'count'],
         rows: []
       },
       settings: {
-        // legendLimit: 4
-        radius: [60, 100]
-      }
+        labelMap: {
+          'name': '设备类型',
+          'count': ''
+        }
+      },
+      // settings: {
+      //   // legendLimit: 4
+      //   radius: [60, 100]
+      // }
     }
   },
   activated() {
@@ -26,6 +68,9 @@
     fetchData() {
       devCount().then(response => {
         if (response.code === 200) {
+          for(var i=0;i<response.data.length;i++){
+            response.data[i].name = response.data[i].name.replace('防护','')
+          }
           this.chartData.rows = response.data
         }
       })
diff --git a/src/views/ctrl/statCharts/inOutCount.vue b/src/views/ctrl/statCharts/inOutCount.vue
index 502157e..d65ec69 100644
--- a/src/views/ctrl/statCharts/inOutCount.vue
+++ b/src/views/ctrl/statCharts/inOutCount.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="height: 100%">
     <el-date-picker
       v-model="timeRange"
       :picker-options="pickerOptions"
@@ -7,8 +7,9 @@
       range-separator="至"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
-      style="margin-bottom: 10px"/>
-    <ve-line :data="chartData" :settings="settings" height="350px" />
+      size="small"
+      style="margin-bottom: 10px;z-index: 10000"/>
+    <ve-line :data="chartData" :settings="settings" :extend="barExtend" style="margin-top: -50px;" height="93%"/>
   </div>
 </template>
 
@@ -30,6 +31,17 @@
         columns: ['date', 'staff', 'visitor', 'car', 'visitorCar'],
         rows: []
       },
+
+      barExtend:{
+        legend:{  // 隐藏图例
+          x: 'center',
+          y: 'bottom'
+        },
+        grid: {
+          containLabel: true,
+          bottom: '10%'
+        },
+      },
       settings: {
         labelMap: {
           'staff': '内部人员',
@@ -37,11 +49,11 @@
           'car': '内部车辆',
           'visitorCar': '来访车辆'
         },
-        xAxisType: 'time',
+        // xAxisType: 'time',
         max: [4],
         area: false,
         metrics: ['staff', 'visitor', 'car', 'visitorCar'],
-        dimension: ['date']
+        dimension: ['date'],
       },
       timeRange: [],
       pickerOptions: {
@@ -106,7 +118,7 @@
         if (response.code === 200) {
           const data = this.parseStatisticsData(response.data)
           this.chartData.rows = data.rowDatas
-          this.chartData.max = [data.maxCount]
+          this.settings.max = [data.maxCount]
         }
       })
     },
@@ -164,7 +176,7 @@
 
         if (typeof visitorCar !== 'undefined') {
           if (visitorCar.date === date) {
-            visitorCarCount = car.count
+            visitorCarCount = visitorCar.count
             indexVc++
           }
         }
@@ -172,6 +184,18 @@
         if (staffCount + visitorCount + carCount + visitorCarCount > 0) {
           rowDatas.push({ date: date, staff: staffCount, visitor: visitorCount, car: carCount, visitorCar: visitorCarCount })
         }
+        if(maxCount<staffCount){
+          maxCount = staffCount
+        }
+        if(maxCount<visitorCount){
+          maxCount = visitorCount
+        }
+        if(maxCount<carCount){
+          maxCount = carCount
+        }
+        if(maxCount<visitorCarCount){
+          maxCount = visitorCarCount
+        }
         start += oneDayTime
       }
 
diff --git a/src/views/ctrl/statCharts/inOutDoorCount.vue b/src/views/ctrl/statCharts/inOutDoorCount.vue
index ab28cdd..93f3458 100644
--- a/src/views/ctrl/statCharts/inOutDoorCount.vue
+++ b/src/views/ctrl/statCharts/inOutDoorCount.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="height: 100%">
     <el-date-picker
       v-model="timeRange"
       :picker-options="pickerOptions"
@@ -7,8 +7,9 @@
       range-separator="至"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
-      style="margin-bottom: 10px;" />
-    <ve-histogram :data="chartData" :settings="settings" height="350px" />
+      style="margin-bottom: 10px;z-index: 10000"
+      size="small"/>
+    <ve-histogram :data="chartData" :settings="settings" :extend="chartExtend" style="margin-top: -50px"height="93%"/>
   </div>
 </template>
 
@@ -26,11 +27,26 @@
         beginDate: '',
         endDate: ''
       },
+      chartExtend: {
+        legend:{  // 隐藏图例
+          x: 'center',
+          y: 'bottom'
+        },
+        grid: {
+          containLabel: true,
+          bottom: '10%'
+        },
+        series: {
+          barMaxWidth: 50,
+          center: ['50%', '50%']
+        }
+      },
       chartData: {
         columns: ['name', 'person', 'car'],
         rows: []
       },
       settings: {
+        radius: [60, 100],
         labelMap: {
           'person': '人员',
           'car': '车辆'
@@ -102,7 +118,7 @@
         if (response.code === 200) {
           const data = this.parseStatisticsData(response.data)
           this.chartData.rows = data.rowDatas
-          this.chartData.max = [data.maxCount]
+          this.settings.max = [data.maxCount]
         }
       })
     },
diff --git a/src/views/ctrl/statCharts/inOutKeyCount.vue b/src/views/ctrl/statCharts/inOutKeyCount.vue
index fa9a0b7..10108d6 100644
--- a/src/views/ctrl/statCharts/inOutKeyCount.vue
+++ b/src/views/ctrl/statCharts/inOutKeyCount.vue
@@ -1,5 +1,7 @@
 <template>
-  <ve-ring :data="chartData" :settings="settings" />
+  <div style="height: 100%">
+    <ve-ring :data="chartData" :settings="settings" :extend="chartExtend"  height="90%"/>
+  </div>
 </template>
 
 <script>
@@ -9,6 +11,19 @@
   name: 'InOutKeyCount',
   data() {
     return {
+      chartExtend: {
+        legend:{  // 隐藏图例
+          x: 'center',
+          y: 'top'
+        },
+        grid: {
+          containLabel: true,
+          top: '10%'
+        },
+        series: {
+          center: ['50%', '50%']
+        }
+      },
       chartData: {
         columns: ['name', 'count'],
         rows: []
diff --git a/src/views/ctrl/statCharts/inOutToday.vue b/src/views/ctrl/statCharts/inOutToday.vue
index c37fa7b..ae67856 100644
--- a/src/views/ctrl/statCharts/inOutToday.vue
+++ b/src/views/ctrl/statCharts/inOutToday.vue
@@ -1,5 +1,7 @@
 <template>
-  <ve-ring :data="chartData" :settings="settings" />
+  <div style="height: 100%">
+    <ve-ring :data="chartData" :settings="settings" :extend="chartExtend"  height="90%"/>
+  </div>
 </template>
 
 <script>
@@ -18,6 +20,15 @@
           { count: 1, name: '来访车辆' }
         ]
       },
+      chartExtend: {
+        legend:{  // 隐藏图例
+          x: 'center',
+          y: 'top'
+        },
+        series: {
+          center: ['50%', '50%']
+        }
+      },
       settings: {
         radius: [60, 100]
       }
diff --git a/src/views/deviceManage/deviceDetail.vue b/src/views/deviceManage/deviceDetail.vue
index 701052d..8245327 100644
--- a/src/views/deviceManage/deviceDetail.vue
+++ b/src/views/deviceManage/deviceDetail.vue
@@ -9,7 +9,7 @@
         <!--</el-col>-->
         <el-col :span="12">
           <el-form-item label="设备编号">
-            <el-input v-model.trim="dataForm.name" disabled type="text"/>
+            <el-input v-model.trim="dataForm.devcode" disabled type="text"/>
             <!--<span>{{ dataForm.devcode }}</span>-->
           </el-form-item>
         </el-col>
diff --git a/src/views/layout/components/AppHeader.vue b/src/views/layout/components/AppHeader.vue
index c3235b4..2e45954 100644
--- a/src/views/layout/components/AppHeader.vue
+++ b/src/views/layout/components/AppHeader.vue
@@ -1,12 +1,12 @@
 <template>
   <!--<div :style="{backgroundImage:'url('+headerUrl+')'}" class="app-header">-->
   <div style="background-color: #0078ff;" class="app-header">
-    <h3>{{ title }}</h3>
+    <h3 @click="backToIndex">{{ title }}</h3>
     <!--子系统选项-->
     <el-dropdown class="systemSelect" @command="handleCommand">
       <span class="el-dropdown-link" style="color: white">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
       </span>
-      <el-dropdown-menu slot="dropdown" >
+      <el-dropdown-menu slot="dropdown" style="z-index: 10000" >
         <el-dropdown-item>
           <span style="display:block;" @click="backToIndex">回首页</span>
         </el-dropdown-item>
@@ -15,7 +15,7 @@
     </el-dropdown>
 
     <div v-show="currentSystem.code === 'ctrl'" class="back-to-overview">
-      <el-button type="info" round @click="backToOverview">运行总览</el-button>
+      <el-button type="info" round @click="backToOverview" style="background-color: rgba(255,255,255,0.31);border: 0px">运行总览</el-button>
     </div>
 
     <el-dropdown class="avatar-container">

diff --git a/config/dev.env.js b/config/dev.env.js
index 6b4622a..095ba33 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -8,4 +8,5 @@
   NODE_ENV: '"development"',
   // BASE_API: '"http://192.168.5.220:20311"'
   BASE_API: '"http://111.198.10.15:11631"'
+  // BASE_API: '"http://192.168.5.220:20311"'
 })
diff --git a/config/prod.env.js b/config/prod.env.js
index f2501d0..ccbc615 100644
--- a/config/prod.env.js
+++ b/config/prod.env.js
@@ -1,5 +1,6 @@
 'use strict'
 module.exports = {
   NODE_ENV: '"production"',
-  BASE_API: '"http://192.168.5.220:20311"'
+  // BASE_API: '"http://192.168.5.220:20311"'
+  BASE_API: '"http://111.198.10.15:11631"'
 }
diff --git a/favicon.ico b/favicon.ico
index 34b63ac..bc1bfc5 100644
--- a/favicon.ico
+++ b/favicon.ico
Binary files differ
diff --git a/src/api/visitor.js b/src/api/visitor.js
index 05ed6ea..01a6c26 100644
--- a/src/api/visitor.js
+++ b/src/api/visitor.js
@@ -74,3 +74,14 @@
   })
 }
 
+// 查询人员轨迹
+export function getDetail(devcode) {
+  return request({
+    url: '/device/capturePhoto',
+    method: 'post',
+    params:{
+      devcode: devcode
+    }
+  })
+}
+
diff --git a/src/assets/dashboard_images/icon-defence.png b/src/assets/dashboard_images/icon-defence.png
index 8069376..11b41cb 100644
--- a/src/assets/dashboard_images/icon-defence.png
+++ b/src/assets/dashboard_images/icon-defence.png
Binary files differ
diff --git a/src/utils/calendarUtil.js b/src/utils/calendarUtil.js
index da840c3..e599bdd 100644
--- a/src/utils/calendarUtil.js
+++ b/src/utils/calendarUtil.js
@@ -61,7 +61,32 @@
 
   return yearMonth + '-' + format(day)
 }
+export function formatDateTime(cellval) {
+  var dateVal = cellval + "";//把时间戳转成字符串格式
+  if (cellval != null) {
+    //取得时间戳部分 如：获取 /Date(1545299299910)/ 中的 1545299299910 部分
+    var date = new Date(parseInt(dateVal.replace("/Date(", "")
+      .replace(")/", ""), 10));
+    //获取年，不需要其他操作所以可以直接返回	date.getFullYear()
+    //月份为0-11，所以+1，月份小于10时补个0
+    var month = date.getMonth() + 1 < 10 ? "0"
+      + (date.getMonth() + 1) : date.getMonth() + 1;
+    //获取日
+    var currentDate = date.getDate() < 10 ? "0" + date.getDate()
+      : date.getDate();
+    //获取时间
+    var hours = date.getHours() < 10 ? "0" + date.getHours() : date
+      .getHours();
+    var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes()
+      : date.getMinutes();
+    var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds()
+      : date.getSeconds();
 
+    //返回日期结果，需要时间的话在加上时间
+    return date.getFullYear() + "-" + month + "-" + currentDate+" "+hours+":"+
+      minutes+":"+seconds;
+  }
+}
 // 格式化日期为字符串
 export function formatToString(value, level) {
   const date = new Date(value)
diff --git a/src/views/alarm/alarmDetail.vue b/src/views/alarm/alarmDetail.vue
index 2c94629..8c32ee5 100644
--- a/src/views/alarm/alarmDetail.vue
+++ b/src/views/alarm/alarmDetail.vue
@@ -1,7 +1,7 @@
 <!-- 报警详情 -->
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :model="dataForm" label-well-code="right" label-width="110px">
+    <el-form v-loading="loading" ref="dataForm" :model="dataForm" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="报警编号">
@@ -86,6 +86,7 @@
   name: 'AlarmDetail',
   data() {
     return {
+      loading: true,
       dialogFormVisible: false, // 对话框是否显示
       dialogStatus: '', // 对话框类型：create,update,detail
       dataForm: {
@@ -123,7 +124,7 @@
         this.dataForm = {
           id: row.id
         }
-
+        this.loading = true
         alarmDetail(this.dataForm.id).then(response => {
           if (response.code === 200) {
             this.dataForm = {
@@ -140,7 +141,7 @@
               reason: response.data.reason,
               remark: response.data.remark
             }
-
+            this.loading = false
             // 格式化报警状态
             if (response.data.valid === 1) {
               this.dataForm.validStr = '正在报警'
diff --git a/src/views/car/carAdd.vue b/src/views/car/carAdd.vue
index ddb215f..5f54c93 100644
--- a/src/views/car/carAdd.vue
+++ b/src/views/car/carAdd.vue
@@ -10,7 +10,7 @@
         </el-col>
         <el-col :span="12">
           <el-form-item label="车辆性质" prop="property">
-            <el-radio-group v-model="dataForm.property" :disabled="isDetailMode">
+            <el-radio-group v-model="dataForm.property" :disabled="isDetailMode" @change="resetOwner">
               <el-radio v-for="item in carProperties" :key="item.value" :label="item.value">{{ item.name }}</el-radio>
             </el-radio-group>
           </el-form-item>
@@ -106,6 +106,12 @@
     this.fetchStaffList()
   },
   methods: {
+    resetOwner(){
+      if(this.dataForm.property!=='2'){
+        this.dataForm.ownerId = ''
+        // this.dataForm.phone = ''
+      }
+    },
     // 初始化对话框
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.btnLoading = false
@@ -208,6 +214,7 @@
           }
         })
         this.dataForm.phone = selectedStaff[0].phone
+        this.dataForm.deptid = selectedStaff[0].deptid
       } else {
         this.dataForm.phone = ''
       }
diff --git a/src/views/car/carList.vue b/src/views/car/carList.vue
index 8d924ff..4ff07ab 100644
--- a/src/views/car/carList.vue
+++ b/src/views/car/carList.vue
@@ -105,11 +105,11 @@
           value: 'propertyStr',
           align: 'center'
         },
-        // {
-        //   text: '车主姓名',
-        //   value: 'ownerName',
-        //   align: 'center'
-        // },
+        {
+          text: '车主姓名',
+          value: 'ownerName',
+          align: 'center'
+        },
         {
           text: '车主联系电话',
           value: 'phone',
diff --git a/src/views/ctrl/index.vue b/src/views/ctrl/index.vue
index fd36f2b..29923af 100644
--- a/src/views/ctrl/index.vue
+++ b/src/views/ctrl/index.vue
@@ -50,12 +50,13 @@
         <in-out-today />
       </el-col>
 
-      <el-col :span="7" class="chart-block">
+      <el-col id="dev-count"  :span="10" class="chart-block">
         <div class="chart-title">各类型设备安装数量</div>
         <dev-count />
       </el-col>
 
-      <el-col id="pass-count" :span="10" class="chart-block">
+      <!--<el-col id="pass-count" class="chart-block">-->
+      <el-col :span="7" class="chart-block">
         <div class="chart-title">进出营数量统计</div>
         <in-out-count />
       </el-col>
@@ -121,7 +122,7 @@
 <style scoped>
   .app-wrapper {
     background-color: #e9e9e9;
-    padding-bottom: 20px;
+    padding-bottom: 10px;
   }
 
   .sub-data-block {
@@ -129,6 +130,7 @@
     border-radius: 16px;
     float: left;
     margin: 10px;
+    margin-bottom: 0px;
     box-shadow: 1px 1px 5px #999;
   }
   .sub-title {
@@ -136,36 +138,38 @@
     text-align: center;
     font-family: 'Microsoft YaHei';
     color: #fff;
-    font-size: 24px;
-    padding: 10px;
+    font-size: 20px;
+    padding-top: 10px;
+    padding-bottom: 0px;
   }
   .statis-block {
     text-align: center;
     margin: 0px 10px 0px 10px;
-    padding: 0px 10px 10px 10px;
+    padding: 0px 10px 5px 10px;
     color: #fff;
     font-weight: bold;
     letter-spacing: 1px;
-    font-size: 24px;
+    font-size: 20px;
   }
   .big-size {
-    font-size: 64px;
+    font-size: 35px;
   }
 
   .chart-title {
     font-family: 'Microsoft YaHei';
     color: #000000;
     font-weight: bold;
-    font-size: 20px;
+    font-size: 18px;
     text-align: center;
     padding: 10px;
   }
   .chart-block {
     margin-left: 20px;
-    margin-top: 20px;
+    margin-top: 10px;
     border-radius: 16px;
     background-color: #FFFFFF;
     box-shadow: 1px 1px 5px #999;
+    height: 37vh;
   }
 
   #today-visitor {
@@ -187,7 +191,7 @@
     background-image: linear-gradient(to right, #ffa800, #ce7e00);
   }
 
-  #pass-count, #dev-alarm-count {
+  #dev-count, #dev-alarm-count {
     width: calc(250vw / 6 - 70px);
   }
 </style>
diff --git a/src/views/ctrl/overview.vue b/src/views/ctrl/overview.vue
index 62e1105..49ed928 100644
--- a/src/views/ctrl/overview.vue
+++ b/src/views/ctrl/overview.vue
@@ -59,26 +59,52 @@
           <i v-else class="el-icon-arrow-down"/>
         </span>
       </div>
-      <transition name="el-collapse-transition">
-        <el-scrollbar
-          v-show="tableShow"
-          :style="{ visibility: tableShow ? 'visible' : 'hidden'}"
-          :class="{ moredatascollor: alarmList.length > 6 }"
-          :native="false">
-          <el-table
-            :data="alarmList"
-            class="alarm-list-table"
-            border
-            stripe
-            @row-click="alarmRowClick">
-            <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{ scope.row[column.value] }}
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-scrollbar>
-      </transition>
+      <div v-show="alarmList.length > 4 && tableShow">
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 32px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 231px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          height="200"
+          style="border-left: 1px solid #2470AC;"
+          v-if="tableShow"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-show="alarmList.length < 5 && tableShow">
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          v-if="tableShow"
+          style="border: 1px solid #2470AC"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
     </div>
 
     <!-- 中间平面图区域 -->
@@ -145,9 +171,13 @@
         class="point-camera"
         @click="detailDev(item, $event)" />
     </div>
-
     <!-- 平面图区域设备类型按钮 -->
-    <div v-show="showType" class="bottom-center" :style="{ width: cameraTypeNum*btnwidth + 'px'}">
+    <div class="bottom-center" :style="{ width: btnNum*btnwidth + 'px'}">
+        <el-col v-show="btnNum!==1" ref="all" class="dev-icon dev-type-selected" @click.native="selectDevByType('all', $event)">
+          <img v-if="checkDevType[0]" src="@/assets/overview_images/icons/icon-all-checked.png">
+          <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
+          <span>全部</span>
+        </el-col>
       <el-col class="dev-icon" @click.native="selectDevByType('4', $event)">
         <img id="4-1-img" v-if="checkDevType1[0]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="4-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
@@ -178,20 +208,6 @@
         <img id="11-2-img" v-else src="@/assets/overview_images/icons/half-camera-blue.png">
         <span>标准半球</span>
       </el-col>
-    </div>
-    <!-- 平面图区域设备类型按钮 -->
-    <div v-show="!showType"class="bottom-center" :style="{ width: btnNum*btnwidth + 'px'}">
-        <el-col ref="all" class="dev-icon dev-type-selected" @click.native="selectDevByType('all', $event)">
-          <img v-if="checkDevType[0]" src="@/assets/overview_images/icons/icon-all-checked.png">
-          <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
-          <span>全部</span>
-        </el-col>
-        <el-col ref="camera" :class="cameraClass" @click.native="showType=!showType;selectDevByType('camera', $event)">
-        <!--<el-col ref="camera" class="dev-icon" @click.native="selectDevByType('camera', $event)">-->
-          <img id="cam_img_red" v-if="checkDevType[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-          <img id="cam_img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-          <span>摄像头</span>
-        </el-col>
         <el-col v-show="showFence" class="dev-icon" @click.native="selectDevByType('fence', $event)">
           <img v-if="checkDevType[2]" src="@/assets/overview_images/icons/icon-fence-checked.png">
           <img v-else src="@/assets/overview_images/icons/icon-fence-unchecked.png">
@@ -372,7 +388,7 @@
           height: 789
         }, // 屏幕窗口尺寸
         imgUrl: require('../../assets/overview_images/icons/icon-camera-point.png'),
-        btnNum: 3,
+        btnNum: 8,
         cameraTypeNum: 6,
         btnwidth: 210,
         halfLeft: 0,
@@ -498,25 +514,25 @@
             }
           }
         }
-        //跟换菜单
-        var item = ['人脸识别','车牌轨迹','周界防护','标准数字','智能球形','标准半球']
-        for(var i=0;i<item.length;i++){
-          if(item[i]===val.target.innerText){
-            return
-          }
-        }
-        if(val.target.id.endsWith('-1-img')||val.target.id.endsWith('-2-img')|| val.target.id==='cam_img' || val.target.id==='cam_img_red'){
-          return
-        }
-        if( val.target.innerText!=='摄像头') {
-          this.showType = false
-          const devTypes = document.querySelectorAll('.dev-icon')
-            for(var i=0;i<this.checkDevType.length;i++) {
-              if (this.checkDevType[i]) {
-                devTypes[i+6].className += ' dev-type-selected'
-              }
-            }
-        }
+        // //跟换菜单
+        // var item = ['人脸识别','车牌轨迹','周界防护','标准数字','智能球形','标准半球']
+        // for(var i=0;i<item.length;i++){
+        //   if(item[i]===val.target.innerText){
+        //     return
+        //   }
+        // }
+        // if(val.target.id.endsWith('-1-img')||val.target.id.endsWith('-2-img')|| val.target.id==='cam_img' || val.target.id==='cam_img_red'){
+        //   return
+        // }
+        // if( val.target.innerText!=='摄像头') {
+        //   this.showType = false
+        //   const devTypes = document.querySelectorAll('.dev-icon')
+        //     for(var i=0;i<this.checkDevType.length;i++) {
+        //       if (this.checkDevType[i]) {
+        //         devTypes[i+6].className += ' dev-type-selected'
+        //       }
+        //     }
+        // }
       },
       webSocket() {
         const that = this
@@ -586,7 +602,7 @@
         }else if(pic==='3'){
           this.changeMap('tg_4_1')
         }else if(pic==='4'){
-          this.changeMap('tg_4_1')
+          this.changeMap('tg_4_5')
         }
         setTimeout(() => {
           var obj = document.getElementById(val.toString());
@@ -771,7 +787,11 @@
           this.checkDevType1 = [false, false, false, false, false, false]
           // 添加选中的样式
           if (typeof event === 'undefined') {
-            devTypes[6].className += ' dev-type-selected'
+            if(this.btnNum===1){
+              devTypes[1].className += ' dev-type-selected'
+            }else{
+              devTypes[0].className += ' dev-type-selected'
+            }
           } else {
             event.currentTarget.className += ' dev-type-selected'
           }
@@ -1017,7 +1037,7 @@
           this.isMain = true
           // this.devListParams.picture = '1'
           this.imgSizeOriginal = { width: 2245, height: 1586 }
-          this.btnNum  = 3
+          this.btnNum  = 8
           this.cameraTypeNum  = 6
           this.showFence = true // 显示电子围栏
           this.showTemp = false // 隐藏温湿度设备
@@ -1027,6 +1047,7 @@
           this.showSubTabGuider = false
           this.showFloorThree = false
           this.showFloorFour = false
+          this.selectDevByType('all')
         } else if (index === 'tg_3_1') {
           this.bgImageSrc = tg_3_1
           // this.devListParams.picture = '2'
@@ -1037,6 +1058,7 @@
           this.showTemp = true // 隐藏温湿度
           this.showSmoking = true // 隐藏烟感
           this.showSound = true // 隐藏声光报警器
+          this.selectDevByType('all')
         } else if (index === 'tg_4_1') {
           this.bgImageSrc = tg_4_1
           // this.devListParams.picture = '3'
@@ -1048,18 +1070,19 @@
           this.showTemp = true // 显示温湿度
           this.showSmoking = true // 显示烟感
           this.showSound = true // 显示声光报警器
+          this.selectDevByType('all')
         } else if (index === 'tg_4_5') {
           this.bgImageSrc = tg_4_5
           // this.devListParams.picture = '4'
           this.imgSizeOriginal = { width: 2245, height: 1586 }
-          this.btnNum  = 2
+          this.btnNum  = 1
           this.cameraTypeNum  = 1
           this.showFence = false // 隐藏电子围栏
           this.showTemp = false // 隐藏温湿度
           this.showSmoking = false // 隐藏烟感
           this.showSound = false // 隐藏声光报警器
+          this.selectDevByType('4')
         }
-        this.selectDevByType('all')
       },
       // 查询并显示设备详情
       detailDev(dev, event) {
@@ -1201,10 +1224,14 @@
     left: 50%; transform: translateX(-50%);
     bottom: 25px;
   }
+  .tableLine {
+    margin-top: 9px;
+    width: 463px;
+  }
   .main-page {
     background-size: cover;
     background-color: #023d83;
-    height: 100vh;
+    height: 98vh;
   }
 
   .main-header {
@@ -1362,16 +1389,24 @@
         margin-left: 20px;
       }
     }
-    .el-scrollbar {
-      /*height: 200px;*/
-      width: 100%;
+    // 滚动条的滑块
+    /deep/ .el-table__body-wrapper  {
+      background-color: #023D83;
+      border: 0px solid white;
     }
-    .moredatascollor {
-      height: 200px;
+    /deep/ .el-table--border th.gutter:last-of-type {
+      border: 1px solid #023D83;
+      border-bottom-width: 1px;
+      background-color: #023D83;
     }
-    .el-scrollbar__wrap {
-      overflow-y: auto;
-      overflow-x: hidden;
+    /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
+      background-color: #023D83;
+    }
+    /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+      display: none;
+    }
+    /deep/ .el-scrollbar__wrap {
+      overflow-x: hidden !important;
       margin-bottom: 0px !important;
     }
     .el-table {
@@ -1405,16 +1440,25 @@
     font-size: 15px;
     color: #FFFFFF;
     font-weight: normal;
+    border-color: #2470AC;
   }
-
+  .el-table--border::after, .el-table--group::after, .el-table::before{
+    background-color: #023d83;
+  }
+  .alarm-now-block /deep/ .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
+    border-color: #023d83;
+  }
   .alarm-now-block /deep/ .el-table__row td {
     background-color: #023D83;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ .el-table__body tr:hover > td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ tr.el-table__row--striped td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
 
   .map-tab {
@@ -1601,6 +1645,10 @@
   /*}*/
 
   @media(max-width: 1440px) {
+    .tableLine {
+      margin-top: 0px;
+      width: 343px;
+    }
     .main-title {
       height: 65px;
       padding-top: 16px;
diff --git a/src/views/ctrl/statCharts/devAlarmCount.vue b/src/views/ctrl/statCharts/devAlarmCount.vue
index 7bea059..6b6939e 100644
--- a/src/views/ctrl/statCharts/devAlarmCount.vue
+++ b/src/views/ctrl/statCharts/devAlarmCount.vue
@@ -1,5 +1,6 @@
+<!--suppress ALL -->
 <template>
-  <div>
+  <div style="height: 90%">
     <el-date-picker
       v-model="timeRange"
       :picker-options="pickerOptions"
@@ -7,15 +8,16 @@
       range-separator="至"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
-      style="margin-bottom: 10px;" />
-    <ve-histogram :data="chartData" :settings="settings" height="350px" />
+      style="margin-bottom: 10px;z-index: 10000"
+      size="small"/>
+    <ve-histogram :data="chartData" :settings="settings" :extend="chartExtend" style="margin-top: -50px" height="100%"/>
   </div>
 </template>
 
 <script>
-import { formatToString, getDate, oneDayTime } from '@/utils/calendarUtil'
-import { devAlarmCount } from '@/api/statistics'
 
+import { devAlarmCount } from '@/api/statistics'
+import { formatToString, parseToDate, getDate, oneDayTime } from '@/utils/calendarUtil'
 const now = new Date()
 
 export default {
@@ -30,12 +32,22 @@
         columns: ['name', 'count'],
         rows: []
       },
+      chartExtend: {
+        series: {
+          barMaxWidth: 50
+        },
+        grid: {
+          containLabel: true,
+          bottom: '10%'
+        }
+      },
       settings: {
         labelMap: {
           'name': '设备类型',
-          'count': '报警数量'
+          'count': ''
         },
-        max: [4]
+        max: [4],
+        area: false
       },
       timeRange: [],
       pickerOptions: {
@@ -99,6 +111,13 @@
       devAlarmCount(this.params).then(response => {
         if (response.code === 200) {
           this.chartData.rows = response.data
+          var max = 4
+          for(var i=0;i<response.data.length;i++){
+            if(Number(response.data[i].count)>max){
+              max = Number(response.data[i].count)
+            }
+          }
+          this.settings.max = [max]
         }
       })
     }
diff --git a/src/views/ctrl/statCharts/devCount.vue b/src/views/ctrl/statCharts/devCount.vue
index d3e2902..db55fbe 100644
--- a/src/views/ctrl/statCharts/devCount.vue
+++ b/src/views/ctrl/statCharts/devCount.vue
@@ -1,5 +1,6 @@
 <template>
-  <ve-ring :data="chartData" :settings="settings" />
+  <ve-histogram :data="chartData" :settings="settings" :extend="chartExtend" style="margin-top: -20px" height="100%"/>
+  <!--<ve-ring :data="chartData" :settings="settings" />-->
 </template>
 
 <script>
@@ -9,14 +10,55 @@
   name: 'DevCount',
   data() {
     return {
+      chartExtend: {
+        series: {
+          barMaxWidth: 50
+        },
+        xAxis: {
+          axisLabel: {
+            interval: 0,
+            //换行显示
+            formatter: function(value) {
+              let result = ""; //拼接加\n返回的类目项
+              let maxLength = 2; //每项显示文字个数
+              let valLength = value.length; //X轴类目项的文字个数
+              let rowNumber = Math.ceil(valLength / maxLength); //类目项需要换行的行数
+              if (rowNumber > 1) {
+                //如果文字大于3,
+                for (let i = 0; i < rowNumber; i++) {
+                  let temp = ""; //每次截取的字符串
+                  let start = i * maxLength; //开始截取的位置
+                  let end = start + maxLength; //结束截取的位置
+                  temp = value.substring(start, end) + "\n";
+                  result += temp; //拼接生成最终的字符串
+                }
+                return "{labelText|" + result + "}";
+              } else {
+                return "{labelText|" + value + "}";
+              }
+            },
+            rich: {
+              labelText: {
+                lineHeight: 18
+              }
+            }
+          }
+        }
+      },
       chartData: {
         columns: ['name', 'count'],
         rows: []
       },
       settings: {
-        // legendLimit: 4
-        radius: [60, 100]
-      }
+        labelMap: {
+          'name': '设备类型',
+          'count': ''
+        }
+      },
+      // settings: {
+      //   // legendLimit: 4
+      //   radius: [60, 100]
+      // }
     }
   },
   activated() {
@@ -26,6 +68,9 @@
     fetchData() {
       devCount().then(response => {
         if (response.code === 200) {
+          for(var i=0;i<response.data.length;i++){
+            response.data[i].name = response.data[i].name.replace('防护','')
+          }
           this.chartData.rows = response.data
         }
       })
diff --git a/src/views/ctrl/statCharts/inOutCount.vue b/src/views/ctrl/statCharts/inOutCount.vue
index 502157e..d65ec69 100644
--- a/src/views/ctrl/statCharts/inOutCount.vue
+++ b/src/views/ctrl/statCharts/inOutCount.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="height: 100%">
     <el-date-picker
       v-model="timeRange"
       :picker-options="pickerOptions"
@@ -7,8 +7,9 @@
       range-separator="至"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
-      style="margin-bottom: 10px"/>
-    <ve-line :data="chartData" :settings="settings" height="350px" />
+      size="small"
+      style="margin-bottom: 10px;z-index: 10000"/>
+    <ve-line :data="chartData" :settings="settings" :extend="barExtend" style="margin-top: -50px;" height="93%"/>
   </div>
 </template>
 
@@ -30,6 +31,17 @@
         columns: ['date', 'staff', 'visitor', 'car', 'visitorCar'],
         rows: []
       },
+
+      barExtend:{
+        legend:{  // 隐藏图例
+          x: 'center',
+          y: 'bottom'
+        },
+        grid: {
+          containLabel: true,
+          bottom: '10%'
+        },
+      },
       settings: {
         labelMap: {
           'staff': '内部人员',
@@ -37,11 +49,11 @@
           'car': '内部车辆',
           'visitorCar': '来访车辆'
         },
-        xAxisType: 'time',
+        // xAxisType: 'time',
         max: [4],
         area: false,
         metrics: ['staff', 'visitor', 'car', 'visitorCar'],
-        dimension: ['date']
+        dimension: ['date'],
       },
       timeRange: [],
       pickerOptions: {
@@ -106,7 +118,7 @@
         if (response.code === 200) {
           const data = this.parseStatisticsData(response.data)
           this.chartData.rows = data.rowDatas
-          this.chartData.max = [data.maxCount]
+          this.settings.max = [data.maxCount]
         }
       })
     },
@@ -164,7 +176,7 @@
 
         if (typeof visitorCar !== 'undefined') {
           if (visitorCar.date === date) {
-            visitorCarCount = car.count
+            visitorCarCount = visitorCar.count
             indexVc++
           }
         }
@@ -172,6 +184,18 @@
         if (staffCount + visitorCount + carCount + visitorCarCount > 0) {
           rowDatas.push({ date: date, staff: staffCount, visitor: visitorCount, car: carCount, visitorCar: visitorCarCount })
         }
+        if(maxCount<staffCount){
+          maxCount = staffCount
+        }
+        if(maxCount<visitorCount){
+          maxCount = visitorCount
+        }
+        if(maxCount<carCount){
+          maxCount = carCount
+        }
+        if(maxCount<visitorCarCount){
+          maxCount = visitorCarCount
+        }
         start += oneDayTime
       }
 
diff --git a/src/views/ctrl/statCharts/inOutDoorCount.vue b/src/views/ctrl/statCharts/inOutDoorCount.vue
index ab28cdd..93f3458 100644
--- a/src/views/ctrl/statCharts/inOutDoorCount.vue
+++ b/src/views/ctrl/statCharts/inOutDoorCount.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="height: 100%">
     <el-date-picker
       v-model="timeRange"
       :picker-options="pickerOptions"
@@ -7,8 +7,9 @@
       range-separator="至"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
-      style="margin-bottom: 10px;" />
-    <ve-histogram :data="chartData" :settings="settings" height="350px" />
+      style="margin-bottom: 10px;z-index: 10000"
+      size="small"/>
+    <ve-histogram :data="chartData" :settings="settings" :extend="chartExtend" style="margin-top: -50px"height="93%"/>
   </div>
 </template>
 
@@ -26,11 +27,26 @@
         beginDate: '',
         endDate: ''
       },
+      chartExtend: {
+        legend:{  // 隐藏图例
+          x: 'center',
+          y: 'bottom'
+        },
+        grid: {
+          containLabel: true,
+          bottom: '10%'
+        },
+        series: {
+          barMaxWidth: 50,
+          center: ['50%', '50%']
+        }
+      },
       chartData: {
         columns: ['name', 'person', 'car'],
         rows: []
       },
       settings: {
+        radius: [60, 100],
         labelMap: {
           'person': '人员',
           'car': '车辆'
@@ -102,7 +118,7 @@
         if (response.code === 200) {
           const data = this.parseStatisticsData(response.data)
           this.chartData.rows = data.rowDatas
-          this.chartData.max = [data.maxCount]
+          this.settings.max = [data.maxCount]
         }
       })
     },
diff --git a/src/views/ctrl/statCharts/inOutKeyCount.vue b/src/views/ctrl/statCharts/inOutKeyCount.vue
index fa9a0b7..10108d6 100644
--- a/src/views/ctrl/statCharts/inOutKeyCount.vue
+++ b/src/views/ctrl/statCharts/inOutKeyCount.vue
@@ -1,5 +1,7 @@
 <template>
-  <ve-ring :data="chartData" :settings="settings" />
+  <div style="height: 100%">
+    <ve-ring :data="chartData" :settings="settings" :extend="chartExtend"  height="90%"/>
+  </div>
 </template>
 
 <script>
@@ -9,6 +11,19 @@
   name: 'InOutKeyCount',
   data() {
     return {
+      chartExtend: {
+        legend:{  // 隐藏图例
+          x: 'center',
+          y: 'top'
+        },
+        grid: {
+          containLabel: true,
+          top: '10%'
+        },
+        series: {
+          center: ['50%', '50%']
+        }
+      },
       chartData: {
         columns: ['name', 'count'],
         rows: []
diff --git a/src/views/ctrl/statCharts/inOutToday.vue b/src/views/ctrl/statCharts/inOutToday.vue
index c37fa7b..ae67856 100644
--- a/src/views/ctrl/statCharts/inOutToday.vue
+++ b/src/views/ctrl/statCharts/inOutToday.vue
@@ -1,5 +1,7 @@
 <template>
-  <ve-ring :data="chartData" :settings="settings" />
+  <div style="height: 100%">
+    <ve-ring :data="chartData" :settings="settings" :extend="chartExtend"  height="90%"/>
+  </div>
 </template>
 
 <script>
@@ -18,6 +20,15 @@
           { count: 1, name: '来访车辆' }
         ]
       },
+      chartExtend: {
+        legend:{  // 隐藏图例
+          x: 'center',
+          y: 'top'
+        },
+        series: {
+          center: ['50%', '50%']
+        }
+      },
       settings: {
         radius: [60, 100]
       }
diff --git a/src/views/deviceManage/deviceDetail.vue b/src/views/deviceManage/deviceDetail.vue
index 701052d..8245327 100644
--- a/src/views/deviceManage/deviceDetail.vue
+++ b/src/views/deviceManage/deviceDetail.vue
@@ -9,7 +9,7 @@
         <!--</el-col>-->
         <el-col :span="12">
           <el-form-item label="设备编号">
-            <el-input v-model.trim="dataForm.name" disabled type="text"/>
+            <el-input v-model.trim="dataForm.devcode" disabled type="text"/>
             <!--<span>{{ dataForm.devcode }}</span>-->
           </el-form-item>
         </el-col>
diff --git a/src/views/layout/components/AppHeader.vue b/src/views/layout/components/AppHeader.vue
index c3235b4..2e45954 100644
--- a/src/views/layout/components/AppHeader.vue
+++ b/src/views/layout/components/AppHeader.vue
@@ -1,12 +1,12 @@
 <template>
   <!--<div :style="{backgroundImage:'url('+headerUrl+')'}" class="app-header">-->
   <div style="background-color: #0078ff;" class="app-header">
-    <h3>{{ title }}</h3>
+    <h3 @click="backToIndex">{{ title }}</h3>
     <!--子系统选项-->
     <el-dropdown class="systemSelect" @command="handleCommand">
       <span class="el-dropdown-link" style="color: white">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
       </span>
-      <el-dropdown-menu slot="dropdown" >
+      <el-dropdown-menu slot="dropdown" style="z-index: 10000" >
         <el-dropdown-item>
           <span style="display:block;" @click="backToIndex">回首页</span>
         </el-dropdown-item>
@@ -15,7 +15,7 @@
     </el-dropdown>
 
     <div v-show="currentSystem.code === 'ctrl'" class="back-to-overview">
-      <el-button type="info" round @click="backToOverview">运行总览</el-button>
+      <el-button type="info" round @click="backToOverview" style="background-color: rgba(255,255,255,0.31);border: 0px">运行总览</el-button>
     </div>
 
     <el-dropdown class="avatar-container">
diff --git a/src/views/overview/doorIndex.vue b/src/views/overview/doorIndex.vue
index 5d2dce2..7cd40ff 100644
--- a/src/views/overview/doorIndex.vue
+++ b/src/views/overview/doorIndex.vue
@@ -58,26 +58,51 @@
           <i v-else class="el-icon-arrow-down"/>
         </span>
       </div>
-      <transition name="el-collapse-transition">
-        <el-scrollbar
-          v-show="tableShow"
-          :style="{ visibility: tableShow ? 'visible' : 'hidden'}"
-          :class="{ moredatascollor: alarmList.length > 6 }"
-          :native="false">
-          <el-table
-            :data="alarmList"
-            class="alarm-list-table"
-            border
-            stripe
-            @row-click="alarmRowClick">
-            <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{ scope.row[column.value] }}
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-scrollbar>
-      </transition>
+      <div v-show="alarmList.length > 4 && tableShow">
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 32px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 231px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          height="200"
+          style="border-left: 1px solid #2470AC;"
+          v-if="tableShow"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-show="alarmList.length < 5 && tableShow">
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          v-if="tableShow"
+          style="border: 1px solid #2470AC"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
     </div>
 
     <!-- 中间平面图区域 -->
@@ -730,9 +755,12 @@
   .main-page {
     background-size: cover;
     background-color: #023d83;
-    height: 100vh;
+    height: 98vh;
   }
-
+  .tableLine {
+    margin-top: 9px;
+    width: 463px;
+  }
   .main-header {
     width: 100vw;
   }
@@ -863,16 +891,24 @@
         margin-left: 20px;
       }
     }
-    .el-scrollbar {
-      /*height: 200px;*/
-      width: 100%;
+    // 滚动条的滑块
+    /deep/ .el-table__body-wrapper  {
+      background-color: #023D83;
+      border: 0px solid white;
     }
-    .moredatascollor {
-      height: 200px;
+    /deep/ .el-table--border th.gutter:last-of-type {
+      border: 1px solid #023D83;
+      border-bottom-width: 1px;
+      background-color: #023D83;
     }
-    .el-scrollbar__wrap {
-      overflow-y: auto;
-      overflow-x: hidden;
+    /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
+      background-color: #023D83;
+    }
+    /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+      display: none;
+    }
+    /deep/ .el-scrollbar__wrap {
+      overflow-x: hidden !important;
       margin-bottom: 0px !important;
     }
     .el-table {
@@ -906,16 +942,25 @@
     font-size: 15px;
     color: #FFFFFF;
     font-weight: normal;
+    border-color: #2470AC;
   }
-
+  .el-table--border::after, .el-table--group::after, .el-table::before{
+    background-color: #023d83;
+  }
+  .alarm-now-block /deep/ .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
+    border-color: #023d83;
+  }
   .alarm-now-block /deep/ .el-table__row td {
     background-color: #023D83;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ .el-table__body tr:hover > td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ tr.el-table__row--striped td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
 
   .map-tab {
@@ -1091,6 +1136,10 @@
   /*}*/
 
   @media(max-width: 1440px) {
+    .tableLine {
+      margin-top: 0px;
+      width: 343px;
+    }
     .main-title {
       height: 65px;
       padding-top: 16px;

diff --git a/config/dev.env.js b/config/dev.env.js
index 6b4622a..095ba33 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -8,4 +8,5 @@
   NODE_ENV: '"development"',
   // BASE_API: '"http://192.168.5.220:20311"'
   BASE_API: '"http://111.198.10.15:11631"'
+  // BASE_API: '"http://192.168.5.220:20311"'
 })
diff --git a/config/prod.env.js b/config/prod.env.js
index f2501d0..ccbc615 100644
--- a/config/prod.env.js
+++ b/config/prod.env.js
@@ -1,5 +1,6 @@
 'use strict'
 module.exports = {
   NODE_ENV: '"production"',
-  BASE_API: '"http://192.168.5.220:20311"'
+  // BASE_API: '"http://192.168.5.220:20311"'
+  BASE_API: '"http://111.198.10.15:11631"'
 }
diff --git a/favicon.ico b/favicon.ico
index 34b63ac..bc1bfc5 100644
--- a/favicon.ico
+++ b/favicon.ico
Binary files differ
diff --git a/src/api/visitor.js b/src/api/visitor.js
index 05ed6ea..01a6c26 100644
--- a/src/api/visitor.js
+++ b/src/api/visitor.js
@@ -74,3 +74,14 @@
   })
 }
 
+// 查询人员轨迹
+export function getDetail(devcode) {
+  return request({
+    url: '/device/capturePhoto',
+    method: 'post',
+    params:{
+      devcode: devcode
+    }
+  })
+}
+
diff --git a/src/assets/dashboard_images/icon-defence.png b/src/assets/dashboard_images/icon-defence.png
index 8069376..11b41cb 100644
--- a/src/assets/dashboard_images/icon-defence.png
+++ b/src/assets/dashboard_images/icon-defence.png
Binary files differ
diff --git a/src/utils/calendarUtil.js b/src/utils/calendarUtil.js
index da840c3..e599bdd 100644
--- a/src/utils/calendarUtil.js
+++ b/src/utils/calendarUtil.js
@@ -61,7 +61,32 @@
 
   return yearMonth + '-' + format(day)
 }
+export function formatDateTime(cellval) {
+  var dateVal = cellval + "";//把时间戳转成字符串格式
+  if (cellval != null) {
+    //取得时间戳部分 如：获取 /Date(1545299299910)/ 中的 1545299299910 部分
+    var date = new Date(parseInt(dateVal.replace("/Date(", "")
+      .replace(")/", ""), 10));
+    //获取年，不需要其他操作所以可以直接返回	date.getFullYear()
+    //月份为0-11，所以+1，月份小于10时补个0
+    var month = date.getMonth() + 1 < 10 ? "0"
+      + (date.getMonth() + 1) : date.getMonth() + 1;
+    //获取日
+    var currentDate = date.getDate() < 10 ? "0" + date.getDate()
+      : date.getDate();
+    //获取时间
+    var hours = date.getHours() < 10 ? "0" + date.getHours() : date
+      .getHours();
+    var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes()
+      : date.getMinutes();
+    var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds()
+      : date.getSeconds();
 
+    //返回日期结果，需要时间的话在加上时间
+    return date.getFullYear() + "-" + month + "-" + currentDate+" "+hours+":"+
+      minutes+":"+seconds;
+  }
+}
 // 格式化日期为字符串
 export function formatToString(value, level) {
   const date = new Date(value)
diff --git a/src/views/alarm/alarmDetail.vue b/src/views/alarm/alarmDetail.vue
index 2c94629..8c32ee5 100644
--- a/src/views/alarm/alarmDetail.vue
+++ b/src/views/alarm/alarmDetail.vue
@@ -1,7 +1,7 @@
 <!-- 报警详情 -->
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :model="dataForm" label-well-code="right" label-width="110px">
+    <el-form v-loading="loading" ref="dataForm" :model="dataForm" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="报警编号">
@@ -86,6 +86,7 @@
   name: 'AlarmDetail',
   data() {
     return {
+      loading: true,
       dialogFormVisible: false, // 对话框是否显示
       dialogStatus: '', // 对话框类型：create,update,detail
       dataForm: {
@@ -123,7 +124,7 @@
         this.dataForm = {
           id: row.id
         }
-
+        this.loading = true
         alarmDetail(this.dataForm.id).then(response => {
           if (response.code === 200) {
             this.dataForm = {
@@ -140,7 +141,7 @@
               reason: response.data.reason,
               remark: response.data.remark
             }
-
+            this.loading = false
             // 格式化报警状态
             if (response.data.valid === 1) {
               this.dataForm.validStr = '正在报警'
diff --git a/src/views/car/carAdd.vue b/src/views/car/carAdd.vue
index ddb215f..5f54c93 100644
--- a/src/views/car/carAdd.vue
+++ b/src/views/car/carAdd.vue
@@ -10,7 +10,7 @@
         </el-col>
         <el-col :span="12">
           <el-form-item label="车辆性质" prop="property">
-            <el-radio-group v-model="dataForm.property" :disabled="isDetailMode">
+            <el-radio-group v-model="dataForm.property" :disabled="isDetailMode" @change="resetOwner">
               <el-radio v-for="item in carProperties" :key="item.value" :label="item.value">{{ item.name }}</el-radio>
             </el-radio-group>
           </el-form-item>
@@ -106,6 +106,12 @@
     this.fetchStaffList()
   },
   methods: {
+    resetOwner(){
+      if(this.dataForm.property!=='2'){
+        this.dataForm.ownerId = ''
+        // this.dataForm.phone = ''
+      }
+    },
     // 初始化对话框
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.btnLoading = false
@@ -208,6 +214,7 @@
           }
         })
         this.dataForm.phone = selectedStaff[0].phone
+        this.dataForm.deptid = selectedStaff[0].deptid
       } else {
         this.dataForm.phone = ''
       }
diff --git a/src/views/car/carList.vue b/src/views/car/carList.vue
index 8d924ff..4ff07ab 100644
--- a/src/views/car/carList.vue
+++ b/src/views/car/carList.vue
@@ -105,11 +105,11 @@
           value: 'propertyStr',
           align: 'center'
         },
-        // {
-        //   text: '车主姓名',
-        //   value: 'ownerName',
-        //   align: 'center'
-        // },
+        {
+          text: '车主姓名',
+          value: 'ownerName',
+          align: 'center'
+        },
         {
           text: '车主联系电话',
           value: 'phone',
diff --git a/src/views/ctrl/index.vue b/src/views/ctrl/index.vue
index fd36f2b..29923af 100644
--- a/src/views/ctrl/index.vue
+++ b/src/views/ctrl/index.vue
@@ -50,12 +50,13 @@
         <in-out-today />
       </el-col>
 
-      <el-col :span="7" class="chart-block">
+      <el-col id="dev-count"  :span="10" class="chart-block">
         <div class="chart-title">各类型设备安装数量</div>
         <dev-count />
       </el-col>
 
-      <el-col id="pass-count" :span="10" class="chart-block">
+      <!--<el-col id="pass-count" class="chart-block">-->
+      <el-col :span="7" class="chart-block">
         <div class="chart-title">进出营数量统计</div>
         <in-out-count />
       </el-col>
@@ -121,7 +122,7 @@
 <style scoped>
   .app-wrapper {
     background-color: #e9e9e9;
-    padding-bottom: 20px;
+    padding-bottom: 10px;
   }
 
   .sub-data-block {
@@ -129,6 +130,7 @@
     border-radius: 16px;
     float: left;
     margin: 10px;
+    margin-bottom: 0px;
     box-shadow: 1px 1px 5px #999;
   }
   .sub-title {
@@ -136,36 +138,38 @@
     text-align: center;
     font-family: 'Microsoft YaHei';
     color: #fff;
-    font-size: 24px;
-    padding: 10px;
+    font-size: 20px;
+    padding-top: 10px;
+    padding-bottom: 0px;
   }
   .statis-block {
     text-align: center;
     margin: 0px 10px 0px 10px;
-    padding: 0px 10px 10px 10px;
+    padding: 0px 10px 5px 10px;
     color: #fff;
     font-weight: bold;
     letter-spacing: 1px;
-    font-size: 24px;
+    font-size: 20px;
   }
   .big-size {
-    font-size: 64px;
+    font-size: 35px;
   }
 
   .chart-title {
     font-family: 'Microsoft YaHei';
     color: #000000;
     font-weight: bold;
-    font-size: 20px;
+    font-size: 18px;
     text-align: center;
     padding: 10px;
   }
   .chart-block {
     margin-left: 20px;
-    margin-top: 20px;
+    margin-top: 10px;
     border-radius: 16px;
     background-color: #FFFFFF;
     box-shadow: 1px 1px 5px #999;
+    height: 37vh;
   }
 
   #today-visitor {
@@ -187,7 +191,7 @@
     background-image: linear-gradient(to right, #ffa800, #ce7e00);
   }
 
-  #pass-count, #dev-alarm-count {
+  #dev-count, #dev-alarm-count {
     width: calc(250vw / 6 - 70px);
   }
 </style>
diff --git a/src/views/ctrl/overview.vue b/src/views/ctrl/overview.vue
index 62e1105..49ed928 100644
--- a/src/views/ctrl/overview.vue
+++ b/src/views/ctrl/overview.vue
@@ -59,26 +59,52 @@
           <i v-else class="el-icon-arrow-down"/>
         </span>
       </div>
-      <transition name="el-collapse-transition">
-        <el-scrollbar
-          v-show="tableShow"
-          :style="{ visibility: tableShow ? 'visible' : 'hidden'}"
-          :class="{ moredatascollor: alarmList.length > 6 }"
-          :native="false">
-          <el-table
-            :data="alarmList"
-            class="alarm-list-table"
-            border
-            stripe
-            @row-click="alarmRowClick">
-            <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{ scope.row[column.value] }}
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-scrollbar>
-      </transition>
+      <div v-show="alarmList.length > 4 && tableShow">
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 32px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 231px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          height="200"
+          style="border-left: 1px solid #2470AC;"
+          v-if="tableShow"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-show="alarmList.length < 5 && tableShow">
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          v-if="tableShow"
+          style="border: 1px solid #2470AC"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
     </div>
 
     <!-- 中间平面图区域 -->
@@ -145,9 +171,13 @@
         class="point-camera"
         @click="detailDev(item, $event)" />
     </div>
-
     <!-- 平面图区域设备类型按钮 -->
-    <div v-show="showType" class="bottom-center" :style="{ width: cameraTypeNum*btnwidth + 'px'}">
+    <div class="bottom-center" :style="{ width: btnNum*btnwidth + 'px'}">
+        <el-col v-show="btnNum!==1" ref="all" class="dev-icon dev-type-selected" @click.native="selectDevByType('all', $event)">
+          <img v-if="checkDevType[0]" src="@/assets/overview_images/icons/icon-all-checked.png">
+          <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
+          <span>全部</span>
+        </el-col>
       <el-col class="dev-icon" @click.native="selectDevByType('4', $event)">
         <img id="4-1-img" v-if="checkDevType1[0]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="4-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
@@ -178,20 +208,6 @@
         <img id="11-2-img" v-else src="@/assets/overview_images/icons/half-camera-blue.png">
         <span>标准半球</span>
       </el-col>
-    </div>
-    <!-- 平面图区域设备类型按钮 -->
-    <div v-show="!showType"class="bottom-center" :style="{ width: btnNum*btnwidth + 'px'}">
-        <el-col ref="all" class="dev-icon dev-type-selected" @click.native="selectDevByType('all', $event)">
-          <img v-if="checkDevType[0]" src="@/assets/overview_images/icons/icon-all-checked.png">
-          <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
-          <span>全部</span>
-        </el-col>
-        <el-col ref="camera" :class="cameraClass" @click.native="showType=!showType;selectDevByType('camera', $event)">
-        <!--<el-col ref="camera" class="dev-icon" @click.native="selectDevByType('camera', $event)">-->
-          <img id="cam_img_red" v-if="checkDevType[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-          <img id="cam_img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-          <span>摄像头</span>
-        </el-col>
         <el-col v-show="showFence" class="dev-icon" @click.native="selectDevByType('fence', $event)">
           <img v-if="checkDevType[2]" src="@/assets/overview_images/icons/icon-fence-checked.png">
           <img v-else src="@/assets/overview_images/icons/icon-fence-unchecked.png">
@@ -372,7 +388,7 @@
           height: 789
         }, // 屏幕窗口尺寸
         imgUrl: require('../../assets/overview_images/icons/icon-camera-point.png'),
-        btnNum: 3,
+        btnNum: 8,
         cameraTypeNum: 6,
         btnwidth: 210,
         halfLeft: 0,
@@ -498,25 +514,25 @@
             }
           }
         }
-        //跟换菜单
-        var item = ['人脸识别','车牌轨迹','周界防护','标准数字','智能球形','标准半球']
-        for(var i=0;i<item.length;i++){
-          if(item[i]===val.target.innerText){
-            return
-          }
-        }
-        if(val.target.id.endsWith('-1-img')||val.target.id.endsWith('-2-img')|| val.target.id==='cam_img' || val.target.id==='cam_img_red'){
-          return
-        }
-        if( val.target.innerText!=='摄像头') {
-          this.showType = false
-          const devTypes = document.querySelectorAll('.dev-icon')
-            for(var i=0;i<this.checkDevType.length;i++) {
-              if (this.checkDevType[i]) {
-                devTypes[i+6].className += ' dev-type-selected'
-              }
-            }
-        }
+        // //跟换菜单
+        // var item = ['人脸识别','车牌轨迹','周界防护','标准数字','智能球形','标准半球']
+        // for(var i=0;i<item.length;i++){
+        //   if(item[i]===val.target.innerText){
+        //     return
+        //   }
+        // }
+        // if(val.target.id.endsWith('-1-img')||val.target.id.endsWith('-2-img')|| val.target.id==='cam_img' || val.target.id==='cam_img_red'){
+        //   return
+        // }
+        // if( val.target.innerText!=='摄像头') {
+        //   this.showType = false
+        //   const devTypes = document.querySelectorAll('.dev-icon')
+        //     for(var i=0;i<this.checkDevType.length;i++) {
+        //       if (this.checkDevType[i]) {
+        //         devTypes[i+6].className += ' dev-type-selected'
+        //       }
+        //     }
+        // }
       },
       webSocket() {
         const that = this
@@ -586,7 +602,7 @@
         }else if(pic==='3'){
           this.changeMap('tg_4_1')
         }else if(pic==='4'){
-          this.changeMap('tg_4_1')
+          this.changeMap('tg_4_5')
         }
         setTimeout(() => {
           var obj = document.getElementById(val.toString());
@@ -771,7 +787,11 @@
           this.checkDevType1 = [false, false, false, false, false, false]
           // 添加选中的样式
           if (typeof event === 'undefined') {
-            devTypes[6].className += ' dev-type-selected'
+            if(this.btnNum===1){
+              devTypes[1].className += ' dev-type-selected'
+            }else{
+              devTypes[0].className += ' dev-type-selected'
+            }
           } else {
             event.currentTarget.className += ' dev-type-selected'
           }
@@ -1017,7 +1037,7 @@
           this.isMain = true
           // this.devListParams.picture = '1'
           this.imgSizeOriginal = { width: 2245, height: 1586 }
-          this.btnNum  = 3
+          this.btnNum  = 8
           this.cameraTypeNum  = 6
           this.showFence = true // 显示电子围栏
           this.showTemp = false // 隐藏温湿度设备
@@ -1027,6 +1047,7 @@
           this.showSubTabGuider = false
           this.showFloorThree = false
           this.showFloorFour = false
+          this.selectDevByType('all')
         } else if (index === 'tg_3_1') {
           this.bgImageSrc = tg_3_1
           // this.devListParams.picture = '2'
@@ -1037,6 +1058,7 @@
           this.showTemp = true // 隐藏温湿度
           this.showSmoking = true // 隐藏烟感
           this.showSound = true // 隐藏声光报警器
+          this.selectDevByType('all')
         } else if (index === 'tg_4_1') {
           this.bgImageSrc = tg_4_1
           // this.devListParams.picture = '3'
@@ -1048,18 +1070,19 @@
           this.showTemp = true // 显示温湿度
           this.showSmoking = true // 显示烟感
           this.showSound = true // 显示声光报警器
+          this.selectDevByType('all')
         } else if (index === 'tg_4_5') {
           this.bgImageSrc = tg_4_5
           // this.devListParams.picture = '4'
           this.imgSizeOriginal = { width: 2245, height: 1586 }
-          this.btnNum  = 2
+          this.btnNum  = 1
           this.cameraTypeNum  = 1
           this.showFence = false // 隐藏电子围栏
           this.showTemp = false // 隐藏温湿度
           this.showSmoking = false // 隐藏烟感
           this.showSound = false // 隐藏声光报警器
+          this.selectDevByType('4')
         }
-        this.selectDevByType('all')
       },
       // 查询并显示设备详情
       detailDev(dev, event) {
@@ -1201,10 +1224,14 @@
     left: 50%; transform: translateX(-50%);
     bottom: 25px;
   }
+  .tableLine {
+    margin-top: 9px;
+    width: 463px;
+  }
   .main-page {
     background-size: cover;
     background-color: #023d83;
-    height: 100vh;
+    height: 98vh;
   }
 
   .main-header {
@@ -1362,16 +1389,24 @@
         margin-left: 20px;
       }
     }
-    .el-scrollbar {
-      /*height: 200px;*/
-      width: 100%;
+    // 滚动条的滑块
+    /deep/ .el-table__body-wrapper  {
+      background-color: #023D83;
+      border: 0px solid white;
     }
-    .moredatascollor {
-      height: 200px;
+    /deep/ .el-table--border th.gutter:last-of-type {
+      border: 1px solid #023D83;
+      border-bottom-width: 1px;
+      background-color: #023D83;
     }
-    .el-scrollbar__wrap {
-      overflow-y: auto;
-      overflow-x: hidden;
+    /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
+      background-color: #023D83;
+    }
+    /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+      display: none;
+    }
+    /deep/ .el-scrollbar__wrap {
+      overflow-x: hidden !important;
       margin-bottom: 0px !important;
     }
     .el-table {
@@ -1405,16 +1440,25 @@
     font-size: 15px;
     color: #FFFFFF;
     font-weight: normal;
+    border-color: #2470AC;
   }
-
+  .el-table--border::after, .el-table--group::after, .el-table::before{
+    background-color: #023d83;
+  }
+  .alarm-now-block /deep/ .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
+    border-color: #023d83;
+  }
   .alarm-now-block /deep/ .el-table__row td {
     background-color: #023D83;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ .el-table__body tr:hover > td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ tr.el-table__row--striped td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
 
   .map-tab {
@@ -1601,6 +1645,10 @@
   /*}*/
 
   @media(max-width: 1440px) {
+    .tableLine {
+      margin-top: 0px;
+      width: 343px;
+    }
     .main-title {
       height: 65px;
       padding-top: 16px;
diff --git a/src/views/ctrl/statCharts/devAlarmCount.vue b/src/views/ctrl/statCharts/devAlarmCount.vue
index 7bea059..6b6939e 100644
--- a/src/views/ctrl/statCharts/devAlarmCount.vue
+++ b/src/views/ctrl/statCharts/devAlarmCount.vue
@@ -1,5 +1,6 @@
+<!--suppress ALL -->
 <template>
-  <div>
+  <div style="height: 90%">
     <el-date-picker
       v-model="timeRange"
       :picker-options="pickerOptions"
@@ -7,15 +8,16 @@
       range-separator="至"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
-      style="margin-bottom: 10px;" />
-    <ve-histogram :data="chartData" :settings="settings" height="350px" />
+      style="margin-bottom: 10px;z-index: 10000"
+      size="small"/>
+    <ve-histogram :data="chartData" :settings="settings" :extend="chartExtend" style="margin-top: -50px" height="100%"/>
   </div>
 </template>
 
 <script>
-import { formatToString, getDate, oneDayTime } from '@/utils/calendarUtil'
-import { devAlarmCount } from '@/api/statistics'
 
+import { devAlarmCount } from '@/api/statistics'
+import { formatToString, parseToDate, getDate, oneDayTime } from '@/utils/calendarUtil'
 const now = new Date()
 
 export default {
@@ -30,12 +32,22 @@
         columns: ['name', 'count'],
         rows: []
       },
+      chartExtend: {
+        series: {
+          barMaxWidth: 50
+        },
+        grid: {
+          containLabel: true,
+          bottom: '10%'
+        }
+      },
       settings: {
         labelMap: {
           'name': '设备类型',
-          'count': '报警数量'
+          'count': ''
         },
-        max: [4]
+        max: [4],
+        area: false
       },
       timeRange: [],
       pickerOptions: {
@@ -99,6 +111,13 @@
       devAlarmCount(this.params).then(response => {
         if (response.code === 200) {
           this.chartData.rows = response.data
+          var max = 4
+          for(var i=0;i<response.data.length;i++){
+            if(Number(response.data[i].count)>max){
+              max = Number(response.data[i].count)
+            }
+          }
+          this.settings.max = [max]
         }
       })
     }
diff --git a/src/views/ctrl/statCharts/devCount.vue b/src/views/ctrl/statCharts/devCount.vue
index d3e2902..db55fbe 100644
--- a/src/views/ctrl/statCharts/devCount.vue
+++ b/src/views/ctrl/statCharts/devCount.vue
@@ -1,5 +1,6 @@
 <template>
-  <ve-ring :data="chartData" :settings="settings" />
+  <ve-histogram :data="chartData" :settings="settings" :extend="chartExtend" style="margin-top: -20px" height="100%"/>
+  <!--<ve-ring :data="chartData" :settings="settings" />-->
 </template>
 
 <script>
@@ -9,14 +10,55 @@
   name: 'DevCount',
   data() {
     return {
+      chartExtend: {
+        series: {
+          barMaxWidth: 50
+        },
+        xAxis: {
+          axisLabel: {
+            interval: 0,
+            //换行显示
+            formatter: function(value) {
+              let result = ""; //拼接加\n返回的类目项
+              let maxLength = 2; //每项显示文字个数
+              let valLength = value.length; //X轴类目项的文字个数
+              let rowNumber = Math.ceil(valLength / maxLength); //类目项需要换行的行数
+              if (rowNumber > 1) {
+                //如果文字大于3,
+                for (let i = 0; i < rowNumber; i++) {
+                  let temp = ""; //每次截取的字符串
+                  let start = i * maxLength; //开始截取的位置
+                  let end = start + maxLength; //结束截取的位置
+                  temp = value.substring(start, end) + "\n";
+                  result += temp; //拼接生成最终的字符串
+                }
+                return "{labelText|" + result + "}";
+              } else {
+                return "{labelText|" + value + "}";
+              }
+            },
+            rich: {
+              labelText: {
+                lineHeight: 18
+              }
+            }
+          }
+        }
+      },
       chartData: {
         columns: ['name', 'count'],
         rows: []
       },
       settings: {
-        // legendLimit: 4
-        radius: [60, 100]
-      }
+        labelMap: {
+          'name': '设备类型',
+          'count': ''
+        }
+      },
+      // settings: {
+      //   // legendLimit: 4
+      //   radius: [60, 100]
+      // }
     }
   },
   activated() {
@@ -26,6 +68,9 @@
     fetchData() {
       devCount().then(response => {
         if (response.code === 200) {
+          for(var i=0;i<response.data.length;i++){
+            response.data[i].name = response.data[i].name.replace('防护','')
+          }
           this.chartData.rows = response.data
         }
       })
diff --git a/src/views/ctrl/statCharts/inOutCount.vue b/src/views/ctrl/statCharts/inOutCount.vue
index 502157e..d65ec69 100644
--- a/src/views/ctrl/statCharts/inOutCount.vue
+++ b/src/views/ctrl/statCharts/inOutCount.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="height: 100%">
     <el-date-picker
       v-model="timeRange"
       :picker-options="pickerOptions"
@@ -7,8 +7,9 @@
       range-separator="至"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
-      style="margin-bottom: 10px"/>
-    <ve-line :data="chartData" :settings="settings" height="350px" />
+      size="small"
+      style="margin-bottom: 10px;z-index: 10000"/>
+    <ve-line :data="chartData" :settings="settings" :extend="barExtend" style="margin-top: -50px;" height="93%"/>
   </div>
 </template>
 
@@ -30,6 +31,17 @@
         columns: ['date', 'staff', 'visitor', 'car', 'visitorCar'],
         rows: []
       },
+
+      barExtend:{
+        legend:{  // 隐藏图例
+          x: 'center',
+          y: 'bottom'
+        },
+        grid: {
+          containLabel: true,
+          bottom: '10%'
+        },
+      },
       settings: {
         labelMap: {
           'staff': '内部人员',
@@ -37,11 +49,11 @@
           'car': '内部车辆',
           'visitorCar': '来访车辆'
         },
-        xAxisType: 'time',
+        // xAxisType: 'time',
         max: [4],
         area: false,
         metrics: ['staff', 'visitor', 'car', 'visitorCar'],
-        dimension: ['date']
+        dimension: ['date'],
       },
       timeRange: [],
       pickerOptions: {
@@ -106,7 +118,7 @@
         if (response.code === 200) {
           const data = this.parseStatisticsData(response.data)
           this.chartData.rows = data.rowDatas
-          this.chartData.max = [data.maxCount]
+          this.settings.max = [data.maxCount]
         }
       })
     },
@@ -164,7 +176,7 @@
 
         if (typeof visitorCar !== 'undefined') {
           if (visitorCar.date === date) {
-            visitorCarCount = car.count
+            visitorCarCount = visitorCar.count
             indexVc++
           }
         }
@@ -172,6 +184,18 @@
         if (staffCount + visitorCount + carCount + visitorCarCount > 0) {
           rowDatas.push({ date: date, staff: staffCount, visitor: visitorCount, car: carCount, visitorCar: visitorCarCount })
         }
+        if(maxCount<staffCount){
+          maxCount = staffCount
+        }
+        if(maxCount<visitorCount){
+          maxCount = visitorCount
+        }
+        if(maxCount<carCount){
+          maxCount = carCount
+        }
+        if(maxCount<visitorCarCount){
+          maxCount = visitorCarCount
+        }
         start += oneDayTime
       }
 
diff --git a/src/views/ctrl/statCharts/inOutDoorCount.vue b/src/views/ctrl/statCharts/inOutDoorCount.vue
index ab28cdd..93f3458 100644
--- a/src/views/ctrl/statCharts/inOutDoorCount.vue
+++ b/src/views/ctrl/statCharts/inOutDoorCount.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="height: 100%">
     <el-date-picker
       v-model="timeRange"
       :picker-options="pickerOptions"
@@ -7,8 +7,9 @@
       range-separator="至"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
-      style="margin-bottom: 10px;" />
-    <ve-histogram :data="chartData" :settings="settings" height="350px" />
+      style="margin-bottom: 10px;z-index: 10000"
+      size="small"/>
+    <ve-histogram :data="chartData" :settings="settings" :extend="chartExtend" style="margin-top: -50px"height="93%"/>
   </div>
 </template>
 
@@ -26,11 +27,26 @@
         beginDate: '',
         endDate: ''
       },
+      chartExtend: {
+        legend:{  // 隐藏图例
+          x: 'center',
+          y: 'bottom'
+        },
+        grid: {
+          containLabel: true,
+          bottom: '10%'
+        },
+        series: {
+          barMaxWidth: 50,
+          center: ['50%', '50%']
+        }
+      },
       chartData: {
         columns: ['name', 'person', 'car'],
         rows: []
       },
       settings: {
+        radius: [60, 100],
         labelMap: {
           'person': '人员',
           'car': '车辆'
@@ -102,7 +118,7 @@
         if (response.code === 200) {
           const data = this.parseStatisticsData(response.data)
           this.chartData.rows = data.rowDatas
-          this.chartData.max = [data.maxCount]
+          this.settings.max = [data.maxCount]
         }
       })
     },
diff --git a/src/views/ctrl/statCharts/inOutKeyCount.vue b/src/views/ctrl/statCharts/inOutKeyCount.vue
index fa9a0b7..10108d6 100644
--- a/src/views/ctrl/statCharts/inOutKeyCount.vue
+++ b/src/views/ctrl/statCharts/inOutKeyCount.vue
@@ -1,5 +1,7 @@
 <template>
-  <ve-ring :data="chartData" :settings="settings" />
+  <div style="height: 100%">
+    <ve-ring :data="chartData" :settings="settings" :extend="chartExtend"  height="90%"/>
+  </div>
 </template>
 
 <script>
@@ -9,6 +11,19 @@
   name: 'InOutKeyCount',
   data() {
     return {
+      chartExtend: {
+        legend:{  // 隐藏图例
+          x: 'center',
+          y: 'top'
+        },
+        grid: {
+          containLabel: true,
+          top: '10%'
+        },
+        series: {
+          center: ['50%', '50%']
+        }
+      },
       chartData: {
         columns: ['name', 'count'],
         rows: []
diff --git a/src/views/ctrl/statCharts/inOutToday.vue b/src/views/ctrl/statCharts/inOutToday.vue
index c37fa7b..ae67856 100644
--- a/src/views/ctrl/statCharts/inOutToday.vue
+++ b/src/views/ctrl/statCharts/inOutToday.vue
@@ -1,5 +1,7 @@
 <template>
-  <ve-ring :data="chartData" :settings="settings" />
+  <div style="height: 100%">
+    <ve-ring :data="chartData" :settings="settings" :extend="chartExtend"  height="90%"/>
+  </div>
 </template>
 
 <script>
@@ -18,6 +20,15 @@
           { count: 1, name: '来访车辆' }
         ]
       },
+      chartExtend: {
+        legend:{  // 隐藏图例
+          x: 'center',
+          y: 'top'
+        },
+        series: {
+          center: ['50%', '50%']
+        }
+      },
       settings: {
         radius: [60, 100]
       }
diff --git a/src/views/deviceManage/deviceDetail.vue b/src/views/deviceManage/deviceDetail.vue
index 701052d..8245327 100644
--- a/src/views/deviceManage/deviceDetail.vue
+++ b/src/views/deviceManage/deviceDetail.vue
@@ -9,7 +9,7 @@
         <!--</el-col>-->
         <el-col :span="12">
           <el-form-item label="设备编号">
-            <el-input v-model.trim="dataForm.name" disabled type="text"/>
+            <el-input v-model.trim="dataForm.devcode" disabled type="text"/>
             <!--<span>{{ dataForm.devcode }}</span>-->
           </el-form-item>
         </el-col>
diff --git a/src/views/layout/components/AppHeader.vue b/src/views/layout/components/AppHeader.vue
index c3235b4..2e45954 100644
--- a/src/views/layout/components/AppHeader.vue
+++ b/src/views/layout/components/AppHeader.vue
@@ -1,12 +1,12 @@
 <template>
   <!--<div :style="{backgroundImage:'url('+headerUrl+')'}" class="app-header">-->
   <div style="background-color: #0078ff;" class="app-header">
-    <h3>{{ title }}</h3>
+    <h3 @click="backToIndex">{{ title }}</h3>
     <!--子系统选项-->
     <el-dropdown class="systemSelect" @command="handleCommand">
       <span class="el-dropdown-link" style="color: white">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
       </span>
-      <el-dropdown-menu slot="dropdown" >
+      <el-dropdown-menu slot="dropdown" style="z-index: 10000" >
         <el-dropdown-item>
           <span style="display:block;" @click="backToIndex">回首页</span>
         </el-dropdown-item>
@@ -15,7 +15,7 @@
     </el-dropdown>
 
     <div v-show="currentSystem.code === 'ctrl'" class="back-to-overview">
-      <el-button type="info" round @click="backToOverview">运行总览</el-button>
+      <el-button type="info" round @click="backToOverview" style="background-color: rgba(255,255,255,0.31);border: 0px">运行总览</el-button>
     </div>
 
     <el-dropdown class="avatar-container">
diff --git a/src/views/overview/doorIndex.vue b/src/views/overview/doorIndex.vue
index 5d2dce2..7cd40ff 100644
--- a/src/views/overview/doorIndex.vue
+++ b/src/views/overview/doorIndex.vue
@@ -58,26 +58,51 @@
           <i v-else class="el-icon-arrow-down"/>
         </span>
       </div>
-      <transition name="el-collapse-transition">
-        <el-scrollbar
-          v-show="tableShow"
-          :style="{ visibility: tableShow ? 'visible' : 'hidden'}"
-          :class="{ moredatascollor: alarmList.length > 6 }"
-          :native="false">
-          <el-table
-            :data="alarmList"
-            class="alarm-list-table"
-            border
-            stripe
-            @row-click="alarmRowClick">
-            <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{ scope.row[column.value] }}
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-scrollbar>
-      </transition>
+      <div v-show="alarmList.length > 4 && tableShow">
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 32px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 231px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          height="200"
+          style="border-left: 1px solid #2470AC;"
+          v-if="tableShow"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-show="alarmList.length < 5 && tableShow">
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          v-if="tableShow"
+          style="border: 1px solid #2470AC"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
     </div>
 
     <!-- 中间平面图区域 -->
@@ -730,9 +755,12 @@
   .main-page {
     background-size: cover;
     background-color: #023d83;
-    height: 100vh;
+    height: 98vh;
   }
-
+  .tableLine {
+    margin-top: 9px;
+    width: 463px;
+  }
   .main-header {
     width: 100vw;
   }
@@ -863,16 +891,24 @@
         margin-left: 20px;
       }
     }
-    .el-scrollbar {
-      /*height: 200px;*/
-      width: 100%;
+    // 滚动条的滑块
+    /deep/ .el-table__body-wrapper  {
+      background-color: #023D83;
+      border: 0px solid white;
     }
-    .moredatascollor {
-      height: 200px;
+    /deep/ .el-table--border th.gutter:last-of-type {
+      border: 1px solid #023D83;
+      border-bottom-width: 1px;
+      background-color: #023D83;
     }
-    .el-scrollbar__wrap {
-      overflow-y: auto;
-      overflow-x: hidden;
+    /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
+      background-color: #023D83;
+    }
+    /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+      display: none;
+    }
+    /deep/ .el-scrollbar__wrap {
+      overflow-x: hidden !important;
       margin-bottom: 0px !important;
     }
     .el-table {
@@ -906,16 +942,25 @@
     font-size: 15px;
     color: #FFFFFF;
     font-weight: normal;
+    border-color: #2470AC;
   }
-
+  .el-table--border::after, .el-table--group::after, .el-table::before{
+    background-color: #023d83;
+  }
+  .alarm-now-block /deep/ .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
+    border-color: #023d83;
+  }
   .alarm-now-block /deep/ .el-table__row td {
     background-color: #023D83;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ .el-table__body tr:hover > td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ tr.el-table__row--striped td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
 
   .map-tab {
@@ -1091,6 +1136,10 @@
   /*}*/
 
   @media(max-width: 1440px) {
+    .tableLine {
+      margin-top: 0px;
+      width: 343px;
+    }
     .main-title {
       height: 65px;
       padding-top: 16px;
diff --git a/src/views/overview/fenceIndex.vue b/src/views/overview/fenceIndex.vue
index 9466288..62a35e8 100644
--- a/src/views/overview/fenceIndex.vue
+++ b/src/views/overview/fenceIndex.vue
@@ -58,26 +58,52 @@
           <i v-else class="el-icon-arrow-down"/>
         </span>
       </div>
-      <transition name="el-collapse-transition">
-        <el-scrollbar
-          v-show="tableShow"
-          :style="{ visibility: tableShow ? 'visible' : 'hidden'}"
-          :class="{ moredatascollor: alarmList.length > 6 }"
-          :native="false">
-          <el-table
-            :data="alarmList"
-            class="alarm-list-table"
-            border
-            stripe
-            @row-click="alarmRowClick">
-            <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{ scope.row[column.value] }}
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-scrollbar>
-      </transition>
+      <div v-show="alarmList.length > 4 && tableShow">
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 32px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 231px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          height="200"
+          style="border-left: 1px solid #2470AC;"
+          v-if="tableShow"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-show="alarmList.length < 5 && tableShow">
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          v-if="tableShow"
+          style="border: 1px solid #2470AC"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
     </div>
 
     <!-- 中间平面图区域 -->
@@ -725,10 +751,14 @@
       font-weight: normal;
     }
   }
+  .tableLine {
+    margin-top: 9px;
+    width: 463px;
+  }
   .main-page {
     background-size: cover;
     background-color: #023d83;
-    height: 100vh;
+    height: 98vh;
   }
 
   .main-header {
@@ -859,16 +889,24 @@
         margin-left: 20px;
       }
     }
-    .el-scrollbar {
-      /*height: 200px;*/
-      width: 100%;
+    // 滚动条的滑块
+    /deep/ .el-table__body-wrapper  {
+      background-color: #023D83;
+      border: 0px solid white;
     }
-    .moredatascollor {
-      height: 200px;
+    /deep/ .el-table--border th.gutter:last-of-type {
+      border: 1px solid #023D83;
+      border-bottom-width: 1px;
+      background-color: #023D83;
     }
-    .el-scrollbar__wrap {
-      overflow-y: auto;
-      overflow-x: hidden;
+    /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
+      background-color: #023D83;
+    }
+    /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+      display: none;
+    }
+    /deep/ .el-scrollbar__wrap {
+      overflow-x: hidden !important;
       margin-bottom: 0px !important;
     }
     .el-table {
@@ -902,16 +940,25 @@
     font-size: 15px;
     color: #FFFFFF;
     font-weight: normal;
+    border-color: #2470AC;
   }
-
+  .el-table--border::after, .el-table--group::after, .el-table::before{
+    background-color: #023d83;
+  }
+  .alarm-now-block /deep/ .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
+    border-color: #023d83;
+  }
   .alarm-now-block /deep/ .el-table__row td {
     background-color: #023D83;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ .el-table__body tr:hover > td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ tr.el-table__row--striped td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
 
   .map-tab {
@@ -1087,6 +1134,10 @@
   /*}*/
 
   @media(max-width: 1440px) {
+    .tableLine {
+      margin-top: 0px;
+      width: 343px;
+    }
     .main-title {
       height: 65px;
       padding-top: 16px;

diff --git a/config/dev.env.js b/config/dev.env.js
index 6b4622a..095ba33 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -8,4 +8,5 @@
   NODE_ENV: '"development"',
   // BASE_API: '"http://192.168.5.220:20311"'
   BASE_API: '"http://111.198.10.15:11631"'
+  // BASE_API: '"http://192.168.5.220:20311"'
 })
diff --git a/config/prod.env.js b/config/prod.env.js
index f2501d0..ccbc615 100644
--- a/config/prod.env.js
+++ b/config/prod.env.js
@@ -1,5 +1,6 @@
 'use strict'
 module.exports = {
   NODE_ENV: '"production"',
-  BASE_API: '"http://192.168.5.220:20311"'
+  // BASE_API: '"http://192.168.5.220:20311"'
+  BASE_API: '"http://111.198.10.15:11631"'
 }
diff --git a/favicon.ico b/favicon.ico
index 34b63ac..bc1bfc5 100644
--- a/favicon.ico
+++ b/favicon.ico
Binary files differ
diff --git a/src/api/visitor.js b/src/api/visitor.js
index 05ed6ea..01a6c26 100644
--- a/src/api/visitor.js
+++ b/src/api/visitor.js
@@ -74,3 +74,14 @@
   })
 }
 
+// 查询人员轨迹
+export function getDetail(devcode) {
+  return request({
+    url: '/device/capturePhoto',
+    method: 'post',
+    params:{
+      devcode: devcode
+    }
+  })
+}
+
diff --git a/src/assets/dashboard_images/icon-defence.png b/src/assets/dashboard_images/icon-defence.png
index 8069376..11b41cb 100644
--- a/src/assets/dashboard_images/icon-defence.png
+++ b/src/assets/dashboard_images/icon-defence.png
Binary files differ
diff --git a/src/utils/calendarUtil.js b/src/utils/calendarUtil.js
index da840c3..e599bdd 100644
--- a/src/utils/calendarUtil.js
+++ b/src/utils/calendarUtil.js
@@ -61,7 +61,32 @@
 
   return yearMonth + '-' + format(day)
 }
+export function formatDateTime(cellval) {
+  var dateVal = cellval + "";//把时间戳转成字符串格式
+  if (cellval != null) {
+    //取得时间戳部分 如：获取 /Date(1545299299910)/ 中的 1545299299910 部分
+    var date = new Date(parseInt(dateVal.replace("/Date(", "")
+      .replace(")/", ""), 10));
+    //获取年，不需要其他操作所以可以直接返回	date.getFullYear()
+    //月份为0-11，所以+1，月份小于10时补个0
+    var month = date.getMonth() + 1 < 10 ? "0"
+      + (date.getMonth() + 1) : date.getMonth() + 1;
+    //获取日
+    var currentDate = date.getDate() < 10 ? "0" + date.getDate()
+      : date.getDate();
+    //获取时间
+    var hours = date.getHours() < 10 ? "0" + date.getHours() : date
+      .getHours();
+    var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes()
+      : date.getMinutes();
+    var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds()
+      : date.getSeconds();
 
+    //返回日期结果，需要时间的话在加上时间
+    return date.getFullYear() + "-" + month + "-" + currentDate+" "+hours+":"+
+      minutes+":"+seconds;
+  }
+}
 // 格式化日期为字符串
 export function formatToString(value, level) {
   const date = new Date(value)
diff --git a/src/views/alarm/alarmDetail.vue b/src/views/alarm/alarmDetail.vue
index 2c94629..8c32ee5 100644
--- a/src/views/alarm/alarmDetail.vue
+++ b/src/views/alarm/alarmDetail.vue
@@ -1,7 +1,7 @@
 <!-- 报警详情 -->
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :model="dataForm" label-well-code="right" label-width="110px">
+    <el-form v-loading="loading" ref="dataForm" :model="dataForm" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="报警编号">
@@ -86,6 +86,7 @@
   name: 'AlarmDetail',
   data() {
     return {
+      loading: true,
       dialogFormVisible: false, // 对话框是否显示
       dialogStatus: '', // 对话框类型：create,update,detail
       dataForm: {
@@ -123,7 +124,7 @@
         this.dataForm = {
           id: row.id
         }
-
+        this.loading = true
         alarmDetail(this.dataForm.id).then(response => {
           if (response.code === 200) {
             this.dataForm = {
@@ -140,7 +141,7 @@
               reason: response.data.reason,
               remark: response.data.remark
             }
-
+            this.loading = false
             // 格式化报警状态
             if (response.data.valid === 1) {
               this.dataForm.validStr = '正在报警'
diff --git a/src/views/car/carAdd.vue b/src/views/car/carAdd.vue
index ddb215f..5f54c93 100644
--- a/src/views/car/carAdd.vue
+++ b/src/views/car/carAdd.vue
@@ -10,7 +10,7 @@
         </el-col>
         <el-col :span="12">
           <el-form-item label="车辆性质" prop="property">
-            <el-radio-group v-model="dataForm.property" :disabled="isDetailMode">
+            <el-radio-group v-model="dataForm.property" :disabled="isDetailMode" @change="resetOwner">
               <el-radio v-for="item in carProperties" :key="item.value" :label="item.value">{{ item.name }}</el-radio>
             </el-radio-group>
           </el-form-item>
@@ -106,6 +106,12 @@
     this.fetchStaffList()
   },
   methods: {
+    resetOwner(){
+      if(this.dataForm.property!=='2'){
+        this.dataForm.ownerId = ''
+        // this.dataForm.phone = ''
+      }
+    },
     // 初始化对话框
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.btnLoading = false
@@ -208,6 +214,7 @@
           }
         })
         this.dataForm.phone = selectedStaff[0].phone
+        this.dataForm.deptid = selectedStaff[0].deptid
       } else {
         this.dataForm.phone = ''
       }
diff --git a/src/views/car/carList.vue b/src/views/car/carList.vue
index 8d924ff..4ff07ab 100644
--- a/src/views/car/carList.vue
+++ b/src/views/car/carList.vue
@@ -105,11 +105,11 @@
           value: 'propertyStr',
           align: 'center'
         },
-        // {
-        //   text: '车主姓名',
-        //   value: 'ownerName',
-        //   align: 'center'
-        // },
+        {
+          text: '车主姓名',
+          value: 'ownerName',
+          align: 'center'
+        },
         {
           text: '车主联系电话',
           value: 'phone',
diff --git a/src/views/ctrl/index.vue b/src/views/ctrl/index.vue
index fd36f2b..29923af 100644
--- a/src/views/ctrl/index.vue
+++ b/src/views/ctrl/index.vue
@@ -50,12 +50,13 @@
         <in-out-today />
       </el-col>
 
-      <el-col :span="7" class="chart-block">
+      <el-col id="dev-count"  :span="10" class="chart-block">
         <div class="chart-title">各类型设备安装数量</div>
         <dev-count />
       </el-col>
 
-      <el-col id="pass-count" :span="10" class="chart-block">
+      <!--<el-col id="pass-count" class="chart-block">-->
+      <el-col :span="7" class="chart-block">
         <div class="chart-title">进出营数量统计</div>
         <in-out-count />
       </el-col>
@@ -121,7 +122,7 @@
 <style scoped>
   .app-wrapper {
     background-color: #e9e9e9;
-    padding-bottom: 20px;
+    padding-bottom: 10px;
   }
 
   .sub-data-block {
@@ -129,6 +130,7 @@
     border-radius: 16px;
     float: left;
     margin: 10px;
+    margin-bottom: 0px;
     box-shadow: 1px 1px 5px #999;
   }
   .sub-title {
@@ -136,36 +138,38 @@
     text-align: center;
     font-family: 'Microsoft YaHei';
     color: #fff;
-    font-size: 24px;
-    padding: 10px;
+    font-size: 20px;
+    padding-top: 10px;
+    padding-bottom: 0px;
   }
   .statis-block {
     text-align: center;
     margin: 0px 10px 0px 10px;
-    padding: 0px 10px 10px 10px;
+    padding: 0px 10px 5px 10px;
     color: #fff;
     font-weight: bold;
     letter-spacing: 1px;
-    font-size: 24px;
+    font-size: 20px;
   }
   .big-size {
-    font-size: 64px;
+    font-size: 35px;
   }
 
   .chart-title {
     font-family: 'Microsoft YaHei';
     color: #000000;
     font-weight: bold;
-    font-size: 20px;
+    font-size: 18px;
     text-align: center;
     padding: 10px;
   }
   .chart-block {
     margin-left: 20px;
-    margin-top: 20px;
+    margin-top: 10px;
     border-radius: 16px;
     background-color: #FFFFFF;
     box-shadow: 1px 1px 5px #999;
+    height: 37vh;
   }
 
   #today-visitor {
@@ -187,7 +191,7 @@
     background-image: linear-gradient(to right, #ffa800, #ce7e00);
   }
 
-  #pass-count, #dev-alarm-count {
+  #dev-count, #dev-alarm-count {
     width: calc(250vw / 6 - 70px);
   }
 </style>
diff --git a/src/views/ctrl/overview.vue b/src/views/ctrl/overview.vue
index 62e1105..49ed928 100644
--- a/src/views/ctrl/overview.vue
+++ b/src/views/ctrl/overview.vue
@@ -59,26 +59,52 @@
           <i v-else class="el-icon-arrow-down"/>
         </span>
       </div>
-      <transition name="el-collapse-transition">
-        <el-scrollbar
-          v-show="tableShow"
-          :style="{ visibility: tableShow ? 'visible' : 'hidden'}"
-          :class="{ moredatascollor: alarmList.length > 6 }"
-          :native="false">
-          <el-table
-            :data="alarmList"
-            class="alarm-list-table"
-            border
-            stripe
-            @row-click="alarmRowClick">
-            <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{ scope.row[column.value] }}
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-scrollbar>
-      </transition>
+      <div v-show="alarmList.length > 4 && tableShow">
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 32px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 231px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          height="200"
+          style="border-left: 1px solid #2470AC;"
+          v-if="tableShow"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-show="alarmList.length < 5 && tableShow">
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          v-if="tableShow"
+          style="border: 1px solid #2470AC"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
     </div>
 
     <!-- 中间平面图区域 -->
@@ -145,9 +171,13 @@
         class="point-camera"
         @click="detailDev(item, $event)" />
     </div>
-
     <!-- 平面图区域设备类型按钮 -->
-    <div v-show="showType" class="bottom-center" :style="{ width: cameraTypeNum*btnwidth + 'px'}">
+    <div class="bottom-center" :style="{ width: btnNum*btnwidth + 'px'}">
+        <el-col v-show="btnNum!==1" ref="all" class="dev-icon dev-type-selected" @click.native="selectDevByType('all', $event)">
+          <img v-if="checkDevType[0]" src="@/assets/overview_images/icons/icon-all-checked.png">
+          <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
+          <span>全部</span>
+        </el-col>
       <el-col class="dev-icon" @click.native="selectDevByType('4', $event)">
         <img id="4-1-img" v-if="checkDevType1[0]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="4-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
@@ -178,20 +208,6 @@
         <img id="11-2-img" v-else src="@/assets/overview_images/icons/half-camera-blue.png">
         <span>标准半球</span>
       </el-col>
-    </div>
-    <!-- 平面图区域设备类型按钮 -->
-    <div v-show="!showType"class="bottom-center" :style="{ width: btnNum*btnwidth + 'px'}">
-        <el-col ref="all" class="dev-icon dev-type-selected" @click.native="selectDevByType('all', $event)">
-          <img v-if="checkDevType[0]" src="@/assets/overview_images/icons/icon-all-checked.png">
-          <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
-          <span>全部</span>
-        </el-col>
-        <el-col ref="camera" :class="cameraClass" @click.native="showType=!showType;selectDevByType('camera', $event)">
-        <!--<el-col ref="camera" class="dev-icon" @click.native="selectDevByType('camera', $event)">-->
-          <img id="cam_img_red" v-if="checkDevType[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-          <img id="cam_img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-          <span>摄像头</span>
-        </el-col>
         <el-col v-show="showFence" class="dev-icon" @click.native="selectDevByType('fence', $event)">
           <img v-if="checkDevType[2]" src="@/assets/overview_images/icons/icon-fence-checked.png">
           <img v-else src="@/assets/overview_images/icons/icon-fence-unchecked.png">
@@ -372,7 +388,7 @@
           height: 789
         }, // 屏幕窗口尺寸
         imgUrl: require('../../assets/overview_images/icons/icon-camera-point.png'),
-        btnNum: 3,
+        btnNum: 8,
         cameraTypeNum: 6,
         btnwidth: 210,
         halfLeft: 0,
@@ -498,25 +514,25 @@
             }
           }
         }
-        //跟换菜单
-        var item = ['人脸识别','车牌轨迹','周界防护','标准数字','智能球形','标准半球']
-        for(var i=0;i<item.length;i++){
-          if(item[i]===val.target.innerText){
-            return
-          }
-        }
-        if(val.target.id.endsWith('-1-img')||val.target.id.endsWith('-2-img')|| val.target.id==='cam_img' || val.target.id==='cam_img_red'){
-          return
-        }
-        if( val.target.innerText!=='摄像头') {
-          this.showType = false
-          const devTypes = document.querySelectorAll('.dev-icon')
-            for(var i=0;i<this.checkDevType.length;i++) {
-              if (this.checkDevType[i]) {
-                devTypes[i+6].className += ' dev-type-selected'
-              }
-            }
-        }
+        // //跟换菜单
+        // var item = ['人脸识别','车牌轨迹','周界防护','标准数字','智能球形','标准半球']
+        // for(var i=0;i<item.length;i++){
+        //   if(item[i]===val.target.innerText){
+        //     return
+        //   }
+        // }
+        // if(val.target.id.endsWith('-1-img')||val.target.id.endsWith('-2-img')|| val.target.id==='cam_img' || val.target.id==='cam_img_red'){
+        //   return
+        // }
+        // if( val.target.innerText!=='摄像头') {
+        //   this.showType = false
+        //   const devTypes = document.querySelectorAll('.dev-icon')
+        //     for(var i=0;i<this.checkDevType.length;i++) {
+        //       if (this.checkDevType[i]) {
+        //         devTypes[i+6].className += ' dev-type-selected'
+        //       }
+        //     }
+        // }
       },
       webSocket() {
         const that = this
@@ -586,7 +602,7 @@
         }else if(pic==='3'){
           this.changeMap('tg_4_1')
         }else if(pic==='4'){
-          this.changeMap('tg_4_1')
+          this.changeMap('tg_4_5')
         }
         setTimeout(() => {
           var obj = document.getElementById(val.toString());
@@ -771,7 +787,11 @@
           this.checkDevType1 = [false, false, false, false, false, false]
           // 添加选中的样式
           if (typeof event === 'undefined') {
-            devTypes[6].className += ' dev-type-selected'
+            if(this.btnNum===1){
+              devTypes[1].className += ' dev-type-selected'
+            }else{
+              devTypes[0].className += ' dev-type-selected'
+            }
           } else {
             event.currentTarget.className += ' dev-type-selected'
           }
@@ -1017,7 +1037,7 @@
           this.isMain = true
           // this.devListParams.picture = '1'
           this.imgSizeOriginal = { width: 2245, height: 1586 }
-          this.btnNum  = 3
+          this.btnNum  = 8
           this.cameraTypeNum  = 6
           this.showFence = true // 显示电子围栏
           this.showTemp = false // 隐藏温湿度设备
@@ -1027,6 +1047,7 @@
           this.showSubTabGuider = false
           this.showFloorThree = false
           this.showFloorFour = false
+          this.selectDevByType('all')
         } else if (index === 'tg_3_1') {
           this.bgImageSrc = tg_3_1
           // this.devListParams.picture = '2'
@@ -1037,6 +1058,7 @@
           this.showTemp = true // 隐藏温湿度
           this.showSmoking = true // 隐藏烟感
           this.showSound = true // 隐藏声光报警器
+          this.selectDevByType('all')
         } else if (index === 'tg_4_1') {
           this.bgImageSrc = tg_4_1
           // this.devListParams.picture = '3'
@@ -1048,18 +1070,19 @@
           this.showTemp = true // 显示温湿度
           this.showSmoking = true // 显示烟感
           this.showSound = true // 显示声光报警器
+          this.selectDevByType('all')
         } else if (index === 'tg_4_5') {
           this.bgImageSrc = tg_4_5
           // this.devListParams.picture = '4'
           this.imgSizeOriginal = { width: 2245, height: 1586 }
-          this.btnNum  = 2
+          this.btnNum  = 1
           this.cameraTypeNum  = 1
           this.showFence = false // 隐藏电子围栏
           this.showTemp = false // 隐藏温湿度
           this.showSmoking = false // 隐藏烟感
           this.showSound = false // 隐藏声光报警器
+          this.selectDevByType('4')
         }
-        this.selectDevByType('all')
       },
       // 查询并显示设备详情
       detailDev(dev, event) {
@@ -1201,10 +1224,14 @@
     left: 50%; transform: translateX(-50%);
     bottom: 25px;
   }
+  .tableLine {
+    margin-top: 9px;
+    width: 463px;
+  }
   .main-page {
     background-size: cover;
     background-color: #023d83;
-    height: 100vh;
+    height: 98vh;
   }
 
   .main-header {
@@ -1362,16 +1389,24 @@
         margin-left: 20px;
       }
     }
-    .el-scrollbar {
-      /*height: 200px;*/
-      width: 100%;
+    // 滚动条的滑块
+    /deep/ .el-table__body-wrapper  {
+      background-color: #023D83;
+      border: 0px solid white;
     }
-    .moredatascollor {
-      height: 200px;
+    /deep/ .el-table--border th.gutter:last-of-type {
+      border: 1px solid #023D83;
+      border-bottom-width: 1px;
+      background-color: #023D83;
     }
-    .el-scrollbar__wrap {
-      overflow-y: auto;
-      overflow-x: hidden;
+    /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
+      background-color: #023D83;
+    }
+    /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+      display: none;
+    }
+    /deep/ .el-scrollbar__wrap {
+      overflow-x: hidden !important;
       margin-bottom: 0px !important;
     }
     .el-table {
@@ -1405,16 +1440,25 @@
     font-size: 15px;
     color: #FFFFFF;
     font-weight: normal;
+    border-color: #2470AC;
   }
-
+  .el-table--border::after, .el-table--group::after, .el-table::before{
+    background-color: #023d83;
+  }
+  .alarm-now-block /deep/ .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
+    border-color: #023d83;
+  }
   .alarm-now-block /deep/ .el-table__row td {
     background-color: #023D83;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ .el-table__body tr:hover > td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ tr.el-table__row--striped td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
 
   .map-tab {
@@ -1601,6 +1645,10 @@
   /*}*/
 
   @media(max-width: 1440px) {
+    .tableLine {
+      margin-top: 0px;
+      width: 343px;
+    }
     .main-title {
       height: 65px;
       padding-top: 16px;
diff --git a/src/views/ctrl/statCharts/devAlarmCount.vue b/src/views/ctrl/statCharts/devAlarmCount.vue
index 7bea059..6b6939e 100644
--- a/src/views/ctrl/statCharts/devAlarmCount.vue
+++ b/src/views/ctrl/statCharts/devAlarmCount.vue
@@ -1,5 +1,6 @@
+<!--suppress ALL -->
 <template>
-  <div>
+  <div style="height: 90%">
     <el-date-picker
       v-model="timeRange"
       :picker-options="pickerOptions"
@@ -7,15 +8,16 @@
       range-separator="至"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
-      style="margin-bottom: 10px;" />
-    <ve-histogram :data="chartData" :settings="settings" height="350px" />
+      style="margin-bottom: 10px;z-index: 10000"
+      size="small"/>
+    <ve-histogram :data="chartData" :settings="settings" :extend="chartExtend" style="margin-top: -50px" height="100%"/>
   </div>
 </template>
 
 <script>
-import { formatToString, getDate, oneDayTime } from '@/utils/calendarUtil'
-import { devAlarmCount } from '@/api/statistics'
 
+import { devAlarmCount } from '@/api/statistics'
+import { formatToString, parseToDate, getDate, oneDayTime } from '@/utils/calendarUtil'
 const now = new Date()
 
 export default {
@@ -30,12 +32,22 @@
         columns: ['name', 'count'],
         rows: []
       },
+      chartExtend: {
+        series: {
+          barMaxWidth: 50
+        },
+        grid: {
+          containLabel: true,
+          bottom: '10%'
+        }
+      },
       settings: {
         labelMap: {
           'name': '设备类型',
-          'count': '报警数量'
+          'count': ''
         },
-        max: [4]
+        max: [4],
+        area: false
       },
       timeRange: [],
       pickerOptions: {
@@ -99,6 +111,13 @@
       devAlarmCount(this.params).then(response => {
         if (response.code === 200) {
           this.chartData.rows = response.data
+          var max = 4
+          for(var i=0;i<response.data.length;i++){
+            if(Number(response.data[i].count)>max){
+              max = Number(response.data[i].count)
+            }
+          }
+          this.settings.max = [max]
         }
       })
     }
diff --git a/src/views/ctrl/statCharts/devCount.vue b/src/views/ctrl/statCharts/devCount.vue
index d3e2902..db55fbe 100644
--- a/src/views/ctrl/statCharts/devCount.vue
+++ b/src/views/ctrl/statCharts/devCount.vue
@@ -1,5 +1,6 @@
 <template>
-  <ve-ring :data="chartData" :settings="settings" />
+  <ve-histogram :data="chartData" :settings="settings" :extend="chartExtend" style="margin-top: -20px" height="100%"/>
+  <!--<ve-ring :data="chartData" :settings="settings" />-->
 </template>
 
 <script>
@@ -9,14 +10,55 @@
   name: 'DevCount',
   data() {
     return {
+      chartExtend: {
+        series: {
+          barMaxWidth: 50
+        },
+        xAxis: {
+          axisLabel: {
+            interval: 0,
+            //换行显示
+            formatter: function(value) {
+              let result = ""; //拼接加\n返回的类目项
+              let maxLength = 2; //每项显示文字个数
+              let valLength = value.length; //X轴类目项的文字个数
+              let rowNumber = Math.ceil(valLength / maxLength); //类目项需要换行的行数
+              if (rowNumber > 1) {
+                //如果文字大于3,
+                for (let i = 0; i < rowNumber; i++) {
+                  let temp = ""; //每次截取的字符串
+                  let start = i * maxLength; //开始截取的位置
+                  let end = start + maxLength; //结束截取的位置
+                  temp = value.substring(start, end) + "\n";
+                  result += temp; //拼接生成最终的字符串
+                }
+                return "{labelText|" + result + "}";
+              } else {
+                return "{labelText|" + value + "}";
+              }
+            },
+            rich: {
+              labelText: {
+                lineHeight: 18
+              }
+            }
+          }
+        }
+      },
       chartData: {
         columns: ['name', 'count'],
         rows: []
       },
       settings: {
-        // legendLimit: 4
-        radius: [60, 100]
-      }
+        labelMap: {
+          'name': '设备类型',
+          'count': ''
+        }
+      },
+      // settings: {
+      //   // legendLimit: 4
+      //   radius: [60, 100]
+      // }
     }
   },
   activated() {
@@ -26,6 +68,9 @@
     fetchData() {
       devCount().then(response => {
         if (response.code === 200) {
+          for(var i=0;i<response.data.length;i++){
+            response.data[i].name = response.data[i].name.replace('防护','')
+          }
           this.chartData.rows = response.data
         }
       })
diff --git a/src/views/ctrl/statCharts/inOutCount.vue b/src/views/ctrl/statCharts/inOutCount.vue
index 502157e..d65ec69 100644
--- a/src/views/ctrl/statCharts/inOutCount.vue
+++ b/src/views/ctrl/statCharts/inOutCount.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="height: 100%">
     <el-date-picker
       v-model="timeRange"
       :picker-options="pickerOptions"
@@ -7,8 +7,9 @@
       range-separator="至"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
-      style="margin-bottom: 10px"/>
-    <ve-line :data="chartData" :settings="settings" height="350px" />
+      size="small"
+      style="margin-bottom: 10px;z-index: 10000"/>
+    <ve-line :data="chartData" :settings="settings" :extend="barExtend" style="margin-top: -50px;" height="93%"/>
   </div>
 </template>
 
@@ -30,6 +31,17 @@
         columns: ['date', 'staff', 'visitor', 'car', 'visitorCar'],
         rows: []
       },
+
+      barExtend:{
+        legend:{  // 隐藏图例
+          x: 'center',
+          y: 'bottom'
+        },
+        grid: {
+          containLabel: true,
+          bottom: '10%'
+        },
+      },
       settings: {
         labelMap: {
           'staff': '内部人员',
@@ -37,11 +49,11 @@
           'car': '内部车辆',
           'visitorCar': '来访车辆'
         },
-        xAxisType: 'time',
+        // xAxisType: 'time',
         max: [4],
         area: false,
         metrics: ['staff', 'visitor', 'car', 'visitorCar'],
-        dimension: ['date']
+        dimension: ['date'],
       },
       timeRange: [],
       pickerOptions: {
@@ -106,7 +118,7 @@
         if (response.code === 200) {
           const data = this.parseStatisticsData(response.data)
           this.chartData.rows = data.rowDatas
-          this.chartData.max = [data.maxCount]
+          this.settings.max = [data.maxCount]
         }
       })
     },
@@ -164,7 +176,7 @@
 
         if (typeof visitorCar !== 'undefined') {
           if (visitorCar.date === date) {
-            visitorCarCount = car.count
+            visitorCarCount = visitorCar.count
             indexVc++
           }
         }
@@ -172,6 +184,18 @@
         if (staffCount + visitorCount + carCount + visitorCarCount > 0) {
           rowDatas.push({ date: date, staff: staffCount, visitor: visitorCount, car: carCount, visitorCar: visitorCarCount })
         }
+        if(maxCount<staffCount){
+          maxCount = staffCount
+        }
+        if(maxCount<visitorCount){
+          maxCount = visitorCount
+        }
+        if(maxCount<carCount){
+          maxCount = carCount
+        }
+        if(maxCount<visitorCarCount){
+          maxCount = visitorCarCount
+        }
         start += oneDayTime
       }
 
diff --git a/src/views/ctrl/statCharts/inOutDoorCount.vue b/src/views/ctrl/statCharts/inOutDoorCount.vue
index ab28cdd..93f3458 100644
--- a/src/views/ctrl/statCharts/inOutDoorCount.vue
+++ b/src/views/ctrl/statCharts/inOutDoorCount.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="height: 100%">
     <el-date-picker
       v-model="timeRange"
       :picker-options="pickerOptions"
@@ -7,8 +7,9 @@
       range-separator="至"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
-      style="margin-bottom: 10px;" />
-    <ve-histogram :data="chartData" :settings="settings" height="350px" />
+      style="margin-bottom: 10px;z-index: 10000"
+      size="small"/>
+    <ve-histogram :data="chartData" :settings="settings" :extend="chartExtend" style="margin-top: -50px"height="93%"/>
   </div>
 </template>
 
@@ -26,11 +27,26 @@
         beginDate: '',
         endDate: ''
       },
+      chartExtend: {
+        legend:{  // 隐藏图例
+          x: 'center',
+          y: 'bottom'
+        },
+        grid: {
+          containLabel: true,
+          bottom: '10%'
+        },
+        series: {
+          barMaxWidth: 50,
+          center: ['50%', '50%']
+        }
+      },
       chartData: {
         columns: ['name', 'person', 'car'],
         rows: []
       },
       settings: {
+        radius: [60, 100],
         labelMap: {
           'person': '人员',
           'car': '车辆'
@@ -102,7 +118,7 @@
         if (response.code === 200) {
           const data = this.parseStatisticsData(response.data)
           this.chartData.rows = data.rowDatas
-          this.chartData.max = [data.maxCount]
+          this.settings.max = [data.maxCount]
         }
       })
     },
diff --git a/src/views/ctrl/statCharts/inOutKeyCount.vue b/src/views/ctrl/statCharts/inOutKeyCount.vue
index fa9a0b7..10108d6 100644
--- a/src/views/ctrl/statCharts/inOutKeyCount.vue
+++ b/src/views/ctrl/statCharts/inOutKeyCount.vue
@@ -1,5 +1,7 @@
 <template>
-  <ve-ring :data="chartData" :settings="settings" />
+  <div style="height: 100%">
+    <ve-ring :data="chartData" :settings="settings" :extend="chartExtend"  height="90%"/>
+  </div>
 </template>
 
 <script>
@@ -9,6 +11,19 @@
   name: 'InOutKeyCount',
   data() {
     return {
+      chartExtend: {
+        legend:{  // 隐藏图例
+          x: 'center',
+          y: 'top'
+        },
+        grid: {
+          containLabel: true,
+          top: '10%'
+        },
+        series: {
+          center: ['50%', '50%']
+        }
+      },
       chartData: {
         columns: ['name', 'count'],
         rows: []
diff --git a/src/views/ctrl/statCharts/inOutToday.vue b/src/views/ctrl/statCharts/inOutToday.vue
index c37fa7b..ae67856 100644
--- a/src/views/ctrl/statCharts/inOutToday.vue
+++ b/src/views/ctrl/statCharts/inOutToday.vue
@@ -1,5 +1,7 @@
 <template>
-  <ve-ring :data="chartData" :settings="settings" />
+  <div style="height: 100%">
+    <ve-ring :data="chartData" :settings="settings" :extend="chartExtend"  height="90%"/>
+  </div>
 </template>
 
 <script>
@@ -18,6 +20,15 @@
           { count: 1, name: '来访车辆' }
         ]
       },
+      chartExtend: {
+        legend:{  // 隐藏图例
+          x: 'center',
+          y: 'top'
+        },
+        series: {
+          center: ['50%', '50%']
+        }
+      },
       settings: {
         radius: [60, 100]
       }
diff --git a/src/views/deviceManage/deviceDetail.vue b/src/views/deviceManage/deviceDetail.vue
index 701052d..8245327 100644
--- a/src/views/deviceManage/deviceDetail.vue
+++ b/src/views/deviceManage/deviceDetail.vue
@@ -9,7 +9,7 @@
         <!--</el-col>-->
         <el-col :span="12">
           <el-form-item label="设备编号">
-            <el-input v-model.trim="dataForm.name" disabled type="text"/>
+            <el-input v-model.trim="dataForm.devcode" disabled type="text"/>
             <!--<span>{{ dataForm.devcode }}</span>-->
           </el-form-item>
         </el-col>
diff --git a/src/views/layout/components/AppHeader.vue b/src/views/layout/components/AppHeader.vue
index c3235b4..2e45954 100644
--- a/src/views/layout/components/AppHeader.vue
+++ b/src/views/layout/components/AppHeader.vue
@@ -1,12 +1,12 @@
 <template>
   <!--<div :style="{backgroundImage:'url('+headerUrl+')'}" class="app-header">-->
   <div style="background-color: #0078ff;" class="app-header">
-    <h3>{{ title }}</h3>
+    <h3 @click="backToIndex">{{ title }}</h3>
     <!--子系统选项-->
     <el-dropdown class="systemSelect" @command="handleCommand">
       <span class="el-dropdown-link" style="color: white">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
       </span>
-      <el-dropdown-menu slot="dropdown" >
+      <el-dropdown-menu slot="dropdown" style="z-index: 10000" >
         <el-dropdown-item>
           <span style="display:block;" @click="backToIndex">回首页</span>
         </el-dropdown-item>
@@ -15,7 +15,7 @@
     </el-dropdown>
 
     <div v-show="currentSystem.code === 'ctrl'" class="back-to-overview">
-      <el-button type="info" round @click="backToOverview">运行总览</el-button>
+      <el-button type="info" round @click="backToOverview" style="background-color: rgba(255,255,255,0.31);border: 0px">运行总览</el-button>
     </div>
 
     <el-dropdown class="avatar-container">
diff --git a/src/views/overview/doorIndex.vue b/src/views/overview/doorIndex.vue
index 5d2dce2..7cd40ff 100644
--- a/src/views/overview/doorIndex.vue
+++ b/src/views/overview/doorIndex.vue
@@ -58,26 +58,51 @@
           <i v-else class="el-icon-arrow-down"/>
         </span>
       </div>
-      <transition name="el-collapse-transition">
-        <el-scrollbar
-          v-show="tableShow"
-          :style="{ visibility: tableShow ? 'visible' : 'hidden'}"
-          :class="{ moredatascollor: alarmList.length > 6 }"
-          :native="false">
-          <el-table
-            :data="alarmList"
-            class="alarm-list-table"
-            border
-            stripe
-            @row-click="alarmRowClick">
-            <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{ scope.row[column.value] }}
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-scrollbar>
-      </transition>
+      <div v-show="alarmList.length > 4 && tableShow">
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 32px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 231px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          height="200"
+          style="border-left: 1px solid #2470AC;"
+          v-if="tableShow"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-show="alarmList.length < 5 && tableShow">
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          v-if="tableShow"
+          style="border: 1px solid #2470AC"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
     </div>
 
     <!-- 中间平面图区域 -->
@@ -730,9 +755,12 @@
   .main-page {
     background-size: cover;
     background-color: #023d83;
-    height: 100vh;
+    height: 98vh;
   }
-
+  .tableLine {
+    margin-top: 9px;
+    width: 463px;
+  }
   .main-header {
     width: 100vw;
   }
@@ -863,16 +891,24 @@
         margin-left: 20px;
       }
     }
-    .el-scrollbar {
-      /*height: 200px;*/
-      width: 100%;
+    // 滚动条的滑块
+    /deep/ .el-table__body-wrapper  {
+      background-color: #023D83;
+      border: 0px solid white;
     }
-    .moredatascollor {
-      height: 200px;
+    /deep/ .el-table--border th.gutter:last-of-type {
+      border: 1px solid #023D83;
+      border-bottom-width: 1px;
+      background-color: #023D83;
     }
-    .el-scrollbar__wrap {
-      overflow-y: auto;
-      overflow-x: hidden;
+    /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
+      background-color: #023D83;
+    }
+    /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+      display: none;
+    }
+    /deep/ .el-scrollbar__wrap {
+      overflow-x: hidden !important;
       margin-bottom: 0px !important;
     }
     .el-table {
@@ -906,16 +942,25 @@
     font-size: 15px;
     color: #FFFFFF;
     font-weight: normal;
+    border-color: #2470AC;
   }
-
+  .el-table--border::after, .el-table--group::after, .el-table::before{
+    background-color: #023d83;
+  }
+  .alarm-now-block /deep/ .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
+    border-color: #023d83;
+  }
   .alarm-now-block /deep/ .el-table__row td {
     background-color: #023D83;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ .el-table__body tr:hover > td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ tr.el-table__row--striped td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
 
   .map-tab {
@@ -1091,6 +1136,10 @@
   /*}*/
 
   @media(max-width: 1440px) {
+    .tableLine {
+      margin-top: 0px;
+      width: 343px;
+    }
     .main-title {
       height: 65px;
       padding-top: 16px;
diff --git a/src/views/overview/fenceIndex.vue b/src/views/overview/fenceIndex.vue
index 9466288..62a35e8 100644
--- a/src/views/overview/fenceIndex.vue
+++ b/src/views/overview/fenceIndex.vue
@@ -58,26 +58,52 @@
           <i v-else class="el-icon-arrow-down"/>
         </span>
       </div>
-      <transition name="el-collapse-transition">
-        <el-scrollbar
-          v-show="tableShow"
-          :style="{ visibility: tableShow ? 'visible' : 'hidden'}"
-          :class="{ moredatascollor: alarmList.length > 6 }"
-          :native="false">
-          <el-table
-            :data="alarmList"
-            class="alarm-list-table"
-            border
-            stripe
-            @row-click="alarmRowClick">
-            <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{ scope.row[column.value] }}
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-scrollbar>
-      </transition>
+      <div v-show="alarmList.length > 4 && tableShow">
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 32px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 231px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          height="200"
+          style="border-left: 1px solid #2470AC;"
+          v-if="tableShow"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-show="alarmList.length < 5 && tableShow">
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          v-if="tableShow"
+          style="border: 1px solid #2470AC"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
     </div>
 
     <!-- 中间平面图区域 -->
@@ -725,10 +751,14 @@
       font-weight: normal;
     }
   }
+  .tableLine {
+    margin-top: 9px;
+    width: 463px;
+  }
   .main-page {
     background-size: cover;
     background-color: #023d83;
-    height: 100vh;
+    height: 98vh;
   }
 
   .main-header {
@@ -859,16 +889,24 @@
         margin-left: 20px;
       }
     }
-    .el-scrollbar {
-      /*height: 200px;*/
-      width: 100%;
+    // 滚动条的滑块
+    /deep/ .el-table__body-wrapper  {
+      background-color: #023D83;
+      border: 0px solid white;
     }
-    .moredatascollor {
-      height: 200px;
+    /deep/ .el-table--border th.gutter:last-of-type {
+      border: 1px solid #023D83;
+      border-bottom-width: 1px;
+      background-color: #023D83;
     }
-    .el-scrollbar__wrap {
-      overflow-y: auto;
-      overflow-x: hidden;
+    /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
+      background-color: #023D83;
+    }
+    /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+      display: none;
+    }
+    /deep/ .el-scrollbar__wrap {
+      overflow-x: hidden !important;
       margin-bottom: 0px !important;
     }
     .el-table {
@@ -902,16 +940,25 @@
     font-size: 15px;
     color: #FFFFFF;
     font-weight: normal;
+    border-color: #2470AC;
   }
-
+  .el-table--border::after, .el-table--group::after, .el-table::before{
+    background-color: #023d83;
+  }
+  .alarm-now-block /deep/ .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
+    border-color: #023d83;
+  }
   .alarm-now-block /deep/ .el-table__row td {
     background-color: #023D83;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ .el-table__body tr:hover > td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ tr.el-table__row--striped td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
 
   .map-tab {
@@ -1087,6 +1134,10 @@
   /*}*/
 
   @media(max-width: 1440px) {
+    .tableLine {
+      margin-top: 0px;
+      width: 343px;
+    }
     .main-title {
       height: 65px;
       padding-top: 16px;
diff --git a/src/views/overview/keyIndex.vue b/src/views/overview/keyIndex.vue
index 37405a8..a461c94 100644
--- a/src/views/overview/keyIndex.vue
+++ b/src/views/overview/keyIndex.vue
@@ -33,20 +33,6 @@
             <span v-text="dev.alarm"/>
           </div>
         </el-col>
-
-        <!--<el-col :span="6" class="sub-data-block dev-offline">-->
-          <!--<div class="statis-block">-->
-            <!--<span v-text="dev.offLine"/>-->
-          <!--</div>-->
-          <!--<div class="sub-title">离线</div>-->
-        <!--</el-col>-->
-
-        <!--<el-col :span="6" class="sub-data-block dev-closed">-->
-          <!--<div class="statis-block">-->
-            <!--<span v-text="dev.closed"/>-->
-          <!--</div>-->
-          <!--<div class="sub-title">关闭</div>-->
-        <!--</el-col>-->
       </el-row>
     </div>
 
@@ -58,26 +44,52 @@
           <i v-else class="el-icon-arrow-down"/>
         </span>
       </div>
-      <transition name="el-collapse-transition">
-        <el-scrollbar
-          v-show="tableShow"
-          :style="{ visibility: tableShow ? 'visible' : 'hidden'}"
-          :class="{ moredatascollor: alarmList.length > 6 }"
-          :native="false">
-          <el-table
-            :data="alarmList"
-            class="alarm-list-table"
-            border
-            stripe
-            @row-click="alarmRowClick">
-            <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{ scope.row[column.value] }}
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-scrollbar>
-      </transition>
+      <div v-show="alarmList.length > 4 && tableShow">
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 32px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 231px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          height="200"
+          style="border-left: 1px solid #2470AC;"
+          v-if="tableShow"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-show="alarmList.length < 5 && tableShow">
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          v-if="tableShow"
+          style="border: 1px solid #2470AC"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
     </div>
 
     <!-- 中间平面图区域 -->
@@ -95,49 +107,16 @@
     </div>
 
     <!-- 平面图区域设备类型按钮 -->
-    <div v-show="showType" class="bottom-center" :style="{ width: btnwidth + 'px'}">
-      <el-col class="dev-icon" @click.native="selectDevByType('4', $event)">
-        <img id="4-1-img" v-if="checkDevType1[0]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-        <img id="4-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-        <span>人脸识别</span>
-      </el-col>
-      <!--<el-col class="dev-icon" @click.native="selectDevByType('5', $event)">-->
-        <!--<img id="5-1-img" v-if="checkDevType1[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
-        <!--<img id="5-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
-        <!--<span>车牌轨迹</span>-->
-      <!--</el-col>-->
-      <!--<el-col class="dev-icon" @click.native="selectDevByType('8', $event)">-->
-        <!--<img id="8-1-img" v-if="checkDevType1[2]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
-        <!--<img id="8-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
-        <!--<span>周界防护</span>-->
-      <!--</el-col>-->
-      <!--<el-col class="dev-icon" @click.native="selectDevByType('9', $event)">-->
-        <!--<img id="9-1-img" v-if="checkDevType1[3]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
-        <!--<img id="9-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
-        <!--<span>标准数字</span>-->
-      <!--</el-col>-->
-      <!--<el-col class="dev-icon" @click.native="selectDevByType('10', $event)">-->
-        <!--<img id="10-1-img" v-if="checkDevType1[4]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
-        <!--<img id="10-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
-        <!--<span>智能球形</span>-->
-      <!--</el-col>-->
-      <!--<el-col class="dev-icon" @click.native="selectDevByType('11', $event)">-->
-        <!--<img id="11-1-img" v-if="checkDevType1[5]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
-        <!--<img id="11-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
-        <!--<span>标准半球</span>-->
-      <!--</el-col>-->
-    </div>
-    <!-- 平面图区域设备类型按钮 -->
     <div v-show="!showType"class="bottom-center" :style="{ width: cameraTypeNum*btnwidth + 'px'}">
       <el-col ref="all" class="dev-icon dev-type-selected" @click.native="selectDevByType('all', $event)">
         <img v-if="checkDevType[0]" src="@/assets/overview_images/icons/icon-all-checked.png">
         <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
         <span>全部</span>
       </el-col>
-      <el-col ref="camera" :class="cameraClass" @click.native="showType=!showType;selectDevByType('camera', $event)">
-        <img id="cam_img_red" v-if="checkDevType[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-        <img id="cam_img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-        <span>摄像头</span>
+      <el-col class="dev-icon" @click.native="selectDevByType('camera4', $event)">
+        <img id="4-1-img" v-if="checkDevType[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
+        <img id="4-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
+        <span>人脸识别</span>
       </el-col>
       <el-col v-show="showTemp" class="dev-icon" @click.native="selectDevByType('temperature', $event)">
         <img v-if="checkDevType[2]" src="@/assets/overview_images/icons/icon-temperature-checked.png">
@@ -364,7 +343,6 @@
       }, // 设备详情表单
       cameraClass:'dev-icon',
       showType : false,
-      checkDevType1: [false, false, false, false, false, false], // 摄像头类型
       checkDevType: [true, false, false, false, false] // 选中设备类型
     }
   },
@@ -462,7 +440,7 @@
       }else if(pic==='3'){
         this.changeMap('tg_4_1')
       }else if(pic==='4'){
-        this.changeMap('tg_4_1')
+        this.changeMap('tg_4_5')
       }
       setTimeout(() => {
         var obj = document.getElementById(val.toString());
@@ -477,24 +455,6 @@
     handleKeyup(val){ //单击收起摄像头分类
       this.showAlarmDetail  = false
       this.showDevDetail  = false
-      var item = ['人脸识别']
-      for(var i=0;i<item.length;i++){
-        if(item[i]===val.target.innerText){
-          return
-        }
-      }
-      if(val.target.id.endsWith('-1-img')||val.target.id.endsWith('-2-img')|| val.target.id==='cam_img' || val.target.id==='cam_img_red'){
-        return
-      }
-      if( val.target.innerText!=='摄像头') {
-        this.showType = false
-        const devTypes = document.querySelectorAll('.dev-icon')
-        for(var i=0;i<this.checkDevType.length;i++) {
-          if (this.checkDevType[i]) {
-            devTypes[i+1].className += ' dev-type-selected'
-          }
-        }
-      }
     },
     handleSelect(key, keyPath) {
       this.selectDevByType(key,undefined)
@@ -643,14 +603,13 @@
       if(type !== 'camera'){
         // 添加选中的样式
         if (typeof event === 'undefined') {
-          devTypes[1].className += ' dev-type-selected'
+          devTypes[0].className += ' dev-type-selected'
         } else {
           event.currentTarget.className += ' dev-type-selected'
         }
       }
       if(type!=='camera'){
         this.checkDevType = [false, false, false, false, false]
-        this.checkDevType1 = [false, false, false, false, false, false]
       }
       if (type === 'all') {
         if(this.bgImageSrc===tg_4_5){
@@ -660,14 +619,7 @@
         }
         // this.devListParams.deviceTypes = []
         this.checkDevType[0] = true
-      } else if(type==='camera'){
-        for(var i=0;i<this.checkDevType1.length;i++){
-          if(this.checkDevType1[i]) {
-            devTypes[i].className += ' dev-type-selected'
-          }
-        }
-        return
-      } else if (type === 'temperature') {
+      }  else if (type === 'temperature') {
         this.devListParams.deviceTypes = temperatureTypes.toString()
         this.checkDevType[2] = true
       } else if (type === 'smoking') {
@@ -676,30 +628,24 @@
       } else if (type === 'sound') {
         this.devListParams.deviceTypes = soundTypes.toString()
         this.checkDevType[4] = true
-      }else if(type === '4'){
+      }else if(type === 'camera4'){
         this.devListParams.deviceTypes = '4'
         this.checkDevType[1] = true
-        this.checkDevType1[0] = true
       }else if(type === '5'){
         this.devListParams.deviceTypes = '5'
         this.checkDevType[1] = true
-        this.checkDevType1[1] = true
       }else if(type === '8'){
         this.devListParams.deviceTypes = '8'
         this.checkDevType[1] = true
-        this.checkDevType1[2] = true
       }else if(type === '9'){
         this.devListParams.deviceTypes = '9'
         this.checkDevType[1] = true
-        this.checkDevType1[3] = true
       }else if(type === '10'){
         this.devListParams.deviceTypes = '10'
         this.checkDevType[1] = true
-        this.checkDevType1[4] = true
       }else if(type === '11'){
         this.devListParams.deviceTypes = '11'
         this.checkDevType[1] = true
-        this.checkDevType1[5] = true
       }
       this.fetchDeviceData()
       // if(this.checkDevType[1]){
@@ -866,18 +812,13 @@
       }else{
         this.devListParams.deviceTypes = '1,2,4,12'
       }
-      // this.devListParams.deviceTypes = []
       if (index === 'tg_main') {
-        // this.imgSizeOriginal = { width: 2245, height: 1586 }
         this.devListParams.picture = '1'
       }else if (index === 'tg_3_1') {
-        // this.imgSizeOriginal = { width: 2245, height: 1586 }
         this.devListParams.picture = '2'
       } else if (index === 'tg_4_1') {
-        // this.imgSizeOriginal = { width: 2218, height: 2169 }
         this.devListParams.picture = '3'
       }else if (index === 'tg_4_5') {
-        // this.imgSizeOriginal = { width: 2245, height: 1586 }
         this.devListParams.picture = '4'
       }
       overviewDeviceList(this.devListParams).then(response => {
@@ -1060,10 +1001,14 @@
   /deep/ .el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
     border-bottom-width: 0px;
   }
+  .tableLine {
+    margin-top: 9px;
+    width: 463px;
+  }
   .main-page {
     background-size: cover;
     background-color: #023d83;
-    height: 100vh;
+    height: 98vh;
   }
 
   .main-header {
@@ -1194,16 +1139,24 @@
         margin-left: 20px;
       }
     }
-    .el-scrollbar {
-      /*height: 200px;*/
-      width: 100%;
+    // 滚动条的滑块
+    /deep/ .el-table__body-wrapper  {
+      background-color: #023D83;
+      border: 0px solid white;
     }
-    .moredatascollor {
-      height: 200px;
+    /deep/ .el-table--border th.gutter:last-of-type {
+      border: 1px solid #023D83;
+      border-bottom-width: 1px;
+      background-color: #023D83;
     }
-    .el-scrollbar__wrap {
-      overflow-y: auto;
-      overflow-x: hidden;
+    /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
+      background-color: #023D83;
+    }
+    /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+      display: none;
+    }
+    /deep/ .el-scrollbar__wrap {
+      overflow-x: hidden !important;
       margin-bottom: 0px !important;
     }
     .el-table {
@@ -1237,16 +1190,25 @@
     font-size: 15px;
     color: #FFFFFF;
     font-weight: normal;
+    border-color: #2470AC;
   }
-
+  .el-table--border::after, .el-table--group::after, .el-table::before{
+    background-color: #023d83;
+  }
+  .alarm-now-block /deep/ .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
+    border-color: #023d83;
+  }
   .alarm-now-block /deep/ .el-table__row td {
     background-color: #023D83;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ .el-table__body tr:hover > td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ tr.el-table__row--striped td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
 
   .map-tab {
@@ -1431,6 +1393,10 @@
   /*}*/
 
   @media(max-width: 1440px) {
+    .tableLine {
+      margin-top: 0px;
+      width: 343px;
+    }
     .main-title {
       height: 65px;
       padding-top: 16px;

diff --git a/config/dev.env.js b/config/dev.env.js
index 6b4622a..095ba33 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -8,4 +8,5 @@
   NODE_ENV: '"development"',
   // BASE_API: '"http://192.168.5.220:20311"'
   BASE_API: '"http://111.198.10.15:11631"'
+  // BASE_API: '"http://192.168.5.220:20311"'
 })
diff --git a/config/prod.env.js b/config/prod.env.js
index f2501d0..ccbc615 100644
--- a/config/prod.env.js
+++ b/config/prod.env.js
@@ -1,5 +1,6 @@
 'use strict'
 module.exports = {
   NODE_ENV: '"production"',
-  BASE_API: '"http://192.168.5.220:20311"'
+  // BASE_API: '"http://192.168.5.220:20311"'
+  BASE_API: '"http://111.198.10.15:11631"'
 }
diff --git a/favicon.ico b/favicon.ico
index 34b63ac..bc1bfc5 100644
--- a/favicon.ico
+++ b/favicon.ico
Binary files differ
diff --git a/src/api/visitor.js b/src/api/visitor.js
index 05ed6ea..01a6c26 100644
--- a/src/api/visitor.js
+++ b/src/api/visitor.js
@@ -74,3 +74,14 @@
   })
 }
 
+// 查询人员轨迹
+export function getDetail(devcode) {
+  return request({
+    url: '/device/capturePhoto',
+    method: 'post',
+    params:{
+      devcode: devcode
+    }
+  })
+}
+
diff --git a/src/assets/dashboard_images/icon-defence.png b/src/assets/dashboard_images/icon-defence.png
index 8069376..11b41cb 100644
--- a/src/assets/dashboard_images/icon-defence.png
+++ b/src/assets/dashboard_images/icon-defence.png
Binary files differ
diff --git a/src/utils/calendarUtil.js b/src/utils/calendarUtil.js
index da840c3..e599bdd 100644
--- a/src/utils/calendarUtil.js
+++ b/src/utils/calendarUtil.js
@@ -61,7 +61,32 @@
 
   return yearMonth + '-' + format(day)
 }
+export function formatDateTime(cellval) {
+  var dateVal = cellval + "";//把时间戳转成字符串格式
+  if (cellval != null) {
+    //取得时间戳部分 如：获取 /Date(1545299299910)/ 中的 1545299299910 部分
+    var date = new Date(parseInt(dateVal.replace("/Date(", "")
+      .replace(")/", ""), 10));
+    //获取年，不需要其他操作所以可以直接返回	date.getFullYear()
+    //月份为0-11，所以+1，月份小于10时补个0
+    var month = date.getMonth() + 1 < 10 ? "0"
+      + (date.getMonth() + 1) : date.getMonth() + 1;
+    //获取日
+    var currentDate = date.getDate() < 10 ? "0" + date.getDate()
+      : date.getDate();
+    //获取时间
+    var hours = date.getHours() < 10 ? "0" + date.getHours() : date
+      .getHours();
+    var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes()
+      : date.getMinutes();
+    var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds()
+      : date.getSeconds();
 
+    //返回日期结果，需要时间的话在加上时间
+    return date.getFullYear() + "-" + month + "-" + currentDate+" "+hours+":"+
+      minutes+":"+seconds;
+  }
+}
 // 格式化日期为字符串
 export function formatToString(value, level) {
   const date = new Date(value)
diff --git a/src/views/alarm/alarmDetail.vue b/src/views/alarm/alarmDetail.vue
index 2c94629..8c32ee5 100644
--- a/src/views/alarm/alarmDetail.vue
+++ b/src/views/alarm/alarmDetail.vue
@@ -1,7 +1,7 @@
 <!-- 报警详情 -->
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :model="dataForm" label-well-code="right" label-width="110px">
+    <el-form v-loading="loading" ref="dataForm" :model="dataForm" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="报警编号">
@@ -86,6 +86,7 @@
   name: 'AlarmDetail',
   data() {
     return {
+      loading: true,
       dialogFormVisible: false, // 对话框是否显示
       dialogStatus: '', // 对话框类型：create,update,detail
       dataForm: {
@@ -123,7 +124,7 @@
         this.dataForm = {
           id: row.id
         }
-
+        this.loading = true
         alarmDetail(this.dataForm.id).then(response => {
           if (response.code === 200) {
             this.dataForm = {
@@ -140,7 +141,7 @@
               reason: response.data.reason,
               remark: response.data.remark
             }
-
+            this.loading = false
             // 格式化报警状态
             if (response.data.valid === 1) {
               this.dataForm.validStr = '正在报警'
diff --git a/src/views/car/carAdd.vue b/src/views/car/carAdd.vue
index ddb215f..5f54c93 100644
--- a/src/views/car/carAdd.vue
+++ b/src/views/car/carAdd.vue
@@ -10,7 +10,7 @@
         </el-col>
         <el-col :span="12">
           <el-form-item label="车辆性质" prop="property">
-            <el-radio-group v-model="dataForm.property" :disabled="isDetailMode">
+            <el-radio-group v-model="dataForm.property" :disabled="isDetailMode" @change="resetOwner">
               <el-radio v-for="item in carProperties" :key="item.value" :label="item.value">{{ item.name }}</el-radio>
             </el-radio-group>
           </el-form-item>
@@ -106,6 +106,12 @@
     this.fetchStaffList()
   },
   methods: {
+    resetOwner(){
+      if(this.dataForm.property!=='2'){
+        this.dataForm.ownerId = ''
+        // this.dataForm.phone = ''
+      }
+    },
     // 初始化对话框
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.btnLoading = false
@@ -208,6 +214,7 @@
           }
         })
         this.dataForm.phone = selectedStaff[0].phone
+        this.dataForm.deptid = selectedStaff[0].deptid
       } else {
         this.dataForm.phone = ''
       }
diff --git a/src/views/car/carList.vue b/src/views/car/carList.vue
index 8d924ff..4ff07ab 100644
--- a/src/views/car/carList.vue
+++ b/src/views/car/carList.vue
@@ -105,11 +105,11 @@
           value: 'propertyStr',
           align: 'center'
         },
-        // {
-        //   text: '车主姓名',
-        //   value: 'ownerName',
-        //   align: 'center'
-        // },
+        {
+          text: '车主姓名',
+          value: 'ownerName',
+          align: 'center'
+        },
         {
           text: '车主联系电话',
           value: 'phone',
diff --git a/src/views/ctrl/index.vue b/src/views/ctrl/index.vue
index fd36f2b..29923af 100644
--- a/src/views/ctrl/index.vue
+++ b/src/views/ctrl/index.vue
@@ -50,12 +50,13 @@
         <in-out-today />
       </el-col>
 
-      <el-col :span="7" class="chart-block">
+      <el-col id="dev-count"  :span="10" class="chart-block">
         <div class="chart-title">各类型设备安装数量</div>
         <dev-count />
       </el-col>
 
-      <el-col id="pass-count" :span="10" class="chart-block">
+      <!--<el-col id="pass-count" class="chart-block">-->
+      <el-col :span="7" class="chart-block">
         <div class="chart-title">进出营数量统计</div>
         <in-out-count />
       </el-col>
@@ -121,7 +122,7 @@
 <style scoped>
   .app-wrapper {
     background-color: #e9e9e9;
-    padding-bottom: 20px;
+    padding-bottom: 10px;
   }
 
   .sub-data-block {
@@ -129,6 +130,7 @@
     border-radius: 16px;
     float: left;
     margin: 10px;
+    margin-bottom: 0px;
     box-shadow: 1px 1px 5px #999;
   }
   .sub-title {
@@ -136,36 +138,38 @@
     text-align: center;
     font-family: 'Microsoft YaHei';
     color: #fff;
-    font-size: 24px;
-    padding: 10px;
+    font-size: 20px;
+    padding-top: 10px;
+    padding-bottom: 0px;
   }
   .statis-block {
     text-align: center;
     margin: 0px 10px 0px 10px;
-    padding: 0px 10px 10px 10px;
+    padding: 0px 10px 5px 10px;
     color: #fff;
     font-weight: bold;
     letter-spacing: 1px;
-    font-size: 24px;
+    font-size: 20px;
   }
   .big-size {
-    font-size: 64px;
+    font-size: 35px;
   }
 
   .chart-title {
     font-family: 'Microsoft YaHei';
     color: #000000;
     font-weight: bold;
-    font-size: 20px;
+    font-size: 18px;
     text-align: center;
     padding: 10px;
   }
   .chart-block {
     margin-left: 20px;
-    margin-top: 20px;
+    margin-top: 10px;
     border-radius: 16px;
     background-color: #FFFFFF;
     box-shadow: 1px 1px 5px #999;
+    height: 37vh;
   }
 
   #today-visitor {
@@ -187,7 +191,7 @@
     background-image: linear-gradient(to right, #ffa800, #ce7e00);
   }
 
-  #pass-count, #dev-alarm-count {
+  #dev-count, #dev-alarm-count {
     width: calc(250vw / 6 - 70px);
   }
 </style>
diff --git a/src/views/ctrl/overview.vue b/src/views/ctrl/overview.vue
index 62e1105..49ed928 100644
--- a/src/views/ctrl/overview.vue
+++ b/src/views/ctrl/overview.vue
@@ -59,26 +59,52 @@
           <i v-else class="el-icon-arrow-down"/>
         </span>
       </div>
-      <transition name="el-collapse-transition">
-        <el-scrollbar
-          v-show="tableShow"
-          :style="{ visibility: tableShow ? 'visible' : 'hidden'}"
-          :class="{ moredatascollor: alarmList.length > 6 }"
-          :native="false">
-          <el-table
-            :data="alarmList"
-            class="alarm-list-table"
-            border
-            stripe
-            @row-click="alarmRowClick">
-            <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{ scope.row[column.value] }}
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-scrollbar>
-      </transition>
+      <div v-show="alarmList.length > 4 && tableShow">
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 32px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 231px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          height="200"
+          style="border-left: 1px solid #2470AC;"
+          v-if="tableShow"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-show="alarmList.length < 5 && tableShow">
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          v-if="tableShow"
+          style="border: 1px solid #2470AC"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
     </div>
 
     <!-- 中间平面图区域 -->
@@ -145,9 +171,13 @@
         class="point-camera"
         @click="detailDev(item, $event)" />
     </div>
-
     <!-- 平面图区域设备类型按钮 -->
-    <div v-show="showType" class="bottom-center" :style="{ width: cameraTypeNum*btnwidth + 'px'}">
+    <div class="bottom-center" :style="{ width: btnNum*btnwidth + 'px'}">
+        <el-col v-show="btnNum!==1" ref="all" class="dev-icon dev-type-selected" @click.native="selectDevByType('all', $event)">
+          <img v-if="checkDevType[0]" src="@/assets/overview_images/icons/icon-all-checked.png">
+          <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
+          <span>全部</span>
+        </el-col>
       <el-col class="dev-icon" @click.native="selectDevByType('4', $event)">
         <img id="4-1-img" v-if="checkDevType1[0]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="4-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
@@ -178,20 +208,6 @@
         <img id="11-2-img" v-else src="@/assets/overview_images/icons/half-camera-blue.png">
         <span>标准半球</span>
       </el-col>
-    </div>
-    <!-- 平面图区域设备类型按钮 -->
-    <div v-show="!showType"class="bottom-center" :style="{ width: btnNum*btnwidth + 'px'}">
-        <el-col ref="all" class="dev-icon dev-type-selected" @click.native="selectDevByType('all', $event)">
-          <img v-if="checkDevType[0]" src="@/assets/overview_images/icons/icon-all-checked.png">
-          <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
-          <span>全部</span>
-        </el-col>
-        <el-col ref="camera" :class="cameraClass" @click.native="showType=!showType;selectDevByType('camera', $event)">
-        <!--<el-col ref="camera" class="dev-icon" @click.native="selectDevByType('camera', $event)">-->
-          <img id="cam_img_red" v-if="checkDevType[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-          <img id="cam_img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-          <span>摄像头</span>
-        </el-col>
         <el-col v-show="showFence" class="dev-icon" @click.native="selectDevByType('fence', $event)">
           <img v-if="checkDevType[2]" src="@/assets/overview_images/icons/icon-fence-checked.png">
           <img v-else src="@/assets/overview_images/icons/icon-fence-unchecked.png">
@@ -372,7 +388,7 @@
           height: 789
         }, // 屏幕窗口尺寸
         imgUrl: require('../../assets/overview_images/icons/icon-camera-point.png'),
-        btnNum: 3,
+        btnNum: 8,
         cameraTypeNum: 6,
         btnwidth: 210,
         halfLeft: 0,
@@ -498,25 +514,25 @@
             }
           }
         }
-        //跟换菜单
-        var item = ['人脸识别','车牌轨迹','周界防护','标准数字','智能球形','标准半球']
-        for(var i=0;i<item.length;i++){
-          if(item[i]===val.target.innerText){
-            return
-          }
-        }
-        if(val.target.id.endsWith('-1-img')||val.target.id.endsWith('-2-img')|| val.target.id==='cam_img' || val.target.id==='cam_img_red'){
-          return
-        }
-        if( val.target.innerText!=='摄像头') {
-          this.showType = false
-          const devTypes = document.querySelectorAll('.dev-icon')
-            for(var i=0;i<this.checkDevType.length;i++) {
-              if (this.checkDevType[i]) {
-                devTypes[i+6].className += ' dev-type-selected'
-              }
-            }
-        }
+        // //跟换菜单
+        // var item = ['人脸识别','车牌轨迹','周界防护','标准数字','智能球形','标准半球']
+        // for(var i=0;i<item.length;i++){
+        //   if(item[i]===val.target.innerText){
+        //     return
+        //   }
+        // }
+        // if(val.target.id.endsWith('-1-img')||val.target.id.endsWith('-2-img')|| val.target.id==='cam_img' || val.target.id==='cam_img_red'){
+        //   return
+        // }
+        // if( val.target.innerText!=='摄像头') {
+        //   this.showType = false
+        //   const devTypes = document.querySelectorAll('.dev-icon')
+        //     for(var i=0;i<this.checkDevType.length;i++) {
+        //       if (this.checkDevType[i]) {
+        //         devTypes[i+6].className += ' dev-type-selected'
+        //       }
+        //     }
+        // }
       },
       webSocket() {
         const that = this
@@ -586,7 +602,7 @@
         }else if(pic==='3'){
           this.changeMap('tg_4_1')
         }else if(pic==='4'){
-          this.changeMap('tg_4_1')
+          this.changeMap('tg_4_5')
         }
         setTimeout(() => {
           var obj = document.getElementById(val.toString());
@@ -771,7 +787,11 @@
           this.checkDevType1 = [false, false, false, false, false, false]
           // 添加选中的样式
           if (typeof event === 'undefined') {
-            devTypes[6].className += ' dev-type-selected'
+            if(this.btnNum===1){
+              devTypes[1].className += ' dev-type-selected'
+            }else{
+              devTypes[0].className += ' dev-type-selected'
+            }
           } else {
             event.currentTarget.className += ' dev-type-selected'
           }
@@ -1017,7 +1037,7 @@
           this.isMain = true
           // this.devListParams.picture = '1'
           this.imgSizeOriginal = { width: 2245, height: 1586 }
-          this.btnNum  = 3
+          this.btnNum  = 8
           this.cameraTypeNum  = 6
           this.showFence = true // 显示电子围栏
           this.showTemp = false // 隐藏温湿度设备
@@ -1027,6 +1047,7 @@
           this.showSubTabGuider = false
           this.showFloorThree = false
           this.showFloorFour = false
+          this.selectDevByType('all')
         } else if (index === 'tg_3_1') {
           this.bgImageSrc = tg_3_1
           // this.devListParams.picture = '2'
@@ -1037,6 +1058,7 @@
           this.showTemp = true // 隐藏温湿度
           this.showSmoking = true // 隐藏烟感
           this.showSound = true // 隐藏声光报警器
+          this.selectDevByType('all')
         } else if (index === 'tg_4_1') {
           this.bgImageSrc = tg_4_1
           // this.devListParams.picture = '3'
@@ -1048,18 +1070,19 @@
           this.showTemp = true // 显示温湿度
           this.showSmoking = true // 显示烟感
           this.showSound = true // 显示声光报警器
+          this.selectDevByType('all')
         } else if (index === 'tg_4_5') {
           this.bgImageSrc = tg_4_5
           // this.devListParams.picture = '4'
           this.imgSizeOriginal = { width: 2245, height: 1586 }
-          this.btnNum  = 2
+          this.btnNum  = 1
           this.cameraTypeNum  = 1
           this.showFence = false // 隐藏电子围栏
           this.showTemp = false // 隐藏温湿度
           this.showSmoking = false // 隐藏烟感
           this.showSound = false // 隐藏声光报警器
+          this.selectDevByType('4')
         }
-        this.selectDevByType('all')
       },
       // 查询并显示设备详情
       detailDev(dev, event) {
@@ -1201,10 +1224,14 @@
     left: 50%; transform: translateX(-50%);
     bottom: 25px;
   }
+  .tableLine {
+    margin-top: 9px;
+    width: 463px;
+  }
   .main-page {
     background-size: cover;
     background-color: #023d83;
-    height: 100vh;
+    height: 98vh;
   }
 
   .main-header {
@@ -1362,16 +1389,24 @@
         margin-left: 20px;
       }
     }
-    .el-scrollbar {
-      /*height: 200px;*/
-      width: 100%;
+    // 滚动条的滑块
+    /deep/ .el-table__body-wrapper  {
+      background-color: #023D83;
+      border: 0px solid white;
     }
-    .moredatascollor {
-      height: 200px;
+    /deep/ .el-table--border th.gutter:last-of-type {
+      border: 1px solid #023D83;
+      border-bottom-width: 1px;
+      background-color: #023D83;
     }
-    .el-scrollbar__wrap {
-      overflow-y: auto;
-      overflow-x: hidden;
+    /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
+      background-color: #023D83;
+    }
+    /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+      display: none;
+    }
+    /deep/ .el-scrollbar__wrap {
+      overflow-x: hidden !important;
       margin-bottom: 0px !important;
     }
     .el-table {
@@ -1405,16 +1440,25 @@
     font-size: 15px;
     color: #FFFFFF;
     font-weight: normal;
+    border-color: #2470AC;
   }
-
+  .el-table--border::after, .el-table--group::after, .el-table::before{
+    background-color: #023d83;
+  }
+  .alarm-now-block /deep/ .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
+    border-color: #023d83;
+  }
   .alarm-now-block /deep/ .el-table__row td {
     background-color: #023D83;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ .el-table__body tr:hover > td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ tr.el-table__row--striped td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
 
   .map-tab {
@@ -1601,6 +1645,10 @@
   /*}*/
 
   @media(max-width: 1440px) {
+    .tableLine {
+      margin-top: 0px;
+      width: 343px;
+    }
     .main-title {
       height: 65px;
       padding-top: 16px;
diff --git a/src/views/ctrl/statCharts/devAlarmCount.vue b/src/views/ctrl/statCharts/devAlarmCount.vue
index 7bea059..6b6939e 100644
--- a/src/views/ctrl/statCharts/devAlarmCount.vue
+++ b/src/views/ctrl/statCharts/devAlarmCount.vue
@@ -1,5 +1,6 @@
+<!--suppress ALL -->
 <template>
-  <div>
+  <div style="height: 90%">
     <el-date-picker
       v-model="timeRange"
       :picker-options="pickerOptions"
@@ -7,15 +8,16 @@
       range-separator="至"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
-      style="margin-bottom: 10px;" />
-    <ve-histogram :data="chartData" :settings="settings" height="350px" />
+      style="margin-bottom: 10px;z-index: 10000"
+      size="small"/>
+    <ve-histogram :data="chartData" :settings="settings" :extend="chartExtend" style="margin-top: -50px" height="100%"/>
   </div>
 </template>
 
 <script>
-import { formatToString, getDate, oneDayTime } from '@/utils/calendarUtil'
-import { devAlarmCount } from '@/api/statistics'
 
+import { devAlarmCount } from '@/api/statistics'
+import { formatToString, parseToDate, getDate, oneDayTime } from '@/utils/calendarUtil'
 const now = new Date()
 
 export default {
@@ -30,12 +32,22 @@
         columns: ['name', 'count'],
         rows: []
       },
+      chartExtend: {
+        series: {
+          barMaxWidth: 50
+        },
+        grid: {
+          containLabel: true,
+          bottom: '10%'
+        }
+      },
       settings: {
         labelMap: {
           'name': '设备类型',
-          'count': '报警数量'
+          'count': ''
         },
-        max: [4]
+        max: [4],
+        area: false
       },
       timeRange: [],
       pickerOptions: {
@@ -99,6 +111,13 @@
       devAlarmCount(this.params).then(response => {
         if (response.code === 200) {
           this.chartData.rows = response.data
+          var max = 4
+          for(var i=0;i<response.data.length;i++){
+            if(Number(response.data[i].count)>max){
+              max = Number(response.data[i].count)
+            }
+          }
+          this.settings.max = [max]
         }
       })
     }
diff --git a/src/views/ctrl/statCharts/devCount.vue b/src/views/ctrl/statCharts/devCount.vue
index d3e2902..db55fbe 100644
--- a/src/views/ctrl/statCharts/devCount.vue
+++ b/src/views/ctrl/statCharts/devCount.vue
@@ -1,5 +1,6 @@
 <template>
-  <ve-ring :data="chartData" :settings="settings" />
+  <ve-histogram :data="chartData" :settings="settings" :extend="chartExtend" style="margin-top: -20px" height="100%"/>
+  <!--<ve-ring :data="chartData" :settings="settings" />-->
 </template>
 
 <script>
@@ -9,14 +10,55 @@
   name: 'DevCount',
   data() {
     return {
+      chartExtend: {
+        series: {
+          barMaxWidth: 50
+        },
+        xAxis: {
+          axisLabel: {
+            interval: 0,
+            //换行显示
+            formatter: function(value) {
+              let result = ""; //拼接加\n返回的类目项
+              let maxLength = 2; //每项显示文字个数
+              let valLength = value.length; //X轴类目项的文字个数
+              let rowNumber = Math.ceil(valLength / maxLength); //类目项需要换行的行数
+              if (rowNumber > 1) {
+                //如果文字大于3,
+                for (let i = 0; i < rowNumber; i++) {
+                  let temp = ""; //每次截取的字符串
+                  let start = i * maxLength; //开始截取的位置
+                  let end = start + maxLength; //结束截取的位置
+                  temp = value.substring(start, end) + "\n";
+                  result += temp; //拼接生成最终的字符串
+                }
+                return "{labelText|" + result + "}";
+              } else {
+                return "{labelText|" + value + "}";
+              }
+            },
+            rich: {
+              labelText: {
+                lineHeight: 18
+              }
+            }
+          }
+        }
+      },
       chartData: {
         columns: ['name', 'count'],
         rows: []
       },
       settings: {
-        // legendLimit: 4
-        radius: [60, 100]
-      }
+        labelMap: {
+          'name': '设备类型',
+          'count': ''
+        }
+      },
+      // settings: {
+      //   // legendLimit: 4
+      //   radius: [60, 100]
+      // }
     }
   },
   activated() {
@@ -26,6 +68,9 @@
     fetchData() {
       devCount().then(response => {
         if (response.code === 200) {
+          for(var i=0;i<response.data.length;i++){
+            response.data[i].name = response.data[i].name.replace('防护','')
+          }
           this.chartData.rows = response.data
         }
       })
diff --git a/src/views/ctrl/statCharts/inOutCount.vue b/src/views/ctrl/statCharts/inOutCount.vue
index 502157e..d65ec69 100644
--- a/src/views/ctrl/statCharts/inOutCount.vue
+++ b/src/views/ctrl/statCharts/inOutCount.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="height: 100%">
     <el-date-picker
       v-model="timeRange"
       :picker-options="pickerOptions"
@@ -7,8 +7,9 @@
       range-separator="至"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
-      style="margin-bottom: 10px"/>
-    <ve-line :data="chartData" :settings="settings" height="350px" />
+      size="small"
+      style="margin-bottom: 10px;z-index: 10000"/>
+    <ve-line :data="chartData" :settings="settings" :extend="barExtend" style="margin-top: -50px;" height="93%"/>
   </div>
 </template>
 
@@ -30,6 +31,17 @@
         columns: ['date', 'staff', 'visitor', 'car', 'visitorCar'],
         rows: []
       },
+
+      barExtend:{
+        legend:{  // 隐藏图例
+          x: 'center',
+          y: 'bottom'
+        },
+        grid: {
+          containLabel: true,
+          bottom: '10%'
+        },
+      },
       settings: {
         labelMap: {
           'staff': '内部人员',
@@ -37,11 +49,11 @@
           'car': '内部车辆',
           'visitorCar': '来访车辆'
         },
-        xAxisType: 'time',
+        // xAxisType: 'time',
         max: [4],
         area: false,
         metrics: ['staff', 'visitor', 'car', 'visitorCar'],
-        dimension: ['date']
+        dimension: ['date'],
       },
       timeRange: [],
       pickerOptions: {
@@ -106,7 +118,7 @@
         if (response.code === 200) {
           const data = this.parseStatisticsData(response.data)
           this.chartData.rows = data.rowDatas
-          this.chartData.max = [data.maxCount]
+          this.settings.max = [data.maxCount]
         }
       })
     },
@@ -164,7 +176,7 @@
 
         if (typeof visitorCar !== 'undefined') {
           if (visitorCar.date === date) {
-            visitorCarCount = car.count
+            visitorCarCount = visitorCar.count
             indexVc++
           }
         }
@@ -172,6 +184,18 @@
         if (staffCount + visitorCount + carCount + visitorCarCount > 0) {
           rowDatas.push({ date: date, staff: staffCount, visitor: visitorCount, car: carCount, visitorCar: visitorCarCount })
         }
+        if(maxCount<staffCount){
+          maxCount = staffCount
+        }
+        if(maxCount<visitorCount){
+          maxCount = visitorCount
+        }
+        if(maxCount<carCount){
+          maxCount = carCount
+        }
+        if(maxCount<visitorCarCount){
+          maxCount = visitorCarCount
+        }
         start += oneDayTime
       }
 
diff --git a/src/views/ctrl/statCharts/inOutDoorCount.vue b/src/views/ctrl/statCharts/inOutDoorCount.vue
index ab28cdd..93f3458 100644
--- a/src/views/ctrl/statCharts/inOutDoorCount.vue
+++ b/src/views/ctrl/statCharts/inOutDoorCount.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="height: 100%">
     <el-date-picker
       v-model="timeRange"
       :picker-options="pickerOptions"
@@ -7,8 +7,9 @@
       range-separator="至"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
-      style="margin-bottom: 10px;" />
-    <ve-histogram :data="chartData" :settings="settings" height="350px" />
+      style="margin-bottom: 10px;z-index: 10000"
+      size="small"/>
+    <ve-histogram :data="chartData" :settings="settings" :extend="chartExtend" style="margin-top: -50px"height="93%"/>
   </div>
 </template>
 
@@ -26,11 +27,26 @@
         beginDate: '',
         endDate: ''
       },
+      chartExtend: {
+        legend:{  // 隐藏图例
+          x: 'center',
+          y: 'bottom'
+        },
+        grid: {
+          containLabel: true,
+          bottom: '10%'
+        },
+        series: {
+          barMaxWidth: 50,
+          center: ['50%', '50%']
+        }
+      },
       chartData: {
         columns: ['name', 'person', 'car'],
         rows: []
       },
       settings: {
+        radius: [60, 100],
         labelMap: {
           'person': '人员',
           'car': '车辆'
@@ -102,7 +118,7 @@
         if (response.code === 200) {
           const data = this.parseStatisticsData(response.data)
           this.chartData.rows = data.rowDatas
-          this.chartData.max = [data.maxCount]
+          this.settings.max = [data.maxCount]
         }
       })
     },
diff --git a/src/views/ctrl/statCharts/inOutKeyCount.vue b/src/views/ctrl/statCharts/inOutKeyCount.vue
index fa9a0b7..10108d6 100644
--- a/src/views/ctrl/statCharts/inOutKeyCount.vue
+++ b/src/views/ctrl/statCharts/inOutKeyCount.vue
@@ -1,5 +1,7 @@
 <template>
-  <ve-ring :data="chartData" :settings="settings" />
+  <div style="height: 100%">
+    <ve-ring :data="chartData" :settings="settings" :extend="chartExtend"  height="90%"/>
+  </div>
 </template>
 
 <script>
@@ -9,6 +11,19 @@
   name: 'InOutKeyCount',
   data() {
     return {
+      chartExtend: {
+        legend:{  // 隐藏图例
+          x: 'center',
+          y: 'top'
+        },
+        grid: {
+          containLabel: true,
+          top: '10%'
+        },
+        series: {
+          center: ['50%', '50%']
+        }
+      },
       chartData: {
         columns: ['name', 'count'],
         rows: []
diff --git a/src/views/ctrl/statCharts/inOutToday.vue b/src/views/ctrl/statCharts/inOutToday.vue
index c37fa7b..ae67856 100644
--- a/src/views/ctrl/statCharts/inOutToday.vue
+++ b/src/views/ctrl/statCharts/inOutToday.vue
@@ -1,5 +1,7 @@
 <template>
-  <ve-ring :data="chartData" :settings="settings" />
+  <div style="height: 100%">
+    <ve-ring :data="chartData" :settings="settings" :extend="chartExtend"  height="90%"/>
+  </div>
 </template>
 
 <script>
@@ -18,6 +20,15 @@
           { count: 1, name: '来访车辆' }
         ]
       },
+      chartExtend: {
+        legend:{  // 隐藏图例
+          x: 'center',
+          y: 'top'
+        },
+        series: {
+          center: ['50%', '50%']
+        }
+      },
       settings: {
         radius: [60, 100]
       }
diff --git a/src/views/deviceManage/deviceDetail.vue b/src/views/deviceManage/deviceDetail.vue
index 701052d..8245327 100644
--- a/src/views/deviceManage/deviceDetail.vue
+++ b/src/views/deviceManage/deviceDetail.vue
@@ -9,7 +9,7 @@
         <!--</el-col>-->
         <el-col :span="12">
           <el-form-item label="设备编号">
-            <el-input v-model.trim="dataForm.name" disabled type="text"/>
+            <el-input v-model.trim="dataForm.devcode" disabled type="text"/>
             <!--<span>{{ dataForm.devcode }}</span>-->
           </el-form-item>
         </el-col>
diff --git a/src/views/layout/components/AppHeader.vue b/src/views/layout/components/AppHeader.vue
index c3235b4..2e45954 100644
--- a/src/views/layout/components/AppHeader.vue
+++ b/src/views/layout/components/AppHeader.vue
@@ -1,12 +1,12 @@
 <template>
   <!--<div :style="{backgroundImage:'url('+headerUrl+')'}" class="app-header">-->
   <div style="background-color: #0078ff;" class="app-header">
-    <h3>{{ title }}</h3>
+    <h3 @click="backToIndex">{{ title }}</h3>
     <!--子系统选项-->
     <el-dropdown class="systemSelect" @command="handleCommand">
       <span class="el-dropdown-link" style="color: white">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
       </span>
-      <el-dropdown-menu slot="dropdown" >
+      <el-dropdown-menu slot="dropdown" style="z-index: 10000" >
         <el-dropdown-item>
           <span style="display:block;" @click="backToIndex">回首页</span>
         </el-dropdown-item>
@@ -15,7 +15,7 @@
     </el-dropdown>
 
     <div v-show="currentSystem.code === 'ctrl'" class="back-to-overview">
-      <el-button type="info" round @click="backToOverview">运行总览</el-button>
+      <el-button type="info" round @click="backToOverview" style="background-color: rgba(255,255,255,0.31);border: 0px">运行总览</el-button>
     </div>
 
     <el-dropdown class="avatar-container">
diff --git a/src/views/overview/doorIndex.vue b/src/views/overview/doorIndex.vue
index 5d2dce2..7cd40ff 100644
--- a/src/views/overview/doorIndex.vue
+++ b/src/views/overview/doorIndex.vue
@@ -58,26 +58,51 @@
           <i v-else class="el-icon-arrow-down"/>
         </span>
       </div>
-      <transition name="el-collapse-transition">
-        <el-scrollbar
-          v-show="tableShow"
-          :style="{ visibility: tableShow ? 'visible' : 'hidden'}"
-          :class="{ moredatascollor: alarmList.length > 6 }"
-          :native="false">
-          <el-table
-            :data="alarmList"
-            class="alarm-list-table"
-            border
-            stripe
-            @row-click="alarmRowClick">
-            <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{ scope.row[column.value] }}
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-scrollbar>
-      </transition>
+      <div v-show="alarmList.length > 4 && tableShow">
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 32px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 231px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          height="200"
+          style="border-left: 1px solid #2470AC;"
+          v-if="tableShow"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-show="alarmList.length < 5 && tableShow">
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          v-if="tableShow"
+          style="border: 1px solid #2470AC"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
     </div>
 
     <!-- 中间平面图区域 -->
@@ -730,9 +755,12 @@
   .main-page {
     background-size: cover;
     background-color: #023d83;
-    height: 100vh;
+    height: 98vh;
   }
-
+  .tableLine {
+    margin-top: 9px;
+    width: 463px;
+  }
   .main-header {
     width: 100vw;
   }
@@ -863,16 +891,24 @@
         margin-left: 20px;
       }
     }
-    .el-scrollbar {
-      /*height: 200px;*/
-      width: 100%;
+    // 滚动条的滑块
+    /deep/ .el-table__body-wrapper  {
+      background-color: #023D83;
+      border: 0px solid white;
     }
-    .moredatascollor {
-      height: 200px;
+    /deep/ .el-table--border th.gutter:last-of-type {
+      border: 1px solid #023D83;
+      border-bottom-width: 1px;
+      background-color: #023D83;
     }
-    .el-scrollbar__wrap {
-      overflow-y: auto;
-      overflow-x: hidden;
+    /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
+      background-color: #023D83;
+    }
+    /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+      display: none;
+    }
+    /deep/ .el-scrollbar__wrap {
+      overflow-x: hidden !important;
       margin-bottom: 0px !important;
     }
     .el-table {
@@ -906,16 +942,25 @@
     font-size: 15px;
     color: #FFFFFF;
     font-weight: normal;
+    border-color: #2470AC;
   }
-
+  .el-table--border::after, .el-table--group::after, .el-table::before{
+    background-color: #023d83;
+  }
+  .alarm-now-block /deep/ .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
+    border-color: #023d83;
+  }
   .alarm-now-block /deep/ .el-table__row td {
     background-color: #023D83;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ .el-table__body tr:hover > td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ tr.el-table__row--striped td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
 
   .map-tab {
@@ -1091,6 +1136,10 @@
   /*}*/
 
   @media(max-width: 1440px) {
+    .tableLine {
+      margin-top: 0px;
+      width: 343px;
+    }
     .main-title {
       height: 65px;
       padding-top: 16px;
diff --git a/src/views/overview/fenceIndex.vue b/src/views/overview/fenceIndex.vue
index 9466288..62a35e8 100644
--- a/src/views/overview/fenceIndex.vue
+++ b/src/views/overview/fenceIndex.vue
@@ -58,26 +58,52 @@
           <i v-else class="el-icon-arrow-down"/>
         </span>
       </div>
-      <transition name="el-collapse-transition">
-        <el-scrollbar
-          v-show="tableShow"
-          :style="{ visibility: tableShow ? 'visible' : 'hidden'}"
-          :class="{ moredatascollor: alarmList.length > 6 }"
-          :native="false">
-          <el-table
-            :data="alarmList"
-            class="alarm-list-table"
-            border
-            stripe
-            @row-click="alarmRowClick">
-            <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{ scope.row[column.value] }}
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-scrollbar>
-      </transition>
+      <div v-show="alarmList.length > 4 && tableShow">
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 32px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 231px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          height="200"
+          style="border-left: 1px solid #2470AC;"
+          v-if="tableShow"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-show="alarmList.length < 5 && tableShow">
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          v-if="tableShow"
+          style="border: 1px solid #2470AC"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
     </div>
 
     <!-- 中间平面图区域 -->
@@ -725,10 +751,14 @@
       font-weight: normal;
     }
   }
+  .tableLine {
+    margin-top: 9px;
+    width: 463px;
+  }
   .main-page {
     background-size: cover;
     background-color: #023d83;
-    height: 100vh;
+    height: 98vh;
   }
 
   .main-header {
@@ -859,16 +889,24 @@
         margin-left: 20px;
       }
     }
-    .el-scrollbar {
-      /*height: 200px;*/
-      width: 100%;
+    // 滚动条的滑块
+    /deep/ .el-table__body-wrapper  {
+      background-color: #023D83;
+      border: 0px solid white;
     }
-    .moredatascollor {
-      height: 200px;
+    /deep/ .el-table--border th.gutter:last-of-type {
+      border: 1px solid #023D83;
+      border-bottom-width: 1px;
+      background-color: #023D83;
     }
-    .el-scrollbar__wrap {
-      overflow-y: auto;
-      overflow-x: hidden;
+    /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
+      background-color: #023D83;
+    }
+    /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+      display: none;
+    }
+    /deep/ .el-scrollbar__wrap {
+      overflow-x: hidden !important;
       margin-bottom: 0px !important;
     }
     .el-table {
@@ -902,16 +940,25 @@
     font-size: 15px;
     color: #FFFFFF;
     font-weight: normal;
+    border-color: #2470AC;
   }
-
+  .el-table--border::after, .el-table--group::after, .el-table::before{
+    background-color: #023d83;
+  }
+  .alarm-now-block /deep/ .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
+    border-color: #023d83;
+  }
   .alarm-now-block /deep/ .el-table__row td {
     background-color: #023D83;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ .el-table__body tr:hover > td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ tr.el-table__row--striped td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
 
   .map-tab {
@@ -1087,6 +1134,10 @@
   /*}*/
 
   @media(max-width: 1440px) {
+    .tableLine {
+      margin-top: 0px;
+      width: 343px;
+    }
     .main-title {
       height: 65px;
       padding-top: 16px;
diff --git a/src/views/overview/keyIndex.vue b/src/views/overview/keyIndex.vue
index 37405a8..a461c94 100644
--- a/src/views/overview/keyIndex.vue
+++ b/src/views/overview/keyIndex.vue
@@ -33,20 +33,6 @@
             <span v-text="dev.alarm"/>
           </div>
         </el-col>
-
-        <!--<el-col :span="6" class="sub-data-block dev-offline">-->
-          <!--<div class="statis-block">-->
-            <!--<span v-text="dev.offLine"/>-->
-          <!--</div>-->
-          <!--<div class="sub-title">离线</div>-->
-        <!--</el-col>-->
-
-        <!--<el-col :span="6" class="sub-data-block dev-closed">-->
-          <!--<div class="statis-block">-->
-            <!--<span v-text="dev.closed"/>-->
-          <!--</div>-->
-          <!--<div class="sub-title">关闭</div>-->
-        <!--</el-col>-->
       </el-row>
     </div>
 
@@ -58,26 +44,52 @@
           <i v-else class="el-icon-arrow-down"/>
         </span>
       </div>
-      <transition name="el-collapse-transition">
-        <el-scrollbar
-          v-show="tableShow"
-          :style="{ visibility: tableShow ? 'visible' : 'hidden'}"
-          :class="{ moredatascollor: alarmList.length > 6 }"
-          :native="false">
-          <el-table
-            :data="alarmList"
-            class="alarm-list-table"
-            border
-            stripe
-            @row-click="alarmRowClick">
-            <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{ scope.row[column.value] }}
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-scrollbar>
-      </transition>
+      <div v-show="alarmList.length > 4 && tableShow">
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 32px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 231px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          height="200"
+          style="border-left: 1px solid #2470AC;"
+          v-if="tableShow"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-show="alarmList.length < 5 && tableShow">
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          v-if="tableShow"
+          style="border: 1px solid #2470AC"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
     </div>
 
     <!-- 中间平面图区域 -->
@@ -95,49 +107,16 @@
     </div>
 
     <!-- 平面图区域设备类型按钮 -->
-    <div v-show="showType" class="bottom-center" :style="{ width: btnwidth + 'px'}">
-      <el-col class="dev-icon" @click.native="selectDevByType('4', $event)">
-        <img id="4-1-img" v-if="checkDevType1[0]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-        <img id="4-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-        <span>人脸识别</span>
-      </el-col>
-      <!--<el-col class="dev-icon" @click.native="selectDevByType('5', $event)">-->
-        <!--<img id="5-1-img" v-if="checkDevType1[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
-        <!--<img id="5-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
-        <!--<span>车牌轨迹</span>-->
-      <!--</el-col>-->
-      <!--<el-col class="dev-icon" @click.native="selectDevByType('8', $event)">-->
-        <!--<img id="8-1-img" v-if="checkDevType1[2]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
-        <!--<img id="8-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
-        <!--<span>周界防护</span>-->
-      <!--</el-col>-->
-      <!--<el-col class="dev-icon" @click.native="selectDevByType('9', $event)">-->
-        <!--<img id="9-1-img" v-if="checkDevType1[3]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
-        <!--<img id="9-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
-        <!--<span>标准数字</span>-->
-      <!--</el-col>-->
-      <!--<el-col class="dev-icon" @click.native="selectDevByType('10', $event)">-->
-        <!--<img id="10-1-img" v-if="checkDevType1[4]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
-        <!--<img id="10-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
-        <!--<span>智能球形</span>-->
-      <!--</el-col>-->
-      <!--<el-col class="dev-icon" @click.native="selectDevByType('11', $event)">-->
-        <!--<img id="11-1-img" v-if="checkDevType1[5]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
-        <!--<img id="11-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
-        <!--<span>标准半球</span>-->
-      <!--</el-col>-->
-    </div>
-    <!-- 平面图区域设备类型按钮 -->
     <div v-show="!showType"class="bottom-center" :style="{ width: cameraTypeNum*btnwidth + 'px'}">
       <el-col ref="all" class="dev-icon dev-type-selected" @click.native="selectDevByType('all', $event)">
         <img v-if="checkDevType[0]" src="@/assets/overview_images/icons/icon-all-checked.png">
         <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
         <span>全部</span>
       </el-col>
-      <el-col ref="camera" :class="cameraClass" @click.native="showType=!showType;selectDevByType('camera', $event)">
-        <img id="cam_img_red" v-if="checkDevType[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-        <img id="cam_img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-        <span>摄像头</span>
+      <el-col class="dev-icon" @click.native="selectDevByType('camera4', $event)">
+        <img id="4-1-img" v-if="checkDevType[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
+        <img id="4-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
+        <span>人脸识别</span>
       </el-col>
       <el-col v-show="showTemp" class="dev-icon" @click.native="selectDevByType('temperature', $event)">
         <img v-if="checkDevType[2]" src="@/assets/overview_images/icons/icon-temperature-checked.png">
@@ -364,7 +343,6 @@
       }, // 设备详情表单
       cameraClass:'dev-icon',
       showType : false,
-      checkDevType1: [false, false, false, false, false, false], // 摄像头类型
       checkDevType: [true, false, false, false, false] // 选中设备类型
     }
   },
@@ -462,7 +440,7 @@
       }else if(pic==='3'){
         this.changeMap('tg_4_1')
       }else if(pic==='4'){
-        this.changeMap('tg_4_1')
+        this.changeMap('tg_4_5')
       }
       setTimeout(() => {
         var obj = document.getElementById(val.toString());
@@ -477,24 +455,6 @@
     handleKeyup(val){ //单击收起摄像头分类
       this.showAlarmDetail  = false
       this.showDevDetail  = false
-      var item = ['人脸识别']
-      for(var i=0;i<item.length;i++){
-        if(item[i]===val.target.innerText){
-          return
-        }
-      }
-      if(val.target.id.endsWith('-1-img')||val.target.id.endsWith('-2-img')|| val.target.id==='cam_img' || val.target.id==='cam_img_red'){
-        return
-      }
-      if( val.target.innerText!=='摄像头') {
-        this.showType = false
-        const devTypes = document.querySelectorAll('.dev-icon')
-        for(var i=0;i<this.checkDevType.length;i++) {
-          if (this.checkDevType[i]) {
-            devTypes[i+1].className += ' dev-type-selected'
-          }
-        }
-      }
     },
     handleSelect(key, keyPath) {
       this.selectDevByType(key,undefined)
@@ -643,14 +603,13 @@
       if(type !== 'camera'){
         // 添加选中的样式
         if (typeof event === 'undefined') {
-          devTypes[1].className += ' dev-type-selected'
+          devTypes[0].className += ' dev-type-selected'
         } else {
           event.currentTarget.className += ' dev-type-selected'
         }
       }
       if(type!=='camera'){
         this.checkDevType = [false, false, false, false, false]
-        this.checkDevType1 = [false, false, false, false, false, false]
       }
       if (type === 'all') {
         if(this.bgImageSrc===tg_4_5){
@@ -660,14 +619,7 @@
         }
         // this.devListParams.deviceTypes = []
         this.checkDevType[0] = true
-      } else if(type==='camera'){
-        for(var i=0;i<this.checkDevType1.length;i++){
-          if(this.checkDevType1[i]) {
-            devTypes[i].className += ' dev-type-selected'
-          }
-        }
-        return
-      } else if (type === 'temperature') {
+      }  else if (type === 'temperature') {
         this.devListParams.deviceTypes = temperatureTypes.toString()
         this.checkDevType[2] = true
       } else if (type === 'smoking') {
@@ -676,30 +628,24 @@
       } else if (type === 'sound') {
         this.devListParams.deviceTypes = soundTypes.toString()
         this.checkDevType[4] = true
-      }else if(type === '4'){
+      }else if(type === 'camera4'){
         this.devListParams.deviceTypes = '4'
         this.checkDevType[1] = true
-        this.checkDevType1[0] = true
       }else if(type === '5'){
         this.devListParams.deviceTypes = '5'
         this.checkDevType[1] = true
-        this.checkDevType1[1] = true
       }else if(type === '8'){
         this.devListParams.deviceTypes = '8'
         this.checkDevType[1] = true
-        this.checkDevType1[2] = true
       }else if(type === '9'){
         this.devListParams.deviceTypes = '9'
         this.checkDevType[1] = true
-        this.checkDevType1[3] = true
       }else if(type === '10'){
         this.devListParams.deviceTypes = '10'
         this.checkDevType[1] = true
-        this.checkDevType1[4] = true
       }else if(type === '11'){
         this.devListParams.deviceTypes = '11'
         this.checkDevType[1] = true
-        this.checkDevType1[5] = true
       }
       this.fetchDeviceData()
       // if(this.checkDevType[1]){
@@ -866,18 +812,13 @@
       }else{
         this.devListParams.deviceTypes = '1,2,4,12'
       }
-      // this.devListParams.deviceTypes = []
       if (index === 'tg_main') {
-        // this.imgSizeOriginal = { width: 2245, height: 1586 }
         this.devListParams.picture = '1'
       }else if (index === 'tg_3_1') {
-        // this.imgSizeOriginal = { width: 2245, height: 1586 }
         this.devListParams.picture = '2'
       } else if (index === 'tg_4_1') {
-        // this.imgSizeOriginal = { width: 2218, height: 2169 }
         this.devListParams.picture = '3'
       }else if (index === 'tg_4_5') {
-        // this.imgSizeOriginal = { width: 2245, height: 1586 }
         this.devListParams.picture = '4'
       }
       overviewDeviceList(this.devListParams).then(response => {
@@ -1060,10 +1001,14 @@
   /deep/ .el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
     border-bottom-width: 0px;
   }
+  .tableLine {
+    margin-top: 9px;
+    width: 463px;
+  }
   .main-page {
     background-size: cover;
     background-color: #023d83;
-    height: 100vh;
+    height: 98vh;
   }
 
   .main-header {
@@ -1194,16 +1139,24 @@
         margin-left: 20px;
       }
     }
-    .el-scrollbar {
-      /*height: 200px;*/
-      width: 100%;
+    // 滚动条的滑块
+    /deep/ .el-table__body-wrapper  {
+      background-color: #023D83;
+      border: 0px solid white;
     }
-    .moredatascollor {
-      height: 200px;
+    /deep/ .el-table--border th.gutter:last-of-type {
+      border: 1px solid #023D83;
+      border-bottom-width: 1px;
+      background-color: #023D83;
     }
-    .el-scrollbar__wrap {
-      overflow-y: auto;
-      overflow-x: hidden;
+    /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
+      background-color: #023D83;
+    }
+    /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+      display: none;
+    }
+    /deep/ .el-scrollbar__wrap {
+      overflow-x: hidden !important;
       margin-bottom: 0px !important;
     }
     .el-table {
@@ -1237,16 +1190,25 @@
     font-size: 15px;
     color: #FFFFFF;
     font-weight: normal;
+    border-color: #2470AC;
   }
-
+  .el-table--border::after, .el-table--group::after, .el-table::before{
+    background-color: #023d83;
+  }
+  .alarm-now-block /deep/ .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
+    border-color: #023d83;
+  }
   .alarm-now-block /deep/ .el-table__row td {
     background-color: #023D83;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ .el-table__body tr:hover > td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ tr.el-table__row--striped td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
 
   .map-tab {
@@ -1431,6 +1393,10 @@
   /*}*/
 
   @media(max-width: 1440px) {
+    .tableLine {
+      margin-top: 0px;
+      width: 343px;
+    }
     .main-title {
       height: 65px;
       padding-top: 16px;
diff --git a/src/views/overview/regionIndex.vue b/src/views/overview/regionIndex.vue
index 69e7606..d4ea083 100644
--- a/src/views/overview/regionIndex.vue
+++ b/src/views/overview/regionIndex.vue
@@ -58,26 +58,52 @@
           <i v-else class="el-icon-arrow-down"/>
         </span>
       </div>
-      <transition name="el-collapse-transition">
-        <el-scrollbar
-          v-show="tableShow"
-          :style="{ visibility: tableShow ? 'visible' : 'hidden'}"
-          :class="{ moredatascollor: alarmList.length > 6 }"
-          :native="false">
-          <el-table
-            :data="alarmList"
-            class="alarm-list-table"
-            border
-            stripe
-            @row-click="alarmRowClick">
-            <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{ scope.row[column.value] }}
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-scrollbar>
-      </transition>
+      <div v-show="alarmList.length > 4 && tableShow">
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 32px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 231px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          height="200"
+          style="border-left: 1px solid #2470AC;"
+          v-if="tableShow"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-show="alarmList.length < 5 && tableShow">
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          v-if="tableShow"
+          style="border: 1px solid #2470AC"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
     </div>
 
     <!-- 中间平面图区域 -->
@@ -293,7 +319,7 @@
       title: getProject().title,
       bgImageSrc: tg_main,
       devListParams: {
-        picture: '3',
+        picture: '1',
         areaTypeId: 3,
         deviceTypes: '4,9,10,11'
       },
@@ -718,10 +744,14 @@
       font-weight: normal;
     }
   }
+  .tableLine {
+    margin-top: 9px;
+    width: 463px;
+  }
   .main-page {
     background-size: cover;
     background-color: #023d83;
-    height: 100vh;
+    height: 98vh;
   }
 
   .main-header {
@@ -852,16 +882,24 @@
         margin-left: 20px;
       }
     }
-    .el-scrollbar {
-      /*height: 200px;*/
-      width: 100%;
+    // 滚动条的滑块
+    /deep/ .el-table__body-wrapper  {
+      background-color: #023D83;
+      border: 0px solid white;
     }
-    .moredatascollor {
-      height: 200px;
+    /deep/ .el-table--border th.gutter:last-of-type {
+      border: 1px solid #023D83;
+      border-bottom-width: 1px;
+      background-color: #023D83;
     }
-    .el-scrollbar__wrap {
-      overflow-y: auto;
-      overflow-x: hidden;
+    /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
+      background-color: #023D83;
+    }
+    /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+      display: none;
+    }
+    /deep/ .el-scrollbar__wrap {
+      overflow-x: hidden !important;
       margin-bottom: 0px !important;
     }
     .el-table {
@@ -895,16 +933,25 @@
     font-size: 15px;
     color: #FFFFFF;
     font-weight: normal;
+    border-color: #2470AC;
   }
-
+  .el-table--border::after, .el-table--group::after, .el-table::before{
+    background-color: #023d83;
+  }
+  .alarm-now-block /deep/ .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
+    border-color: #023d83;
+  }
   .alarm-now-block /deep/ .el-table__row td {
     background-color: #023D83;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ .el-table__body tr:hover > td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ tr.el-table__row--striped td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
 
   .map-tab {
@@ -1080,6 +1127,10 @@
   /*}*/
 
   @media(max-width: 1440px) {
+    .tableLine {
+      margin-top: 0px;
+      width: 343px;
+    }
     .main-title {
       height: 65px;
       padding-top: 16px;

diff --git a/config/dev.env.js b/config/dev.env.js
index 6b4622a..095ba33 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -8,4 +8,5 @@
   NODE_ENV: '"development"',
   // BASE_API: '"http://192.168.5.220:20311"'
   BASE_API: '"http://111.198.10.15:11631"'
+  // BASE_API: '"http://192.168.5.220:20311"'
 })
diff --git a/config/prod.env.js b/config/prod.env.js
index f2501d0..ccbc615 100644
--- a/config/prod.env.js
+++ b/config/prod.env.js
@@ -1,5 +1,6 @@
 'use strict'
 module.exports = {
   NODE_ENV: '"production"',
-  BASE_API: '"http://192.168.5.220:20311"'
+  // BASE_API: '"http://192.168.5.220:20311"'
+  BASE_API: '"http://111.198.10.15:11631"'
 }
diff --git a/favicon.ico b/favicon.ico
index 34b63ac..bc1bfc5 100644
--- a/favicon.ico
+++ b/favicon.ico
Binary files differ
diff --git a/src/api/visitor.js b/src/api/visitor.js
index 05ed6ea..01a6c26 100644
--- a/src/api/visitor.js
+++ b/src/api/visitor.js
@@ -74,3 +74,14 @@
   })
 }
 
+// 查询人员轨迹
+export function getDetail(devcode) {
+  return request({
+    url: '/device/capturePhoto',
+    method: 'post',
+    params:{
+      devcode: devcode
+    }
+  })
+}
+
diff --git a/src/assets/dashboard_images/icon-defence.png b/src/assets/dashboard_images/icon-defence.png
index 8069376..11b41cb 100644
--- a/src/assets/dashboard_images/icon-defence.png
+++ b/src/assets/dashboard_images/icon-defence.png
Binary files differ
diff --git a/src/utils/calendarUtil.js b/src/utils/calendarUtil.js
index da840c3..e599bdd 100644
--- a/src/utils/calendarUtil.js
+++ b/src/utils/calendarUtil.js
@@ -61,7 +61,32 @@
 
   return yearMonth + '-' + format(day)
 }
+export function formatDateTime(cellval) {
+  var dateVal = cellval + "";//把时间戳转成字符串格式
+  if (cellval != null) {
+    //取得时间戳部分 如：获取 /Date(1545299299910)/ 中的 1545299299910 部分
+    var date = new Date(parseInt(dateVal.replace("/Date(", "")
+      .replace(")/", ""), 10));
+    //获取年，不需要其他操作所以可以直接返回	date.getFullYear()
+    //月份为0-11，所以+1，月份小于10时补个0
+    var month = date.getMonth() + 1 < 10 ? "0"
+      + (date.getMonth() + 1) : date.getMonth() + 1;
+    //获取日
+    var currentDate = date.getDate() < 10 ? "0" + date.getDate()
+      : date.getDate();
+    //获取时间
+    var hours = date.getHours() < 10 ? "0" + date.getHours() : date
+      .getHours();
+    var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes()
+      : date.getMinutes();
+    var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds()
+      : date.getSeconds();
 
+    //返回日期结果，需要时间的话在加上时间
+    return date.getFullYear() + "-" + month + "-" + currentDate+" "+hours+":"+
+      minutes+":"+seconds;
+  }
+}
 // 格式化日期为字符串
 export function formatToString(value, level) {
   const date = new Date(value)
diff --git a/src/views/alarm/alarmDetail.vue b/src/views/alarm/alarmDetail.vue
index 2c94629..8c32ee5 100644
--- a/src/views/alarm/alarmDetail.vue
+++ b/src/views/alarm/alarmDetail.vue
@@ -1,7 +1,7 @@
 <!-- 报警详情 -->
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :model="dataForm" label-well-code="right" label-width="110px">
+    <el-form v-loading="loading" ref="dataForm" :model="dataForm" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="报警编号">
@@ -86,6 +86,7 @@
   name: 'AlarmDetail',
   data() {
     return {
+      loading: true,
       dialogFormVisible: false, // 对话框是否显示
       dialogStatus: '', // 对话框类型：create,update,detail
       dataForm: {
@@ -123,7 +124,7 @@
         this.dataForm = {
           id: row.id
         }
-
+        this.loading = true
         alarmDetail(this.dataForm.id).then(response => {
           if (response.code === 200) {
             this.dataForm = {
@@ -140,7 +141,7 @@
               reason: response.data.reason,
               remark: response.data.remark
             }
-
+            this.loading = false
             // 格式化报警状态
             if (response.data.valid === 1) {
               this.dataForm.validStr = '正在报警'
diff --git a/src/views/car/carAdd.vue b/src/views/car/carAdd.vue
index ddb215f..5f54c93 100644
--- a/src/views/car/carAdd.vue
+++ b/src/views/car/carAdd.vue
@@ -10,7 +10,7 @@
         </el-col>
         <el-col :span="12">
           <el-form-item label="车辆性质" prop="property">
-            <el-radio-group v-model="dataForm.property" :disabled="isDetailMode">
+            <el-radio-group v-model="dataForm.property" :disabled="isDetailMode" @change="resetOwner">
               <el-radio v-for="item in carProperties" :key="item.value" :label="item.value">{{ item.name }}</el-radio>
             </el-radio-group>
           </el-form-item>
@@ -106,6 +106,12 @@
     this.fetchStaffList()
   },
   methods: {
+    resetOwner(){
+      if(this.dataForm.property!=='2'){
+        this.dataForm.ownerId = ''
+        // this.dataForm.phone = ''
+      }
+    },
     // 初始化对话框
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.btnLoading = false
@@ -208,6 +214,7 @@
           }
         })
         this.dataForm.phone = selectedStaff[0].phone
+        this.dataForm.deptid = selectedStaff[0].deptid
       } else {
         this.dataForm.phone = ''
       }
diff --git a/src/views/car/carList.vue b/src/views/car/carList.vue
index 8d924ff..4ff07ab 100644
--- a/src/views/car/carList.vue
+++ b/src/views/car/carList.vue
@@ -105,11 +105,11 @@
           value: 'propertyStr',
           align: 'center'
         },
-        // {
-        //   text: '车主姓名',
-        //   value: 'ownerName',
-        //   align: 'center'
-        // },
+        {
+          text: '车主姓名',
+          value: 'ownerName',
+          align: 'center'
+        },
         {
           text: '车主联系电话',
           value: 'phone',
diff --git a/src/views/ctrl/index.vue b/src/views/ctrl/index.vue
index fd36f2b..29923af 100644
--- a/src/views/ctrl/index.vue
+++ b/src/views/ctrl/index.vue
@@ -50,12 +50,13 @@
         <in-out-today />
       </el-col>
 
-      <el-col :span="7" class="chart-block">
+      <el-col id="dev-count"  :span="10" class="chart-block">
         <div class="chart-title">各类型设备安装数量</div>
         <dev-count />
       </el-col>
 
-      <el-col id="pass-count" :span="10" class="chart-block">
+      <!--<el-col id="pass-count" class="chart-block">-->
+      <el-col :span="7" class="chart-block">
         <div class="chart-title">进出营数量统计</div>
         <in-out-count />
       </el-col>
@@ -121,7 +122,7 @@
 <style scoped>
   .app-wrapper {
     background-color: #e9e9e9;
-    padding-bottom: 20px;
+    padding-bottom: 10px;
   }
 
   .sub-data-block {
@@ -129,6 +130,7 @@
     border-radius: 16px;
     float: left;
     margin: 10px;
+    margin-bottom: 0px;
     box-shadow: 1px 1px 5px #999;
   }
   .sub-title {
@@ -136,36 +138,38 @@
     text-align: center;
     font-family: 'Microsoft YaHei';
     color: #fff;
-    font-size: 24px;
-    padding: 10px;
+    font-size: 20px;
+    padding-top: 10px;
+    padding-bottom: 0px;
   }
   .statis-block {
     text-align: center;
     margin: 0px 10px 0px 10px;
-    padding: 0px 10px 10px 10px;
+    padding: 0px 10px 5px 10px;
     color: #fff;
     font-weight: bold;
     letter-spacing: 1px;
-    font-size: 24px;
+    font-size: 20px;
   }
   .big-size {
-    font-size: 64px;
+    font-size: 35px;
   }
 
   .chart-title {
     font-family: 'Microsoft YaHei';
     color: #000000;
     font-weight: bold;
-    font-size: 20px;
+    font-size: 18px;
     text-align: center;
     padding: 10px;
   }
   .chart-block {
     margin-left: 20px;
-    margin-top: 20px;
+    margin-top: 10px;
     border-radius: 16px;
     background-color: #FFFFFF;
     box-shadow: 1px 1px 5px #999;
+    height: 37vh;
   }
 
   #today-visitor {
@@ -187,7 +191,7 @@
     background-image: linear-gradient(to right, #ffa800, #ce7e00);
   }
 
-  #pass-count, #dev-alarm-count {
+  #dev-count, #dev-alarm-count {
     width: calc(250vw / 6 - 70px);
   }
 </style>
diff --git a/src/views/ctrl/overview.vue b/src/views/ctrl/overview.vue
index 62e1105..49ed928 100644
--- a/src/views/ctrl/overview.vue
+++ b/src/views/ctrl/overview.vue
@@ -59,26 +59,52 @@
           <i v-else class="el-icon-arrow-down"/>
         </span>
       </div>
-      <transition name="el-collapse-transition">
-        <el-scrollbar
-          v-show="tableShow"
-          :style="{ visibility: tableShow ? 'visible' : 'hidden'}"
-          :class="{ moredatascollor: alarmList.length > 6 }"
-          :native="false">
-          <el-table
-            :data="alarmList"
-            class="alarm-list-table"
-            border
-            stripe
-            @row-click="alarmRowClick">
-            <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{ scope.row[column.value] }}
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-scrollbar>
-      </transition>
+      <div v-show="alarmList.length > 4 && tableShow">
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 32px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 231px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          height="200"
+          style="border-left: 1px solid #2470AC;"
+          v-if="tableShow"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-show="alarmList.length < 5 && tableShow">
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          v-if="tableShow"
+          style="border: 1px solid #2470AC"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
     </div>
 
     <!-- 中间平面图区域 -->
@@ -145,9 +171,13 @@
         class="point-camera"
         @click="detailDev(item, $event)" />
     </div>
-
     <!-- 平面图区域设备类型按钮 -->
-    <div v-show="showType" class="bottom-center" :style="{ width: cameraTypeNum*btnwidth + 'px'}">
+    <div class="bottom-center" :style="{ width: btnNum*btnwidth + 'px'}">
+        <el-col v-show="btnNum!==1" ref="all" class="dev-icon dev-type-selected" @click.native="selectDevByType('all', $event)">
+          <img v-if="checkDevType[0]" src="@/assets/overview_images/icons/icon-all-checked.png">
+          <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
+          <span>全部</span>
+        </el-col>
       <el-col class="dev-icon" @click.native="selectDevByType('4', $event)">
         <img id="4-1-img" v-if="checkDevType1[0]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="4-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
@@ -178,20 +208,6 @@
         <img id="11-2-img" v-else src="@/assets/overview_images/icons/half-camera-blue.png">
         <span>标准半球</span>
       </el-col>
-    </div>
-    <!-- 平面图区域设备类型按钮 -->
-    <div v-show="!showType"class="bottom-center" :style="{ width: btnNum*btnwidth + 'px'}">
-        <el-col ref="all" class="dev-icon dev-type-selected" @click.native="selectDevByType('all', $event)">
-          <img v-if="checkDevType[0]" src="@/assets/overview_images/icons/icon-all-checked.png">
-          <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
-          <span>全部</span>
-        </el-col>
-        <el-col ref="camera" :class="cameraClass" @click.native="showType=!showType;selectDevByType('camera', $event)">
-        <!--<el-col ref="camera" class="dev-icon" @click.native="selectDevByType('camera', $event)">-->
-          <img id="cam_img_red" v-if="checkDevType[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-          <img id="cam_img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-          <span>摄像头</span>
-        </el-col>
         <el-col v-show="showFence" class="dev-icon" @click.native="selectDevByType('fence', $event)">
           <img v-if="checkDevType[2]" src="@/assets/overview_images/icons/icon-fence-checked.png">
           <img v-else src="@/assets/overview_images/icons/icon-fence-unchecked.png">
@@ -372,7 +388,7 @@
           height: 789
         }, // 屏幕窗口尺寸
         imgUrl: require('../../assets/overview_images/icons/icon-camera-point.png'),
-        btnNum: 3,
+        btnNum: 8,
         cameraTypeNum: 6,
         btnwidth: 210,
         halfLeft: 0,
@@ -498,25 +514,25 @@
             }
           }
         }
-        //跟换菜单
-        var item = ['人脸识别','车牌轨迹','周界防护','标准数字','智能球形','标准半球']
-        for(var i=0;i<item.length;i++){
-          if(item[i]===val.target.innerText){
-            return
-          }
-        }
-        if(val.target.id.endsWith('-1-img')||val.target.id.endsWith('-2-img')|| val.target.id==='cam_img' || val.target.id==='cam_img_red'){
-          return
-        }
-        if( val.target.innerText!=='摄像头') {
-          this.showType = false
-          const devTypes = document.querySelectorAll('.dev-icon')
-            for(var i=0;i<this.checkDevType.length;i++) {
-              if (this.checkDevType[i]) {
-                devTypes[i+6].className += ' dev-type-selected'
-              }
-            }
-        }
+        // //跟换菜单
+        // var item = ['人脸识别','车牌轨迹','周界防护','标准数字','智能球形','标准半球']
+        // for(var i=0;i<item.length;i++){
+        //   if(item[i]===val.target.innerText){
+        //     return
+        //   }
+        // }
+        // if(val.target.id.endsWith('-1-img')||val.target.id.endsWith('-2-img')|| val.target.id==='cam_img' || val.target.id==='cam_img_red'){
+        //   return
+        // }
+        // if( val.target.innerText!=='摄像头') {
+        //   this.showType = false
+        //   const devTypes = document.querySelectorAll('.dev-icon')
+        //     for(var i=0;i<this.checkDevType.length;i++) {
+        //       if (this.checkDevType[i]) {
+        //         devTypes[i+6].className += ' dev-type-selected'
+        //       }
+        //     }
+        // }
       },
       webSocket() {
         const that = this
@@ -586,7 +602,7 @@
         }else if(pic==='3'){
           this.changeMap('tg_4_1')
         }else if(pic==='4'){
-          this.changeMap('tg_4_1')
+          this.changeMap('tg_4_5')
         }
         setTimeout(() => {
           var obj = document.getElementById(val.toString());
@@ -771,7 +787,11 @@
           this.checkDevType1 = [false, false, false, false, false, false]
           // 添加选中的样式
           if (typeof event === 'undefined') {
-            devTypes[6].className += ' dev-type-selected'
+            if(this.btnNum===1){
+              devTypes[1].className += ' dev-type-selected'
+            }else{
+              devTypes[0].className += ' dev-type-selected'
+            }
           } else {
             event.currentTarget.className += ' dev-type-selected'
           }
@@ -1017,7 +1037,7 @@
           this.isMain = true
           // this.devListParams.picture = '1'
           this.imgSizeOriginal = { width: 2245, height: 1586 }
-          this.btnNum  = 3
+          this.btnNum  = 8
           this.cameraTypeNum  = 6
           this.showFence = true // 显示电子围栏
           this.showTemp = false // 隐藏温湿度设备
@@ -1027,6 +1047,7 @@
           this.showSubTabGuider = false
           this.showFloorThree = false
           this.showFloorFour = false
+          this.selectDevByType('all')
         } else if (index === 'tg_3_1') {
           this.bgImageSrc = tg_3_1
           // this.devListParams.picture = '2'
@@ -1037,6 +1058,7 @@
           this.showTemp = true // 隐藏温湿度
           this.showSmoking = true // 隐藏烟感
           this.showSound = true // 隐藏声光报警器
+          this.selectDevByType('all')
         } else if (index === 'tg_4_1') {
           this.bgImageSrc = tg_4_1
           // this.devListParams.picture = '3'
@@ -1048,18 +1070,19 @@
           this.showTemp = true // 显示温湿度
           this.showSmoking = true // 显示烟感
           this.showSound = true // 显示声光报警器
+          this.selectDevByType('all')
         } else if (index === 'tg_4_5') {
           this.bgImageSrc = tg_4_5
           // this.devListParams.picture = '4'
           this.imgSizeOriginal = { width: 2245, height: 1586 }
-          this.btnNum  = 2
+          this.btnNum  = 1
           this.cameraTypeNum  = 1
           this.showFence = false // 隐藏电子围栏
           this.showTemp = false // 隐藏温湿度
           this.showSmoking = false // 隐藏烟感
           this.showSound = false // 隐藏声光报警器
+          this.selectDevByType('4')
         }
-        this.selectDevByType('all')
       },
       // 查询并显示设备详情
       detailDev(dev, event) {
@@ -1201,10 +1224,14 @@
     left: 50%; transform: translateX(-50%);
     bottom: 25px;
   }
+  .tableLine {
+    margin-top: 9px;
+    width: 463px;
+  }
   .main-page {
     background-size: cover;
     background-color: #023d83;
-    height: 100vh;
+    height: 98vh;
   }
 
   .main-header {
@@ -1362,16 +1389,24 @@
         margin-left: 20px;
       }
     }
-    .el-scrollbar {
-      /*height: 200px;*/
-      width: 100%;
+    // 滚动条的滑块
+    /deep/ .el-table__body-wrapper  {
+      background-color: #023D83;
+      border: 0px solid white;
     }
-    .moredatascollor {
-      height: 200px;
+    /deep/ .el-table--border th.gutter:last-of-type {
+      border: 1px solid #023D83;
+      border-bottom-width: 1px;
+      background-color: #023D83;
     }
-    .el-scrollbar__wrap {
-      overflow-y: auto;
-      overflow-x: hidden;
+    /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
+      background-color: #023D83;
+    }
+    /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+      display: none;
+    }
+    /deep/ .el-scrollbar__wrap {
+      overflow-x: hidden !important;
       margin-bottom: 0px !important;
     }
     .el-table {
@@ -1405,16 +1440,25 @@
     font-size: 15px;
     color: #FFFFFF;
     font-weight: normal;
+    border-color: #2470AC;
   }
-
+  .el-table--border::after, .el-table--group::after, .el-table::before{
+    background-color: #023d83;
+  }
+  .alarm-now-block /deep/ .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
+    border-color: #023d83;
+  }
   .alarm-now-block /deep/ .el-table__row td {
     background-color: #023D83;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ .el-table__body tr:hover > td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ tr.el-table__row--striped td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
 
   .map-tab {
@@ -1601,6 +1645,10 @@
   /*}*/
 
   @media(max-width: 1440px) {
+    .tableLine {
+      margin-top: 0px;
+      width: 343px;
+    }
     .main-title {
       height: 65px;
       padding-top: 16px;
diff --git a/src/views/ctrl/statCharts/devAlarmCount.vue b/src/views/ctrl/statCharts/devAlarmCount.vue
index 7bea059..6b6939e 100644
--- a/src/views/ctrl/statCharts/devAlarmCount.vue
+++ b/src/views/ctrl/statCharts/devAlarmCount.vue
@@ -1,5 +1,6 @@
+<!--suppress ALL -->
 <template>
-  <div>
+  <div style="height: 90%">
     <el-date-picker
       v-model="timeRange"
       :picker-options="pickerOptions"
@@ -7,15 +8,16 @@
       range-separator="至"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
-      style="margin-bottom: 10px;" />
-    <ve-histogram :data="chartData" :settings="settings" height="350px" />
+      style="margin-bottom: 10px;z-index: 10000"
+      size="small"/>
+    <ve-histogram :data="chartData" :settings="settings" :extend="chartExtend" style="margin-top: -50px" height="100%"/>
   </div>
 </template>
 
 <script>
-import { formatToString, getDate, oneDayTime } from '@/utils/calendarUtil'
-import { devAlarmCount } from '@/api/statistics'
 
+import { devAlarmCount } from '@/api/statistics'
+import { formatToString, parseToDate, getDate, oneDayTime } from '@/utils/calendarUtil'
 const now = new Date()
 
 export default {
@@ -30,12 +32,22 @@
         columns: ['name', 'count'],
         rows: []
       },
+      chartExtend: {
+        series: {
+          barMaxWidth: 50
+        },
+        grid: {
+          containLabel: true,
+          bottom: '10%'
+        }
+      },
       settings: {
         labelMap: {
           'name': '设备类型',
-          'count': '报警数量'
+          'count': ''
         },
-        max: [4]
+        max: [4],
+        area: false
       },
       timeRange: [],
       pickerOptions: {
@@ -99,6 +111,13 @@
       devAlarmCount(this.params).then(response => {
         if (response.code === 200) {
           this.chartData.rows = response.data
+          var max = 4
+          for(var i=0;i<response.data.length;i++){
+            if(Number(response.data[i].count)>max){
+              max = Number(response.data[i].count)
+            }
+          }
+          this.settings.max = [max]
         }
       })
     }
diff --git a/src/views/ctrl/statCharts/devCount.vue b/src/views/ctrl/statCharts/devCount.vue
index d3e2902..db55fbe 100644
--- a/src/views/ctrl/statCharts/devCount.vue
+++ b/src/views/ctrl/statCharts/devCount.vue
@@ -1,5 +1,6 @@
 <template>
-  <ve-ring :data="chartData" :settings="settings" />
+  <ve-histogram :data="chartData" :settings="settings" :extend="chartExtend" style="margin-top: -20px" height="100%"/>
+  <!--<ve-ring :data="chartData" :settings="settings" />-->
 </template>
 
 <script>
@@ -9,14 +10,55 @@
   name: 'DevCount',
   data() {
     return {
+      chartExtend: {
+        series: {
+          barMaxWidth: 50
+        },
+        xAxis: {
+          axisLabel: {
+            interval: 0,
+            //换行显示
+            formatter: function(value) {
+              let result = ""; //拼接加\n返回的类目项
+              let maxLength = 2; //每项显示文字个数
+              let valLength = value.length; //X轴类目项的文字个数
+              let rowNumber = Math.ceil(valLength / maxLength); //类目项需要换行的行数
+              if (rowNumber > 1) {
+                //如果文字大于3,
+                for (let i = 0; i < rowNumber; i++) {
+                  let temp = ""; //每次截取的字符串
+                  let start = i * maxLength; //开始截取的位置
+                  let end = start + maxLength; //结束截取的位置
+                  temp = value.substring(start, end) + "\n";
+                  result += temp; //拼接生成最终的字符串
+                }
+                return "{labelText|" + result + "}";
+              } else {
+                return "{labelText|" + value + "}";
+              }
+            },
+            rich: {
+              labelText: {
+                lineHeight: 18
+              }
+            }
+          }
+        }
+      },
       chartData: {
         columns: ['name', 'count'],
         rows: []
       },
       settings: {
-        // legendLimit: 4
-        radius: [60, 100]
-      }
+        labelMap: {
+          'name': '设备类型',
+          'count': ''
+        }
+      },
+      // settings: {
+      //   // legendLimit: 4
+      //   radius: [60, 100]
+      // }
     }
   },
   activated() {
@@ -26,6 +68,9 @@
     fetchData() {
       devCount().then(response => {
         if (response.code === 200) {
+          for(var i=0;i<response.data.length;i++){
+            response.data[i].name = response.data[i].name.replace('防护','')
+          }
           this.chartData.rows = response.data
         }
       })
diff --git a/src/views/ctrl/statCharts/inOutCount.vue b/src/views/ctrl/statCharts/inOutCount.vue
index 502157e..d65ec69 100644
--- a/src/views/ctrl/statCharts/inOutCount.vue
+++ b/src/views/ctrl/statCharts/inOutCount.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="height: 100%">
     <el-date-picker
       v-model="timeRange"
       :picker-options="pickerOptions"
@@ -7,8 +7,9 @@
       range-separator="至"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
-      style="margin-bottom: 10px"/>
-    <ve-line :data="chartData" :settings="settings" height="350px" />
+      size="small"
+      style="margin-bottom: 10px;z-index: 10000"/>
+    <ve-line :data="chartData" :settings="settings" :extend="barExtend" style="margin-top: -50px;" height="93%"/>
   </div>
 </template>
 
@@ -30,6 +31,17 @@
         columns: ['date', 'staff', 'visitor', 'car', 'visitorCar'],
         rows: []
       },
+
+      barExtend:{
+        legend:{  // 隐藏图例
+          x: 'center',
+          y: 'bottom'
+        },
+        grid: {
+          containLabel: true,
+          bottom: '10%'
+        },
+      },
       settings: {
         labelMap: {
           'staff': '内部人员',
@@ -37,11 +49,11 @@
           'car': '内部车辆',
           'visitorCar': '来访车辆'
         },
-        xAxisType: 'time',
+        // xAxisType: 'time',
         max: [4],
         area: false,
         metrics: ['staff', 'visitor', 'car', 'visitorCar'],
-        dimension: ['date']
+        dimension: ['date'],
       },
       timeRange: [],
       pickerOptions: {
@@ -106,7 +118,7 @@
         if (response.code === 200) {
           const data = this.parseStatisticsData(response.data)
           this.chartData.rows = data.rowDatas
-          this.chartData.max = [data.maxCount]
+          this.settings.max = [data.maxCount]
         }
       })
     },
@@ -164,7 +176,7 @@
 
         if (typeof visitorCar !== 'undefined') {
           if (visitorCar.date === date) {
-            visitorCarCount = car.count
+            visitorCarCount = visitorCar.count
             indexVc++
           }
         }
@@ -172,6 +184,18 @@
         if (staffCount + visitorCount + carCount + visitorCarCount > 0) {
           rowDatas.push({ date: date, staff: staffCount, visitor: visitorCount, car: carCount, visitorCar: visitorCarCount })
         }
+        if(maxCount<staffCount){
+          maxCount = staffCount
+        }
+        if(maxCount<visitorCount){
+          maxCount = visitorCount
+        }
+        if(maxCount<carCount){
+          maxCount = carCount
+        }
+        if(maxCount<visitorCarCount){
+          maxCount = visitorCarCount
+        }
         start += oneDayTime
       }
 
diff --git a/src/views/ctrl/statCharts/inOutDoorCount.vue b/src/views/ctrl/statCharts/inOutDoorCount.vue
index ab28cdd..93f3458 100644
--- a/src/views/ctrl/statCharts/inOutDoorCount.vue
+++ b/src/views/ctrl/statCharts/inOutDoorCount.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="height: 100%">
     <el-date-picker
       v-model="timeRange"
       :picker-options="pickerOptions"
@@ -7,8 +7,9 @@
       range-separator="至"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
-      style="margin-bottom: 10px;" />
-    <ve-histogram :data="chartData" :settings="settings" height="350px" />
+      style="margin-bottom: 10px;z-index: 10000"
+      size="small"/>
+    <ve-histogram :data="chartData" :settings="settings" :extend="chartExtend" style="margin-top: -50px"height="93%"/>
   </div>
 </template>
 
@@ -26,11 +27,26 @@
         beginDate: '',
         endDate: ''
       },
+      chartExtend: {
+        legend:{  // 隐藏图例
+          x: 'center',
+          y: 'bottom'
+        },
+        grid: {
+          containLabel: true,
+          bottom: '10%'
+        },
+        series: {
+          barMaxWidth: 50,
+          center: ['50%', '50%']
+        }
+      },
       chartData: {
         columns: ['name', 'person', 'car'],
         rows: []
       },
       settings: {
+        radius: [60, 100],
         labelMap: {
           'person': '人员',
           'car': '车辆'
@@ -102,7 +118,7 @@
         if (response.code === 200) {
           const data = this.parseStatisticsData(response.data)
           this.chartData.rows = data.rowDatas
-          this.chartData.max = [data.maxCount]
+          this.settings.max = [data.maxCount]
         }
       })
     },
diff --git a/src/views/ctrl/statCharts/inOutKeyCount.vue b/src/views/ctrl/statCharts/inOutKeyCount.vue
index fa9a0b7..10108d6 100644
--- a/src/views/ctrl/statCharts/inOutKeyCount.vue
+++ b/src/views/ctrl/statCharts/inOutKeyCount.vue
@@ -1,5 +1,7 @@
 <template>
-  <ve-ring :data="chartData" :settings="settings" />
+  <div style="height: 100%">
+    <ve-ring :data="chartData" :settings="settings" :extend="chartExtend"  height="90%"/>
+  </div>
 </template>
 
 <script>
@@ -9,6 +11,19 @@
   name: 'InOutKeyCount',
   data() {
     return {
+      chartExtend: {
+        legend:{  // 隐藏图例
+          x: 'center',
+          y: 'top'
+        },
+        grid: {
+          containLabel: true,
+          top: '10%'
+        },
+        series: {
+          center: ['50%', '50%']
+        }
+      },
       chartData: {
         columns: ['name', 'count'],
         rows: []
diff --git a/src/views/ctrl/statCharts/inOutToday.vue b/src/views/ctrl/statCharts/inOutToday.vue
index c37fa7b..ae67856 100644
--- a/src/views/ctrl/statCharts/inOutToday.vue
+++ b/src/views/ctrl/statCharts/inOutToday.vue
@@ -1,5 +1,7 @@
 <template>
-  <ve-ring :data="chartData" :settings="settings" />
+  <div style="height: 100%">
+    <ve-ring :data="chartData" :settings="settings" :extend="chartExtend"  height="90%"/>
+  </div>
 </template>
 
 <script>
@@ -18,6 +20,15 @@
           { count: 1, name: '来访车辆' }
         ]
       },
+      chartExtend: {
+        legend:{  // 隐藏图例
+          x: 'center',
+          y: 'top'
+        },
+        series: {
+          center: ['50%', '50%']
+        }
+      },
       settings: {
         radius: [60, 100]
       }
diff --git a/src/views/deviceManage/deviceDetail.vue b/src/views/deviceManage/deviceDetail.vue
index 701052d..8245327 100644
--- a/src/views/deviceManage/deviceDetail.vue
+++ b/src/views/deviceManage/deviceDetail.vue
@@ -9,7 +9,7 @@
         <!--</el-col>-->
         <el-col :span="12">
           <el-form-item label="设备编号">
-            <el-input v-model.trim="dataForm.name" disabled type="text"/>
+            <el-input v-model.trim="dataForm.devcode" disabled type="text"/>
             <!--<span>{{ dataForm.devcode }}</span>-->
           </el-form-item>
         </el-col>
diff --git a/src/views/layout/components/AppHeader.vue b/src/views/layout/components/AppHeader.vue
index c3235b4..2e45954 100644
--- a/src/views/layout/components/AppHeader.vue
+++ b/src/views/layout/components/AppHeader.vue
@@ -1,12 +1,12 @@
 <template>
   <!--<div :style="{backgroundImage:'url('+headerUrl+')'}" class="app-header">-->
   <div style="background-color: #0078ff;" class="app-header">
-    <h3>{{ title }}</h3>
+    <h3 @click="backToIndex">{{ title }}</h3>
     <!--子系统选项-->
     <el-dropdown class="systemSelect" @command="handleCommand">
       <span class="el-dropdown-link" style="color: white">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
       </span>
-      <el-dropdown-menu slot="dropdown" >
+      <el-dropdown-menu slot="dropdown" style="z-index: 10000" >
         <el-dropdown-item>
           <span style="display:block;" @click="backToIndex">回首页</span>
         </el-dropdown-item>
@@ -15,7 +15,7 @@
     </el-dropdown>
 
     <div v-show="currentSystem.code === 'ctrl'" class="back-to-overview">
-      <el-button type="info" round @click="backToOverview">运行总览</el-button>
+      <el-button type="info" round @click="backToOverview" style="background-color: rgba(255,255,255,0.31);border: 0px">运行总览</el-button>
     </div>
 
     <el-dropdown class="avatar-container">
diff --git a/src/views/overview/doorIndex.vue b/src/views/overview/doorIndex.vue
index 5d2dce2..7cd40ff 100644
--- a/src/views/overview/doorIndex.vue
+++ b/src/views/overview/doorIndex.vue
@@ -58,26 +58,51 @@
           <i v-else class="el-icon-arrow-down"/>
         </span>
       </div>
-      <transition name="el-collapse-transition">
-        <el-scrollbar
-          v-show="tableShow"
-          :style="{ visibility: tableShow ? 'visible' : 'hidden'}"
-          :class="{ moredatascollor: alarmList.length > 6 }"
-          :native="false">
-          <el-table
-            :data="alarmList"
-            class="alarm-list-table"
-            border
-            stripe
-            @row-click="alarmRowClick">
-            <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{ scope.row[column.value] }}
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-scrollbar>
-      </transition>
+      <div v-show="alarmList.length > 4 && tableShow">
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 32px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 231px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          height="200"
+          style="border-left: 1px solid #2470AC;"
+          v-if="tableShow"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-show="alarmList.length < 5 && tableShow">
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          v-if="tableShow"
+          style="border: 1px solid #2470AC"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
     </div>
 
     <!-- 中间平面图区域 -->
@@ -730,9 +755,12 @@
   .main-page {
     background-size: cover;
     background-color: #023d83;
-    height: 100vh;
+    height: 98vh;
   }
-
+  .tableLine {
+    margin-top: 9px;
+    width: 463px;
+  }
   .main-header {
     width: 100vw;
   }
@@ -863,16 +891,24 @@
         margin-left: 20px;
       }
     }
-    .el-scrollbar {
-      /*height: 200px;*/
-      width: 100%;
+    // 滚动条的滑块
+    /deep/ .el-table__body-wrapper  {
+      background-color: #023D83;
+      border: 0px solid white;
     }
-    .moredatascollor {
-      height: 200px;
+    /deep/ .el-table--border th.gutter:last-of-type {
+      border: 1px solid #023D83;
+      border-bottom-width: 1px;
+      background-color: #023D83;
     }
-    .el-scrollbar__wrap {
-      overflow-y: auto;
-      overflow-x: hidden;
+    /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
+      background-color: #023D83;
+    }
+    /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+      display: none;
+    }
+    /deep/ .el-scrollbar__wrap {
+      overflow-x: hidden !important;
       margin-bottom: 0px !important;
     }
     .el-table {
@@ -906,16 +942,25 @@
     font-size: 15px;
     color: #FFFFFF;
     font-weight: normal;
+    border-color: #2470AC;
   }
-
+  .el-table--border::after, .el-table--group::after, .el-table::before{
+    background-color: #023d83;
+  }
+  .alarm-now-block /deep/ .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
+    border-color: #023d83;
+  }
   .alarm-now-block /deep/ .el-table__row td {
     background-color: #023D83;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ .el-table__body tr:hover > td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ tr.el-table__row--striped td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
 
   .map-tab {
@@ -1091,6 +1136,10 @@
   /*}*/
 
   @media(max-width: 1440px) {
+    .tableLine {
+      margin-top: 0px;
+      width: 343px;
+    }
     .main-title {
       height: 65px;
       padding-top: 16px;
diff --git a/src/views/overview/fenceIndex.vue b/src/views/overview/fenceIndex.vue
index 9466288..62a35e8 100644
--- a/src/views/overview/fenceIndex.vue
+++ b/src/views/overview/fenceIndex.vue
@@ -58,26 +58,52 @@
           <i v-else class="el-icon-arrow-down"/>
         </span>
       </div>
-      <transition name="el-collapse-transition">
-        <el-scrollbar
-          v-show="tableShow"
-          :style="{ visibility: tableShow ? 'visible' : 'hidden'}"
-          :class="{ moredatascollor: alarmList.length > 6 }"
-          :native="false">
-          <el-table
-            :data="alarmList"
-            class="alarm-list-table"
-            border
-            stripe
-            @row-click="alarmRowClick">
-            <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{ scope.row[column.value] }}
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-scrollbar>
-      </transition>
+      <div v-show="alarmList.length > 4 && tableShow">
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 32px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 231px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          height="200"
+          style="border-left: 1px solid #2470AC;"
+          v-if="tableShow"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-show="alarmList.length < 5 && tableShow">
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          v-if="tableShow"
+          style="border: 1px solid #2470AC"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
     </div>
 
     <!-- 中间平面图区域 -->
@@ -725,10 +751,14 @@
       font-weight: normal;
     }
   }
+  .tableLine {
+    margin-top: 9px;
+    width: 463px;
+  }
   .main-page {
     background-size: cover;
     background-color: #023d83;
-    height: 100vh;
+    height: 98vh;
   }
 
   .main-header {
@@ -859,16 +889,24 @@
         margin-left: 20px;
       }
     }
-    .el-scrollbar {
-      /*height: 200px;*/
-      width: 100%;
+    // 滚动条的滑块
+    /deep/ .el-table__body-wrapper  {
+      background-color: #023D83;
+      border: 0px solid white;
     }
-    .moredatascollor {
-      height: 200px;
+    /deep/ .el-table--border th.gutter:last-of-type {
+      border: 1px solid #023D83;
+      border-bottom-width: 1px;
+      background-color: #023D83;
     }
-    .el-scrollbar__wrap {
-      overflow-y: auto;
-      overflow-x: hidden;
+    /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
+      background-color: #023D83;
+    }
+    /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+      display: none;
+    }
+    /deep/ .el-scrollbar__wrap {
+      overflow-x: hidden !important;
       margin-bottom: 0px !important;
     }
     .el-table {
@@ -902,16 +940,25 @@
     font-size: 15px;
     color: #FFFFFF;
     font-weight: normal;
+    border-color: #2470AC;
   }
-
+  .el-table--border::after, .el-table--group::after, .el-table::before{
+    background-color: #023d83;
+  }
+  .alarm-now-block /deep/ .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
+    border-color: #023d83;
+  }
   .alarm-now-block /deep/ .el-table__row td {
     background-color: #023D83;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ .el-table__body tr:hover > td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ tr.el-table__row--striped td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
 
   .map-tab {
@@ -1087,6 +1134,10 @@
   /*}*/
 
   @media(max-width: 1440px) {
+    .tableLine {
+      margin-top: 0px;
+      width: 343px;
+    }
     .main-title {
       height: 65px;
       padding-top: 16px;
diff --git a/src/views/overview/keyIndex.vue b/src/views/overview/keyIndex.vue
index 37405a8..a461c94 100644
--- a/src/views/overview/keyIndex.vue
+++ b/src/views/overview/keyIndex.vue
@@ -33,20 +33,6 @@
             <span v-text="dev.alarm"/>
           </div>
         </el-col>
-
-        <!--<el-col :span="6" class="sub-data-block dev-offline">-->
-          <!--<div class="statis-block">-->
-            <!--<span v-text="dev.offLine"/>-->
-          <!--</div>-->
-          <!--<div class="sub-title">离线</div>-->
-        <!--</el-col>-->
-
-        <!--<el-col :span="6" class="sub-data-block dev-closed">-->
-          <!--<div class="statis-block">-->
-            <!--<span v-text="dev.closed"/>-->
-          <!--</div>-->
-          <!--<div class="sub-title">关闭</div>-->
-        <!--</el-col>-->
       </el-row>
     </div>
 
@@ -58,26 +44,52 @@
           <i v-else class="el-icon-arrow-down"/>
         </span>
       </div>
-      <transition name="el-collapse-transition">
-        <el-scrollbar
-          v-show="tableShow"
-          :style="{ visibility: tableShow ? 'visible' : 'hidden'}"
-          :class="{ moredatascollor: alarmList.length > 6 }"
-          :native="false">
-          <el-table
-            :data="alarmList"
-            class="alarm-list-table"
-            border
-            stripe
-            @row-click="alarmRowClick">
-            <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{ scope.row[column.value] }}
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-scrollbar>
-      </transition>
+      <div v-show="alarmList.length > 4 && tableShow">
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 32px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 231px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          height="200"
+          style="border-left: 1px solid #2470AC;"
+          v-if="tableShow"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-show="alarmList.length < 5 && tableShow">
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          v-if="tableShow"
+          style="border: 1px solid #2470AC"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
     </div>
 
     <!-- 中间平面图区域 -->
@@ -95,49 +107,16 @@
     </div>
 
     <!-- 平面图区域设备类型按钮 -->
-    <div v-show="showType" class="bottom-center" :style="{ width: btnwidth + 'px'}">
-      <el-col class="dev-icon" @click.native="selectDevByType('4', $event)">
-        <img id="4-1-img" v-if="checkDevType1[0]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-        <img id="4-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-        <span>人脸识别</span>
-      </el-col>
-      <!--<el-col class="dev-icon" @click.native="selectDevByType('5', $event)">-->
-        <!--<img id="5-1-img" v-if="checkDevType1[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
-        <!--<img id="5-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
-        <!--<span>车牌轨迹</span>-->
-      <!--</el-col>-->
-      <!--<el-col class="dev-icon" @click.native="selectDevByType('8', $event)">-->
-        <!--<img id="8-1-img" v-if="checkDevType1[2]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
-        <!--<img id="8-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
-        <!--<span>周界防护</span>-->
-      <!--</el-col>-->
-      <!--<el-col class="dev-icon" @click.native="selectDevByType('9', $event)">-->
-        <!--<img id="9-1-img" v-if="checkDevType1[3]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
-        <!--<img id="9-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
-        <!--<span>标准数字</span>-->
-      <!--</el-col>-->
-      <!--<el-col class="dev-icon" @click.native="selectDevByType('10', $event)">-->
-        <!--<img id="10-1-img" v-if="checkDevType1[4]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
-        <!--<img id="10-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
-        <!--<span>智能球形</span>-->
-      <!--</el-col>-->
-      <!--<el-col class="dev-icon" @click.native="selectDevByType('11', $event)">-->
-        <!--<img id="11-1-img" v-if="checkDevType1[5]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
-        <!--<img id="11-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
-        <!--<span>标准半球</span>-->
-      <!--</el-col>-->
-    </div>
-    <!-- 平面图区域设备类型按钮 -->
     <div v-show="!showType"class="bottom-center" :style="{ width: cameraTypeNum*btnwidth + 'px'}">
       <el-col ref="all" class="dev-icon dev-type-selected" @click.native="selectDevByType('all', $event)">
         <img v-if="checkDevType[0]" src="@/assets/overview_images/icons/icon-all-checked.png">
         <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
         <span>全部</span>
       </el-col>
-      <el-col ref="camera" :class="cameraClass" @click.native="showType=!showType;selectDevByType('camera', $event)">
-        <img id="cam_img_red" v-if="checkDevType[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-        <img id="cam_img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-        <span>摄像头</span>
+      <el-col class="dev-icon" @click.native="selectDevByType('camera4', $event)">
+        <img id="4-1-img" v-if="checkDevType[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
+        <img id="4-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
+        <span>人脸识别</span>
       </el-col>
       <el-col v-show="showTemp" class="dev-icon" @click.native="selectDevByType('temperature', $event)">
         <img v-if="checkDevType[2]" src="@/assets/overview_images/icons/icon-temperature-checked.png">
@@ -364,7 +343,6 @@
       }, // 设备详情表单
       cameraClass:'dev-icon',
       showType : false,
-      checkDevType1: [false, false, false, false, false, false], // 摄像头类型
       checkDevType: [true, false, false, false, false] // 选中设备类型
     }
   },
@@ -462,7 +440,7 @@
       }else if(pic==='3'){
         this.changeMap('tg_4_1')
       }else if(pic==='4'){
-        this.changeMap('tg_4_1')
+        this.changeMap('tg_4_5')
       }
       setTimeout(() => {
         var obj = document.getElementById(val.toString());
@@ -477,24 +455,6 @@
     handleKeyup(val){ //单击收起摄像头分类
       this.showAlarmDetail  = false
       this.showDevDetail  = false
-      var item = ['人脸识别']
-      for(var i=0;i<item.length;i++){
-        if(item[i]===val.target.innerText){
-          return
-        }
-      }
-      if(val.target.id.endsWith('-1-img')||val.target.id.endsWith('-2-img')|| val.target.id==='cam_img' || val.target.id==='cam_img_red'){
-        return
-      }
-      if( val.target.innerText!=='摄像头') {
-        this.showType = false
-        const devTypes = document.querySelectorAll('.dev-icon')
-        for(var i=0;i<this.checkDevType.length;i++) {
-          if (this.checkDevType[i]) {
-            devTypes[i+1].className += ' dev-type-selected'
-          }
-        }
-      }
     },
     handleSelect(key, keyPath) {
       this.selectDevByType(key,undefined)
@@ -643,14 +603,13 @@
       if(type !== 'camera'){
         // 添加选中的样式
         if (typeof event === 'undefined') {
-          devTypes[1].className += ' dev-type-selected'
+          devTypes[0].className += ' dev-type-selected'
         } else {
           event.currentTarget.className += ' dev-type-selected'
         }
       }
       if(type!=='camera'){
         this.checkDevType = [false, false, false, false, false]
-        this.checkDevType1 = [false, false, false, false, false, false]
       }
       if (type === 'all') {
         if(this.bgImageSrc===tg_4_5){
@@ -660,14 +619,7 @@
         }
         // this.devListParams.deviceTypes = []
         this.checkDevType[0] = true
-      } else if(type==='camera'){
-        for(var i=0;i<this.checkDevType1.length;i++){
-          if(this.checkDevType1[i]) {
-            devTypes[i].className += ' dev-type-selected'
-          }
-        }
-        return
-      } else if (type === 'temperature') {
+      }  else if (type === 'temperature') {
         this.devListParams.deviceTypes = temperatureTypes.toString()
         this.checkDevType[2] = true
       } else if (type === 'smoking') {
@@ -676,30 +628,24 @@
       } else if (type === 'sound') {
         this.devListParams.deviceTypes = soundTypes.toString()
         this.checkDevType[4] = true
-      }else if(type === '4'){
+      }else if(type === 'camera4'){
         this.devListParams.deviceTypes = '4'
         this.checkDevType[1] = true
-        this.checkDevType1[0] = true
       }else if(type === '5'){
         this.devListParams.deviceTypes = '5'
         this.checkDevType[1] = true
-        this.checkDevType1[1] = true
       }else if(type === '8'){
         this.devListParams.deviceTypes = '8'
         this.checkDevType[1] = true
-        this.checkDevType1[2] = true
       }else if(type === '9'){
         this.devListParams.deviceTypes = '9'
         this.checkDevType[1] = true
-        this.checkDevType1[3] = true
       }else if(type === '10'){
         this.devListParams.deviceTypes = '10'
         this.checkDevType[1] = true
-        this.checkDevType1[4] = true
       }else if(type === '11'){
         this.devListParams.deviceTypes = '11'
         this.checkDevType[1] = true
-        this.checkDevType1[5] = true
       }
       this.fetchDeviceData()
       // if(this.checkDevType[1]){
@@ -866,18 +812,13 @@
       }else{
         this.devListParams.deviceTypes = '1,2,4,12'
       }
-      // this.devListParams.deviceTypes = []
       if (index === 'tg_main') {
-        // this.imgSizeOriginal = { width: 2245, height: 1586 }
         this.devListParams.picture = '1'
       }else if (index === 'tg_3_1') {
-        // this.imgSizeOriginal = { width: 2245, height: 1586 }
         this.devListParams.picture = '2'
       } else if (index === 'tg_4_1') {
-        // this.imgSizeOriginal = { width: 2218, height: 2169 }
         this.devListParams.picture = '3'
       }else if (index === 'tg_4_5') {
-        // this.imgSizeOriginal = { width: 2245, height: 1586 }
         this.devListParams.picture = '4'
       }
       overviewDeviceList(this.devListParams).then(response => {
@@ -1060,10 +1001,14 @@
   /deep/ .el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
     border-bottom-width: 0px;
   }
+  .tableLine {
+    margin-top: 9px;
+    width: 463px;
+  }
   .main-page {
     background-size: cover;
     background-color: #023d83;
-    height: 100vh;
+    height: 98vh;
   }
 
   .main-header {
@@ -1194,16 +1139,24 @@
         margin-left: 20px;
       }
     }
-    .el-scrollbar {
-      /*height: 200px;*/
-      width: 100%;
+    // 滚动条的滑块
+    /deep/ .el-table__body-wrapper  {
+      background-color: #023D83;
+      border: 0px solid white;
     }
-    .moredatascollor {
-      height: 200px;
+    /deep/ .el-table--border th.gutter:last-of-type {
+      border: 1px solid #023D83;
+      border-bottom-width: 1px;
+      background-color: #023D83;
     }
-    .el-scrollbar__wrap {
-      overflow-y: auto;
-      overflow-x: hidden;
+    /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
+      background-color: #023D83;
+    }
+    /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+      display: none;
+    }
+    /deep/ .el-scrollbar__wrap {
+      overflow-x: hidden !important;
       margin-bottom: 0px !important;
     }
     .el-table {
@@ -1237,16 +1190,25 @@
     font-size: 15px;
     color: #FFFFFF;
     font-weight: normal;
+    border-color: #2470AC;
   }
-
+  .el-table--border::after, .el-table--group::after, .el-table::before{
+    background-color: #023d83;
+  }
+  .alarm-now-block /deep/ .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
+    border-color: #023d83;
+  }
   .alarm-now-block /deep/ .el-table__row td {
     background-color: #023D83;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ .el-table__body tr:hover > td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ tr.el-table__row--striped td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
 
   .map-tab {
@@ -1431,6 +1393,10 @@
   /*}*/
 
   @media(max-width: 1440px) {
+    .tableLine {
+      margin-top: 0px;
+      width: 343px;
+    }
     .main-title {
       height: 65px;
       padding-top: 16px;
diff --git a/src/views/overview/regionIndex.vue b/src/views/overview/regionIndex.vue
index 69e7606..d4ea083 100644
--- a/src/views/overview/regionIndex.vue
+++ b/src/views/overview/regionIndex.vue
@@ -58,26 +58,52 @@
           <i v-else class="el-icon-arrow-down"/>
         </span>
       </div>
-      <transition name="el-collapse-transition">
-        <el-scrollbar
-          v-show="tableShow"
-          :style="{ visibility: tableShow ? 'visible' : 'hidden'}"
-          :class="{ moredatascollor: alarmList.length > 6 }"
-          :native="false">
-          <el-table
-            :data="alarmList"
-            class="alarm-list-table"
-            border
-            stripe
-            @row-click="alarmRowClick">
-            <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{ scope.row[column.value] }}
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-scrollbar>
-      </transition>
+      <div v-show="alarmList.length > 4 && tableShow">
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 32px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 231px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          height="200"
+          style="border-left: 1px solid #2470AC;"
+          v-if="tableShow"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-show="alarmList.length < 5 && tableShow">
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          v-if="tableShow"
+          style="border: 1px solid #2470AC"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
     </div>
 
     <!-- 中间平面图区域 -->
@@ -293,7 +319,7 @@
       title: getProject().title,
       bgImageSrc: tg_main,
       devListParams: {
-        picture: '3',
+        picture: '1',
         areaTypeId: 3,
         deviceTypes: '4,9,10,11'
       },
@@ -718,10 +744,14 @@
       font-weight: normal;
     }
   }
+  .tableLine {
+    margin-top: 9px;
+    width: 463px;
+  }
   .main-page {
     background-size: cover;
     background-color: #023d83;
-    height: 100vh;
+    height: 98vh;
   }
 
   .main-header {
@@ -852,16 +882,24 @@
         margin-left: 20px;
       }
     }
-    .el-scrollbar {
-      /*height: 200px;*/
-      width: 100%;
+    // 滚动条的滑块
+    /deep/ .el-table__body-wrapper  {
+      background-color: #023D83;
+      border: 0px solid white;
     }
-    .moredatascollor {
-      height: 200px;
+    /deep/ .el-table--border th.gutter:last-of-type {
+      border: 1px solid #023D83;
+      border-bottom-width: 1px;
+      background-color: #023D83;
     }
-    .el-scrollbar__wrap {
-      overflow-y: auto;
-      overflow-x: hidden;
+    /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
+      background-color: #023D83;
+    }
+    /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+      display: none;
+    }
+    /deep/ .el-scrollbar__wrap {
+      overflow-x: hidden !important;
       margin-bottom: 0px !important;
     }
     .el-table {
@@ -895,16 +933,25 @@
     font-size: 15px;
     color: #FFFFFF;
     font-weight: normal;
+    border-color: #2470AC;
   }
-
+  .el-table--border::after, .el-table--group::after, .el-table::before{
+    background-color: #023d83;
+  }
+  .alarm-now-block /deep/ .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
+    border-color: #023d83;
+  }
   .alarm-now-block /deep/ .el-table__row td {
     background-color: #023D83;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ .el-table__body tr:hover > td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ tr.el-table__row--striped td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
 
   .map-tab {
@@ -1080,6 +1127,10 @@
   /*}*/
 
   @media(max-width: 1440px) {
+    .tableLine {
+      margin-top: 0px;
+      width: 343px;
+    }
     .main-title {
       height: 65px;
       padding-top: 16px;
diff --git a/src/views/staff/staffAdd.vue b/src/views/staff/staffAdd.vue
index 769e6d6..698cf37 100644
--- a/src/views/staff/staffAdd.vue
+++ b/src/views/staff/staffAdd.vue
@@ -116,6 +116,9 @@
           <el-row>
             <el-button type="primary" plain class="id-card-btn" :disabled="canRead" @click="readIDCard">读取身份证</el-button>
           </el-row>
+          <el-row>
+            <el-button type="primary" plain class="id-card-btn" @click="readCamera">{{ btnCamera }}</el-button>
+          </el-row>
         </el-col>
       </el-row>
     </el-form>
@@ -126,8 +129,13 @@
           <el-button v-show="isKey" type="primary" style="margin-left: 20px;" @click="registerIris"> 注册虹膜 </el-button>
           <el-button type="primary" style="margin-left: 20px;" @click="saveData"> 保存 </el-button>
         </el-col>
+        <el-col :span="6" :offset="3">
+          <video v-show="showVideo" width="200px" height="150px" style="margin-left: -8px"></video>
+          <canvas v-show = "false" width="200px" height="150px"></canvas>
+        </el-col>
       </el-row>
     </div>
+
     <capture-iris ref="captureIris"/>
   </div>
 </template>
@@ -150,6 +158,9 @@
       deptList: [],
       isEditMode: false, // 是否为编辑模式，编辑模式部分字段不允许修改，且没有重置和虹膜注册功能
       isKey: false, // 是否重点区域授权人员
+      btnCamera:'读取摄像头',
+      showVideo: false,
+      stream:'',
       personForm: {
         id: '', // 人员id
         idCard: '', // 身份证号
@@ -284,6 +295,81 @@
         this.formLoading = false
       })
     },
+    readCamera() {
+      if(this.btnCamera === '读取摄像头'){
+        this.cameraImgFile()
+      }else{
+        this.getAPhoto()
+      }
+    },
+    getAPhoto() {
+      //绘制canvas图形
+      let video = document.getElementsByTagName("video")[0]
+      var canvas = document.getElementsByTagName('canvas')[0]
+      var context = canvas.getContext('2d')
+      context.clearRect(0, 0, context.width, context.height);
+      context.drawImage(video, 0, 0,200,150);
+      this.showVideo = false
+      //把canvas图像转为img图片
+      this.photo = canvas.toDataURL("image/png");
+      var mediaStreamTrack =  this.stream.getTracks()[0];
+      mediaStreamTrack.stop();
+      this.btnCamera = '读取摄像头'
+    },
+    // 拍照上传获取video
+    cameraImgFile() {
+      let _this = this;
+
+      // 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象
+      if (navigator.mediaDevices === undefined) {
+        navigator.mediaDevices = {};
+      }
+      // 一些浏览器部分支持 mediaDevices。我们不能直接给对象设置 getUserMedia
+      // 因为这样可能会覆盖已有的属性。这里我们只会在没有getUserMedia属性的时候添加它。
+      if (navigator.mediaDevices.getUserMedia === undefined) {
+        navigator.mediaDevices.getUserMedia = function(constraints) {
+          // 首先，如果有getUserMedia的话，就获得它
+          var getUserMedia =
+            navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
+
+          // 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
+          if (!getUserMedia) {
+            return Promise.reject(
+              new Error("getUserMedia is not implemented in this browser")
+            );
+          }
+          // 否则，为老的navigator.getUserMedia方法包裹一个Promise
+          return new Promise(function(resolve, reject) {
+            getUserMedia.call(navigator, constraints, resolve, reject);
+          });
+        };
+      }
+      navigator.mediaDevices
+        .getUserMedia({ video: true, audio: false })
+        .then(function(stream) {
+          _this.stream = stream;
+          _this.videoShow = true;
+          // 旧的浏览器可能没有srcObject
+          _this.$nextTick(() => {
+            let video = document.getElementsByTagName("video")[0]
+            if ("srcObject" in video) {
+              video.srcObject = stream;
+            } else {
+              // 防止在新的浏览器里使用它，应为它已经不再支持了
+              video.src = window.URL.createObjectURL(stream);
+            }
+            _this.showVideo = true
+            _this.btnCamera = '拍照'
+            video.onloadedmetadata = function(e) {
+              video.play();
+            };
+          });
+        })
+        .catch(function(err) {
+          _this.videoShow = false;
+          _this.$message.warning("未发现可拍照设备或出现其他错误！");
+        });
+    },
     readIDCard() {
       this.resetForm()
       this.canRead = true

diff --git a/config/dev.env.js b/config/dev.env.js
index 6b4622a..095ba33 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -8,4 +8,5 @@
   NODE_ENV: '"development"',
   // BASE_API: '"http://192.168.5.220:20311"'
   BASE_API: '"http://111.198.10.15:11631"'
+  // BASE_API: '"http://192.168.5.220:20311"'
 })
diff --git a/config/prod.env.js b/config/prod.env.js
index f2501d0..ccbc615 100644
--- a/config/prod.env.js
+++ b/config/prod.env.js
@@ -1,5 +1,6 @@
 'use strict'
 module.exports = {
   NODE_ENV: '"production"',
-  BASE_API: '"http://192.168.5.220:20311"'
+  // BASE_API: '"http://192.168.5.220:20311"'
+  BASE_API: '"http://111.198.10.15:11631"'
 }
diff --git a/favicon.ico b/favicon.ico
index 34b63ac..bc1bfc5 100644
--- a/favicon.ico
+++ b/favicon.ico
Binary files differ
diff --git a/src/api/visitor.js b/src/api/visitor.js
index 05ed6ea..01a6c26 100644
--- a/src/api/visitor.js
+++ b/src/api/visitor.js
@@ -74,3 +74,14 @@
   })
 }
 
+// 查询人员轨迹
+export function getDetail(devcode) {
+  return request({
+    url: '/device/capturePhoto',
+    method: 'post',
+    params:{
+      devcode: devcode
+    }
+  })
+}
+
diff --git a/src/assets/dashboard_images/icon-defence.png b/src/assets/dashboard_images/icon-defence.png
index 8069376..11b41cb 100644
--- a/src/assets/dashboard_images/icon-defence.png
+++ b/src/assets/dashboard_images/icon-defence.png
Binary files differ
diff --git a/src/utils/calendarUtil.js b/src/utils/calendarUtil.js
index da840c3..e599bdd 100644
--- a/src/utils/calendarUtil.js
+++ b/src/utils/calendarUtil.js
@@ -61,7 +61,32 @@
 
   return yearMonth + '-' + format(day)
 }
+export function formatDateTime(cellval) {
+  var dateVal = cellval + "";//把时间戳转成字符串格式
+  if (cellval != null) {
+    //取得时间戳部分 如：获取 /Date(1545299299910)/ 中的 1545299299910 部分
+    var date = new Date(parseInt(dateVal.replace("/Date(", "")
+      .replace(")/", ""), 10));
+    //获取年，不需要其他操作所以可以直接返回	date.getFullYear()
+    //月份为0-11，所以+1，月份小于10时补个0
+    var month = date.getMonth() + 1 < 10 ? "0"
+      + (date.getMonth() + 1) : date.getMonth() + 1;
+    //获取日
+    var currentDate = date.getDate() < 10 ? "0" + date.getDate()
+      : date.getDate();
+    //获取时间
+    var hours = date.getHours() < 10 ? "0" + date.getHours() : date
+      .getHours();
+    var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes()
+      : date.getMinutes();
+    var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds()
+      : date.getSeconds();
 
+    //返回日期结果，需要时间的话在加上时间
+    return date.getFullYear() + "-" + month + "-" + currentDate+" "+hours+":"+
+      minutes+":"+seconds;
+  }
+}
 // 格式化日期为字符串
 export function formatToString(value, level) {
   const date = new Date(value)
diff --git a/src/views/alarm/alarmDetail.vue b/src/views/alarm/alarmDetail.vue
index 2c94629..8c32ee5 100644
--- a/src/views/alarm/alarmDetail.vue
+++ b/src/views/alarm/alarmDetail.vue
@@ -1,7 +1,7 @@
 <!-- 报警详情 -->
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :model="dataForm" label-well-code="right" label-width="110px">
+    <el-form v-loading="loading" ref="dataForm" :model="dataForm" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="报警编号">
@@ -86,6 +86,7 @@
   name: 'AlarmDetail',
   data() {
     return {
+      loading: true,
       dialogFormVisible: false, // 对话框是否显示
       dialogStatus: '', // 对话框类型：create,update,detail
       dataForm: {
@@ -123,7 +124,7 @@
         this.dataForm = {
           id: row.id
         }
-
+        this.loading = true
         alarmDetail(this.dataForm.id).then(response => {
           if (response.code === 200) {
             this.dataForm = {
@@ -140,7 +141,7 @@
               reason: response.data.reason,
               remark: response.data.remark
             }
-
+            this.loading = false
             // 格式化报警状态
             if (response.data.valid === 1) {
               this.dataForm.validStr = '正在报警'
diff --git a/src/views/car/carAdd.vue b/src/views/car/carAdd.vue
index ddb215f..5f54c93 100644
--- a/src/views/car/carAdd.vue
+++ b/src/views/car/carAdd.vue
@@ -10,7 +10,7 @@
         </el-col>
         <el-col :span="12">
           <el-form-item label="车辆性质" prop="property">
-            <el-radio-group v-model="dataForm.property" :disabled="isDetailMode">
+            <el-radio-group v-model="dataForm.property" :disabled="isDetailMode" @change="resetOwner">
               <el-radio v-for="item in carProperties" :key="item.value" :label="item.value">{{ item.name }}</el-radio>
             </el-radio-group>
           </el-form-item>
@@ -106,6 +106,12 @@
     this.fetchStaffList()
   },
   methods: {
+    resetOwner(){
+      if(this.dataForm.property!=='2'){
+        this.dataForm.ownerId = ''
+        // this.dataForm.phone = ''
+      }
+    },
     // 初始化对话框
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.btnLoading = false
@@ -208,6 +214,7 @@
           }
         })
         this.dataForm.phone = selectedStaff[0].phone
+        this.dataForm.deptid = selectedStaff[0].deptid
       } else {
         this.dataForm.phone = ''
       }
diff --git a/src/views/car/carList.vue b/src/views/car/carList.vue
index 8d924ff..4ff07ab 100644
--- a/src/views/car/carList.vue
+++ b/src/views/car/carList.vue
@@ -105,11 +105,11 @@
           value: 'propertyStr',
           align: 'center'
         },
-        // {
-        //   text: '车主姓名',
-        //   value: 'ownerName',
-        //   align: 'center'
-        // },
+        {
+          text: '车主姓名',
+          value: 'ownerName',
+          align: 'center'
+        },
         {
           text: '车主联系电话',
           value: 'phone',
diff --git a/src/views/ctrl/index.vue b/src/views/ctrl/index.vue
index fd36f2b..29923af 100644
--- a/src/views/ctrl/index.vue
+++ b/src/views/ctrl/index.vue
@@ -50,12 +50,13 @@
         <in-out-today />
       </el-col>
 
-      <el-col :span="7" class="chart-block">
+      <el-col id="dev-count"  :span="10" class="chart-block">
         <div class="chart-title">各类型设备安装数量</div>
         <dev-count />
       </el-col>
 
-      <el-col id="pass-count" :span="10" class="chart-block">
+      <!--<el-col id="pass-count" class="chart-block">-->
+      <el-col :span="7" class="chart-block">
         <div class="chart-title">进出营数量统计</div>
         <in-out-count />
       </el-col>
@@ -121,7 +122,7 @@
 <style scoped>
   .app-wrapper {
     background-color: #e9e9e9;
-    padding-bottom: 20px;
+    padding-bottom: 10px;
   }
 
   .sub-data-block {
@@ -129,6 +130,7 @@
     border-radius: 16px;
     float: left;
     margin: 10px;
+    margin-bottom: 0px;
     box-shadow: 1px 1px 5px #999;
   }
   .sub-title {
@@ -136,36 +138,38 @@
     text-align: center;
     font-family: 'Microsoft YaHei';
     color: #fff;
-    font-size: 24px;
-    padding: 10px;
+    font-size: 20px;
+    padding-top: 10px;
+    padding-bottom: 0px;
   }
   .statis-block {
     text-align: center;
     margin: 0px 10px 0px 10px;
-    padding: 0px 10px 10px 10px;
+    padding: 0px 10px 5px 10px;
     color: #fff;
     font-weight: bold;
     letter-spacing: 1px;
-    font-size: 24px;
+    font-size: 20px;
   }
   .big-size {
-    font-size: 64px;
+    font-size: 35px;
   }
 
   .chart-title {
     font-family: 'Microsoft YaHei';
     color: #000000;
     font-weight: bold;
-    font-size: 20px;
+    font-size: 18px;
     text-align: center;
     padding: 10px;
   }
   .chart-block {
     margin-left: 20px;
-    margin-top: 20px;
+    margin-top: 10px;
     border-radius: 16px;
     background-color: #FFFFFF;
     box-shadow: 1px 1px 5px #999;
+    height: 37vh;
   }
 
   #today-visitor {
@@ -187,7 +191,7 @@
     background-image: linear-gradient(to right, #ffa800, #ce7e00);
   }
 
-  #pass-count, #dev-alarm-count {
+  #dev-count, #dev-alarm-count {
     width: calc(250vw / 6 - 70px);
   }
 </style>
diff --git a/src/views/ctrl/overview.vue b/src/views/ctrl/overview.vue
index 62e1105..49ed928 100644
--- a/src/views/ctrl/overview.vue
+++ b/src/views/ctrl/overview.vue
@@ -59,26 +59,52 @@
           <i v-else class="el-icon-arrow-down"/>
         </span>
       </div>
-      <transition name="el-collapse-transition">
-        <el-scrollbar
-          v-show="tableShow"
-          :style="{ visibility: tableShow ? 'visible' : 'hidden'}"
-          :class="{ moredatascollor: alarmList.length > 6 }"
-          :native="false">
-          <el-table
-            :data="alarmList"
-            class="alarm-list-table"
-            border
-            stripe
-            @row-click="alarmRowClick">
-            <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{ scope.row[column.value] }}
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-scrollbar>
-      </transition>
+      <div v-show="alarmList.length > 4 && tableShow">
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 32px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 231px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          height="200"
+          style="border-left: 1px solid #2470AC;"
+          v-if="tableShow"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-show="alarmList.length < 5 && tableShow">
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          v-if="tableShow"
+          style="border: 1px solid #2470AC"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
     </div>
 
     <!-- 中间平面图区域 -->
@@ -145,9 +171,13 @@
         class="point-camera"
         @click="detailDev(item, $event)" />
     </div>
-
     <!-- 平面图区域设备类型按钮 -->
-    <div v-show="showType" class="bottom-center" :style="{ width: cameraTypeNum*btnwidth + 'px'}">
+    <div class="bottom-center" :style="{ width: btnNum*btnwidth + 'px'}">
+        <el-col v-show="btnNum!==1" ref="all" class="dev-icon dev-type-selected" @click.native="selectDevByType('all', $event)">
+          <img v-if="checkDevType[0]" src="@/assets/overview_images/icons/icon-all-checked.png">
+          <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
+          <span>全部</span>
+        </el-col>
       <el-col class="dev-icon" @click.native="selectDevByType('4', $event)">
         <img id="4-1-img" v-if="checkDevType1[0]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="4-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
@@ -178,20 +208,6 @@
         <img id="11-2-img" v-else src="@/assets/overview_images/icons/half-camera-blue.png">
         <span>标准半球</span>
       </el-col>
-    </div>
-    <!-- 平面图区域设备类型按钮 -->
-    <div v-show="!showType"class="bottom-center" :style="{ width: btnNum*btnwidth + 'px'}">
-        <el-col ref="all" class="dev-icon dev-type-selected" @click.native="selectDevByType('all', $event)">
-          <img v-if="checkDevType[0]" src="@/assets/overview_images/icons/icon-all-checked.png">
-          <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
-          <span>全部</span>
-        </el-col>
-        <el-col ref="camera" :class="cameraClass" @click.native="showType=!showType;selectDevByType('camera', $event)">
-        <!--<el-col ref="camera" class="dev-icon" @click.native="selectDevByType('camera', $event)">-->
-          <img id="cam_img_red" v-if="checkDevType[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-          <img id="cam_img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-          <span>摄像头</span>
-        </el-col>
         <el-col v-show="showFence" class="dev-icon" @click.native="selectDevByType('fence', $event)">
           <img v-if="checkDevType[2]" src="@/assets/overview_images/icons/icon-fence-checked.png">
           <img v-else src="@/assets/overview_images/icons/icon-fence-unchecked.png">
@@ -372,7 +388,7 @@
           height: 789
         }, // 屏幕窗口尺寸
         imgUrl: require('../../assets/overview_images/icons/icon-camera-point.png'),
-        btnNum: 3,
+        btnNum: 8,
         cameraTypeNum: 6,
         btnwidth: 210,
         halfLeft: 0,
@@ -498,25 +514,25 @@
             }
           }
         }
-        //跟换菜单
-        var item = ['人脸识别','车牌轨迹','周界防护','标准数字','智能球形','标准半球']
-        for(var i=0;i<item.length;i++){
-          if(item[i]===val.target.innerText){
-            return
-          }
-        }
-        if(val.target.id.endsWith('-1-img')||val.target.id.endsWith('-2-img')|| val.target.id==='cam_img' || val.target.id==='cam_img_red'){
-          return
-        }
-        if( val.target.innerText!=='摄像头') {
-          this.showType = false
-          const devTypes = document.querySelectorAll('.dev-icon')
-            for(var i=0;i<this.checkDevType.length;i++) {
-              if (this.checkDevType[i]) {
-                devTypes[i+6].className += ' dev-type-selected'
-              }
-            }
-        }
+        // //跟换菜单
+        // var item = ['人脸识别','车牌轨迹','周界防护','标准数字','智能球形','标准半球']
+        // for(var i=0;i<item.length;i++){
+        //   if(item[i]===val.target.innerText){
+        //     return
+        //   }
+        // }
+        // if(val.target.id.endsWith('-1-img')||val.target.id.endsWith('-2-img')|| val.target.id==='cam_img' || val.target.id==='cam_img_red'){
+        //   return
+        // }
+        // if( val.target.innerText!=='摄像头') {
+        //   this.showType = false
+        //   const devTypes = document.querySelectorAll('.dev-icon')
+        //     for(var i=0;i<this.checkDevType.length;i++) {
+        //       if (this.checkDevType[i]) {
+        //         devTypes[i+6].className += ' dev-type-selected'
+        //       }
+        //     }
+        // }
       },
       webSocket() {
         const that = this
@@ -586,7 +602,7 @@
         }else if(pic==='3'){
           this.changeMap('tg_4_1')
         }else if(pic==='4'){
-          this.changeMap('tg_4_1')
+          this.changeMap('tg_4_5')
         }
         setTimeout(() => {
           var obj = document.getElementById(val.toString());
@@ -771,7 +787,11 @@
           this.checkDevType1 = [false, false, false, false, false, false]
           // 添加选中的样式
           if (typeof event === 'undefined') {
-            devTypes[6].className += ' dev-type-selected'
+            if(this.btnNum===1){
+              devTypes[1].className += ' dev-type-selected'
+            }else{
+              devTypes[0].className += ' dev-type-selected'
+            }
           } else {
             event.currentTarget.className += ' dev-type-selected'
           }
@@ -1017,7 +1037,7 @@
           this.isMain = true
           // this.devListParams.picture = '1'
           this.imgSizeOriginal = { width: 2245, height: 1586 }
-          this.btnNum  = 3
+          this.btnNum  = 8
           this.cameraTypeNum  = 6
           this.showFence = true // 显示电子围栏
           this.showTemp = false // 隐藏温湿度设备
@@ -1027,6 +1047,7 @@
           this.showSubTabGuider = false
           this.showFloorThree = false
           this.showFloorFour = false
+          this.selectDevByType('all')
         } else if (index === 'tg_3_1') {
           this.bgImageSrc = tg_3_1
           // this.devListParams.picture = '2'
@@ -1037,6 +1058,7 @@
           this.showTemp = true // 隐藏温湿度
           this.showSmoking = true // 隐藏烟感
           this.showSound = true // 隐藏声光报警器
+          this.selectDevByType('all')
         } else if (index === 'tg_4_1') {
           this.bgImageSrc = tg_4_1
           // this.devListParams.picture = '3'
@@ -1048,18 +1070,19 @@
           this.showTemp = true // 显示温湿度
           this.showSmoking = true // 显示烟感
           this.showSound = true // 显示声光报警器
+          this.selectDevByType('all')
         } else if (index === 'tg_4_5') {
           this.bgImageSrc = tg_4_5
           // this.devListParams.picture = '4'
           this.imgSizeOriginal = { width: 2245, height: 1586 }
-          this.btnNum  = 2
+          this.btnNum  = 1
           this.cameraTypeNum  = 1
           this.showFence = false // 隐藏电子围栏
           this.showTemp = false // 隐藏温湿度
           this.showSmoking = false // 隐藏烟感
           this.showSound = false // 隐藏声光报警器
+          this.selectDevByType('4')
         }
-        this.selectDevByType('all')
       },
       // 查询并显示设备详情
       detailDev(dev, event) {
@@ -1201,10 +1224,14 @@
     left: 50%; transform: translateX(-50%);
     bottom: 25px;
   }
+  .tableLine {
+    margin-top: 9px;
+    width: 463px;
+  }
   .main-page {
     background-size: cover;
     background-color: #023d83;
-    height: 100vh;
+    height: 98vh;
   }
 
   .main-header {
@@ -1362,16 +1389,24 @@
         margin-left: 20px;
       }
     }
-    .el-scrollbar {
-      /*height: 200px;*/
-      width: 100%;
+    // 滚动条的滑块
+    /deep/ .el-table__body-wrapper  {
+      background-color: #023D83;
+      border: 0px solid white;
     }
-    .moredatascollor {
-      height: 200px;
+    /deep/ .el-table--border th.gutter:last-of-type {
+      border: 1px solid #023D83;
+      border-bottom-width: 1px;
+      background-color: #023D83;
     }
-    .el-scrollbar__wrap {
-      overflow-y: auto;
-      overflow-x: hidden;
+    /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
+      background-color: #023D83;
+    }
+    /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+      display: none;
+    }
+    /deep/ .el-scrollbar__wrap {
+      overflow-x: hidden !important;
       margin-bottom: 0px !important;
     }
     .el-table {
@@ -1405,16 +1440,25 @@
     font-size: 15px;
     color: #FFFFFF;
     font-weight: normal;
+    border-color: #2470AC;
   }
-
+  .el-table--border::after, .el-table--group::after, .el-table::before{
+    background-color: #023d83;
+  }
+  .alarm-now-block /deep/ .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
+    border-color: #023d83;
+  }
   .alarm-now-block /deep/ .el-table__row td {
     background-color: #023D83;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ .el-table__body tr:hover > td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ tr.el-table__row--striped td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
 
   .map-tab {
@@ -1601,6 +1645,10 @@
   /*}*/
 
   @media(max-width: 1440px) {
+    .tableLine {
+      margin-top: 0px;
+      width: 343px;
+    }
     .main-title {
       height: 65px;
       padding-top: 16px;
diff --git a/src/views/ctrl/statCharts/devAlarmCount.vue b/src/views/ctrl/statCharts/devAlarmCount.vue
index 7bea059..6b6939e 100644
--- a/src/views/ctrl/statCharts/devAlarmCount.vue
+++ b/src/views/ctrl/statCharts/devAlarmCount.vue
@@ -1,5 +1,6 @@
+<!--suppress ALL -->
 <template>
-  <div>
+  <div style="height: 90%">
     <el-date-picker
       v-model="timeRange"
       :picker-options="pickerOptions"
@@ -7,15 +8,16 @@
       range-separator="至"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
-      style="margin-bottom: 10px;" />
-    <ve-histogram :data="chartData" :settings="settings" height="350px" />
+      style="margin-bottom: 10px;z-index: 10000"
+      size="small"/>
+    <ve-histogram :data="chartData" :settings="settings" :extend="chartExtend" style="margin-top: -50px" height="100%"/>
   </div>
 </template>
 
 <script>
-import { formatToString, getDate, oneDayTime } from '@/utils/calendarUtil'
-import { devAlarmCount } from '@/api/statistics'
 
+import { devAlarmCount } from '@/api/statistics'
+import { formatToString, parseToDate, getDate, oneDayTime } from '@/utils/calendarUtil'
 const now = new Date()
 
 export default {
@@ -30,12 +32,22 @@
         columns: ['name', 'count'],
         rows: []
       },
+      chartExtend: {
+        series: {
+          barMaxWidth: 50
+        },
+        grid: {
+          containLabel: true,
+          bottom: '10%'
+        }
+      },
       settings: {
         labelMap: {
           'name': '设备类型',
-          'count': '报警数量'
+          'count': ''
         },
-        max: [4]
+        max: [4],
+        area: false
       },
       timeRange: [],
       pickerOptions: {
@@ -99,6 +111,13 @@
       devAlarmCount(this.params).then(response => {
         if (response.code === 200) {
           this.chartData.rows = response.data
+          var max = 4
+          for(var i=0;i<response.data.length;i++){
+            if(Number(response.data[i].count)>max){
+              max = Number(response.data[i].count)
+            }
+          }
+          this.settings.max = [max]
         }
       })
     }
diff --git a/src/views/ctrl/statCharts/devCount.vue b/src/views/ctrl/statCharts/devCount.vue
index d3e2902..db55fbe 100644
--- a/src/views/ctrl/statCharts/devCount.vue
+++ b/src/views/ctrl/statCharts/devCount.vue
@@ -1,5 +1,6 @@
 <template>
-  <ve-ring :data="chartData" :settings="settings" />
+  <ve-histogram :data="chartData" :settings="settings" :extend="chartExtend" style="margin-top: -20px" height="100%"/>
+  <!--<ve-ring :data="chartData" :settings="settings" />-->
 </template>
 
 <script>
@@ -9,14 +10,55 @@
   name: 'DevCount',
   data() {
     return {
+      chartExtend: {
+        series: {
+          barMaxWidth: 50
+        },
+        xAxis: {
+          axisLabel: {
+            interval: 0,
+            //换行显示
+            formatter: function(value) {
+              let result = ""; //拼接加\n返回的类目项
+              let maxLength = 2; //每项显示文字个数
+              let valLength = value.length; //X轴类目项的文字个数
+              let rowNumber = Math.ceil(valLength / maxLength); //类目项需要换行的行数
+              if (rowNumber > 1) {
+                //如果文字大于3,
+                for (let i = 0; i < rowNumber; i++) {
+                  let temp = ""; //每次截取的字符串
+                  let start = i * maxLength; //开始截取的位置
+                  let end = start + maxLength; //结束截取的位置
+                  temp = value.substring(start, end) + "\n";
+                  result += temp; //拼接生成最终的字符串
+                }
+                return "{labelText|" + result + "}";
+              } else {
+                return "{labelText|" + value + "}";
+              }
+            },
+            rich: {
+              labelText: {
+                lineHeight: 18
+              }
+            }
+          }
+        }
+      },
       chartData: {
         columns: ['name', 'count'],
         rows: []
       },
       settings: {
-        // legendLimit: 4
-        radius: [60, 100]
-      }
+        labelMap: {
+          'name': '设备类型',
+          'count': ''
+        }
+      },
+      // settings: {
+      //   // legendLimit: 4
+      //   radius: [60, 100]
+      // }
     }
   },
   activated() {
@@ -26,6 +68,9 @@
     fetchData() {
       devCount().then(response => {
         if (response.code === 200) {
+          for(var i=0;i<response.data.length;i++){
+            response.data[i].name = response.data[i].name.replace('防护','')
+          }
           this.chartData.rows = response.data
         }
       })
diff --git a/src/views/ctrl/statCharts/inOutCount.vue b/src/views/ctrl/statCharts/inOutCount.vue
index 502157e..d65ec69 100644
--- a/src/views/ctrl/statCharts/inOutCount.vue
+++ b/src/views/ctrl/statCharts/inOutCount.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="height: 100%">
     <el-date-picker
       v-model="timeRange"
       :picker-options="pickerOptions"
@@ -7,8 +7,9 @@
       range-separator="至"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
-      style="margin-bottom: 10px"/>
-    <ve-line :data="chartData" :settings="settings" height="350px" />
+      size="small"
+      style="margin-bottom: 10px;z-index: 10000"/>
+    <ve-line :data="chartData" :settings="settings" :extend="barExtend" style="margin-top: -50px;" height="93%"/>
   </div>
 </template>
 
@@ -30,6 +31,17 @@
         columns: ['date', 'staff', 'visitor', 'car', 'visitorCar'],
         rows: []
       },
+
+      barExtend:{
+        legend:{  // 隐藏图例
+          x: 'center',
+          y: 'bottom'
+        },
+        grid: {
+          containLabel: true,
+          bottom: '10%'
+        },
+      },
       settings: {
         labelMap: {
           'staff': '内部人员',
@@ -37,11 +49,11 @@
           'car': '内部车辆',
           'visitorCar': '来访车辆'
         },
-        xAxisType: 'time',
+        // xAxisType: 'time',
         max: [4],
         area: false,
         metrics: ['staff', 'visitor', 'car', 'visitorCar'],
-        dimension: ['date']
+        dimension: ['date'],
       },
       timeRange: [],
       pickerOptions: {
@@ -106,7 +118,7 @@
         if (response.code === 200) {
           const data = this.parseStatisticsData(response.data)
           this.chartData.rows = data.rowDatas
-          this.chartData.max = [data.maxCount]
+          this.settings.max = [data.maxCount]
         }
       })
     },
@@ -164,7 +176,7 @@
 
         if (typeof visitorCar !== 'undefined') {
           if (visitorCar.date === date) {
-            visitorCarCount = car.count
+            visitorCarCount = visitorCar.count
             indexVc++
           }
         }
@@ -172,6 +184,18 @@
         if (staffCount + visitorCount + carCount + visitorCarCount > 0) {
           rowDatas.push({ date: date, staff: staffCount, visitor: visitorCount, car: carCount, visitorCar: visitorCarCount })
         }
+        if(maxCount<staffCount){
+          maxCount = staffCount
+        }
+        if(maxCount<visitorCount){
+          maxCount = visitorCount
+        }
+        if(maxCount<carCount){
+          maxCount = carCount
+        }
+        if(maxCount<visitorCarCount){
+          maxCount = visitorCarCount
+        }
         start += oneDayTime
       }
 
diff --git a/src/views/ctrl/statCharts/inOutDoorCount.vue b/src/views/ctrl/statCharts/inOutDoorCount.vue
index ab28cdd..93f3458 100644
--- a/src/views/ctrl/statCharts/inOutDoorCount.vue
+++ b/src/views/ctrl/statCharts/inOutDoorCount.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="height: 100%">
     <el-date-picker
       v-model="timeRange"
       :picker-options="pickerOptions"
@@ -7,8 +7,9 @@
       range-separator="至"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
-      style="margin-bottom: 10px;" />
-    <ve-histogram :data="chartData" :settings="settings" height="350px" />
+      style="margin-bottom: 10px;z-index: 10000"
+      size="small"/>
+    <ve-histogram :data="chartData" :settings="settings" :extend="chartExtend" style="margin-top: -50px"height="93%"/>
   </div>
 </template>
 
@@ -26,11 +27,26 @@
         beginDate: '',
         endDate: ''
       },
+      chartExtend: {
+        legend:{  // 隐藏图例
+          x: 'center',
+          y: 'bottom'
+        },
+        grid: {
+          containLabel: true,
+          bottom: '10%'
+        },
+        series: {
+          barMaxWidth: 50,
+          center: ['50%', '50%']
+        }
+      },
       chartData: {
         columns: ['name', 'person', 'car'],
         rows: []
       },
       settings: {
+        radius: [60, 100],
         labelMap: {
           'person': '人员',
           'car': '车辆'
@@ -102,7 +118,7 @@
         if (response.code === 200) {
           const data = this.parseStatisticsData(response.data)
           this.chartData.rows = data.rowDatas
-          this.chartData.max = [data.maxCount]
+          this.settings.max = [data.maxCount]
         }
       })
     },
diff --git a/src/views/ctrl/statCharts/inOutKeyCount.vue b/src/views/ctrl/statCharts/inOutKeyCount.vue
index fa9a0b7..10108d6 100644
--- a/src/views/ctrl/statCharts/inOutKeyCount.vue
+++ b/src/views/ctrl/statCharts/inOutKeyCount.vue
@@ -1,5 +1,7 @@
 <template>
-  <ve-ring :data="chartData" :settings="settings" />
+  <div style="height: 100%">
+    <ve-ring :data="chartData" :settings="settings" :extend="chartExtend"  height="90%"/>
+  </div>
 </template>
 
 <script>
@@ -9,6 +11,19 @@
   name: 'InOutKeyCount',
   data() {
     return {
+      chartExtend: {
+        legend:{  // 隐藏图例
+          x: 'center',
+          y: 'top'
+        },
+        grid: {
+          containLabel: true,
+          top: '10%'
+        },
+        series: {
+          center: ['50%', '50%']
+        }
+      },
       chartData: {
         columns: ['name', 'count'],
         rows: []
diff --git a/src/views/ctrl/statCharts/inOutToday.vue b/src/views/ctrl/statCharts/inOutToday.vue
index c37fa7b..ae67856 100644
--- a/src/views/ctrl/statCharts/inOutToday.vue
+++ b/src/views/ctrl/statCharts/inOutToday.vue
@@ -1,5 +1,7 @@
 <template>
-  <ve-ring :data="chartData" :settings="settings" />
+  <div style="height: 100%">
+    <ve-ring :data="chartData" :settings="settings" :extend="chartExtend"  height="90%"/>
+  </div>
 </template>
 
 <script>
@@ -18,6 +20,15 @@
           { count: 1, name: '来访车辆' }
         ]
       },
+      chartExtend: {
+        legend:{  // 隐藏图例
+          x: 'center',
+          y: 'top'
+        },
+        series: {
+          center: ['50%', '50%']
+        }
+      },
       settings: {
         radius: [60, 100]
       }
diff --git a/src/views/deviceManage/deviceDetail.vue b/src/views/deviceManage/deviceDetail.vue
index 701052d..8245327 100644
--- a/src/views/deviceManage/deviceDetail.vue
+++ b/src/views/deviceManage/deviceDetail.vue
@@ -9,7 +9,7 @@
         <!--</el-col>-->
         <el-col :span="12">
           <el-form-item label="设备编号">
-            <el-input v-model.trim="dataForm.name" disabled type="text"/>
+            <el-input v-model.trim="dataForm.devcode" disabled type="text"/>
             <!--<span>{{ dataForm.devcode }}</span>-->
           </el-form-item>
         </el-col>
diff --git a/src/views/layout/components/AppHeader.vue b/src/views/layout/components/AppHeader.vue
index c3235b4..2e45954 100644
--- a/src/views/layout/components/AppHeader.vue
+++ b/src/views/layout/components/AppHeader.vue
@@ -1,12 +1,12 @@
 <template>
   <!--<div :style="{backgroundImage:'url('+headerUrl+')'}" class="app-header">-->
   <div style="background-color: #0078ff;" class="app-header">
-    <h3>{{ title }}</h3>
+    <h3 @click="backToIndex">{{ title }}</h3>
     <!--子系统选项-->
     <el-dropdown class="systemSelect" @command="handleCommand">
       <span class="el-dropdown-link" style="color: white">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
       </span>
-      <el-dropdown-menu slot="dropdown" >
+      <el-dropdown-menu slot="dropdown" style="z-index: 10000" >
         <el-dropdown-item>
           <span style="display:block;" @click="backToIndex">回首页</span>
         </el-dropdown-item>
@@ -15,7 +15,7 @@
     </el-dropdown>
 
     <div v-show="currentSystem.code === 'ctrl'" class="back-to-overview">
-      <el-button type="info" round @click="backToOverview">运行总览</el-button>
+      <el-button type="info" round @click="backToOverview" style="background-color: rgba(255,255,255,0.31);border: 0px">运行总览</el-button>
     </div>
 
     <el-dropdown class="avatar-container">
diff --git a/src/views/overview/doorIndex.vue b/src/views/overview/doorIndex.vue
index 5d2dce2..7cd40ff 100644
--- a/src/views/overview/doorIndex.vue
+++ b/src/views/overview/doorIndex.vue
@@ -58,26 +58,51 @@
           <i v-else class="el-icon-arrow-down"/>
         </span>
       </div>
-      <transition name="el-collapse-transition">
-        <el-scrollbar
-          v-show="tableShow"
-          :style="{ visibility: tableShow ? 'visible' : 'hidden'}"
-          :class="{ moredatascollor: alarmList.length > 6 }"
-          :native="false">
-          <el-table
-            :data="alarmList"
-            class="alarm-list-table"
-            border
-            stripe
-            @row-click="alarmRowClick">
-            <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{ scope.row[column.value] }}
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-scrollbar>
-      </transition>
+      <div v-show="alarmList.length > 4 && tableShow">
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 32px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 231px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          height="200"
+          style="border-left: 1px solid #2470AC;"
+          v-if="tableShow"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-show="alarmList.length < 5 && tableShow">
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          v-if="tableShow"
+          style="border: 1px solid #2470AC"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
     </div>
 
     <!-- 中间平面图区域 -->
@@ -730,9 +755,12 @@
   .main-page {
     background-size: cover;
     background-color: #023d83;
-    height: 100vh;
+    height: 98vh;
   }
-
+  .tableLine {
+    margin-top: 9px;
+    width: 463px;
+  }
   .main-header {
     width: 100vw;
   }
@@ -863,16 +891,24 @@
         margin-left: 20px;
       }
     }
-    .el-scrollbar {
-      /*height: 200px;*/
-      width: 100%;
+    // 滚动条的滑块
+    /deep/ .el-table__body-wrapper  {
+      background-color: #023D83;
+      border: 0px solid white;
     }
-    .moredatascollor {
-      height: 200px;
+    /deep/ .el-table--border th.gutter:last-of-type {
+      border: 1px solid #023D83;
+      border-bottom-width: 1px;
+      background-color: #023D83;
     }
-    .el-scrollbar__wrap {
-      overflow-y: auto;
-      overflow-x: hidden;
+    /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
+      background-color: #023D83;
+    }
+    /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+      display: none;
+    }
+    /deep/ .el-scrollbar__wrap {
+      overflow-x: hidden !important;
       margin-bottom: 0px !important;
     }
     .el-table {
@@ -906,16 +942,25 @@
     font-size: 15px;
     color: #FFFFFF;
     font-weight: normal;
+    border-color: #2470AC;
   }
-
+  .el-table--border::after, .el-table--group::after, .el-table::before{
+    background-color: #023d83;
+  }
+  .alarm-now-block /deep/ .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
+    border-color: #023d83;
+  }
   .alarm-now-block /deep/ .el-table__row td {
     background-color: #023D83;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ .el-table__body tr:hover > td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ tr.el-table__row--striped td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
 
   .map-tab {
@@ -1091,6 +1136,10 @@
   /*}*/
 
   @media(max-width: 1440px) {
+    .tableLine {
+      margin-top: 0px;
+      width: 343px;
+    }
     .main-title {
       height: 65px;
       padding-top: 16px;
diff --git a/src/views/overview/fenceIndex.vue b/src/views/overview/fenceIndex.vue
index 9466288..62a35e8 100644
--- a/src/views/overview/fenceIndex.vue
+++ b/src/views/overview/fenceIndex.vue
@@ -58,26 +58,52 @@
           <i v-else class="el-icon-arrow-down"/>
         </span>
       </div>
-      <transition name="el-collapse-transition">
-        <el-scrollbar
-          v-show="tableShow"
-          :style="{ visibility: tableShow ? 'visible' : 'hidden'}"
-          :class="{ moredatascollor: alarmList.length > 6 }"
-          :native="false">
-          <el-table
-            :data="alarmList"
-            class="alarm-list-table"
-            border
-            stripe
-            @row-click="alarmRowClick">
-            <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{ scope.row[column.value] }}
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-scrollbar>
-      </transition>
+      <div v-show="alarmList.length > 4 && tableShow">
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 32px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 231px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          height="200"
+          style="border-left: 1px solid #2470AC;"
+          v-if="tableShow"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-show="alarmList.length < 5 && tableShow">
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          v-if="tableShow"
+          style="border: 1px solid #2470AC"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
     </div>
 
     <!-- 中间平面图区域 -->
@@ -725,10 +751,14 @@
       font-weight: normal;
     }
   }
+  .tableLine {
+    margin-top: 9px;
+    width: 463px;
+  }
   .main-page {
     background-size: cover;
     background-color: #023d83;
-    height: 100vh;
+    height: 98vh;
   }
 
   .main-header {
@@ -859,16 +889,24 @@
         margin-left: 20px;
       }
     }
-    .el-scrollbar {
-      /*height: 200px;*/
-      width: 100%;
+    // 滚动条的滑块
+    /deep/ .el-table__body-wrapper  {
+      background-color: #023D83;
+      border: 0px solid white;
     }
-    .moredatascollor {
-      height: 200px;
+    /deep/ .el-table--border th.gutter:last-of-type {
+      border: 1px solid #023D83;
+      border-bottom-width: 1px;
+      background-color: #023D83;
     }
-    .el-scrollbar__wrap {
-      overflow-y: auto;
-      overflow-x: hidden;
+    /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
+      background-color: #023D83;
+    }
+    /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+      display: none;
+    }
+    /deep/ .el-scrollbar__wrap {
+      overflow-x: hidden !important;
       margin-bottom: 0px !important;
     }
     .el-table {
@@ -902,16 +940,25 @@
     font-size: 15px;
     color: #FFFFFF;
     font-weight: normal;
+    border-color: #2470AC;
   }
-
+  .el-table--border::after, .el-table--group::after, .el-table::before{
+    background-color: #023d83;
+  }
+  .alarm-now-block /deep/ .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
+    border-color: #023d83;
+  }
   .alarm-now-block /deep/ .el-table__row td {
     background-color: #023D83;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ .el-table__body tr:hover > td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ tr.el-table__row--striped td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
 
   .map-tab {
@@ -1087,6 +1134,10 @@
   /*}*/
 
   @media(max-width: 1440px) {
+    .tableLine {
+      margin-top: 0px;
+      width: 343px;
+    }
     .main-title {
       height: 65px;
       padding-top: 16px;
diff --git a/src/views/overview/keyIndex.vue b/src/views/overview/keyIndex.vue
index 37405a8..a461c94 100644
--- a/src/views/overview/keyIndex.vue
+++ b/src/views/overview/keyIndex.vue
@@ -33,20 +33,6 @@
             <span v-text="dev.alarm"/>
           </div>
         </el-col>
-
-        <!--<el-col :span="6" class="sub-data-block dev-offline">-->
-          <!--<div class="statis-block">-->
-            <!--<span v-text="dev.offLine"/>-->
-          <!--</div>-->
-          <!--<div class="sub-title">离线</div>-->
-        <!--</el-col>-->
-
-        <!--<el-col :span="6" class="sub-data-block dev-closed">-->
-          <!--<div class="statis-block">-->
-            <!--<span v-text="dev.closed"/>-->
-          <!--</div>-->
-          <!--<div class="sub-title">关闭</div>-->
-        <!--</el-col>-->
       </el-row>
     </div>
 
@@ -58,26 +44,52 @@
           <i v-else class="el-icon-arrow-down"/>
         </span>
       </div>
-      <transition name="el-collapse-transition">
-        <el-scrollbar
-          v-show="tableShow"
-          :style="{ visibility: tableShow ? 'visible' : 'hidden'}"
-          :class="{ moredatascollor: alarmList.length > 6 }"
-          :native="false">
-          <el-table
-            :data="alarmList"
-            class="alarm-list-table"
-            border
-            stripe
-            @row-click="alarmRowClick">
-            <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{ scope.row[column.value] }}
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-scrollbar>
-      </transition>
+      <div v-show="alarmList.length > 4 && tableShow">
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 32px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 231px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          height="200"
+          style="border-left: 1px solid #2470AC;"
+          v-if="tableShow"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-show="alarmList.length < 5 && tableShow">
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          v-if="tableShow"
+          style="border: 1px solid #2470AC"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
     </div>
 
     <!-- 中间平面图区域 -->
@@ -95,49 +107,16 @@
     </div>
 
     <!-- 平面图区域设备类型按钮 -->
-    <div v-show="showType" class="bottom-center" :style="{ width: btnwidth + 'px'}">
-      <el-col class="dev-icon" @click.native="selectDevByType('4', $event)">
-        <img id="4-1-img" v-if="checkDevType1[0]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-        <img id="4-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-        <span>人脸识别</span>
-      </el-col>
-      <!--<el-col class="dev-icon" @click.native="selectDevByType('5', $event)">-->
-        <!--<img id="5-1-img" v-if="checkDevType1[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
-        <!--<img id="5-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
-        <!--<span>车牌轨迹</span>-->
-      <!--</el-col>-->
-      <!--<el-col class="dev-icon" @click.native="selectDevByType('8', $event)">-->
-        <!--<img id="8-1-img" v-if="checkDevType1[2]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
-        <!--<img id="8-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
-        <!--<span>周界防护</span>-->
-      <!--</el-col>-->
-      <!--<el-col class="dev-icon" @click.native="selectDevByType('9', $event)">-->
-        <!--<img id="9-1-img" v-if="checkDevType1[3]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
-        <!--<img id="9-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
-        <!--<span>标准数字</span>-->
-      <!--</el-col>-->
-      <!--<el-col class="dev-icon" @click.native="selectDevByType('10', $event)">-->
-        <!--<img id="10-1-img" v-if="checkDevType1[4]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
-        <!--<img id="10-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
-        <!--<span>智能球形</span>-->
-      <!--</el-col>-->
-      <!--<el-col class="dev-icon" @click.native="selectDevByType('11', $event)">-->
-        <!--<img id="11-1-img" v-if="checkDevType1[5]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
-        <!--<img id="11-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
-        <!--<span>标准半球</span>-->
-      <!--</el-col>-->
-    </div>
-    <!-- 平面图区域设备类型按钮 -->
     <div v-show="!showType"class="bottom-center" :style="{ width: cameraTypeNum*btnwidth + 'px'}">
       <el-col ref="all" class="dev-icon dev-type-selected" @click.native="selectDevByType('all', $event)">
         <img v-if="checkDevType[0]" src="@/assets/overview_images/icons/icon-all-checked.png">
         <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
         <span>全部</span>
       </el-col>
-      <el-col ref="camera" :class="cameraClass" @click.native="showType=!showType;selectDevByType('camera', $event)">
-        <img id="cam_img_red" v-if="checkDevType[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-        <img id="cam_img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-        <span>摄像头</span>
+      <el-col class="dev-icon" @click.native="selectDevByType('camera4', $event)">
+        <img id="4-1-img" v-if="checkDevType[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
+        <img id="4-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
+        <span>人脸识别</span>
       </el-col>
       <el-col v-show="showTemp" class="dev-icon" @click.native="selectDevByType('temperature', $event)">
         <img v-if="checkDevType[2]" src="@/assets/overview_images/icons/icon-temperature-checked.png">
@@ -364,7 +343,6 @@
       }, // 设备详情表单
       cameraClass:'dev-icon',
       showType : false,
-      checkDevType1: [false, false, false, false, false, false], // 摄像头类型
       checkDevType: [true, false, false, false, false] // 选中设备类型
     }
   },
@@ -462,7 +440,7 @@
       }else if(pic==='3'){
         this.changeMap('tg_4_1')
       }else if(pic==='4'){
-        this.changeMap('tg_4_1')
+        this.changeMap('tg_4_5')
       }
       setTimeout(() => {
         var obj = document.getElementById(val.toString());
@@ -477,24 +455,6 @@
     handleKeyup(val){ //单击收起摄像头分类
       this.showAlarmDetail  = false
       this.showDevDetail  = false
-      var item = ['人脸识别']
-      for(var i=0;i<item.length;i++){
-        if(item[i]===val.target.innerText){
-          return
-        }
-      }
-      if(val.target.id.endsWith('-1-img')||val.target.id.endsWith('-2-img')|| val.target.id==='cam_img' || val.target.id==='cam_img_red'){
-        return
-      }
-      if( val.target.innerText!=='摄像头') {
-        this.showType = false
-        const devTypes = document.querySelectorAll('.dev-icon')
-        for(var i=0;i<this.checkDevType.length;i++) {
-          if (this.checkDevType[i]) {
-            devTypes[i+1].className += ' dev-type-selected'
-          }
-        }
-      }
     },
     handleSelect(key, keyPath) {
       this.selectDevByType(key,undefined)
@@ -643,14 +603,13 @@
       if(type !== 'camera'){
         // 添加选中的样式
         if (typeof event === 'undefined') {
-          devTypes[1].className += ' dev-type-selected'
+          devTypes[0].className += ' dev-type-selected'
         } else {
           event.currentTarget.className += ' dev-type-selected'
         }
       }
       if(type!=='camera'){
         this.checkDevType = [false, false, false, false, false]
-        this.checkDevType1 = [false, false, false, false, false, false]
       }
       if (type === 'all') {
         if(this.bgImageSrc===tg_4_5){
@@ -660,14 +619,7 @@
         }
         // this.devListParams.deviceTypes = []
         this.checkDevType[0] = true
-      } else if(type==='camera'){
-        for(var i=0;i<this.checkDevType1.length;i++){
-          if(this.checkDevType1[i]) {
-            devTypes[i].className += ' dev-type-selected'
-          }
-        }
-        return
-      } else if (type === 'temperature') {
+      }  else if (type === 'temperature') {
         this.devListParams.deviceTypes = temperatureTypes.toString()
         this.checkDevType[2] = true
       } else if (type === 'smoking') {
@@ -676,30 +628,24 @@
       } else if (type === 'sound') {
         this.devListParams.deviceTypes = soundTypes.toString()
         this.checkDevType[4] = true
-      }else if(type === '4'){
+      }else if(type === 'camera4'){
         this.devListParams.deviceTypes = '4'
         this.checkDevType[1] = true
-        this.checkDevType1[0] = true
       }else if(type === '5'){
         this.devListParams.deviceTypes = '5'
         this.checkDevType[1] = true
-        this.checkDevType1[1] = true
       }else if(type === '8'){
         this.devListParams.deviceTypes = '8'
         this.checkDevType[1] = true
-        this.checkDevType1[2] = true
       }else if(type === '9'){
         this.devListParams.deviceTypes = '9'
         this.checkDevType[1] = true
-        this.checkDevType1[3] = true
       }else if(type === '10'){
         this.devListParams.deviceTypes = '10'
         this.checkDevType[1] = true
-        this.checkDevType1[4] = true
       }else if(type === '11'){
         this.devListParams.deviceTypes = '11'
         this.checkDevType[1] = true
-        this.checkDevType1[5] = true
       }
       this.fetchDeviceData()
       // if(this.checkDevType[1]){
@@ -866,18 +812,13 @@
       }else{
         this.devListParams.deviceTypes = '1,2,4,12'
       }
-      // this.devListParams.deviceTypes = []
       if (index === 'tg_main') {
-        // this.imgSizeOriginal = { width: 2245, height: 1586 }
         this.devListParams.picture = '1'
       }else if (index === 'tg_3_1') {
-        // this.imgSizeOriginal = { width: 2245, height: 1586 }
         this.devListParams.picture = '2'
       } else if (index === 'tg_4_1') {
-        // this.imgSizeOriginal = { width: 2218, height: 2169 }
         this.devListParams.picture = '3'
       }else if (index === 'tg_4_5') {
-        // this.imgSizeOriginal = { width: 2245, height: 1586 }
         this.devListParams.picture = '4'
       }
       overviewDeviceList(this.devListParams).then(response => {
@@ -1060,10 +1001,14 @@
   /deep/ .el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
     border-bottom-width: 0px;
   }
+  .tableLine {
+    margin-top: 9px;
+    width: 463px;
+  }
   .main-page {
     background-size: cover;
     background-color: #023d83;
-    height: 100vh;
+    height: 98vh;
   }
 
   .main-header {
@@ -1194,16 +1139,24 @@
         margin-left: 20px;
       }
     }
-    .el-scrollbar {
-      /*height: 200px;*/
-      width: 100%;
+    // 滚动条的滑块
+    /deep/ .el-table__body-wrapper  {
+      background-color: #023D83;
+      border: 0px solid white;
     }
-    .moredatascollor {
-      height: 200px;
+    /deep/ .el-table--border th.gutter:last-of-type {
+      border: 1px solid #023D83;
+      border-bottom-width: 1px;
+      background-color: #023D83;
     }
-    .el-scrollbar__wrap {
-      overflow-y: auto;
-      overflow-x: hidden;
+    /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
+      background-color: #023D83;
+    }
+    /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+      display: none;
+    }
+    /deep/ .el-scrollbar__wrap {
+      overflow-x: hidden !important;
       margin-bottom: 0px !important;
     }
     .el-table {
@@ -1237,16 +1190,25 @@
     font-size: 15px;
     color: #FFFFFF;
     font-weight: normal;
+    border-color: #2470AC;
   }
-
+  .el-table--border::after, .el-table--group::after, .el-table::before{
+    background-color: #023d83;
+  }
+  .alarm-now-block /deep/ .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
+    border-color: #023d83;
+  }
   .alarm-now-block /deep/ .el-table__row td {
     background-color: #023D83;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ .el-table__body tr:hover > td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ tr.el-table__row--striped td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
 
   .map-tab {
@@ -1431,6 +1393,10 @@
   /*}*/
 
   @media(max-width: 1440px) {
+    .tableLine {
+      margin-top: 0px;
+      width: 343px;
+    }
     .main-title {
       height: 65px;
       padding-top: 16px;
diff --git a/src/views/overview/regionIndex.vue b/src/views/overview/regionIndex.vue
index 69e7606..d4ea083 100644
--- a/src/views/overview/regionIndex.vue
+++ b/src/views/overview/regionIndex.vue
@@ -58,26 +58,52 @@
           <i v-else class="el-icon-arrow-down"/>
         </span>
       </div>
-      <transition name="el-collapse-transition">
-        <el-scrollbar
-          v-show="tableShow"
-          :style="{ visibility: tableShow ? 'visible' : 'hidden'}"
-          :class="{ moredatascollor: alarmList.length > 6 }"
-          :native="false">
-          <el-table
-            :data="alarmList"
-            class="alarm-list-table"
-            border
-            stripe
-            @row-click="alarmRowClick">
-            <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{ scope.row[column.value] }}
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-scrollbar>
-      </transition>
+      <div v-show="alarmList.length > 4 && tableShow">
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 32px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 231px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          height="200"
+          style="border-left: 1px solid #2470AC;"
+          v-if="tableShow"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-show="alarmList.length < 5 && tableShow">
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          v-if="tableShow"
+          style="border: 1px solid #2470AC"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
     </div>
 
     <!-- 中间平面图区域 -->
@@ -293,7 +319,7 @@
       title: getProject().title,
       bgImageSrc: tg_main,
       devListParams: {
-        picture: '3',
+        picture: '1',
         areaTypeId: 3,
         deviceTypes: '4,9,10,11'
       },
@@ -718,10 +744,14 @@
       font-weight: normal;
     }
   }
+  .tableLine {
+    margin-top: 9px;
+    width: 463px;
+  }
   .main-page {
     background-size: cover;
     background-color: #023d83;
-    height: 100vh;
+    height: 98vh;
   }
 
   .main-header {
@@ -852,16 +882,24 @@
         margin-left: 20px;
       }
     }
-    .el-scrollbar {
-      /*height: 200px;*/
-      width: 100%;
+    // 滚动条的滑块
+    /deep/ .el-table__body-wrapper  {
+      background-color: #023D83;
+      border: 0px solid white;
     }
-    .moredatascollor {
-      height: 200px;
+    /deep/ .el-table--border th.gutter:last-of-type {
+      border: 1px solid #023D83;
+      border-bottom-width: 1px;
+      background-color: #023D83;
     }
-    .el-scrollbar__wrap {
-      overflow-y: auto;
-      overflow-x: hidden;
+    /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
+      background-color: #023D83;
+    }
+    /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+      display: none;
+    }
+    /deep/ .el-scrollbar__wrap {
+      overflow-x: hidden !important;
       margin-bottom: 0px !important;
     }
     .el-table {
@@ -895,16 +933,25 @@
     font-size: 15px;
     color: #FFFFFF;
     font-weight: normal;
+    border-color: #2470AC;
   }
-
+  .el-table--border::after, .el-table--group::after, .el-table::before{
+    background-color: #023d83;
+  }
+  .alarm-now-block /deep/ .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
+    border-color: #023d83;
+  }
   .alarm-now-block /deep/ .el-table__row td {
     background-color: #023D83;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ .el-table__body tr:hover > td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ tr.el-table__row--striped td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
 
   .map-tab {
@@ -1080,6 +1127,10 @@
   /*}*/
 
   @media(max-width: 1440px) {
+    .tableLine {
+      margin-top: 0px;
+      width: 343px;
+    }
     .main-title {
       height: 65px;
       padding-top: 16px;
diff --git a/src/views/staff/staffAdd.vue b/src/views/staff/staffAdd.vue
index 769e6d6..698cf37 100644
--- a/src/views/staff/staffAdd.vue
+++ b/src/views/staff/staffAdd.vue
@@ -116,6 +116,9 @@
           <el-row>
             <el-button type="primary" plain class="id-card-btn" :disabled="canRead" @click="readIDCard">读取身份证</el-button>
           </el-row>
+          <el-row>
+            <el-button type="primary" plain class="id-card-btn" @click="readCamera">{{ btnCamera }}</el-button>
+          </el-row>
         </el-col>
       </el-row>
     </el-form>
@@ -126,8 +129,13 @@
           <el-button v-show="isKey" type="primary" style="margin-left: 20px;" @click="registerIris"> 注册虹膜 </el-button>
           <el-button type="primary" style="margin-left: 20px;" @click="saveData"> 保存 </el-button>
         </el-col>
+        <el-col :span="6" :offset="3">
+          <video v-show="showVideo" width="200px" height="150px" style="margin-left: -8px"></video>
+          <canvas v-show = "false" width="200px" height="150px"></canvas>
+        </el-col>
       </el-row>
     </div>
+
     <capture-iris ref="captureIris"/>
   </div>
 </template>
@@ -150,6 +158,9 @@
       deptList: [],
       isEditMode: false, // 是否为编辑模式，编辑模式部分字段不允许修改，且没有重置和虹膜注册功能
       isKey: false, // 是否重点区域授权人员
+      btnCamera:'读取摄像头',
+      showVideo: false,
+      stream:'',
       personForm: {
         id: '', // 人员id
         idCard: '', // 身份证号
@@ -284,6 +295,81 @@
         this.formLoading = false
       })
     },
+    readCamera() {
+      if(this.btnCamera === '读取摄像头'){
+        this.cameraImgFile()
+      }else{
+        this.getAPhoto()
+      }
+    },
+    getAPhoto() {
+      //绘制canvas图形
+      let video = document.getElementsByTagName("video")[0]
+      var canvas = document.getElementsByTagName('canvas')[0]
+      var context = canvas.getContext('2d')
+      context.clearRect(0, 0, context.width, context.height);
+      context.drawImage(video, 0, 0,200,150);
+      this.showVideo = false
+      //把canvas图像转为img图片
+      this.photo = canvas.toDataURL("image/png");
+      var mediaStreamTrack =  this.stream.getTracks()[0];
+      mediaStreamTrack.stop();
+      this.btnCamera = '读取摄像头'
+    },
+    // 拍照上传获取video
+    cameraImgFile() {
+      let _this = this;
+
+      // 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象
+      if (navigator.mediaDevices === undefined) {
+        navigator.mediaDevices = {};
+      }
+      // 一些浏览器部分支持 mediaDevices。我们不能直接给对象设置 getUserMedia
+      // 因为这样可能会覆盖已有的属性。这里我们只会在没有getUserMedia属性的时候添加它。
+      if (navigator.mediaDevices.getUserMedia === undefined) {
+        navigator.mediaDevices.getUserMedia = function(constraints) {
+          // 首先，如果有getUserMedia的话，就获得它
+          var getUserMedia =
+            navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
+
+          // 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
+          if (!getUserMedia) {
+            return Promise.reject(
+              new Error("getUserMedia is not implemented in this browser")
+            );
+          }
+          // 否则，为老的navigator.getUserMedia方法包裹一个Promise
+          return new Promise(function(resolve, reject) {
+            getUserMedia.call(navigator, constraints, resolve, reject);
+          });
+        };
+      }
+      navigator.mediaDevices
+        .getUserMedia({ video: true, audio: false })
+        .then(function(stream) {
+          _this.stream = stream;
+          _this.videoShow = true;
+          // 旧的浏览器可能没有srcObject
+          _this.$nextTick(() => {
+            let video = document.getElementsByTagName("video")[0]
+            if ("srcObject" in video) {
+              video.srcObject = stream;
+            } else {
+              // 防止在新的浏览器里使用它，应为它已经不再支持了
+              video.src = window.URL.createObjectURL(stream);
+            }
+            _this.showVideo = true
+            _this.btnCamera = '拍照'
+            video.onloadedmetadata = function(e) {
+              video.play();
+            };
+          });
+        })
+        .catch(function(err) {
+          _this.videoShow = false;
+          _this.$message.warning("未发现可拍照设备或出现其他错误！");
+        });
+    },
     readIDCard() {
       this.resetForm()
       this.canRead = true
diff --git a/src/views/staff/staffEdit.vue b/src/views/staff/staffEdit.vue
index 2f8d4ca..04291b3 100644
--- a/src/views/staff/staffEdit.vue
+++ b/src/views/staff/staffEdit.vue
@@ -117,6 +117,9 @@
           <el-row>
             <el-button type="primary" plain :disabled="canRead"  class="id-card-btn" @click="readIDCard">读取身份证</el-button>
           </el-row>
+          <el-row>
+            <el-button type="primary" plain class="id-card-btn" @click="readCamera">{{ btnCamera }}</el-button>
+          </el-row>
         </el-col>
       </el-row>
     </el-form>
@@ -126,6 +129,10 @@
           <el-button v-show="isKey" type="primary" style="margin-left: 20px;" @click="registerIris"> 注册虹膜 </el-button>
           <el-button type="primary" style="margin-left: 20px;" @click="saveData"> 保存 </el-button>
         </el-col>
+        <el-col :span="6" :offset="3">
+          <video v-show="showVideo" width="200px" height="150px" style="margin-left: -8px"></video>
+          <canvas v-show = "false" width="200px" height="150px"></canvas>
+        </el-col>
       </el-row>
     </div>
 
@@ -161,6 +168,9 @@
     return {
       canRead: false,
       deptList: [],
+      btnCamera:'读取摄像头',
+      showVideo: false,
+      stream:'',
       isEditMode: false, // 是否为编辑模式，编辑模式部分字段不允许修改，且没有重置和虹膜注册功能
       isKey: false, // 是否重点区域授权人员
       reCaptureIris: '0', // 是否重新采集了虹膜
@@ -253,6 +263,81 @@
         this.keyAreaList = response.data
       })
     },
+    readCamera() {
+      if(this.btnCamera === '读取摄像头'){
+        this.cameraImgFile()
+      }else{
+        this.getAPhoto()
+      }
+    },
+    getAPhoto() {
+      //绘制canvas图形
+      let video = document.getElementsByTagName("video")[0]
+      var canvas = document.getElementsByTagName('canvas')[0]
+      var context = canvas.getContext('2d')
+      context.clearRect(0, 0, context.width, context.height);
+      context.drawImage(video, 0, 0,200,150);
+      this.showVideo = false
+      //把canvas图像转为img图片
+      this.photo = canvas.toDataURL("image/png");
+      var mediaStreamTrack =  this.stream.getTracks()[0];
+      mediaStreamTrack.stop();
+      this.btnCamera = '读取摄像头'
+    },
+    // 拍照上传获取video
+    cameraImgFile() {
+      let _this = this;
+
+      // 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象
+      if (navigator.mediaDevices === undefined) {
+        navigator.mediaDevices = {};
+      }
+      // 一些浏览器部分支持 mediaDevices。我们不能直接给对象设置 getUserMedia
+      // 因为这样可能会覆盖已有的属性。这里我们只会在没有getUserMedia属性的时候添加它。
+      if (navigator.mediaDevices.getUserMedia === undefined) {
+        navigator.mediaDevices.getUserMedia = function(constraints) {
+          // 首先，如果有getUserMedia的话，就获得它
+          var getUserMedia =
+            navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
+
+          // 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
+          if (!getUserMedia) {
+            return Promise.reject(
+              new Error("getUserMedia is not implemented in this browser")
+            );
+          }
+          // 否则，为老的navigator.getUserMedia方法包裹一个Promise
+          return new Promise(function(resolve, reject) {
+            getUserMedia.call(navigator, constraints, resolve, reject);
+          });
+        };
+      }
+      navigator.mediaDevices
+        .getUserMedia({ video: true, audio: false })
+        .then(function(stream) {
+          _this.stream = stream;
+          _this.videoShow = true;
+          // 旧的浏览器可能没有srcObject
+          _this.$nextTick(() => {
+            let video = document.getElementsByTagName("video")[0]
+            if ("srcObject" in video) {
+              video.srcObject = stream;
+            } else {
+              // 防止在新的浏览器里使用它，应为它已经不再支持了
+              video.src = window.URL.createObjectURL(stream);
+            }
+            _this.showVideo = true
+            _this.btnCamera = '拍照'
+            video.onloadedmetadata = function(e) {
+              video.play();
+            };
+          });
+        })
+        .catch(function(err) {
+          _this.videoShow = false;
+          _this.$message.warning("未发现可拍照设备或出现其他错误！");
+        });
+    },
     fetchData(id) {
       this.formLoading = true
       detailStaff(id).then(response => {

diff --git a/config/dev.env.js b/config/dev.env.js
index 6b4622a..095ba33 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -8,4 +8,5 @@
   NODE_ENV: '"development"',
   // BASE_API: '"http://192.168.5.220:20311"'
   BASE_API: '"http://111.198.10.15:11631"'
+  // BASE_API: '"http://192.168.5.220:20311"'
 })
diff --git a/config/prod.env.js b/config/prod.env.js
index f2501d0..ccbc615 100644
--- a/config/prod.env.js
+++ b/config/prod.env.js
@@ -1,5 +1,6 @@
 'use strict'
 module.exports = {
   NODE_ENV: '"production"',
-  BASE_API: '"http://192.168.5.220:20311"'
+  // BASE_API: '"http://192.168.5.220:20311"'
+  BASE_API: '"http://111.198.10.15:11631"'
 }
diff --git a/favicon.ico b/favicon.ico
index 34b63ac..bc1bfc5 100644
--- a/favicon.ico
+++ b/favicon.ico
Binary files differ
diff --git a/src/api/visitor.js b/src/api/visitor.js
index 05ed6ea..01a6c26 100644
--- a/src/api/visitor.js
+++ b/src/api/visitor.js
@@ -74,3 +74,14 @@
   })
 }
 
+// 查询人员轨迹
+export function getDetail(devcode) {
+  return request({
+    url: '/device/capturePhoto',
+    method: 'post',
+    params:{
+      devcode: devcode
+    }
+  })
+}
+
diff --git a/src/assets/dashboard_images/icon-defence.png b/src/assets/dashboard_images/icon-defence.png
index 8069376..11b41cb 100644
--- a/src/assets/dashboard_images/icon-defence.png
+++ b/src/assets/dashboard_images/icon-defence.png
Binary files differ
diff --git a/src/utils/calendarUtil.js b/src/utils/calendarUtil.js
index da840c3..e599bdd 100644
--- a/src/utils/calendarUtil.js
+++ b/src/utils/calendarUtil.js
@@ -61,7 +61,32 @@
 
   return yearMonth + '-' + format(day)
 }
+export function formatDateTime(cellval) {
+  var dateVal = cellval + "";//把时间戳转成字符串格式
+  if (cellval != null) {
+    //取得时间戳部分 如：获取 /Date(1545299299910)/ 中的 1545299299910 部分
+    var date = new Date(parseInt(dateVal.replace("/Date(", "")
+      .replace(")/", ""), 10));
+    //获取年，不需要其他操作所以可以直接返回	date.getFullYear()
+    //月份为0-11，所以+1，月份小于10时补个0
+    var month = date.getMonth() + 1 < 10 ? "0"
+      + (date.getMonth() + 1) : date.getMonth() + 1;
+    //获取日
+    var currentDate = date.getDate() < 10 ? "0" + date.getDate()
+      : date.getDate();
+    //获取时间
+    var hours = date.getHours() < 10 ? "0" + date.getHours() : date
+      .getHours();
+    var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes()
+      : date.getMinutes();
+    var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds()
+      : date.getSeconds();
 
+    //返回日期结果，需要时间的话在加上时间
+    return date.getFullYear() + "-" + month + "-" + currentDate+" "+hours+":"+
+      minutes+":"+seconds;
+  }
+}
 // 格式化日期为字符串
 export function formatToString(value, level) {
   const date = new Date(value)
diff --git a/src/views/alarm/alarmDetail.vue b/src/views/alarm/alarmDetail.vue
index 2c94629..8c32ee5 100644
--- a/src/views/alarm/alarmDetail.vue
+++ b/src/views/alarm/alarmDetail.vue
@@ -1,7 +1,7 @@
 <!-- 报警详情 -->
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :model="dataForm" label-well-code="right" label-width="110px">
+    <el-form v-loading="loading" ref="dataForm" :model="dataForm" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="报警编号">
@@ -86,6 +86,7 @@
   name: 'AlarmDetail',
   data() {
     return {
+      loading: true,
       dialogFormVisible: false, // 对话框是否显示
       dialogStatus: '', // 对话框类型：create,update,detail
       dataForm: {
@@ -123,7 +124,7 @@
         this.dataForm = {
           id: row.id
         }
-
+        this.loading = true
         alarmDetail(this.dataForm.id).then(response => {
           if (response.code === 200) {
             this.dataForm = {
@@ -140,7 +141,7 @@
               reason: response.data.reason,
               remark: response.data.remark
             }
-
+            this.loading = false
             // 格式化报警状态
             if (response.data.valid === 1) {
               this.dataForm.validStr = '正在报警'
diff --git a/src/views/car/carAdd.vue b/src/views/car/carAdd.vue
index ddb215f..5f54c93 100644
--- a/src/views/car/carAdd.vue
+++ b/src/views/car/carAdd.vue
@@ -10,7 +10,7 @@
         </el-col>
         <el-col :span="12">
           <el-form-item label="车辆性质" prop="property">
-            <el-radio-group v-model="dataForm.property" :disabled="isDetailMode">
+            <el-radio-group v-model="dataForm.property" :disabled="isDetailMode" @change="resetOwner">
               <el-radio v-for="item in carProperties" :key="item.value" :label="item.value">{{ item.name }}</el-radio>
             </el-radio-group>
           </el-form-item>
@@ -106,6 +106,12 @@
     this.fetchStaffList()
   },
   methods: {
+    resetOwner(){
+      if(this.dataForm.property!=='2'){
+        this.dataForm.ownerId = ''
+        // this.dataForm.phone = ''
+      }
+    },
     // 初始化对话框
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.btnLoading = false
@@ -208,6 +214,7 @@
           }
         })
         this.dataForm.phone = selectedStaff[0].phone
+        this.dataForm.deptid = selectedStaff[0].deptid
       } else {
         this.dataForm.phone = ''
       }
diff --git a/src/views/car/carList.vue b/src/views/car/carList.vue
index 8d924ff..4ff07ab 100644
--- a/src/views/car/carList.vue
+++ b/src/views/car/carList.vue
@@ -105,11 +105,11 @@
           value: 'propertyStr',
           align: 'center'
         },
-        // {
-        //   text: '车主姓名',
-        //   value: 'ownerName',
-        //   align: 'center'
-        // },
+        {
+          text: '车主姓名',
+          value: 'ownerName',
+          align: 'center'
+        },
         {
           text: '车主联系电话',
           value: 'phone',
diff --git a/src/views/ctrl/index.vue b/src/views/ctrl/index.vue
index fd36f2b..29923af 100644
--- a/src/views/ctrl/index.vue
+++ b/src/views/ctrl/index.vue
@@ -50,12 +50,13 @@
         <in-out-today />
       </el-col>
 
-      <el-col :span="7" class="chart-block">
+      <el-col id="dev-count"  :span="10" class="chart-block">
         <div class="chart-title">各类型设备安装数量</div>
         <dev-count />
       </el-col>
 
-      <el-col id="pass-count" :span="10" class="chart-block">
+      <!--<el-col id="pass-count" class="chart-block">-->
+      <el-col :span="7" class="chart-block">
         <div class="chart-title">进出营数量统计</div>
         <in-out-count />
       </el-col>
@@ -121,7 +122,7 @@
 <style scoped>
   .app-wrapper {
     background-color: #e9e9e9;
-    padding-bottom: 20px;
+    padding-bottom: 10px;
   }
 
   .sub-data-block {
@@ -129,6 +130,7 @@
     border-radius: 16px;
     float: left;
     margin: 10px;
+    margin-bottom: 0px;
     box-shadow: 1px 1px 5px #999;
   }
   .sub-title {
@@ -136,36 +138,38 @@
     text-align: center;
     font-family: 'Microsoft YaHei';
     color: #fff;
-    font-size: 24px;
-    padding: 10px;
+    font-size: 20px;
+    padding-top: 10px;
+    padding-bottom: 0px;
   }
   .statis-block {
     text-align: center;
     margin: 0px 10px 0px 10px;
-    padding: 0px 10px 10px 10px;
+    padding: 0px 10px 5px 10px;
     color: #fff;
     font-weight: bold;
     letter-spacing: 1px;
-    font-size: 24px;
+    font-size: 20px;
   }
   .big-size {
-    font-size: 64px;
+    font-size: 35px;
   }
 
   .chart-title {
     font-family: 'Microsoft YaHei';
     color: #000000;
     font-weight: bold;
-    font-size: 20px;
+    font-size: 18px;
     text-align: center;
     padding: 10px;
   }
   .chart-block {
     margin-left: 20px;
-    margin-top: 20px;
+    margin-top: 10px;
     border-radius: 16px;
     background-color: #FFFFFF;
     box-shadow: 1px 1px 5px #999;
+    height: 37vh;
   }
 
   #today-visitor {
@@ -187,7 +191,7 @@
     background-image: linear-gradient(to right, #ffa800, #ce7e00);
   }
 
-  #pass-count, #dev-alarm-count {
+  #dev-count, #dev-alarm-count {
     width: calc(250vw / 6 - 70px);
   }
 </style>
diff --git a/src/views/ctrl/overview.vue b/src/views/ctrl/overview.vue
index 62e1105..49ed928 100644
--- a/src/views/ctrl/overview.vue
+++ b/src/views/ctrl/overview.vue
@@ -59,26 +59,52 @@
           <i v-else class="el-icon-arrow-down"/>
         </span>
       </div>
-      <transition name="el-collapse-transition">
-        <el-scrollbar
-          v-show="tableShow"
-          :style="{ visibility: tableShow ? 'visible' : 'hidden'}"
-          :class="{ moredatascollor: alarmList.length > 6 }"
-          :native="false">
-          <el-table
-            :data="alarmList"
-            class="alarm-list-table"
-            border
-            stripe
-            @row-click="alarmRowClick">
-            <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{ scope.row[column.value] }}
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-scrollbar>
-      </transition>
+      <div v-show="alarmList.length > 4 && tableShow">
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 32px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 231px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          height="200"
+          style="border-left: 1px solid #2470AC;"
+          v-if="tableShow"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-show="alarmList.length < 5 && tableShow">
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          v-if="tableShow"
+          style="border: 1px solid #2470AC"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
     </div>
 
     <!-- 中间平面图区域 -->
@@ -145,9 +171,13 @@
         class="point-camera"
         @click="detailDev(item, $event)" />
     </div>
-
     <!-- 平面图区域设备类型按钮 -->
-    <div v-show="showType" class="bottom-center" :style="{ width: cameraTypeNum*btnwidth + 'px'}">
+    <div class="bottom-center" :style="{ width: btnNum*btnwidth + 'px'}">
+        <el-col v-show="btnNum!==1" ref="all" class="dev-icon dev-type-selected" @click.native="selectDevByType('all', $event)">
+          <img v-if="checkDevType[0]" src="@/assets/overview_images/icons/icon-all-checked.png">
+          <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
+          <span>全部</span>
+        </el-col>
       <el-col class="dev-icon" @click.native="selectDevByType('4', $event)">
         <img id="4-1-img" v-if="checkDevType1[0]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="4-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
@@ -178,20 +208,6 @@
         <img id="11-2-img" v-else src="@/assets/overview_images/icons/half-camera-blue.png">
         <span>标准半球</span>
       </el-col>
-    </div>
-    <!-- 平面图区域设备类型按钮 -->
-    <div v-show="!showType"class="bottom-center" :style="{ width: btnNum*btnwidth + 'px'}">
-        <el-col ref="all" class="dev-icon dev-type-selected" @click.native="selectDevByType('all', $event)">
-          <img v-if="checkDevType[0]" src="@/assets/overview_images/icons/icon-all-checked.png">
-          <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
-          <span>全部</span>
-        </el-col>
-        <el-col ref="camera" :class="cameraClass" @click.native="showType=!showType;selectDevByType('camera', $event)">
-        <!--<el-col ref="camera" class="dev-icon" @click.native="selectDevByType('camera', $event)">-->
-          <img id="cam_img_red" v-if="checkDevType[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-          <img id="cam_img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-          <span>摄像头</span>
-        </el-col>
         <el-col v-show="showFence" class="dev-icon" @click.native="selectDevByType('fence', $event)">
           <img v-if="checkDevType[2]" src="@/assets/overview_images/icons/icon-fence-checked.png">
           <img v-else src="@/assets/overview_images/icons/icon-fence-unchecked.png">
@@ -372,7 +388,7 @@
           height: 789
         }, // 屏幕窗口尺寸
         imgUrl: require('../../assets/overview_images/icons/icon-camera-point.png'),
-        btnNum: 3,
+        btnNum: 8,
         cameraTypeNum: 6,
         btnwidth: 210,
         halfLeft: 0,
@@ -498,25 +514,25 @@
             }
           }
         }
-        //跟换菜单
-        var item = ['人脸识别','车牌轨迹','周界防护','标准数字','智能球形','标准半球']
-        for(var i=0;i<item.length;i++){
-          if(item[i]===val.target.innerText){
-            return
-          }
-        }
-        if(val.target.id.endsWith('-1-img')||val.target.id.endsWith('-2-img')|| val.target.id==='cam_img' || val.target.id==='cam_img_red'){
-          return
-        }
-        if( val.target.innerText!=='摄像头') {
-          this.showType = false
-          const devTypes = document.querySelectorAll('.dev-icon')
-            for(var i=0;i<this.checkDevType.length;i++) {
-              if (this.checkDevType[i]) {
-                devTypes[i+6].className += ' dev-type-selected'
-              }
-            }
-        }
+        // //跟换菜单
+        // var item = ['人脸识别','车牌轨迹','周界防护','标准数字','智能球形','标准半球']
+        // for(var i=0;i<item.length;i++){
+        //   if(item[i]===val.target.innerText){
+        //     return
+        //   }
+        // }
+        // if(val.target.id.endsWith('-1-img')||val.target.id.endsWith('-2-img')|| val.target.id==='cam_img' || val.target.id==='cam_img_red'){
+        //   return
+        // }
+        // if( val.target.innerText!=='摄像头') {
+        //   this.showType = false
+        //   const devTypes = document.querySelectorAll('.dev-icon')
+        //     for(var i=0;i<this.checkDevType.length;i++) {
+        //       if (this.checkDevType[i]) {
+        //         devTypes[i+6].className += ' dev-type-selected'
+        //       }
+        //     }
+        // }
       },
       webSocket() {
         const that = this
@@ -586,7 +602,7 @@
         }else if(pic==='3'){
           this.changeMap('tg_4_1')
         }else if(pic==='4'){
-          this.changeMap('tg_4_1')
+          this.changeMap('tg_4_5')
         }
         setTimeout(() => {
           var obj = document.getElementById(val.toString());
@@ -771,7 +787,11 @@
           this.checkDevType1 = [false, false, false, false, false, false]
           // 添加选中的样式
           if (typeof event === 'undefined') {
-            devTypes[6].className += ' dev-type-selected'
+            if(this.btnNum===1){
+              devTypes[1].className += ' dev-type-selected'
+            }else{
+              devTypes[0].className += ' dev-type-selected'
+            }
           } else {
             event.currentTarget.className += ' dev-type-selected'
           }
@@ -1017,7 +1037,7 @@
           this.isMain = true
           // this.devListParams.picture = '1'
           this.imgSizeOriginal = { width: 2245, height: 1586 }
-          this.btnNum  = 3
+          this.btnNum  = 8
           this.cameraTypeNum  = 6
           this.showFence = true // 显示电子围栏
           this.showTemp = false // 隐藏温湿度设备
@@ -1027,6 +1047,7 @@
           this.showSubTabGuider = false
           this.showFloorThree = false
           this.showFloorFour = false
+          this.selectDevByType('all')
         } else if (index === 'tg_3_1') {
           this.bgImageSrc = tg_3_1
           // this.devListParams.picture = '2'
@@ -1037,6 +1058,7 @@
           this.showTemp = true // 隐藏温湿度
           this.showSmoking = true // 隐藏烟感
           this.showSound = true // 隐藏声光报警器
+          this.selectDevByType('all')
         } else if (index === 'tg_4_1') {
           this.bgImageSrc = tg_4_1
           // this.devListParams.picture = '3'
@@ -1048,18 +1070,19 @@
           this.showTemp = true // 显示温湿度
           this.showSmoking = true // 显示烟感
           this.showSound = true // 显示声光报警器
+          this.selectDevByType('all')
         } else if (index === 'tg_4_5') {
           this.bgImageSrc = tg_4_5
           // this.devListParams.picture = '4'
           this.imgSizeOriginal = { width: 2245, height: 1586 }
-          this.btnNum  = 2
+          this.btnNum  = 1
           this.cameraTypeNum  = 1
           this.showFence = false // 隐藏电子围栏
           this.showTemp = false // 隐藏温湿度
           this.showSmoking = false // 隐藏烟感
           this.showSound = false // 隐藏声光报警器
+          this.selectDevByType('4')
         }
-        this.selectDevByType('all')
       },
       // 查询并显示设备详情
       detailDev(dev, event) {
@@ -1201,10 +1224,14 @@
     left: 50%; transform: translateX(-50%);
     bottom: 25px;
   }
+  .tableLine {
+    margin-top: 9px;
+    width: 463px;
+  }
   .main-page {
     background-size: cover;
     background-color: #023d83;
-    height: 100vh;
+    height: 98vh;
   }
 
   .main-header {
@@ -1362,16 +1389,24 @@
         margin-left: 20px;
       }
     }
-    .el-scrollbar {
-      /*height: 200px;*/
-      width: 100%;
+    // 滚动条的滑块
+    /deep/ .el-table__body-wrapper  {
+      background-color: #023D83;
+      border: 0px solid white;
     }
-    .moredatascollor {
-      height: 200px;
+    /deep/ .el-table--border th.gutter:last-of-type {
+      border: 1px solid #023D83;
+      border-bottom-width: 1px;
+      background-color: #023D83;
     }
-    .el-scrollbar__wrap {
-      overflow-y: auto;
-      overflow-x: hidden;
+    /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
+      background-color: #023D83;
+    }
+    /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+      display: none;
+    }
+    /deep/ .el-scrollbar__wrap {
+      overflow-x: hidden !important;
       margin-bottom: 0px !important;
     }
     .el-table {
@@ -1405,16 +1440,25 @@
     font-size: 15px;
     color: #FFFFFF;
     font-weight: normal;
+    border-color: #2470AC;
   }
-
+  .el-table--border::after, .el-table--group::after, .el-table::before{
+    background-color: #023d83;
+  }
+  .alarm-now-block /deep/ .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
+    border-color: #023d83;
+  }
   .alarm-now-block /deep/ .el-table__row td {
     background-color: #023D83;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ .el-table__body tr:hover > td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ tr.el-table__row--striped td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
 
   .map-tab {
@@ -1601,6 +1645,10 @@
   /*}*/
 
   @media(max-width: 1440px) {
+    .tableLine {
+      margin-top: 0px;
+      width: 343px;
+    }
     .main-title {
       height: 65px;
       padding-top: 16px;
diff --git a/src/views/ctrl/statCharts/devAlarmCount.vue b/src/views/ctrl/statCharts/devAlarmCount.vue
index 7bea059..6b6939e 100644
--- a/src/views/ctrl/statCharts/devAlarmCount.vue
+++ b/src/views/ctrl/statCharts/devAlarmCount.vue
@@ -1,5 +1,6 @@
+<!--suppress ALL -->
 <template>
-  <div>
+  <div style="height: 90%">
     <el-date-picker
       v-model="timeRange"
       :picker-options="pickerOptions"
@@ -7,15 +8,16 @@
       range-separator="至"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
-      style="margin-bottom: 10px;" />
-    <ve-histogram :data="chartData" :settings="settings" height="350px" />
+      style="margin-bottom: 10px;z-index: 10000"
+      size="small"/>
+    <ve-histogram :data="chartData" :settings="settings" :extend="chartExtend" style="margin-top: -50px" height="100%"/>
   </div>
 </template>
 
 <script>
-import { formatToString, getDate, oneDayTime } from '@/utils/calendarUtil'
-import { devAlarmCount } from '@/api/statistics'
 
+import { devAlarmCount } from '@/api/statistics'
+import { formatToString, parseToDate, getDate, oneDayTime } from '@/utils/calendarUtil'
 const now = new Date()
 
 export default {
@@ -30,12 +32,22 @@
         columns: ['name', 'count'],
         rows: []
       },
+      chartExtend: {
+        series: {
+          barMaxWidth: 50
+        },
+        grid: {
+          containLabel: true,
+          bottom: '10%'
+        }
+      },
       settings: {
         labelMap: {
           'name': '设备类型',
-          'count': '报警数量'
+          'count': ''
         },
-        max: [4]
+        max: [4],
+        area: false
       },
       timeRange: [],
       pickerOptions: {
@@ -99,6 +111,13 @@
       devAlarmCount(this.params).then(response => {
         if (response.code === 200) {
           this.chartData.rows = response.data
+          var max = 4
+          for(var i=0;i<response.data.length;i++){
+            if(Number(response.data[i].count)>max){
+              max = Number(response.data[i].count)
+            }
+          }
+          this.settings.max = [max]
         }
       })
     }
diff --git a/src/views/ctrl/statCharts/devCount.vue b/src/views/ctrl/statCharts/devCount.vue
index d3e2902..db55fbe 100644
--- a/src/views/ctrl/statCharts/devCount.vue
+++ b/src/views/ctrl/statCharts/devCount.vue
@@ -1,5 +1,6 @@
 <template>
-  <ve-ring :data="chartData" :settings="settings" />
+  <ve-histogram :data="chartData" :settings="settings" :extend="chartExtend" style="margin-top: -20px" height="100%"/>
+  <!--<ve-ring :data="chartData" :settings="settings" />-->
 </template>
 
 <script>
@@ -9,14 +10,55 @@
   name: 'DevCount',
   data() {
     return {
+      chartExtend: {
+        series: {
+          barMaxWidth: 50
+        },
+        xAxis: {
+          axisLabel: {
+            interval: 0,
+            //换行显示
+            formatter: function(value) {
+              let result = ""; //拼接加\n返回的类目项
+              let maxLength = 2; //每项显示文字个数
+              let valLength = value.length; //X轴类目项的文字个数
+              let rowNumber = Math.ceil(valLength / maxLength); //类目项需要换行的行数
+              if (rowNumber > 1) {
+                //如果文字大于3,
+                for (let i = 0; i < rowNumber; i++) {
+                  let temp = ""; //每次截取的字符串
+                  let start = i * maxLength; //开始截取的位置
+                  let end = start + maxLength; //结束截取的位置
+                  temp = value.substring(start, end) + "\n";
+                  result += temp; //拼接生成最终的字符串
+                }
+                return "{labelText|" + result + "}";
+              } else {
+                return "{labelText|" + value + "}";
+              }
+            },
+            rich: {
+              labelText: {
+                lineHeight: 18
+              }
+            }
+          }
+        }
+      },
       chartData: {
         columns: ['name', 'count'],
         rows: []
       },
       settings: {
-        // legendLimit: 4
-        radius: [60, 100]
-      }
+        labelMap: {
+          'name': '设备类型',
+          'count': ''
+        }
+      },
+      // settings: {
+      //   // legendLimit: 4
+      //   radius: [60, 100]
+      // }
     }
   },
   activated() {
@@ -26,6 +68,9 @@
     fetchData() {
       devCount().then(response => {
         if (response.code === 200) {
+          for(var i=0;i<response.data.length;i++){
+            response.data[i].name = response.data[i].name.replace('防护','')
+          }
           this.chartData.rows = response.data
         }
       })
diff --git a/src/views/ctrl/statCharts/inOutCount.vue b/src/views/ctrl/statCharts/inOutCount.vue
index 502157e..d65ec69 100644
--- a/src/views/ctrl/statCharts/inOutCount.vue
+++ b/src/views/ctrl/statCharts/inOutCount.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="height: 100%">
     <el-date-picker
       v-model="timeRange"
       :picker-options="pickerOptions"
@@ -7,8 +7,9 @@
       range-separator="至"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
-      style="margin-bottom: 10px"/>
-    <ve-line :data="chartData" :settings="settings" height="350px" />
+      size="small"
+      style="margin-bottom: 10px;z-index: 10000"/>
+    <ve-line :data="chartData" :settings="settings" :extend="barExtend" style="margin-top: -50px;" height="93%"/>
   </div>
 </template>
 
@@ -30,6 +31,17 @@
         columns: ['date', 'staff', 'visitor', 'car', 'visitorCar'],
         rows: []
       },
+
+      barExtend:{
+        legend:{  // 隐藏图例
+          x: 'center',
+          y: 'bottom'
+        },
+        grid: {
+          containLabel: true,
+          bottom: '10%'
+        },
+      },
       settings: {
         labelMap: {
           'staff': '内部人员',
@@ -37,11 +49,11 @@
           'car': '内部车辆',
           'visitorCar': '来访车辆'
         },
-        xAxisType: 'time',
+        // xAxisType: 'time',
         max: [4],
         area: false,
         metrics: ['staff', 'visitor', 'car', 'visitorCar'],
-        dimension: ['date']
+        dimension: ['date'],
       },
       timeRange: [],
       pickerOptions: {
@@ -106,7 +118,7 @@
         if (response.code === 200) {
           const data = this.parseStatisticsData(response.data)
           this.chartData.rows = data.rowDatas
-          this.chartData.max = [data.maxCount]
+          this.settings.max = [data.maxCount]
         }
       })
     },
@@ -164,7 +176,7 @@
 
         if (typeof visitorCar !== 'undefined') {
           if (visitorCar.date === date) {
-            visitorCarCount = car.count
+            visitorCarCount = visitorCar.count
             indexVc++
           }
         }
@@ -172,6 +184,18 @@
         if (staffCount + visitorCount + carCount + visitorCarCount > 0) {
           rowDatas.push({ date: date, staff: staffCount, visitor: visitorCount, car: carCount, visitorCar: visitorCarCount })
         }
+        if(maxCount<staffCount){
+          maxCount = staffCount
+        }
+        if(maxCount<visitorCount){
+          maxCount = visitorCount
+        }
+        if(maxCount<carCount){
+          maxCount = carCount
+        }
+        if(maxCount<visitorCarCount){
+          maxCount = visitorCarCount
+        }
         start += oneDayTime
       }
 
diff --git a/src/views/ctrl/statCharts/inOutDoorCount.vue b/src/views/ctrl/statCharts/inOutDoorCount.vue
index ab28cdd..93f3458 100644
--- a/src/views/ctrl/statCharts/inOutDoorCount.vue
+++ b/src/views/ctrl/statCharts/inOutDoorCount.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="height: 100%">
     <el-date-picker
       v-model="timeRange"
       :picker-options="pickerOptions"
@@ -7,8 +7,9 @@
       range-separator="至"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
-      style="margin-bottom: 10px;" />
-    <ve-histogram :data="chartData" :settings="settings" height="350px" />
+      style="margin-bottom: 10px;z-index: 10000"
+      size="small"/>
+    <ve-histogram :data="chartData" :settings="settings" :extend="chartExtend" style="margin-top: -50px"height="93%"/>
   </div>
 </template>
 
@@ -26,11 +27,26 @@
         beginDate: '',
         endDate: ''
       },
+      chartExtend: {
+        legend:{  // 隐藏图例
+          x: 'center',
+          y: 'bottom'
+        },
+        grid: {
+          containLabel: true,
+          bottom: '10%'
+        },
+        series: {
+          barMaxWidth: 50,
+          center: ['50%', '50%']
+        }
+      },
       chartData: {
         columns: ['name', 'person', 'car'],
         rows: []
       },
       settings: {
+        radius: [60, 100],
         labelMap: {
           'person': '人员',
           'car': '车辆'
@@ -102,7 +118,7 @@
         if (response.code === 200) {
           const data = this.parseStatisticsData(response.data)
           this.chartData.rows = data.rowDatas
-          this.chartData.max = [data.maxCount]
+          this.settings.max = [data.maxCount]
         }
       })
     },
diff --git a/src/views/ctrl/statCharts/inOutKeyCount.vue b/src/views/ctrl/statCharts/inOutKeyCount.vue
index fa9a0b7..10108d6 100644
--- a/src/views/ctrl/statCharts/inOutKeyCount.vue
+++ b/src/views/ctrl/statCharts/inOutKeyCount.vue
@@ -1,5 +1,7 @@
 <template>
-  <ve-ring :data="chartData" :settings="settings" />
+  <div style="height: 100%">
+    <ve-ring :data="chartData" :settings="settings" :extend="chartExtend"  height="90%"/>
+  </div>
 </template>
 
 <script>
@@ -9,6 +11,19 @@
   name: 'InOutKeyCount',
   data() {
     return {
+      chartExtend: {
+        legend:{  // 隐藏图例
+          x: 'center',
+          y: 'top'
+        },
+        grid: {
+          containLabel: true,
+          top: '10%'
+        },
+        series: {
+          center: ['50%', '50%']
+        }
+      },
       chartData: {
         columns: ['name', 'count'],
         rows: []
diff --git a/src/views/ctrl/statCharts/inOutToday.vue b/src/views/ctrl/statCharts/inOutToday.vue
index c37fa7b..ae67856 100644
--- a/src/views/ctrl/statCharts/inOutToday.vue
+++ b/src/views/ctrl/statCharts/inOutToday.vue
@@ -1,5 +1,7 @@
 <template>
-  <ve-ring :data="chartData" :settings="settings" />
+  <div style="height: 100%">
+    <ve-ring :data="chartData" :settings="settings" :extend="chartExtend"  height="90%"/>
+  </div>
 </template>
 
 <script>
@@ -18,6 +20,15 @@
           { count: 1, name: '来访车辆' }
         ]
       },
+      chartExtend: {
+        legend:{  // 隐藏图例
+          x: 'center',
+          y: 'top'
+        },
+        series: {
+          center: ['50%', '50%']
+        }
+      },
       settings: {
         radius: [60, 100]
       }
diff --git a/src/views/deviceManage/deviceDetail.vue b/src/views/deviceManage/deviceDetail.vue
index 701052d..8245327 100644
--- a/src/views/deviceManage/deviceDetail.vue
+++ b/src/views/deviceManage/deviceDetail.vue
@@ -9,7 +9,7 @@
         <!--</el-col>-->
         <el-col :span="12">
           <el-form-item label="设备编号">
-            <el-input v-model.trim="dataForm.name" disabled type="text"/>
+            <el-input v-model.trim="dataForm.devcode" disabled type="text"/>
             <!--<span>{{ dataForm.devcode }}</span>-->
           </el-form-item>
         </el-col>
diff --git a/src/views/layout/components/AppHeader.vue b/src/views/layout/components/AppHeader.vue
index c3235b4..2e45954 100644
--- a/src/views/layout/components/AppHeader.vue
+++ b/src/views/layout/components/AppHeader.vue
@@ -1,12 +1,12 @@
 <template>
   <!--<div :style="{backgroundImage:'url('+headerUrl+')'}" class="app-header">-->
   <div style="background-color: #0078ff;" class="app-header">
-    <h3>{{ title }}</h3>
+    <h3 @click="backToIndex">{{ title }}</h3>
     <!--子系统选项-->
     <el-dropdown class="systemSelect" @command="handleCommand">
       <span class="el-dropdown-link" style="color: white">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
       </span>
-      <el-dropdown-menu slot="dropdown" >
+      <el-dropdown-menu slot="dropdown" style="z-index: 10000" >
         <el-dropdown-item>
           <span style="display:block;" @click="backToIndex">回首页</span>
         </el-dropdown-item>
@@ -15,7 +15,7 @@
     </el-dropdown>
 
     <div v-show="currentSystem.code === 'ctrl'" class="back-to-overview">
-      <el-button type="info" round @click="backToOverview">运行总览</el-button>
+      <el-button type="info" round @click="backToOverview" style="background-color: rgba(255,255,255,0.31);border: 0px">运行总览</el-button>
     </div>
 
     <el-dropdown class="avatar-container">
diff --git a/src/views/overview/doorIndex.vue b/src/views/overview/doorIndex.vue
index 5d2dce2..7cd40ff 100644
--- a/src/views/overview/doorIndex.vue
+++ b/src/views/overview/doorIndex.vue
@@ -58,26 +58,51 @@
           <i v-else class="el-icon-arrow-down"/>
         </span>
       </div>
-      <transition name="el-collapse-transition">
-        <el-scrollbar
-          v-show="tableShow"
-          :style="{ visibility: tableShow ? 'visible' : 'hidden'}"
-          :class="{ moredatascollor: alarmList.length > 6 }"
-          :native="false">
-          <el-table
-            :data="alarmList"
-            class="alarm-list-table"
-            border
-            stripe
-            @row-click="alarmRowClick">
-            <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{ scope.row[column.value] }}
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-scrollbar>
-      </transition>
+      <div v-show="alarmList.length > 4 && tableShow">
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 32px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 231px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          height="200"
+          style="border-left: 1px solid #2470AC;"
+          v-if="tableShow"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-show="alarmList.length < 5 && tableShow">
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          v-if="tableShow"
+          style="border: 1px solid #2470AC"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
     </div>
 
     <!-- 中间平面图区域 -->
@@ -730,9 +755,12 @@
   .main-page {
     background-size: cover;
     background-color: #023d83;
-    height: 100vh;
+    height: 98vh;
   }
-
+  .tableLine {
+    margin-top: 9px;
+    width: 463px;
+  }
   .main-header {
     width: 100vw;
   }
@@ -863,16 +891,24 @@
         margin-left: 20px;
       }
     }
-    .el-scrollbar {
-      /*height: 200px;*/
-      width: 100%;
+    // 滚动条的滑块
+    /deep/ .el-table__body-wrapper  {
+      background-color: #023D83;
+      border: 0px solid white;
     }
-    .moredatascollor {
-      height: 200px;
+    /deep/ .el-table--border th.gutter:last-of-type {
+      border: 1px solid #023D83;
+      border-bottom-width: 1px;
+      background-color: #023D83;
     }
-    .el-scrollbar__wrap {
-      overflow-y: auto;
-      overflow-x: hidden;
+    /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
+      background-color: #023D83;
+    }
+    /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+      display: none;
+    }
+    /deep/ .el-scrollbar__wrap {
+      overflow-x: hidden !important;
       margin-bottom: 0px !important;
     }
     .el-table {
@@ -906,16 +942,25 @@
     font-size: 15px;
     color: #FFFFFF;
     font-weight: normal;
+    border-color: #2470AC;
   }
-
+  .el-table--border::after, .el-table--group::after, .el-table::before{
+    background-color: #023d83;
+  }
+  .alarm-now-block /deep/ .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
+    border-color: #023d83;
+  }
   .alarm-now-block /deep/ .el-table__row td {
     background-color: #023D83;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ .el-table__body tr:hover > td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ tr.el-table__row--striped td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
 
   .map-tab {
@@ -1091,6 +1136,10 @@
   /*}*/
 
   @media(max-width: 1440px) {
+    .tableLine {
+      margin-top: 0px;
+      width: 343px;
+    }
     .main-title {
       height: 65px;
       padding-top: 16px;
diff --git a/src/views/overview/fenceIndex.vue b/src/views/overview/fenceIndex.vue
index 9466288..62a35e8 100644
--- a/src/views/overview/fenceIndex.vue
+++ b/src/views/overview/fenceIndex.vue
@@ -58,26 +58,52 @@
           <i v-else class="el-icon-arrow-down"/>
         </span>
       </div>
-      <transition name="el-collapse-transition">
-        <el-scrollbar
-          v-show="tableShow"
-          :style="{ visibility: tableShow ? 'visible' : 'hidden'}"
-          :class="{ moredatascollor: alarmList.length > 6 }"
-          :native="false">
-          <el-table
-            :data="alarmList"
-            class="alarm-list-table"
-            border
-            stripe
-            @row-click="alarmRowClick">
-            <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{ scope.row[column.value] }}
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-scrollbar>
-      </transition>
+      <div v-show="alarmList.length > 4 && tableShow">
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 32px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 231px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          height="200"
+          style="border-left: 1px solid #2470AC;"
+          v-if="tableShow"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-show="alarmList.length < 5 && tableShow">
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          v-if="tableShow"
+          style="border: 1px solid #2470AC"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
     </div>
 
     <!-- 中间平面图区域 -->
@@ -725,10 +751,14 @@
       font-weight: normal;
     }
   }
+  .tableLine {
+    margin-top: 9px;
+    width: 463px;
+  }
   .main-page {
     background-size: cover;
     background-color: #023d83;
-    height: 100vh;
+    height: 98vh;
   }
 
   .main-header {
@@ -859,16 +889,24 @@
         margin-left: 20px;
       }
     }
-    .el-scrollbar {
-      /*height: 200px;*/
-      width: 100%;
+    // 滚动条的滑块
+    /deep/ .el-table__body-wrapper  {
+      background-color: #023D83;
+      border: 0px solid white;
     }
-    .moredatascollor {
-      height: 200px;
+    /deep/ .el-table--border th.gutter:last-of-type {
+      border: 1px solid #023D83;
+      border-bottom-width: 1px;
+      background-color: #023D83;
     }
-    .el-scrollbar__wrap {
-      overflow-y: auto;
-      overflow-x: hidden;
+    /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
+      background-color: #023D83;
+    }
+    /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+      display: none;
+    }
+    /deep/ .el-scrollbar__wrap {
+      overflow-x: hidden !important;
       margin-bottom: 0px !important;
     }
     .el-table {
@@ -902,16 +940,25 @@
     font-size: 15px;
     color: #FFFFFF;
     font-weight: normal;
+    border-color: #2470AC;
   }
-
+  .el-table--border::after, .el-table--group::after, .el-table::before{
+    background-color: #023d83;
+  }
+  .alarm-now-block /deep/ .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
+    border-color: #023d83;
+  }
   .alarm-now-block /deep/ .el-table__row td {
     background-color: #023D83;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ .el-table__body tr:hover > td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ tr.el-table__row--striped td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
 
   .map-tab {
@@ -1087,6 +1134,10 @@
   /*}*/
 
   @media(max-width: 1440px) {
+    .tableLine {
+      margin-top: 0px;
+      width: 343px;
+    }
     .main-title {
       height: 65px;
       padding-top: 16px;
diff --git a/src/views/overview/keyIndex.vue b/src/views/overview/keyIndex.vue
index 37405a8..a461c94 100644
--- a/src/views/overview/keyIndex.vue
+++ b/src/views/overview/keyIndex.vue
@@ -33,20 +33,6 @@
             <span v-text="dev.alarm"/>
           </div>
         </el-col>
-
-        <!--<el-col :span="6" class="sub-data-block dev-offline">-->
-          <!--<div class="statis-block">-->
-            <!--<span v-text="dev.offLine"/>-->
-          <!--</div>-->
-          <!--<div class="sub-title">离线</div>-->
-        <!--</el-col>-->
-
-        <!--<el-col :span="6" class="sub-data-block dev-closed">-->
-          <!--<div class="statis-block">-->
-            <!--<span v-text="dev.closed"/>-->
-          <!--</div>-->
-          <!--<div class="sub-title">关闭</div>-->
-        <!--</el-col>-->
       </el-row>
     </div>
 
@@ -58,26 +44,52 @@
           <i v-else class="el-icon-arrow-down"/>
         </span>
       </div>
-      <transition name="el-collapse-transition">
-        <el-scrollbar
-          v-show="tableShow"
-          :style="{ visibility: tableShow ? 'visible' : 'hidden'}"
-          :class="{ moredatascollor: alarmList.length > 6 }"
-          :native="false">
-          <el-table
-            :data="alarmList"
-            class="alarm-list-table"
-            border
-            stripe
-            @row-click="alarmRowClick">
-            <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{ scope.row[column.value] }}
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-scrollbar>
-      </transition>
+      <div v-show="alarmList.length > 4 && tableShow">
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 32px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 231px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          height="200"
+          style="border-left: 1px solid #2470AC;"
+          v-if="tableShow"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-show="alarmList.length < 5 && tableShow">
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          v-if="tableShow"
+          style="border: 1px solid #2470AC"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
     </div>
 
     <!-- 中间平面图区域 -->
@@ -95,49 +107,16 @@
     </div>
 
     <!-- 平面图区域设备类型按钮 -->
-    <div v-show="showType" class="bottom-center" :style="{ width: btnwidth + 'px'}">
-      <el-col class="dev-icon" @click.native="selectDevByType('4', $event)">
-        <img id="4-1-img" v-if="checkDevType1[0]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-        <img id="4-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-        <span>人脸识别</span>
-      </el-col>
-      <!--<el-col class="dev-icon" @click.native="selectDevByType('5', $event)">-->
-        <!--<img id="5-1-img" v-if="checkDevType1[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
-        <!--<img id="5-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
-        <!--<span>车牌轨迹</span>-->
-      <!--</el-col>-->
-      <!--<el-col class="dev-icon" @click.native="selectDevByType('8', $event)">-->
-        <!--<img id="8-1-img" v-if="checkDevType1[2]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
-        <!--<img id="8-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
-        <!--<span>周界防护</span>-->
-      <!--</el-col>-->
-      <!--<el-col class="dev-icon" @click.native="selectDevByType('9', $event)">-->
-        <!--<img id="9-1-img" v-if="checkDevType1[3]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
-        <!--<img id="9-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
-        <!--<span>标准数字</span>-->
-      <!--</el-col>-->
-      <!--<el-col class="dev-icon" @click.native="selectDevByType('10', $event)">-->
-        <!--<img id="10-1-img" v-if="checkDevType1[4]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
-        <!--<img id="10-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
-        <!--<span>智能球形</span>-->
-      <!--</el-col>-->
-      <!--<el-col class="dev-icon" @click.native="selectDevByType('11', $event)">-->
-        <!--<img id="11-1-img" v-if="checkDevType1[5]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
-        <!--<img id="11-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
-        <!--<span>标准半球</span>-->
-      <!--</el-col>-->
-    </div>
-    <!-- 平面图区域设备类型按钮 -->
     <div v-show="!showType"class="bottom-center" :style="{ width: cameraTypeNum*btnwidth + 'px'}">
       <el-col ref="all" class="dev-icon dev-type-selected" @click.native="selectDevByType('all', $event)">
         <img v-if="checkDevType[0]" src="@/assets/overview_images/icons/icon-all-checked.png">
         <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
         <span>全部</span>
       </el-col>
-      <el-col ref="camera" :class="cameraClass" @click.native="showType=!showType;selectDevByType('camera', $event)">
-        <img id="cam_img_red" v-if="checkDevType[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-        <img id="cam_img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-        <span>摄像头</span>
+      <el-col class="dev-icon" @click.native="selectDevByType('camera4', $event)">
+        <img id="4-1-img" v-if="checkDevType[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
+        <img id="4-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
+        <span>人脸识别</span>
       </el-col>
       <el-col v-show="showTemp" class="dev-icon" @click.native="selectDevByType('temperature', $event)">
         <img v-if="checkDevType[2]" src="@/assets/overview_images/icons/icon-temperature-checked.png">
@@ -364,7 +343,6 @@
       }, // 设备详情表单
       cameraClass:'dev-icon',
       showType : false,
-      checkDevType1: [false, false, false, false, false, false], // 摄像头类型
       checkDevType: [true, false, false, false, false] // 选中设备类型
     }
   },
@@ -462,7 +440,7 @@
       }else if(pic==='3'){
         this.changeMap('tg_4_1')
       }else if(pic==='4'){
-        this.changeMap('tg_4_1')
+        this.changeMap('tg_4_5')
       }
       setTimeout(() => {
         var obj = document.getElementById(val.toString());
@@ -477,24 +455,6 @@
     handleKeyup(val){ //单击收起摄像头分类
       this.showAlarmDetail  = false
       this.showDevDetail  = false
-      var item = ['人脸识别']
-      for(var i=0;i<item.length;i++){
-        if(item[i]===val.target.innerText){
-          return
-        }
-      }
-      if(val.target.id.endsWith('-1-img')||val.target.id.endsWith('-2-img')|| val.target.id==='cam_img' || val.target.id==='cam_img_red'){
-        return
-      }
-      if( val.target.innerText!=='摄像头') {
-        this.showType = false
-        const devTypes = document.querySelectorAll('.dev-icon')
-        for(var i=0;i<this.checkDevType.length;i++) {
-          if (this.checkDevType[i]) {
-            devTypes[i+1].className += ' dev-type-selected'
-          }
-        }
-      }
     },
     handleSelect(key, keyPath) {
       this.selectDevByType(key,undefined)
@@ -643,14 +603,13 @@
       if(type !== 'camera'){
         // 添加选中的样式
         if (typeof event === 'undefined') {
-          devTypes[1].className += ' dev-type-selected'
+          devTypes[0].className += ' dev-type-selected'
         } else {
           event.currentTarget.className += ' dev-type-selected'
         }
       }
       if(type!=='camera'){
         this.checkDevType = [false, false, false, false, false]
-        this.checkDevType1 = [false, false, false, false, false, false]
       }
       if (type === 'all') {
         if(this.bgImageSrc===tg_4_5){
@@ -660,14 +619,7 @@
         }
         // this.devListParams.deviceTypes = []
         this.checkDevType[0] = true
-      } else if(type==='camera'){
-        for(var i=0;i<this.checkDevType1.length;i++){
-          if(this.checkDevType1[i]) {
-            devTypes[i].className += ' dev-type-selected'
-          }
-        }
-        return
-      } else if (type === 'temperature') {
+      }  else if (type === 'temperature') {
         this.devListParams.deviceTypes = temperatureTypes.toString()
         this.checkDevType[2] = true
       } else if (type === 'smoking') {
@@ -676,30 +628,24 @@
       } else if (type === 'sound') {
         this.devListParams.deviceTypes = soundTypes.toString()
         this.checkDevType[4] = true
-      }else if(type === '4'){
+      }else if(type === 'camera4'){
         this.devListParams.deviceTypes = '4'
         this.checkDevType[1] = true
-        this.checkDevType1[0] = true
       }else if(type === '5'){
         this.devListParams.deviceTypes = '5'
         this.checkDevType[1] = true
-        this.checkDevType1[1] = true
       }else if(type === '8'){
         this.devListParams.deviceTypes = '8'
         this.checkDevType[1] = true
-        this.checkDevType1[2] = true
       }else if(type === '9'){
         this.devListParams.deviceTypes = '9'
         this.checkDevType[1] = true
-        this.checkDevType1[3] = true
       }else if(type === '10'){
         this.devListParams.deviceTypes = '10'
         this.checkDevType[1] = true
-        this.checkDevType1[4] = true
       }else if(type === '11'){
         this.devListParams.deviceTypes = '11'
         this.checkDevType[1] = true
-        this.checkDevType1[5] = true
       }
       this.fetchDeviceData()
       // if(this.checkDevType[1]){
@@ -866,18 +812,13 @@
       }else{
         this.devListParams.deviceTypes = '1,2,4,12'
       }
-      // this.devListParams.deviceTypes = []
       if (index === 'tg_main') {
-        // this.imgSizeOriginal = { width: 2245, height: 1586 }
         this.devListParams.picture = '1'
       }else if (index === 'tg_3_1') {
-        // this.imgSizeOriginal = { width: 2245, height: 1586 }
         this.devListParams.picture = '2'
       } else if (index === 'tg_4_1') {
-        // this.imgSizeOriginal = { width: 2218, height: 2169 }
         this.devListParams.picture = '3'
       }else if (index === 'tg_4_5') {
-        // this.imgSizeOriginal = { width: 2245, height: 1586 }
         this.devListParams.picture = '4'
       }
       overviewDeviceList(this.devListParams).then(response => {
@@ -1060,10 +1001,14 @@
   /deep/ .el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
     border-bottom-width: 0px;
   }
+  .tableLine {
+    margin-top: 9px;
+    width: 463px;
+  }
   .main-page {
     background-size: cover;
     background-color: #023d83;
-    height: 100vh;
+    height: 98vh;
   }
 
   .main-header {
@@ -1194,16 +1139,24 @@
         margin-left: 20px;
       }
     }
-    .el-scrollbar {
-      /*height: 200px;*/
-      width: 100%;
+    // 滚动条的滑块
+    /deep/ .el-table__body-wrapper  {
+      background-color: #023D83;
+      border: 0px solid white;
     }
-    .moredatascollor {
-      height: 200px;
+    /deep/ .el-table--border th.gutter:last-of-type {
+      border: 1px solid #023D83;
+      border-bottom-width: 1px;
+      background-color: #023D83;
     }
-    .el-scrollbar__wrap {
-      overflow-y: auto;
-      overflow-x: hidden;
+    /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
+      background-color: #023D83;
+    }
+    /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+      display: none;
+    }
+    /deep/ .el-scrollbar__wrap {
+      overflow-x: hidden !important;
       margin-bottom: 0px !important;
     }
     .el-table {
@@ -1237,16 +1190,25 @@
     font-size: 15px;
     color: #FFFFFF;
     font-weight: normal;
+    border-color: #2470AC;
   }
-
+  .el-table--border::after, .el-table--group::after, .el-table::before{
+    background-color: #023d83;
+  }
+  .alarm-now-block /deep/ .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
+    border-color: #023d83;
+  }
   .alarm-now-block /deep/ .el-table__row td {
     background-color: #023D83;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ .el-table__body tr:hover > td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ tr.el-table__row--striped td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
 
   .map-tab {
@@ -1431,6 +1393,10 @@
   /*}*/
 
   @media(max-width: 1440px) {
+    .tableLine {
+      margin-top: 0px;
+      width: 343px;
+    }
     .main-title {
       height: 65px;
       padding-top: 16px;
diff --git a/src/views/overview/regionIndex.vue b/src/views/overview/regionIndex.vue
index 69e7606..d4ea083 100644
--- a/src/views/overview/regionIndex.vue
+++ b/src/views/overview/regionIndex.vue
@@ -58,26 +58,52 @@
           <i v-else class="el-icon-arrow-down"/>
         </span>
       </div>
-      <transition name="el-collapse-transition">
-        <el-scrollbar
-          v-show="tableShow"
-          :style="{ visibility: tableShow ? 'visible' : 'hidden'}"
-          :class="{ moredatascollor: alarmList.length > 6 }"
-          :native="false">
-          <el-table
-            :data="alarmList"
-            class="alarm-list-table"
-            border
-            stripe
-            @row-click="alarmRowClick">
-            <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{ scope.row[column.value] }}
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-scrollbar>
-      </transition>
+      <div v-show="alarmList.length > 4 && tableShow">
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 32px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 231px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          height="200"
+          style="border-left: 1px solid #2470AC;"
+          v-if="tableShow"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-show="alarmList.length < 5 && tableShow">
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          v-if="tableShow"
+          style="border: 1px solid #2470AC"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
     </div>
 
     <!-- 中间平面图区域 -->
@@ -293,7 +319,7 @@
       title: getProject().title,
       bgImageSrc: tg_main,
       devListParams: {
-        picture: '3',
+        picture: '1',
         areaTypeId: 3,
         deviceTypes: '4,9,10,11'
       },
@@ -718,10 +744,14 @@
       font-weight: normal;
     }
   }
+  .tableLine {
+    margin-top: 9px;
+    width: 463px;
+  }
   .main-page {
     background-size: cover;
     background-color: #023d83;
-    height: 100vh;
+    height: 98vh;
   }
 
   .main-header {
@@ -852,16 +882,24 @@
         margin-left: 20px;
       }
     }
-    .el-scrollbar {
-      /*height: 200px;*/
-      width: 100%;
+    // 滚动条的滑块
+    /deep/ .el-table__body-wrapper  {
+      background-color: #023D83;
+      border: 0px solid white;
     }
-    .moredatascollor {
-      height: 200px;
+    /deep/ .el-table--border th.gutter:last-of-type {
+      border: 1px solid #023D83;
+      border-bottom-width: 1px;
+      background-color: #023D83;
     }
-    .el-scrollbar__wrap {
-      overflow-y: auto;
-      overflow-x: hidden;
+    /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
+      background-color: #023D83;
+    }
+    /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+      display: none;
+    }
+    /deep/ .el-scrollbar__wrap {
+      overflow-x: hidden !important;
       margin-bottom: 0px !important;
     }
     .el-table {
@@ -895,16 +933,25 @@
     font-size: 15px;
     color: #FFFFFF;
     font-weight: normal;
+    border-color: #2470AC;
   }
-
+  .el-table--border::after, .el-table--group::after, .el-table::before{
+    background-color: #023d83;
+  }
+  .alarm-now-block /deep/ .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
+    border-color: #023d83;
+  }
   .alarm-now-block /deep/ .el-table__row td {
     background-color: #023D83;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ .el-table__body tr:hover > td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ tr.el-table__row--striped td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
 
   .map-tab {
@@ -1080,6 +1127,10 @@
   /*}*/
 
   @media(max-width: 1440px) {
+    .tableLine {
+      margin-top: 0px;
+      width: 343px;
+    }
     .main-title {
       height: 65px;
       padding-top: 16px;
diff --git a/src/views/staff/staffAdd.vue b/src/views/staff/staffAdd.vue
index 769e6d6..698cf37 100644
--- a/src/views/staff/staffAdd.vue
+++ b/src/views/staff/staffAdd.vue
@@ -116,6 +116,9 @@
           <el-row>
             <el-button type="primary" plain class="id-card-btn" :disabled="canRead" @click="readIDCard">读取身份证</el-button>
           </el-row>
+          <el-row>
+            <el-button type="primary" plain class="id-card-btn" @click="readCamera">{{ btnCamera }}</el-button>
+          </el-row>
         </el-col>
       </el-row>
     </el-form>
@@ -126,8 +129,13 @@
           <el-button v-show="isKey" type="primary" style="margin-left: 20px;" @click="registerIris"> 注册虹膜 </el-button>
           <el-button type="primary" style="margin-left: 20px;" @click="saveData"> 保存 </el-button>
         </el-col>
+        <el-col :span="6" :offset="3">
+          <video v-show="showVideo" width="200px" height="150px" style="margin-left: -8px"></video>
+          <canvas v-show = "false" width="200px" height="150px"></canvas>
+        </el-col>
       </el-row>
     </div>
+
     <capture-iris ref="captureIris"/>
   </div>
 </template>
@@ -150,6 +158,9 @@
       deptList: [],
       isEditMode: false, // 是否为编辑模式，编辑模式部分字段不允许修改，且没有重置和虹膜注册功能
       isKey: false, // 是否重点区域授权人员
+      btnCamera:'读取摄像头',
+      showVideo: false,
+      stream:'',
       personForm: {
         id: '', // 人员id
         idCard: '', // 身份证号
@@ -284,6 +295,81 @@
         this.formLoading = false
       })
     },
+    readCamera() {
+      if(this.btnCamera === '读取摄像头'){
+        this.cameraImgFile()
+      }else{
+        this.getAPhoto()
+      }
+    },
+    getAPhoto() {
+      //绘制canvas图形
+      let video = document.getElementsByTagName("video")[0]
+      var canvas = document.getElementsByTagName('canvas')[0]
+      var context = canvas.getContext('2d')
+      context.clearRect(0, 0, context.width, context.height);
+      context.drawImage(video, 0, 0,200,150);
+      this.showVideo = false
+      //把canvas图像转为img图片
+      this.photo = canvas.toDataURL("image/png");
+      var mediaStreamTrack =  this.stream.getTracks()[0];
+      mediaStreamTrack.stop();
+      this.btnCamera = '读取摄像头'
+    },
+    // 拍照上传获取video
+    cameraImgFile() {
+      let _this = this;
+
+      // 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象
+      if (navigator.mediaDevices === undefined) {
+        navigator.mediaDevices = {};
+      }
+      // 一些浏览器部分支持 mediaDevices。我们不能直接给对象设置 getUserMedia
+      // 因为这样可能会覆盖已有的属性。这里我们只会在没有getUserMedia属性的时候添加它。
+      if (navigator.mediaDevices.getUserMedia === undefined) {
+        navigator.mediaDevices.getUserMedia = function(constraints) {
+          // 首先，如果有getUserMedia的话，就获得它
+          var getUserMedia =
+            navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
+
+          // 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
+          if (!getUserMedia) {
+            return Promise.reject(
+              new Error("getUserMedia is not implemented in this browser")
+            );
+          }
+          // 否则，为老的navigator.getUserMedia方法包裹一个Promise
+          return new Promise(function(resolve, reject) {
+            getUserMedia.call(navigator, constraints, resolve, reject);
+          });
+        };
+      }
+      navigator.mediaDevices
+        .getUserMedia({ video: true, audio: false })
+        .then(function(stream) {
+          _this.stream = stream;
+          _this.videoShow = true;
+          // 旧的浏览器可能没有srcObject
+          _this.$nextTick(() => {
+            let video = document.getElementsByTagName("video")[0]
+            if ("srcObject" in video) {
+              video.srcObject = stream;
+            } else {
+              // 防止在新的浏览器里使用它，应为它已经不再支持了
+              video.src = window.URL.createObjectURL(stream);
+            }
+            _this.showVideo = true
+            _this.btnCamera = '拍照'
+            video.onloadedmetadata = function(e) {
+              video.play();
+            };
+          });
+        })
+        .catch(function(err) {
+          _this.videoShow = false;
+          _this.$message.warning("未发现可拍照设备或出现其他错误！");
+        });
+    },
     readIDCard() {
       this.resetForm()
       this.canRead = true
diff --git a/src/views/staff/staffEdit.vue b/src/views/staff/staffEdit.vue
index 2f8d4ca..04291b3 100644
--- a/src/views/staff/staffEdit.vue
+++ b/src/views/staff/staffEdit.vue
@@ -117,6 +117,9 @@
           <el-row>
             <el-button type="primary" plain :disabled="canRead"  class="id-card-btn" @click="readIDCard">读取身份证</el-button>
           </el-row>
+          <el-row>
+            <el-button type="primary" plain class="id-card-btn" @click="readCamera">{{ btnCamera }}</el-button>
+          </el-row>
         </el-col>
       </el-row>
     </el-form>
@@ -126,6 +129,10 @@
           <el-button v-show="isKey" type="primary" style="margin-left: 20px;" @click="registerIris"> 注册虹膜 </el-button>
           <el-button type="primary" style="margin-left: 20px;" @click="saveData"> 保存 </el-button>
         </el-col>
+        <el-col :span="6" :offset="3">
+          <video v-show="showVideo" width="200px" height="150px" style="margin-left: -8px"></video>
+          <canvas v-show = "false" width="200px" height="150px"></canvas>
+        </el-col>
       </el-row>
     </div>
 
@@ -161,6 +168,9 @@
     return {
       canRead: false,
       deptList: [],
+      btnCamera:'读取摄像头',
+      showVideo: false,
+      stream:'',
       isEditMode: false, // 是否为编辑模式，编辑模式部分字段不允许修改，且没有重置和虹膜注册功能
       isKey: false, // 是否重点区域授权人员
       reCaptureIris: '0', // 是否重新采集了虹膜
@@ -253,6 +263,81 @@
         this.keyAreaList = response.data
       })
     },
+    readCamera() {
+      if(this.btnCamera === '读取摄像头'){
+        this.cameraImgFile()
+      }else{
+        this.getAPhoto()
+      }
+    },
+    getAPhoto() {
+      //绘制canvas图形
+      let video = document.getElementsByTagName("video")[0]
+      var canvas = document.getElementsByTagName('canvas')[0]
+      var context = canvas.getContext('2d')
+      context.clearRect(0, 0, context.width, context.height);
+      context.drawImage(video, 0, 0,200,150);
+      this.showVideo = false
+      //把canvas图像转为img图片
+      this.photo = canvas.toDataURL("image/png");
+      var mediaStreamTrack =  this.stream.getTracks()[0];
+      mediaStreamTrack.stop();
+      this.btnCamera = '读取摄像头'
+    },
+    // 拍照上传获取video
+    cameraImgFile() {
+      let _this = this;
+
+      // 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象
+      if (navigator.mediaDevices === undefined) {
+        navigator.mediaDevices = {};
+      }
+      // 一些浏览器部分支持 mediaDevices。我们不能直接给对象设置 getUserMedia
+      // 因为这样可能会覆盖已有的属性。这里我们只会在没有getUserMedia属性的时候添加它。
+      if (navigator.mediaDevices.getUserMedia === undefined) {
+        navigator.mediaDevices.getUserMedia = function(constraints) {
+          // 首先，如果有getUserMedia的话，就获得它
+          var getUserMedia =
+            navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
+
+          // 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
+          if (!getUserMedia) {
+            return Promise.reject(
+              new Error("getUserMedia is not implemented in this browser")
+            );
+          }
+          // 否则，为老的navigator.getUserMedia方法包裹一个Promise
+          return new Promise(function(resolve, reject) {
+            getUserMedia.call(navigator, constraints, resolve, reject);
+          });
+        };
+      }
+      navigator.mediaDevices
+        .getUserMedia({ video: true, audio: false })
+        .then(function(stream) {
+          _this.stream = stream;
+          _this.videoShow = true;
+          // 旧的浏览器可能没有srcObject
+          _this.$nextTick(() => {
+            let video = document.getElementsByTagName("video")[0]
+            if ("srcObject" in video) {
+              video.srcObject = stream;
+            } else {
+              // 防止在新的浏览器里使用它，应为它已经不再支持了
+              video.src = window.URL.createObjectURL(stream);
+            }
+            _this.showVideo = true
+            _this.btnCamera = '拍照'
+            video.onloadedmetadata = function(e) {
+              video.play();
+            };
+          });
+        })
+        .catch(function(err) {
+          _this.videoShow = false;
+          _this.$message.warning("未发现可拍照设备或出现其他错误！");
+        });
+    },
     fetchData(id) {
       this.formLoading = true
       detailStaff(id).then(response => {
diff --git a/src/views/video/history.vue b/src/views/video/history.vue
index ed18111..de698a1 100644
--- a/src/views/video/history.vue
+++ b/src/views/video/history.vue
@@ -18,6 +18,7 @@
                   value-format="yyyy-MM-dd HH:mm:ss"
                   start-placeholder="搜索起始时间"
                   end-placeholder="搜索截止时间"
+                  arrow-control="true"
                   @focus="dateClick"
                   @change="dateSelected"/>
               </el-form-item>
@@ -25,11 +26,11 @@
               <!--<el-button class="filter-item" type="primary" @click="live">实时预览</el-button>-->
             </el-form>
           </div>
-          <div>
+          <div id="tabDiv">
             <!--<el-tabs v-model="activeName" type="card" @tab-click.once="handleClick">-->
               <!--<el-tab-pane label="海康" name="hk" >-->
                 <!--<iframe v-if="activeName==='hk'" zIndex="-1" name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html?wmode=opaque"/>-->
-                <iframe zIndex="-1" name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html?wmode=opaque"/>
+                <iframe name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html?wmode=opaque"/>
               <!--</el-tab-pane>-->
               <!--<el-tab-pane label="NVR" name="nvr">-->
                 <!--<iframe v-if="activeName==='nvr'" zIndex="-1" name="playNVR" class="iframe-body" src="/static/webCtrl/nvr/demo-easy.html?wmode=opaque"/>-->
@@ -43,6 +44,7 @@
 </template>
 <script>
 import VideoTree from './videoTree'
+import { formatToString, getDate, oneDayTime } from '@/utils/calendarUtil'
 export default {
   name: 'VideoHistory',
   components: { VideoTree },
@@ -84,9 +86,14 @@
     }
   },
   mounted() {
+    this.listQuery.startTime = getDate(0, 'DATE') + ' 00:00:00'
+    this.listQuery.endTime = getDate(0, 'SECOND')
+
+    this.timeRange = [this.listQuery.startTime, this.listQuery.endTime]
+    console.log(this.timeRange)
     setTimeout(() => {
       // console.log('treewidth: ' + this.$refs.tree.$el.offsetWidth.toString())
-      window.frames['playHK'].initPlugin('back')
+      window.frames['playHK'].initPlugin('back',document.getElementById("tabDiv").getBoundingClientRect().left)
     }, 1500)
   },
   methods: {
@@ -94,7 +101,7 @@
       if (tab.name === 'hk') {
         this.activeName = 'hk'
         console.log('hk')
-        window.frames['playHK'].initPlugin('back')
+        window.frames['playHK'].initPlugin('back',document.getElementById("tabDiv").getBoundingClientRect().left)
       } else if (tab.name === 'nvr') {
         this.activeName = 'nvr'
         // window.frames['playNVR'].stopPlayReal(null)
@@ -112,6 +119,7 @@
           if (this.activeName === 'nvr') {
             window.frames['playNVR'].search(0, this.listQuery.startTime, this.listQuery.endTime)
           } else if (this.activeName === 'hk') {
+            console.log(this.listQuery.monitorPoint, this.listQuery.startTime, this.listQuery.endTime)
             window.frames['playHK'].search(this.listQuery.monitorPoint, this.listQuery.startTime, this.listQuery.endTime)
           }
         }
@@ -120,7 +128,6 @@
     handleCameraClicked(camera) {
       console.log(camera)
       if (typeof camera.monitorPoint === 'undefined' || camera.monitorPoint === '') {
-        console.log('ip is null')
         return false
       } else {
         this.listQuery.monitorPoint = camera.monitorPoint

diff --git a/config/dev.env.js b/config/dev.env.js
index 6b4622a..095ba33 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -8,4 +8,5 @@
   NODE_ENV: '"development"',
   // BASE_API: '"http://192.168.5.220:20311"'
   BASE_API: '"http://111.198.10.15:11631"'
+  // BASE_API: '"http://192.168.5.220:20311"'
 })
diff --git a/config/prod.env.js b/config/prod.env.js
index f2501d0..ccbc615 100644
--- a/config/prod.env.js
+++ b/config/prod.env.js
@@ -1,5 +1,6 @@
 'use strict'
 module.exports = {
   NODE_ENV: '"production"',
-  BASE_API: '"http://192.168.5.220:20311"'
+  // BASE_API: '"http://192.168.5.220:20311"'
+  BASE_API: '"http://111.198.10.15:11631"'
 }
diff --git a/favicon.ico b/favicon.ico
index 34b63ac..bc1bfc5 100644
--- a/favicon.ico
+++ b/favicon.ico
Binary files differ
diff --git a/src/api/visitor.js b/src/api/visitor.js
index 05ed6ea..01a6c26 100644
--- a/src/api/visitor.js
+++ b/src/api/visitor.js
@@ -74,3 +74,14 @@
   })
 }
 
+// 查询人员轨迹
+export function getDetail(devcode) {
+  return request({
+    url: '/device/capturePhoto',
+    method: 'post',
+    params:{
+      devcode: devcode
+    }
+  })
+}
+
diff --git a/src/assets/dashboard_images/icon-defence.png b/src/assets/dashboard_images/icon-defence.png
index 8069376..11b41cb 100644
--- a/src/assets/dashboard_images/icon-defence.png
+++ b/src/assets/dashboard_images/icon-defence.png
Binary files differ
diff --git a/src/utils/calendarUtil.js b/src/utils/calendarUtil.js
index da840c3..e599bdd 100644
--- a/src/utils/calendarUtil.js
+++ b/src/utils/calendarUtil.js
@@ -61,7 +61,32 @@
 
   return yearMonth + '-' + format(day)
 }
+export function formatDateTime(cellval) {
+  var dateVal = cellval + "";//把时间戳转成字符串格式
+  if (cellval != null) {
+    //取得时间戳部分 如：获取 /Date(1545299299910)/ 中的 1545299299910 部分
+    var date = new Date(parseInt(dateVal.replace("/Date(", "")
+      .replace(")/", ""), 10));
+    //获取年，不需要其他操作所以可以直接返回	date.getFullYear()
+    //月份为0-11，所以+1，月份小于10时补个0
+    var month = date.getMonth() + 1 < 10 ? "0"
+      + (date.getMonth() + 1) : date.getMonth() + 1;
+    //获取日
+    var currentDate = date.getDate() < 10 ? "0" + date.getDate()
+      : date.getDate();
+    //获取时间
+    var hours = date.getHours() < 10 ? "0" + date.getHours() : date
+      .getHours();
+    var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes()
+      : date.getMinutes();
+    var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds()
+      : date.getSeconds();
 
+    //返回日期结果，需要时间的话在加上时间
+    return date.getFullYear() + "-" + month + "-" + currentDate+" "+hours+":"+
+      minutes+":"+seconds;
+  }
+}
 // 格式化日期为字符串
 export function formatToString(value, level) {
   const date = new Date(value)
diff --git a/src/views/alarm/alarmDetail.vue b/src/views/alarm/alarmDetail.vue
index 2c94629..8c32ee5 100644
--- a/src/views/alarm/alarmDetail.vue
+++ b/src/views/alarm/alarmDetail.vue
@@ -1,7 +1,7 @@
 <!-- 报警详情 -->
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :model="dataForm" label-well-code="right" label-width="110px">
+    <el-form v-loading="loading" ref="dataForm" :model="dataForm" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="报警编号">
@@ -86,6 +86,7 @@
   name: 'AlarmDetail',
   data() {
     return {
+      loading: true,
       dialogFormVisible: false, // 对话框是否显示
       dialogStatus: '', // 对话框类型：create,update,detail
       dataForm: {
@@ -123,7 +124,7 @@
         this.dataForm = {
           id: row.id
         }
-
+        this.loading = true
         alarmDetail(this.dataForm.id).then(response => {
           if (response.code === 200) {
             this.dataForm = {
@@ -140,7 +141,7 @@
               reason: response.data.reason,
               remark: response.data.remark
             }
-
+            this.loading = false
             // 格式化报警状态
             if (response.data.valid === 1) {
               this.dataForm.validStr = '正在报警'
diff --git a/src/views/car/carAdd.vue b/src/views/car/carAdd.vue
index ddb215f..5f54c93 100644
--- a/src/views/car/carAdd.vue
+++ b/src/views/car/carAdd.vue
@@ -10,7 +10,7 @@
         </el-col>
         <el-col :span="12">
           <el-form-item label="车辆性质" prop="property">
-            <el-radio-group v-model="dataForm.property" :disabled="isDetailMode">
+            <el-radio-group v-model="dataForm.property" :disabled="isDetailMode" @change="resetOwner">
               <el-radio v-for="item in carProperties" :key="item.value" :label="item.value">{{ item.name }}</el-radio>
             </el-radio-group>
           </el-form-item>
@@ -106,6 +106,12 @@
     this.fetchStaffList()
   },
   methods: {
+    resetOwner(){
+      if(this.dataForm.property!=='2'){
+        this.dataForm.ownerId = ''
+        // this.dataForm.phone = ''
+      }
+    },
     // 初始化对话框
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.btnLoading = false
@@ -208,6 +214,7 @@
           }
         })
         this.dataForm.phone = selectedStaff[0].phone
+        this.dataForm.deptid = selectedStaff[0].deptid
       } else {
         this.dataForm.phone = ''
       }
diff --git a/src/views/car/carList.vue b/src/views/car/carList.vue
index 8d924ff..4ff07ab 100644
--- a/src/views/car/carList.vue
+++ b/src/views/car/carList.vue
@@ -105,11 +105,11 @@
           value: 'propertyStr',
           align: 'center'
         },
-        // {
-        //   text: '车主姓名',
-        //   value: 'ownerName',
-        //   align: 'center'
-        // },
+        {
+          text: '车主姓名',
+          value: 'ownerName',
+          align: 'center'
+        },
         {
           text: '车主联系电话',
           value: 'phone',
diff --git a/src/views/ctrl/index.vue b/src/views/ctrl/index.vue
index fd36f2b..29923af 100644
--- a/src/views/ctrl/index.vue
+++ b/src/views/ctrl/index.vue
@@ -50,12 +50,13 @@
         <in-out-today />
       </el-col>
 
-      <el-col :span="7" class="chart-block">
+      <el-col id="dev-count"  :span="10" class="chart-block">
         <div class="chart-title">各类型设备安装数量</div>
         <dev-count />
       </el-col>
 
-      <el-col id="pass-count" :span="10" class="chart-block">
+      <!--<el-col id="pass-count" class="chart-block">-->
+      <el-col :span="7" class="chart-block">
         <div class="chart-title">进出营数量统计</div>
         <in-out-count />
       </el-col>
@@ -121,7 +122,7 @@
 <style scoped>
   .app-wrapper {
     background-color: #e9e9e9;
-    padding-bottom: 20px;
+    padding-bottom: 10px;
   }
 
   .sub-data-block {
@@ -129,6 +130,7 @@
     border-radius: 16px;
     float: left;
     margin: 10px;
+    margin-bottom: 0px;
     box-shadow: 1px 1px 5px #999;
   }
   .sub-title {
@@ -136,36 +138,38 @@
     text-align: center;
     font-family: 'Microsoft YaHei';
     color: #fff;
-    font-size: 24px;
-    padding: 10px;
+    font-size: 20px;
+    padding-top: 10px;
+    padding-bottom: 0px;
   }
   .statis-block {
     text-align: center;
     margin: 0px 10px 0px 10px;
-    padding: 0px 10px 10px 10px;
+    padding: 0px 10px 5px 10px;
     color: #fff;
     font-weight: bold;
     letter-spacing: 1px;
-    font-size: 24px;
+    font-size: 20px;
   }
   .big-size {
-    font-size: 64px;
+    font-size: 35px;
   }
 
   .chart-title {
     font-family: 'Microsoft YaHei';
     color: #000000;
     font-weight: bold;
-    font-size: 20px;
+    font-size: 18px;
     text-align: center;
     padding: 10px;
   }
   .chart-block {
     margin-left: 20px;
-    margin-top: 20px;
+    margin-top: 10px;
     border-radius: 16px;
     background-color: #FFFFFF;
     box-shadow: 1px 1px 5px #999;
+    height: 37vh;
   }
 
   #today-visitor {
@@ -187,7 +191,7 @@
     background-image: linear-gradient(to right, #ffa800, #ce7e00);
   }
 
-  #pass-count, #dev-alarm-count {
+  #dev-count, #dev-alarm-count {
     width: calc(250vw / 6 - 70px);
   }
 </style>
diff --git a/src/views/ctrl/overview.vue b/src/views/ctrl/overview.vue
index 62e1105..49ed928 100644
--- a/src/views/ctrl/overview.vue
+++ b/src/views/ctrl/overview.vue
@@ -59,26 +59,52 @@
           <i v-else class="el-icon-arrow-down"/>
         </span>
       </div>
-      <transition name="el-collapse-transition">
-        <el-scrollbar
-          v-show="tableShow"
-          :style="{ visibility: tableShow ? 'visible' : 'hidden'}"
-          :class="{ moredatascollor: alarmList.length > 6 }"
-          :native="false">
-          <el-table
-            :data="alarmList"
-            class="alarm-list-table"
-            border
-            stripe
-            @row-click="alarmRowClick">
-            <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{ scope.row[column.value] }}
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-scrollbar>
-      </transition>
+      <div v-show="alarmList.length > 4 && tableShow">
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 32px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 231px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          height="200"
+          style="border-left: 1px solid #2470AC;"
+          v-if="tableShow"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-show="alarmList.length < 5 && tableShow">
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          v-if="tableShow"
+          style="border: 1px solid #2470AC"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
     </div>
 
     <!-- 中间平面图区域 -->
@@ -145,9 +171,13 @@
         class="point-camera"
         @click="detailDev(item, $event)" />
     </div>
-
     <!-- 平面图区域设备类型按钮 -->
-    <div v-show="showType" class="bottom-center" :style="{ width: cameraTypeNum*btnwidth + 'px'}">
+    <div class="bottom-center" :style="{ width: btnNum*btnwidth + 'px'}">
+        <el-col v-show="btnNum!==1" ref="all" class="dev-icon dev-type-selected" @click.native="selectDevByType('all', $event)">
+          <img v-if="checkDevType[0]" src="@/assets/overview_images/icons/icon-all-checked.png">
+          <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
+          <span>全部</span>
+        </el-col>
       <el-col class="dev-icon" @click.native="selectDevByType('4', $event)">
         <img id="4-1-img" v-if="checkDevType1[0]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="4-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
@@ -178,20 +208,6 @@
         <img id="11-2-img" v-else src="@/assets/overview_images/icons/half-camera-blue.png">
         <span>标准半球</span>
       </el-col>
-    </div>
-    <!-- 平面图区域设备类型按钮 -->
-    <div v-show="!showType"class="bottom-center" :style="{ width: btnNum*btnwidth + 'px'}">
-        <el-col ref="all" class="dev-icon dev-type-selected" @click.native="selectDevByType('all', $event)">
-          <img v-if="checkDevType[0]" src="@/assets/overview_images/icons/icon-all-checked.png">
-          <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
-          <span>全部</span>
-        </el-col>
-        <el-col ref="camera" :class="cameraClass" @click.native="showType=!showType;selectDevByType('camera', $event)">
-        <!--<el-col ref="camera" class="dev-icon" @click.native="selectDevByType('camera', $event)">-->
-          <img id="cam_img_red" v-if="checkDevType[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-          <img id="cam_img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-          <span>摄像头</span>
-        </el-col>
         <el-col v-show="showFence" class="dev-icon" @click.native="selectDevByType('fence', $event)">
           <img v-if="checkDevType[2]" src="@/assets/overview_images/icons/icon-fence-checked.png">
           <img v-else src="@/assets/overview_images/icons/icon-fence-unchecked.png">
@@ -372,7 +388,7 @@
           height: 789
         }, // 屏幕窗口尺寸
         imgUrl: require('../../assets/overview_images/icons/icon-camera-point.png'),
-        btnNum: 3,
+        btnNum: 8,
         cameraTypeNum: 6,
         btnwidth: 210,
         halfLeft: 0,
@@ -498,25 +514,25 @@
             }
           }
         }
-        //跟换菜单
-        var item = ['人脸识别','车牌轨迹','周界防护','标准数字','智能球形','标准半球']
-        for(var i=0;i<item.length;i++){
-          if(item[i]===val.target.innerText){
-            return
-          }
-        }
-        if(val.target.id.endsWith('-1-img')||val.target.id.endsWith('-2-img')|| val.target.id==='cam_img' || val.target.id==='cam_img_red'){
-          return
-        }
-        if( val.target.innerText!=='摄像头') {
-          this.showType = false
-          const devTypes = document.querySelectorAll('.dev-icon')
-            for(var i=0;i<this.checkDevType.length;i++) {
-              if (this.checkDevType[i]) {
-                devTypes[i+6].className += ' dev-type-selected'
-              }
-            }
-        }
+        // //跟换菜单
+        // var item = ['人脸识别','车牌轨迹','周界防护','标准数字','智能球形','标准半球']
+        // for(var i=0;i<item.length;i++){
+        //   if(item[i]===val.target.innerText){
+        //     return
+        //   }
+        // }
+        // if(val.target.id.endsWith('-1-img')||val.target.id.endsWith('-2-img')|| val.target.id==='cam_img' || val.target.id==='cam_img_red'){
+        //   return
+        // }
+        // if( val.target.innerText!=='摄像头') {
+        //   this.showType = false
+        //   const devTypes = document.querySelectorAll('.dev-icon')
+        //     for(var i=0;i<this.checkDevType.length;i++) {
+        //       if (this.checkDevType[i]) {
+        //         devTypes[i+6].className += ' dev-type-selected'
+        //       }
+        //     }
+        // }
       },
       webSocket() {
         const that = this
@@ -586,7 +602,7 @@
         }else if(pic==='3'){
           this.changeMap('tg_4_1')
         }else if(pic==='4'){
-          this.changeMap('tg_4_1')
+          this.changeMap('tg_4_5')
         }
         setTimeout(() => {
           var obj = document.getElementById(val.toString());
@@ -771,7 +787,11 @@
           this.checkDevType1 = [false, false, false, false, false, false]
           // 添加选中的样式
           if (typeof event === 'undefined') {
-            devTypes[6].className += ' dev-type-selected'
+            if(this.btnNum===1){
+              devTypes[1].className += ' dev-type-selected'
+            }else{
+              devTypes[0].className += ' dev-type-selected'
+            }
           } else {
             event.currentTarget.className += ' dev-type-selected'
           }
@@ -1017,7 +1037,7 @@
           this.isMain = true
           // this.devListParams.picture = '1'
           this.imgSizeOriginal = { width: 2245, height: 1586 }
-          this.btnNum  = 3
+          this.btnNum  = 8
           this.cameraTypeNum  = 6
           this.showFence = true // 显示电子围栏
           this.showTemp = false // 隐藏温湿度设备
@@ -1027,6 +1047,7 @@
           this.showSubTabGuider = false
           this.showFloorThree = false
           this.showFloorFour = false
+          this.selectDevByType('all')
         } else if (index === 'tg_3_1') {
           this.bgImageSrc = tg_3_1
           // this.devListParams.picture = '2'
@@ -1037,6 +1058,7 @@
           this.showTemp = true // 隐藏温湿度
           this.showSmoking = true // 隐藏烟感
           this.showSound = true // 隐藏声光报警器
+          this.selectDevByType('all')
         } else if (index === 'tg_4_1') {
           this.bgImageSrc = tg_4_1
           // this.devListParams.picture = '3'
@@ -1048,18 +1070,19 @@
           this.showTemp = true // 显示温湿度
           this.showSmoking = true // 显示烟感
           this.showSound = true // 显示声光报警器
+          this.selectDevByType('all')
         } else if (index === 'tg_4_5') {
           this.bgImageSrc = tg_4_5
           // this.devListParams.picture = '4'
           this.imgSizeOriginal = { width: 2245, height: 1586 }
-          this.btnNum  = 2
+          this.btnNum  = 1
           this.cameraTypeNum  = 1
           this.showFence = false // 隐藏电子围栏
           this.showTemp = false // 隐藏温湿度
           this.showSmoking = false // 隐藏烟感
           this.showSound = false // 隐藏声光报警器
+          this.selectDevByType('4')
         }
-        this.selectDevByType('all')
       },
       // 查询并显示设备详情
       detailDev(dev, event) {
@@ -1201,10 +1224,14 @@
     left: 50%; transform: translateX(-50%);
     bottom: 25px;
   }
+  .tableLine {
+    margin-top: 9px;
+    width: 463px;
+  }
   .main-page {
     background-size: cover;
     background-color: #023d83;
-    height: 100vh;
+    height: 98vh;
   }
 
   .main-header {
@@ -1362,16 +1389,24 @@
         margin-left: 20px;
       }
     }
-    .el-scrollbar {
-      /*height: 200px;*/
-      width: 100%;
+    // 滚动条的滑块
+    /deep/ .el-table__body-wrapper  {
+      background-color: #023D83;
+      border: 0px solid white;
     }
-    .moredatascollor {
-      height: 200px;
+    /deep/ .el-table--border th.gutter:last-of-type {
+      border: 1px solid #023D83;
+      border-bottom-width: 1px;
+      background-color: #023D83;
     }
-    .el-scrollbar__wrap {
-      overflow-y: auto;
-      overflow-x: hidden;
+    /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
+      background-color: #023D83;
+    }
+    /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+      display: none;
+    }
+    /deep/ .el-scrollbar__wrap {
+      overflow-x: hidden !important;
       margin-bottom: 0px !important;
     }
     .el-table {
@@ -1405,16 +1440,25 @@
     font-size: 15px;
     color: #FFFFFF;
     font-weight: normal;
+    border-color: #2470AC;
   }
-
+  .el-table--border::after, .el-table--group::after, .el-table::before{
+    background-color: #023d83;
+  }
+  .alarm-now-block /deep/ .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
+    border-color: #023d83;
+  }
   .alarm-now-block /deep/ .el-table__row td {
     background-color: #023D83;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ .el-table__body tr:hover > td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ tr.el-table__row--striped td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
 
   .map-tab {
@@ -1601,6 +1645,10 @@
   /*}*/
 
   @media(max-width: 1440px) {
+    .tableLine {
+      margin-top: 0px;
+      width: 343px;
+    }
     .main-title {
       height: 65px;
       padding-top: 16px;
diff --git a/src/views/ctrl/statCharts/devAlarmCount.vue b/src/views/ctrl/statCharts/devAlarmCount.vue
index 7bea059..6b6939e 100644
--- a/src/views/ctrl/statCharts/devAlarmCount.vue
+++ b/src/views/ctrl/statCharts/devAlarmCount.vue
@@ -1,5 +1,6 @@
+<!--suppress ALL -->
 <template>
-  <div>
+  <div style="height: 90%">
     <el-date-picker
       v-model="timeRange"
       :picker-options="pickerOptions"
@@ -7,15 +8,16 @@
       range-separator="至"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
-      style="margin-bottom: 10px;" />
-    <ve-histogram :data="chartData" :settings="settings" height="350px" />
+      style="margin-bottom: 10px;z-index: 10000"
+      size="small"/>
+    <ve-histogram :data="chartData" :settings="settings" :extend="chartExtend" style="margin-top: -50px" height="100%"/>
   </div>
 </template>
 
 <script>
-import { formatToString, getDate, oneDayTime } from '@/utils/calendarUtil'
-import { devAlarmCount } from '@/api/statistics'
 
+import { devAlarmCount } from '@/api/statistics'
+import { formatToString, parseToDate, getDate, oneDayTime } from '@/utils/calendarUtil'
 const now = new Date()
 
 export default {
@@ -30,12 +32,22 @@
         columns: ['name', 'count'],
         rows: []
       },
+      chartExtend: {
+        series: {
+          barMaxWidth: 50
+        },
+        grid: {
+          containLabel: true,
+          bottom: '10%'
+        }
+      },
       settings: {
         labelMap: {
           'name': '设备类型',
-          'count': '报警数量'
+          'count': ''
         },
-        max: [4]
+        max: [4],
+        area: false
       },
       timeRange: [],
       pickerOptions: {
@@ -99,6 +111,13 @@
       devAlarmCount(this.params).then(response => {
         if (response.code === 200) {
           this.chartData.rows = response.data
+          var max = 4
+          for(var i=0;i<response.data.length;i++){
+            if(Number(response.data[i].count)>max){
+              max = Number(response.data[i].count)
+            }
+          }
+          this.settings.max = [max]
         }
       })
     }
diff --git a/src/views/ctrl/statCharts/devCount.vue b/src/views/ctrl/statCharts/devCount.vue
index d3e2902..db55fbe 100644
--- a/src/views/ctrl/statCharts/devCount.vue
+++ b/src/views/ctrl/statCharts/devCount.vue
@@ -1,5 +1,6 @@
 <template>
-  <ve-ring :data="chartData" :settings="settings" />
+  <ve-histogram :data="chartData" :settings="settings" :extend="chartExtend" style="margin-top: -20px" height="100%"/>
+  <!--<ve-ring :data="chartData" :settings="settings" />-->
 </template>
 
 <script>
@@ -9,14 +10,55 @@
   name: 'DevCount',
   data() {
     return {
+      chartExtend: {
+        series: {
+          barMaxWidth: 50
+        },
+        xAxis: {
+          axisLabel: {
+            interval: 0,
+            //换行显示
+            formatter: function(value) {
+              let result = ""; //拼接加\n返回的类目项
+              let maxLength = 2; //每项显示文字个数
+              let valLength = value.length; //X轴类目项的文字个数
+              let rowNumber = Math.ceil(valLength / maxLength); //类目项需要换行的行数
+              if (rowNumber > 1) {
+                //如果文字大于3,
+                for (let i = 0; i < rowNumber; i++) {
+                  let temp = ""; //每次截取的字符串
+                  let start = i * maxLength; //开始截取的位置
+                  let end = start + maxLength; //结束截取的位置
+                  temp = value.substring(start, end) + "\n";
+                  result += temp; //拼接生成最终的字符串
+                }
+                return "{labelText|" + result + "}";
+              } else {
+                return "{labelText|" + value + "}";
+              }
+            },
+            rich: {
+              labelText: {
+                lineHeight: 18
+              }
+            }
+          }
+        }
+      },
       chartData: {
         columns: ['name', 'count'],
         rows: []
       },
       settings: {
-        // legendLimit: 4
-        radius: [60, 100]
-      }
+        labelMap: {
+          'name': '设备类型',
+          'count': ''
+        }
+      },
+      // settings: {
+      //   // legendLimit: 4
+      //   radius: [60, 100]
+      // }
     }
   },
   activated() {
@@ -26,6 +68,9 @@
     fetchData() {
       devCount().then(response => {
         if (response.code === 200) {
+          for(var i=0;i<response.data.length;i++){
+            response.data[i].name = response.data[i].name.replace('防护','')
+          }
           this.chartData.rows = response.data
         }
       })
diff --git a/src/views/ctrl/statCharts/inOutCount.vue b/src/views/ctrl/statCharts/inOutCount.vue
index 502157e..d65ec69 100644
--- a/src/views/ctrl/statCharts/inOutCount.vue
+++ b/src/views/ctrl/statCharts/inOutCount.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="height: 100%">
     <el-date-picker
       v-model="timeRange"
       :picker-options="pickerOptions"
@@ -7,8 +7,9 @@
       range-separator="至"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
-      style="margin-bottom: 10px"/>
-    <ve-line :data="chartData" :settings="settings" height="350px" />
+      size="small"
+      style="margin-bottom: 10px;z-index: 10000"/>
+    <ve-line :data="chartData" :settings="settings" :extend="barExtend" style="margin-top: -50px;" height="93%"/>
   </div>
 </template>
 
@@ -30,6 +31,17 @@
         columns: ['date', 'staff', 'visitor', 'car', 'visitorCar'],
         rows: []
       },
+
+      barExtend:{
+        legend:{  // 隐藏图例
+          x: 'center',
+          y: 'bottom'
+        },
+        grid: {
+          containLabel: true,
+          bottom: '10%'
+        },
+      },
       settings: {
         labelMap: {
           'staff': '内部人员',
@@ -37,11 +49,11 @@
           'car': '内部车辆',
           'visitorCar': '来访车辆'
         },
-        xAxisType: 'time',
+        // xAxisType: 'time',
         max: [4],
         area: false,
         metrics: ['staff', 'visitor', 'car', 'visitorCar'],
-        dimension: ['date']
+        dimension: ['date'],
       },
       timeRange: [],
       pickerOptions: {
@@ -106,7 +118,7 @@
         if (response.code === 200) {
           const data = this.parseStatisticsData(response.data)
           this.chartData.rows = data.rowDatas
-          this.chartData.max = [data.maxCount]
+          this.settings.max = [data.maxCount]
         }
       })
     },
@@ -164,7 +176,7 @@
 
         if (typeof visitorCar !== 'undefined') {
           if (visitorCar.date === date) {
-            visitorCarCount = car.count
+            visitorCarCount = visitorCar.count
             indexVc++
           }
         }
@@ -172,6 +184,18 @@
         if (staffCount + visitorCount + carCount + visitorCarCount > 0) {
           rowDatas.push({ date: date, staff: staffCount, visitor: visitorCount, car: carCount, visitorCar: visitorCarCount })
         }
+        if(maxCount<staffCount){
+          maxCount = staffCount
+        }
+        if(maxCount<visitorCount){
+          maxCount = visitorCount
+        }
+        if(maxCount<carCount){
+          maxCount = carCount
+        }
+        if(maxCount<visitorCarCount){
+          maxCount = visitorCarCount
+        }
         start += oneDayTime
       }
 
diff --git a/src/views/ctrl/statCharts/inOutDoorCount.vue b/src/views/ctrl/statCharts/inOutDoorCount.vue
index ab28cdd..93f3458 100644
--- a/src/views/ctrl/statCharts/inOutDoorCount.vue
+++ b/src/views/ctrl/statCharts/inOutDoorCount.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="height: 100%">
     <el-date-picker
       v-model="timeRange"
       :picker-options="pickerOptions"
@@ -7,8 +7,9 @@
       range-separator="至"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
-      style="margin-bottom: 10px;" />
-    <ve-histogram :data="chartData" :settings="settings" height="350px" />
+      style="margin-bottom: 10px;z-index: 10000"
+      size="small"/>
+    <ve-histogram :data="chartData" :settings="settings" :extend="chartExtend" style="margin-top: -50px"height="93%"/>
   </div>
 </template>
 
@@ -26,11 +27,26 @@
         beginDate: '',
         endDate: ''
       },
+      chartExtend: {
+        legend:{  // 隐藏图例
+          x: 'center',
+          y: 'bottom'
+        },
+        grid: {
+          containLabel: true,
+          bottom: '10%'
+        },
+        series: {
+          barMaxWidth: 50,
+          center: ['50%', '50%']
+        }
+      },
       chartData: {
         columns: ['name', 'person', 'car'],
         rows: []
       },
       settings: {
+        radius: [60, 100],
         labelMap: {
           'person': '人员',
           'car': '车辆'
@@ -102,7 +118,7 @@
         if (response.code === 200) {
           const data = this.parseStatisticsData(response.data)
           this.chartData.rows = data.rowDatas
-          this.chartData.max = [data.maxCount]
+          this.settings.max = [data.maxCount]
         }
       })
     },
diff --git a/src/views/ctrl/statCharts/inOutKeyCount.vue b/src/views/ctrl/statCharts/inOutKeyCount.vue
index fa9a0b7..10108d6 100644
--- a/src/views/ctrl/statCharts/inOutKeyCount.vue
+++ b/src/views/ctrl/statCharts/inOutKeyCount.vue
@@ -1,5 +1,7 @@
 <template>
-  <ve-ring :data="chartData" :settings="settings" />
+  <div style="height: 100%">
+    <ve-ring :data="chartData" :settings="settings" :extend="chartExtend"  height="90%"/>
+  </div>
 </template>
 
 <script>
@@ -9,6 +11,19 @@
   name: 'InOutKeyCount',
   data() {
     return {
+      chartExtend: {
+        legend:{  // 隐藏图例
+          x: 'center',
+          y: 'top'
+        },
+        grid: {
+          containLabel: true,
+          top: '10%'
+        },
+        series: {
+          center: ['50%', '50%']
+        }
+      },
       chartData: {
         columns: ['name', 'count'],
         rows: []
diff --git a/src/views/ctrl/statCharts/inOutToday.vue b/src/views/ctrl/statCharts/inOutToday.vue
index c37fa7b..ae67856 100644
--- a/src/views/ctrl/statCharts/inOutToday.vue
+++ b/src/views/ctrl/statCharts/inOutToday.vue
@@ -1,5 +1,7 @@
 <template>
-  <ve-ring :data="chartData" :settings="settings" />
+  <div style="height: 100%">
+    <ve-ring :data="chartData" :settings="settings" :extend="chartExtend"  height="90%"/>
+  </div>
 </template>
 
 <script>
@@ -18,6 +20,15 @@
           { count: 1, name: '来访车辆' }
         ]
       },
+      chartExtend: {
+        legend:{  // 隐藏图例
+          x: 'center',
+          y: 'top'
+        },
+        series: {
+          center: ['50%', '50%']
+        }
+      },
       settings: {
         radius: [60, 100]
       }
diff --git a/src/views/deviceManage/deviceDetail.vue b/src/views/deviceManage/deviceDetail.vue
index 701052d..8245327 100644
--- a/src/views/deviceManage/deviceDetail.vue
+++ b/src/views/deviceManage/deviceDetail.vue
@@ -9,7 +9,7 @@
         <!--</el-col>-->
         <el-col :span="12">
           <el-form-item label="设备编号">
-            <el-input v-model.trim="dataForm.name" disabled type="text"/>
+            <el-input v-model.trim="dataForm.devcode" disabled type="text"/>
             <!--<span>{{ dataForm.devcode }}</span>-->
           </el-form-item>
         </el-col>
diff --git a/src/views/layout/components/AppHeader.vue b/src/views/layout/components/AppHeader.vue
index c3235b4..2e45954 100644
--- a/src/views/layout/components/AppHeader.vue
+++ b/src/views/layout/components/AppHeader.vue
@@ -1,12 +1,12 @@
 <template>
   <!--<div :style="{backgroundImage:'url('+headerUrl+')'}" class="app-header">-->
   <div style="background-color: #0078ff;" class="app-header">
-    <h3>{{ title }}</h3>
+    <h3 @click="backToIndex">{{ title }}</h3>
     <!--子系统选项-->
     <el-dropdown class="systemSelect" @command="handleCommand">
       <span class="el-dropdown-link" style="color: white">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
       </span>
-      <el-dropdown-menu slot="dropdown" >
+      <el-dropdown-menu slot="dropdown" style="z-index: 10000" >
         <el-dropdown-item>
           <span style="display:block;" @click="backToIndex">回首页</span>
         </el-dropdown-item>
@@ -15,7 +15,7 @@
     </el-dropdown>
 
     <div v-show="currentSystem.code === 'ctrl'" class="back-to-overview">
-      <el-button type="info" round @click="backToOverview">运行总览</el-button>
+      <el-button type="info" round @click="backToOverview" style="background-color: rgba(255,255,255,0.31);border: 0px">运行总览</el-button>
     </div>
 
     <el-dropdown class="avatar-container">
diff --git a/src/views/overview/doorIndex.vue b/src/views/overview/doorIndex.vue
index 5d2dce2..7cd40ff 100644
--- a/src/views/overview/doorIndex.vue
+++ b/src/views/overview/doorIndex.vue
@@ -58,26 +58,51 @@
           <i v-else class="el-icon-arrow-down"/>
         </span>
       </div>
-      <transition name="el-collapse-transition">
-        <el-scrollbar
-          v-show="tableShow"
-          :style="{ visibility: tableShow ? 'visible' : 'hidden'}"
-          :class="{ moredatascollor: alarmList.length > 6 }"
-          :native="false">
-          <el-table
-            :data="alarmList"
-            class="alarm-list-table"
-            border
-            stripe
-            @row-click="alarmRowClick">
-            <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{ scope.row[column.value] }}
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-scrollbar>
-      </transition>
+      <div v-show="alarmList.length > 4 && tableShow">
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 32px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 231px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          height="200"
+          style="border-left: 1px solid #2470AC;"
+          v-if="tableShow"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-show="alarmList.length < 5 && tableShow">
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          v-if="tableShow"
+          style="border: 1px solid #2470AC"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
     </div>
 
     <!-- 中间平面图区域 -->
@@ -730,9 +755,12 @@
   .main-page {
     background-size: cover;
     background-color: #023d83;
-    height: 100vh;
+    height: 98vh;
   }
-
+  .tableLine {
+    margin-top: 9px;
+    width: 463px;
+  }
   .main-header {
     width: 100vw;
   }
@@ -863,16 +891,24 @@
         margin-left: 20px;
       }
     }
-    .el-scrollbar {
-      /*height: 200px;*/
-      width: 100%;
+    // 滚动条的滑块
+    /deep/ .el-table__body-wrapper  {
+      background-color: #023D83;
+      border: 0px solid white;
     }
-    .moredatascollor {
-      height: 200px;
+    /deep/ .el-table--border th.gutter:last-of-type {
+      border: 1px solid #023D83;
+      border-bottom-width: 1px;
+      background-color: #023D83;
     }
-    .el-scrollbar__wrap {
-      overflow-y: auto;
-      overflow-x: hidden;
+    /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
+      background-color: #023D83;
+    }
+    /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+      display: none;
+    }
+    /deep/ .el-scrollbar__wrap {
+      overflow-x: hidden !important;
       margin-bottom: 0px !important;
     }
     .el-table {
@@ -906,16 +942,25 @@
     font-size: 15px;
     color: #FFFFFF;
     font-weight: normal;
+    border-color: #2470AC;
   }
-
+  .el-table--border::after, .el-table--group::after, .el-table::before{
+    background-color: #023d83;
+  }
+  .alarm-now-block /deep/ .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
+    border-color: #023d83;
+  }
   .alarm-now-block /deep/ .el-table__row td {
     background-color: #023D83;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ .el-table__body tr:hover > td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ tr.el-table__row--striped td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
 
   .map-tab {
@@ -1091,6 +1136,10 @@
   /*}*/
 
   @media(max-width: 1440px) {
+    .tableLine {
+      margin-top: 0px;
+      width: 343px;
+    }
     .main-title {
       height: 65px;
       padding-top: 16px;
diff --git a/src/views/overview/fenceIndex.vue b/src/views/overview/fenceIndex.vue
index 9466288..62a35e8 100644
--- a/src/views/overview/fenceIndex.vue
+++ b/src/views/overview/fenceIndex.vue
@@ -58,26 +58,52 @@
           <i v-else class="el-icon-arrow-down"/>
         </span>
       </div>
-      <transition name="el-collapse-transition">
-        <el-scrollbar
-          v-show="tableShow"
-          :style="{ visibility: tableShow ? 'visible' : 'hidden'}"
-          :class="{ moredatascollor: alarmList.length > 6 }"
-          :native="false">
-          <el-table
-            :data="alarmList"
-            class="alarm-list-table"
-            border
-            stripe
-            @row-click="alarmRowClick">
-            <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{ scope.row[column.value] }}
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-scrollbar>
-      </transition>
+      <div v-show="alarmList.length > 4 && tableShow">
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 32px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 231px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          height="200"
+          style="border-left: 1px solid #2470AC;"
+          v-if="tableShow"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-show="alarmList.length < 5 && tableShow">
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          v-if="tableShow"
+          style="border: 1px solid #2470AC"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
     </div>
 
     <!-- 中间平面图区域 -->
@@ -725,10 +751,14 @@
       font-weight: normal;
     }
   }
+  .tableLine {
+    margin-top: 9px;
+    width: 463px;
+  }
   .main-page {
     background-size: cover;
     background-color: #023d83;
-    height: 100vh;
+    height: 98vh;
   }
 
   .main-header {
@@ -859,16 +889,24 @@
         margin-left: 20px;
       }
     }
-    .el-scrollbar {
-      /*height: 200px;*/
-      width: 100%;
+    // 滚动条的滑块
+    /deep/ .el-table__body-wrapper  {
+      background-color: #023D83;
+      border: 0px solid white;
     }
-    .moredatascollor {
-      height: 200px;
+    /deep/ .el-table--border th.gutter:last-of-type {
+      border: 1px solid #023D83;
+      border-bottom-width: 1px;
+      background-color: #023D83;
     }
-    .el-scrollbar__wrap {
-      overflow-y: auto;
-      overflow-x: hidden;
+    /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
+      background-color: #023D83;
+    }
+    /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+      display: none;
+    }
+    /deep/ .el-scrollbar__wrap {
+      overflow-x: hidden !important;
       margin-bottom: 0px !important;
     }
     .el-table {
@@ -902,16 +940,25 @@
     font-size: 15px;
     color: #FFFFFF;
     font-weight: normal;
+    border-color: #2470AC;
   }
-
+  .el-table--border::after, .el-table--group::after, .el-table::before{
+    background-color: #023d83;
+  }
+  .alarm-now-block /deep/ .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
+    border-color: #023d83;
+  }
   .alarm-now-block /deep/ .el-table__row td {
     background-color: #023D83;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ .el-table__body tr:hover > td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ tr.el-table__row--striped td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
 
   .map-tab {
@@ -1087,6 +1134,10 @@
   /*}*/
 
   @media(max-width: 1440px) {
+    .tableLine {
+      margin-top: 0px;
+      width: 343px;
+    }
     .main-title {
       height: 65px;
       padding-top: 16px;
diff --git a/src/views/overview/keyIndex.vue b/src/views/overview/keyIndex.vue
index 37405a8..a461c94 100644
--- a/src/views/overview/keyIndex.vue
+++ b/src/views/overview/keyIndex.vue
@@ -33,20 +33,6 @@
             <span v-text="dev.alarm"/>
           </div>
         </el-col>
-
-        <!--<el-col :span="6" class="sub-data-block dev-offline">-->
-          <!--<div class="statis-block">-->
-            <!--<span v-text="dev.offLine"/>-->
-          <!--</div>-->
-          <!--<div class="sub-title">离线</div>-->
-        <!--</el-col>-->
-
-        <!--<el-col :span="6" class="sub-data-block dev-closed">-->
-          <!--<div class="statis-block">-->
-            <!--<span v-text="dev.closed"/>-->
-          <!--</div>-->
-          <!--<div class="sub-title">关闭</div>-->
-        <!--</el-col>-->
       </el-row>
     </div>
 
@@ -58,26 +44,52 @@
           <i v-else class="el-icon-arrow-down"/>
         </span>
       </div>
-      <transition name="el-collapse-transition">
-        <el-scrollbar
-          v-show="tableShow"
-          :style="{ visibility: tableShow ? 'visible' : 'hidden'}"
-          :class="{ moredatascollor: alarmList.length > 6 }"
-          :native="false">
-          <el-table
-            :data="alarmList"
-            class="alarm-list-table"
-            border
-            stripe
-            @row-click="alarmRowClick">
-            <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{ scope.row[column.value] }}
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-scrollbar>
-      </transition>
+      <div v-show="alarmList.length > 4 && tableShow">
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 32px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 231px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          height="200"
+          style="border-left: 1px solid #2470AC;"
+          v-if="tableShow"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-show="alarmList.length < 5 && tableShow">
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          v-if="tableShow"
+          style="border: 1px solid #2470AC"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
     </div>
 
     <!-- 中间平面图区域 -->
@@ -95,49 +107,16 @@
     </div>
 
     <!-- 平面图区域设备类型按钮 -->
-    <div v-show="showType" class="bottom-center" :style="{ width: btnwidth + 'px'}">
-      <el-col class="dev-icon" @click.native="selectDevByType('4', $event)">
-        <img id="4-1-img" v-if="checkDevType1[0]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-        <img id="4-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-        <span>人脸识别</span>
-      </el-col>
-      <!--<el-col class="dev-icon" @click.native="selectDevByType('5', $event)">-->
-        <!--<img id="5-1-img" v-if="checkDevType1[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
-        <!--<img id="5-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
-        <!--<span>车牌轨迹</span>-->
-      <!--</el-col>-->
-      <!--<el-col class="dev-icon" @click.native="selectDevByType('8', $event)">-->
-        <!--<img id="8-1-img" v-if="checkDevType1[2]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
-        <!--<img id="8-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
-        <!--<span>周界防护</span>-->
-      <!--</el-col>-->
-      <!--<el-col class="dev-icon" @click.native="selectDevByType('9', $event)">-->
-        <!--<img id="9-1-img" v-if="checkDevType1[3]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
-        <!--<img id="9-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
-        <!--<span>标准数字</span>-->
-      <!--</el-col>-->
-      <!--<el-col class="dev-icon" @click.native="selectDevByType('10', $event)">-->
-        <!--<img id="10-1-img" v-if="checkDevType1[4]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
-        <!--<img id="10-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
-        <!--<span>智能球形</span>-->
-      <!--</el-col>-->
-      <!--<el-col class="dev-icon" @click.native="selectDevByType('11', $event)">-->
-        <!--<img id="11-1-img" v-if="checkDevType1[5]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
-        <!--<img id="11-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
-        <!--<span>标准半球</span>-->
-      <!--</el-col>-->
-    </div>
-    <!-- 平面图区域设备类型按钮 -->
     <div v-show="!showType"class="bottom-center" :style="{ width: cameraTypeNum*btnwidth + 'px'}">
       <el-col ref="all" class="dev-icon dev-type-selected" @click.native="selectDevByType('all', $event)">
         <img v-if="checkDevType[0]" src="@/assets/overview_images/icons/icon-all-checked.png">
         <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
         <span>全部</span>
       </el-col>
-      <el-col ref="camera" :class="cameraClass" @click.native="showType=!showType;selectDevByType('camera', $event)">
-        <img id="cam_img_red" v-if="checkDevType[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-        <img id="cam_img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-        <span>摄像头</span>
+      <el-col class="dev-icon" @click.native="selectDevByType('camera4', $event)">
+        <img id="4-1-img" v-if="checkDevType[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
+        <img id="4-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
+        <span>人脸识别</span>
       </el-col>
       <el-col v-show="showTemp" class="dev-icon" @click.native="selectDevByType('temperature', $event)">
         <img v-if="checkDevType[2]" src="@/assets/overview_images/icons/icon-temperature-checked.png">
@@ -364,7 +343,6 @@
       }, // 设备详情表单
       cameraClass:'dev-icon',
       showType : false,
-      checkDevType1: [false, false, false, false, false, false], // 摄像头类型
       checkDevType: [true, false, false, false, false] // 选中设备类型
     }
   },
@@ -462,7 +440,7 @@
       }else if(pic==='3'){
         this.changeMap('tg_4_1')
       }else if(pic==='4'){
-        this.changeMap('tg_4_1')
+        this.changeMap('tg_4_5')
       }
       setTimeout(() => {
         var obj = document.getElementById(val.toString());
@@ -477,24 +455,6 @@
     handleKeyup(val){ //单击收起摄像头分类
       this.showAlarmDetail  = false
       this.showDevDetail  = false
-      var item = ['人脸识别']
-      for(var i=0;i<item.length;i++){
-        if(item[i]===val.target.innerText){
-          return
-        }
-      }
-      if(val.target.id.endsWith('-1-img')||val.target.id.endsWith('-2-img')|| val.target.id==='cam_img' || val.target.id==='cam_img_red'){
-        return
-      }
-      if( val.target.innerText!=='摄像头') {
-        this.showType = false
-        const devTypes = document.querySelectorAll('.dev-icon')
-        for(var i=0;i<this.checkDevType.length;i++) {
-          if (this.checkDevType[i]) {
-            devTypes[i+1].className += ' dev-type-selected'
-          }
-        }
-      }
     },
     handleSelect(key, keyPath) {
       this.selectDevByType(key,undefined)
@@ -643,14 +603,13 @@
       if(type !== 'camera'){
         // 添加选中的样式
         if (typeof event === 'undefined') {
-          devTypes[1].className += ' dev-type-selected'
+          devTypes[0].className += ' dev-type-selected'
         } else {
           event.currentTarget.className += ' dev-type-selected'
         }
       }
       if(type!=='camera'){
         this.checkDevType = [false, false, false, false, false]
-        this.checkDevType1 = [false, false, false, false, false, false]
       }
       if (type === 'all') {
         if(this.bgImageSrc===tg_4_5){
@@ -660,14 +619,7 @@
         }
         // this.devListParams.deviceTypes = []
         this.checkDevType[0] = true
-      } else if(type==='camera'){
-        for(var i=0;i<this.checkDevType1.length;i++){
-          if(this.checkDevType1[i]) {
-            devTypes[i].className += ' dev-type-selected'
-          }
-        }
-        return
-      } else if (type === 'temperature') {
+      }  else if (type === 'temperature') {
         this.devListParams.deviceTypes = temperatureTypes.toString()
         this.checkDevType[2] = true
       } else if (type === 'smoking') {
@@ -676,30 +628,24 @@
       } else if (type === 'sound') {
         this.devListParams.deviceTypes = soundTypes.toString()
         this.checkDevType[4] = true
-      }else if(type === '4'){
+      }else if(type === 'camera4'){
         this.devListParams.deviceTypes = '4'
         this.checkDevType[1] = true
-        this.checkDevType1[0] = true
       }else if(type === '5'){
         this.devListParams.deviceTypes = '5'
         this.checkDevType[1] = true
-        this.checkDevType1[1] = true
       }else if(type === '8'){
         this.devListParams.deviceTypes = '8'
         this.checkDevType[1] = true
-        this.checkDevType1[2] = true
       }else if(type === '9'){
         this.devListParams.deviceTypes = '9'
         this.checkDevType[1] = true
-        this.checkDevType1[3] = true
       }else if(type === '10'){
         this.devListParams.deviceTypes = '10'
         this.checkDevType[1] = true
-        this.checkDevType1[4] = true
       }else if(type === '11'){
         this.devListParams.deviceTypes = '11'
         this.checkDevType[1] = true
-        this.checkDevType1[5] = true
       }
       this.fetchDeviceData()
       // if(this.checkDevType[1]){
@@ -866,18 +812,13 @@
       }else{
         this.devListParams.deviceTypes = '1,2,4,12'
       }
-      // this.devListParams.deviceTypes = []
       if (index === 'tg_main') {
-        // this.imgSizeOriginal = { width: 2245, height: 1586 }
         this.devListParams.picture = '1'
       }else if (index === 'tg_3_1') {
-        // this.imgSizeOriginal = { width: 2245, height: 1586 }
         this.devListParams.picture = '2'
       } else if (index === 'tg_4_1') {
-        // this.imgSizeOriginal = { width: 2218, height: 2169 }
         this.devListParams.picture = '3'
       }else if (index === 'tg_4_5') {
-        // this.imgSizeOriginal = { width: 2245, height: 1586 }
         this.devListParams.picture = '4'
       }
       overviewDeviceList(this.devListParams).then(response => {
@@ -1060,10 +1001,14 @@
   /deep/ .el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
     border-bottom-width: 0px;
   }
+  .tableLine {
+    margin-top: 9px;
+    width: 463px;
+  }
   .main-page {
     background-size: cover;
     background-color: #023d83;
-    height: 100vh;
+    height: 98vh;
   }
 
   .main-header {
@@ -1194,16 +1139,24 @@
         margin-left: 20px;
       }
     }
-    .el-scrollbar {
-      /*height: 200px;*/
-      width: 100%;
+    // 滚动条的滑块
+    /deep/ .el-table__body-wrapper  {
+      background-color: #023D83;
+      border: 0px solid white;
     }
-    .moredatascollor {
-      height: 200px;
+    /deep/ .el-table--border th.gutter:last-of-type {
+      border: 1px solid #023D83;
+      border-bottom-width: 1px;
+      background-color: #023D83;
     }
-    .el-scrollbar__wrap {
-      overflow-y: auto;
-      overflow-x: hidden;
+    /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
+      background-color: #023D83;
+    }
+    /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+      display: none;
+    }
+    /deep/ .el-scrollbar__wrap {
+      overflow-x: hidden !important;
       margin-bottom: 0px !important;
     }
     .el-table {
@@ -1237,16 +1190,25 @@
     font-size: 15px;
     color: #FFFFFF;
     font-weight: normal;
+    border-color: #2470AC;
   }
-
+  .el-table--border::after, .el-table--group::after, .el-table::before{
+    background-color: #023d83;
+  }
+  .alarm-now-block /deep/ .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
+    border-color: #023d83;
+  }
   .alarm-now-block /deep/ .el-table__row td {
     background-color: #023D83;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ .el-table__body tr:hover > td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ tr.el-table__row--striped td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
 
   .map-tab {
@@ -1431,6 +1393,10 @@
   /*}*/
 
   @media(max-width: 1440px) {
+    .tableLine {
+      margin-top: 0px;
+      width: 343px;
+    }
     .main-title {
       height: 65px;
       padding-top: 16px;
diff --git a/src/views/overview/regionIndex.vue b/src/views/overview/regionIndex.vue
index 69e7606..d4ea083 100644
--- a/src/views/overview/regionIndex.vue
+++ b/src/views/overview/regionIndex.vue
@@ -58,26 +58,52 @@
           <i v-else class="el-icon-arrow-down"/>
         </span>
       </div>
-      <transition name="el-collapse-transition">
-        <el-scrollbar
-          v-show="tableShow"
-          :style="{ visibility: tableShow ? 'visible' : 'hidden'}"
-          :class="{ moredatascollor: alarmList.length > 6 }"
-          :native="false">
-          <el-table
-            :data="alarmList"
-            class="alarm-list-table"
-            border
-            stripe
-            @row-click="alarmRowClick">
-            <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{ scope.row[column.value] }}
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-scrollbar>
-      </transition>
+      <div v-show="alarmList.length > 4 && tableShow">
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 32px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 231px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          height="200"
+          style="border-left: 1px solid #2470AC;"
+          v-if="tableShow"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-show="alarmList.length < 5 && tableShow">
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          v-if="tableShow"
+          style="border: 1px solid #2470AC"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
     </div>
 
     <!-- 中间平面图区域 -->
@@ -293,7 +319,7 @@
       title: getProject().title,
       bgImageSrc: tg_main,
       devListParams: {
-        picture: '3',
+        picture: '1',
         areaTypeId: 3,
         deviceTypes: '4,9,10,11'
       },
@@ -718,10 +744,14 @@
       font-weight: normal;
     }
   }
+  .tableLine {
+    margin-top: 9px;
+    width: 463px;
+  }
   .main-page {
     background-size: cover;
     background-color: #023d83;
-    height: 100vh;
+    height: 98vh;
   }
 
   .main-header {
@@ -852,16 +882,24 @@
         margin-left: 20px;
       }
     }
-    .el-scrollbar {
-      /*height: 200px;*/
-      width: 100%;
+    // 滚动条的滑块
+    /deep/ .el-table__body-wrapper  {
+      background-color: #023D83;
+      border: 0px solid white;
     }
-    .moredatascollor {
-      height: 200px;
+    /deep/ .el-table--border th.gutter:last-of-type {
+      border: 1px solid #023D83;
+      border-bottom-width: 1px;
+      background-color: #023D83;
     }
-    .el-scrollbar__wrap {
-      overflow-y: auto;
-      overflow-x: hidden;
+    /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
+      background-color: #023D83;
+    }
+    /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+      display: none;
+    }
+    /deep/ .el-scrollbar__wrap {
+      overflow-x: hidden !important;
       margin-bottom: 0px !important;
     }
     .el-table {
@@ -895,16 +933,25 @@
     font-size: 15px;
     color: #FFFFFF;
     font-weight: normal;
+    border-color: #2470AC;
   }
-
+  .el-table--border::after, .el-table--group::after, .el-table::before{
+    background-color: #023d83;
+  }
+  .alarm-now-block /deep/ .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
+    border-color: #023d83;
+  }
   .alarm-now-block /deep/ .el-table__row td {
     background-color: #023D83;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ .el-table__body tr:hover > td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ tr.el-table__row--striped td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
 
   .map-tab {
@@ -1080,6 +1127,10 @@
   /*}*/
 
   @media(max-width: 1440px) {
+    .tableLine {
+      margin-top: 0px;
+      width: 343px;
+    }
     .main-title {
       height: 65px;
       padding-top: 16px;
diff --git a/src/views/staff/staffAdd.vue b/src/views/staff/staffAdd.vue
index 769e6d6..698cf37 100644
--- a/src/views/staff/staffAdd.vue
+++ b/src/views/staff/staffAdd.vue
@@ -116,6 +116,9 @@
           <el-row>
             <el-button type="primary" plain class="id-card-btn" :disabled="canRead" @click="readIDCard">读取身份证</el-button>
           </el-row>
+          <el-row>
+            <el-button type="primary" plain class="id-card-btn" @click="readCamera">{{ btnCamera }}</el-button>
+          </el-row>
         </el-col>
       </el-row>
     </el-form>
@@ -126,8 +129,13 @@
           <el-button v-show="isKey" type="primary" style="margin-left: 20px;" @click="registerIris"> 注册虹膜 </el-button>
           <el-button type="primary" style="margin-left: 20px;" @click="saveData"> 保存 </el-button>
         </el-col>
+        <el-col :span="6" :offset="3">
+          <video v-show="showVideo" width="200px" height="150px" style="margin-left: -8px"></video>
+          <canvas v-show = "false" width="200px" height="150px"></canvas>
+        </el-col>
       </el-row>
     </div>
+
     <capture-iris ref="captureIris"/>
   </div>
 </template>
@@ -150,6 +158,9 @@
       deptList: [],
       isEditMode: false, // 是否为编辑模式，编辑模式部分字段不允许修改，且没有重置和虹膜注册功能
       isKey: false, // 是否重点区域授权人员
+      btnCamera:'读取摄像头',
+      showVideo: false,
+      stream:'',
       personForm: {
         id: '', // 人员id
         idCard: '', // 身份证号
@@ -284,6 +295,81 @@
         this.formLoading = false
       })
     },
+    readCamera() {
+      if(this.btnCamera === '读取摄像头'){
+        this.cameraImgFile()
+      }else{
+        this.getAPhoto()
+      }
+    },
+    getAPhoto() {
+      //绘制canvas图形
+      let video = document.getElementsByTagName("video")[0]
+      var canvas = document.getElementsByTagName('canvas')[0]
+      var context = canvas.getContext('2d')
+      context.clearRect(0, 0, context.width, context.height);
+      context.drawImage(video, 0, 0,200,150);
+      this.showVideo = false
+      //把canvas图像转为img图片
+      this.photo = canvas.toDataURL("image/png");
+      var mediaStreamTrack =  this.stream.getTracks()[0];
+      mediaStreamTrack.stop();
+      this.btnCamera = '读取摄像头'
+    },
+    // 拍照上传获取video
+    cameraImgFile() {
+      let _this = this;
+
+      // 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象
+      if (navigator.mediaDevices === undefined) {
+        navigator.mediaDevices = {};
+      }
+      // 一些浏览器部分支持 mediaDevices。我们不能直接给对象设置 getUserMedia
+      // 因为这样可能会覆盖已有的属性。这里我们只会在没有getUserMedia属性的时候添加它。
+      if (navigator.mediaDevices.getUserMedia === undefined) {
+        navigator.mediaDevices.getUserMedia = function(constraints) {
+          // 首先，如果有getUserMedia的话，就获得它
+          var getUserMedia =
+            navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
+
+          // 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
+          if (!getUserMedia) {
+            return Promise.reject(
+              new Error("getUserMedia is not implemented in this browser")
+            );
+          }
+          // 否则，为老的navigator.getUserMedia方法包裹一个Promise
+          return new Promise(function(resolve, reject) {
+            getUserMedia.call(navigator, constraints, resolve, reject);
+          });
+        };
+      }
+      navigator.mediaDevices
+        .getUserMedia({ video: true, audio: false })
+        .then(function(stream) {
+          _this.stream = stream;
+          _this.videoShow = true;
+          // 旧的浏览器可能没有srcObject
+          _this.$nextTick(() => {
+            let video = document.getElementsByTagName("video")[0]
+            if ("srcObject" in video) {
+              video.srcObject = stream;
+            } else {
+              // 防止在新的浏览器里使用它，应为它已经不再支持了
+              video.src = window.URL.createObjectURL(stream);
+            }
+            _this.showVideo = true
+            _this.btnCamera = '拍照'
+            video.onloadedmetadata = function(e) {
+              video.play();
+            };
+          });
+        })
+        .catch(function(err) {
+          _this.videoShow = false;
+          _this.$message.warning("未发现可拍照设备或出现其他错误！");
+        });
+    },
     readIDCard() {
       this.resetForm()
       this.canRead = true
diff --git a/src/views/staff/staffEdit.vue b/src/views/staff/staffEdit.vue
index 2f8d4ca..04291b3 100644
--- a/src/views/staff/staffEdit.vue
+++ b/src/views/staff/staffEdit.vue
@@ -117,6 +117,9 @@
           <el-row>
             <el-button type="primary" plain :disabled="canRead"  class="id-card-btn" @click="readIDCard">读取身份证</el-button>
           </el-row>
+          <el-row>
+            <el-button type="primary" plain class="id-card-btn" @click="readCamera">{{ btnCamera }}</el-button>
+          </el-row>
         </el-col>
       </el-row>
     </el-form>
@@ -126,6 +129,10 @@
           <el-button v-show="isKey" type="primary" style="margin-left: 20px;" @click="registerIris"> 注册虹膜 </el-button>
           <el-button type="primary" style="margin-left: 20px;" @click="saveData"> 保存 </el-button>
         </el-col>
+        <el-col :span="6" :offset="3">
+          <video v-show="showVideo" width="200px" height="150px" style="margin-left: -8px"></video>
+          <canvas v-show = "false" width="200px" height="150px"></canvas>
+        </el-col>
       </el-row>
     </div>
 
@@ -161,6 +168,9 @@
     return {
       canRead: false,
       deptList: [],
+      btnCamera:'读取摄像头',
+      showVideo: false,
+      stream:'',
       isEditMode: false, // 是否为编辑模式，编辑模式部分字段不允许修改，且没有重置和虹膜注册功能
       isKey: false, // 是否重点区域授权人员
       reCaptureIris: '0', // 是否重新采集了虹膜
@@ -253,6 +263,81 @@
         this.keyAreaList = response.data
       })
     },
+    readCamera() {
+      if(this.btnCamera === '读取摄像头'){
+        this.cameraImgFile()
+      }else{
+        this.getAPhoto()
+      }
+    },
+    getAPhoto() {
+      //绘制canvas图形
+      let video = document.getElementsByTagName("video")[0]
+      var canvas = document.getElementsByTagName('canvas')[0]
+      var context = canvas.getContext('2d')
+      context.clearRect(0, 0, context.width, context.height);
+      context.drawImage(video, 0, 0,200,150);
+      this.showVideo = false
+      //把canvas图像转为img图片
+      this.photo = canvas.toDataURL("image/png");
+      var mediaStreamTrack =  this.stream.getTracks()[0];
+      mediaStreamTrack.stop();
+      this.btnCamera = '读取摄像头'
+    },
+    // 拍照上传获取video
+    cameraImgFile() {
+      let _this = this;
+
+      // 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象
+      if (navigator.mediaDevices === undefined) {
+        navigator.mediaDevices = {};
+      }
+      // 一些浏览器部分支持 mediaDevices。我们不能直接给对象设置 getUserMedia
+      // 因为这样可能会覆盖已有的属性。这里我们只会在没有getUserMedia属性的时候添加它。
+      if (navigator.mediaDevices.getUserMedia === undefined) {
+        navigator.mediaDevices.getUserMedia = function(constraints) {
+          // 首先，如果有getUserMedia的话，就获得它
+          var getUserMedia =
+            navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
+
+          // 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
+          if (!getUserMedia) {
+            return Promise.reject(
+              new Error("getUserMedia is not implemented in this browser")
+            );
+          }
+          // 否则，为老的navigator.getUserMedia方法包裹一个Promise
+          return new Promise(function(resolve, reject) {
+            getUserMedia.call(navigator, constraints, resolve, reject);
+          });
+        };
+      }
+      navigator.mediaDevices
+        .getUserMedia({ video: true, audio: false })
+        .then(function(stream) {
+          _this.stream = stream;
+          _this.videoShow = true;
+          // 旧的浏览器可能没有srcObject
+          _this.$nextTick(() => {
+            let video = document.getElementsByTagName("video")[0]
+            if ("srcObject" in video) {
+              video.srcObject = stream;
+            } else {
+              // 防止在新的浏览器里使用它，应为它已经不再支持了
+              video.src = window.URL.createObjectURL(stream);
+            }
+            _this.showVideo = true
+            _this.btnCamera = '拍照'
+            video.onloadedmetadata = function(e) {
+              video.play();
+            };
+          });
+        })
+        .catch(function(err) {
+          _this.videoShow = false;
+          _this.$message.warning("未发现可拍照设备或出现其他错误！");
+        });
+    },
     fetchData(id) {
       this.formLoading = true
       detailStaff(id).then(response => {
diff --git a/src/views/video/history.vue b/src/views/video/history.vue
index ed18111..de698a1 100644
--- a/src/views/video/history.vue
+++ b/src/views/video/history.vue
@@ -18,6 +18,7 @@
                   value-format="yyyy-MM-dd HH:mm:ss"
                   start-placeholder="搜索起始时间"
                   end-placeholder="搜索截止时间"
+                  arrow-control="true"
                   @focus="dateClick"
                   @change="dateSelected"/>
               </el-form-item>
@@ -25,11 +26,11 @@
               <!--<el-button class="filter-item" type="primary" @click="live">实时预览</el-button>-->
             </el-form>
           </div>
-          <div>
+          <div id="tabDiv">
             <!--<el-tabs v-model="activeName" type="card" @tab-click.once="handleClick">-->
               <!--<el-tab-pane label="海康" name="hk" >-->
                 <!--<iframe v-if="activeName==='hk'" zIndex="-1" name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html?wmode=opaque"/>-->
-                <iframe zIndex="-1" name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html?wmode=opaque"/>
+                <iframe name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html?wmode=opaque"/>
               <!--</el-tab-pane>-->
               <!--<el-tab-pane label="NVR" name="nvr">-->
                 <!--<iframe v-if="activeName==='nvr'" zIndex="-1" name="playNVR" class="iframe-body" src="/static/webCtrl/nvr/demo-easy.html?wmode=opaque"/>-->
@@ -43,6 +44,7 @@
 </template>
 <script>
 import VideoTree from './videoTree'
+import { formatToString, getDate, oneDayTime } from '@/utils/calendarUtil'
 export default {
   name: 'VideoHistory',
   components: { VideoTree },
@@ -84,9 +86,14 @@
     }
   },
   mounted() {
+    this.listQuery.startTime = getDate(0, 'DATE') + ' 00:00:00'
+    this.listQuery.endTime = getDate(0, 'SECOND')
+
+    this.timeRange = [this.listQuery.startTime, this.listQuery.endTime]
+    console.log(this.timeRange)
     setTimeout(() => {
       // console.log('treewidth: ' + this.$refs.tree.$el.offsetWidth.toString())
-      window.frames['playHK'].initPlugin('back')
+      window.frames['playHK'].initPlugin('back',document.getElementById("tabDiv").getBoundingClientRect().left)
     }, 1500)
   },
   methods: {
@@ -94,7 +101,7 @@
       if (tab.name === 'hk') {
         this.activeName = 'hk'
         console.log('hk')
-        window.frames['playHK'].initPlugin('back')
+        window.frames['playHK'].initPlugin('back',document.getElementById("tabDiv").getBoundingClientRect().left)
       } else if (tab.name === 'nvr') {
         this.activeName = 'nvr'
         // window.frames['playNVR'].stopPlayReal(null)
@@ -112,6 +119,7 @@
           if (this.activeName === 'nvr') {
             window.frames['playNVR'].search(0, this.listQuery.startTime, this.listQuery.endTime)
           } else if (this.activeName === 'hk') {
+            console.log(this.listQuery.monitorPoint, this.listQuery.startTime, this.listQuery.endTime)
             window.frames['playHK'].search(this.listQuery.monitorPoint, this.listQuery.startTime, this.listQuery.endTime)
           }
         }
@@ -120,7 +128,6 @@
     handleCameraClicked(camera) {
       console.log(camera)
       if (typeof camera.monitorPoint === 'undefined' || camera.monitorPoint === '') {
-        console.log('ip is null')
         return false
       } else {
         this.listQuery.monitorPoint = camera.monitorPoint
diff --git a/src/views/video/monitor.vue b/src/views/video/monitor.vue
index fa42257..dd66087 100644
--- a/src/views/video/monitor.vue
+++ b/src/views/video/monitor.vue
@@ -5,7 +5,7 @@
         <video-tree @click="handleCameraClicked"/>
       </el-col>
       <el-col :span="18">
-        <div ref="tabDiv" style="margin-top: 14px">
+        <div id="tabDiv">
           <!--<el-tabs v-model="activeName" type="border-card" @tab-click.once ="handleClick">-->
             <!--<el-tab-pane label="海康" name="hk">-->
               <!--<iframe v-if="activeName === 'hk'" name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html"/>-->
@@ -37,15 +37,16 @@
     }
   },
   mounted() {
+    // console.log(document.getElementById("tabDiv").getBoundingClientRect().left)
     setTimeout(() => {
-      window.frames['playHK'].initPlugin('real')
+      window.frames['playHK'].initPlugin('real',document.getElementById("tabDiv").getBoundingClientRect().left)
     }, 1000)
   },
   methods: {
     handleClick(tab, event) {
       if (tab.name === 'hk') {
         this.activeName = 'hk'
-        window.frames['playHK'].initPlugin('real')
+        window.frames['playHK'].initPlugin('real',document.getElementById("tabDiv").getBoundingClientRect().left)
       } else if (tab.name === 'nvr') {
         this.activeName = 'nvr'
         window.frames['playNVR'].stopPlayReal(null)

diff --git a/config/dev.env.js b/config/dev.env.js
index 6b4622a..095ba33 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -8,4 +8,5 @@
   NODE_ENV: '"development"',
   // BASE_API: '"http://192.168.5.220:20311"'
   BASE_API: '"http://111.198.10.15:11631"'
+  // BASE_API: '"http://192.168.5.220:20311"'
 })
diff --git a/config/prod.env.js b/config/prod.env.js
index f2501d0..ccbc615 100644
--- a/config/prod.env.js
+++ b/config/prod.env.js
@@ -1,5 +1,6 @@
 'use strict'
 module.exports = {
   NODE_ENV: '"production"',
-  BASE_API: '"http://192.168.5.220:20311"'
+  // BASE_API: '"http://192.168.5.220:20311"'
+  BASE_API: '"http://111.198.10.15:11631"'
 }
diff --git a/favicon.ico b/favicon.ico
index 34b63ac..bc1bfc5 100644
--- a/favicon.ico
+++ b/favicon.ico
Binary files differ
diff --git a/src/api/visitor.js b/src/api/visitor.js
index 05ed6ea..01a6c26 100644
--- a/src/api/visitor.js
+++ b/src/api/visitor.js
@@ -74,3 +74,14 @@
   })
 }
 
+// 查询人员轨迹
+export function getDetail(devcode) {
+  return request({
+    url: '/device/capturePhoto',
+    method: 'post',
+    params:{
+      devcode: devcode
+    }
+  })
+}
+
diff --git a/src/assets/dashboard_images/icon-defence.png b/src/assets/dashboard_images/icon-defence.png
index 8069376..11b41cb 100644
--- a/src/assets/dashboard_images/icon-defence.png
+++ b/src/assets/dashboard_images/icon-defence.png
Binary files differ
diff --git a/src/utils/calendarUtil.js b/src/utils/calendarUtil.js
index da840c3..e599bdd 100644
--- a/src/utils/calendarUtil.js
+++ b/src/utils/calendarUtil.js
@@ -61,7 +61,32 @@
 
   return yearMonth + '-' + format(day)
 }
+export function formatDateTime(cellval) {
+  var dateVal = cellval + "";//把时间戳转成字符串格式
+  if (cellval != null) {
+    //取得时间戳部分 如：获取 /Date(1545299299910)/ 中的 1545299299910 部分
+    var date = new Date(parseInt(dateVal.replace("/Date(", "")
+      .replace(")/", ""), 10));
+    //获取年，不需要其他操作所以可以直接返回	date.getFullYear()
+    //月份为0-11，所以+1，月份小于10时补个0
+    var month = date.getMonth() + 1 < 10 ? "0"
+      + (date.getMonth() + 1) : date.getMonth() + 1;
+    //获取日
+    var currentDate = date.getDate() < 10 ? "0" + date.getDate()
+      : date.getDate();
+    //获取时间
+    var hours = date.getHours() < 10 ? "0" + date.getHours() : date
+      .getHours();
+    var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes()
+      : date.getMinutes();
+    var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds()
+      : date.getSeconds();
 
+    //返回日期结果，需要时间的话在加上时间
+    return date.getFullYear() + "-" + month + "-" + currentDate+" "+hours+":"+
+      minutes+":"+seconds;
+  }
+}
 // 格式化日期为字符串
 export function formatToString(value, level) {
   const date = new Date(value)
diff --git a/src/views/alarm/alarmDetail.vue b/src/views/alarm/alarmDetail.vue
index 2c94629..8c32ee5 100644
--- a/src/views/alarm/alarmDetail.vue
+++ b/src/views/alarm/alarmDetail.vue
@@ -1,7 +1,7 @@
 <!-- 报警详情 -->
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :model="dataForm" label-well-code="right" label-width="110px">
+    <el-form v-loading="loading" ref="dataForm" :model="dataForm" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="报警编号">
@@ -86,6 +86,7 @@
   name: 'AlarmDetail',
   data() {
     return {
+      loading: true,
       dialogFormVisible: false, // 对话框是否显示
       dialogStatus: '', // 对话框类型：create,update,detail
       dataForm: {
@@ -123,7 +124,7 @@
         this.dataForm = {
           id: row.id
         }
-
+        this.loading = true
         alarmDetail(this.dataForm.id).then(response => {
           if (response.code === 200) {
             this.dataForm = {
@@ -140,7 +141,7 @@
               reason: response.data.reason,
               remark: response.data.remark
             }
-
+            this.loading = false
             // 格式化报警状态
             if (response.data.valid === 1) {
               this.dataForm.validStr = '正在报警'
diff --git a/src/views/car/carAdd.vue b/src/views/car/carAdd.vue
index ddb215f..5f54c93 100644
--- a/src/views/car/carAdd.vue
+++ b/src/views/car/carAdd.vue
@@ -10,7 +10,7 @@
         </el-col>
         <el-col :span="12">
           <el-form-item label="车辆性质" prop="property">
-            <el-radio-group v-model="dataForm.property" :disabled="isDetailMode">
+            <el-radio-group v-model="dataForm.property" :disabled="isDetailMode" @change="resetOwner">
               <el-radio v-for="item in carProperties" :key="item.value" :label="item.value">{{ item.name }}</el-radio>
             </el-radio-group>
           </el-form-item>
@@ -106,6 +106,12 @@
     this.fetchStaffList()
   },
   methods: {
+    resetOwner(){
+      if(this.dataForm.property!=='2'){
+        this.dataForm.ownerId = ''
+        // this.dataForm.phone = ''
+      }
+    },
     // 初始化对话框
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.btnLoading = false
@@ -208,6 +214,7 @@
           }
         })
         this.dataForm.phone = selectedStaff[0].phone
+        this.dataForm.deptid = selectedStaff[0].deptid
       } else {
         this.dataForm.phone = ''
       }
diff --git a/src/views/car/carList.vue b/src/views/car/carList.vue
index 8d924ff..4ff07ab 100644
--- a/src/views/car/carList.vue
+++ b/src/views/car/carList.vue
@@ -105,11 +105,11 @@
           value: 'propertyStr',
           align: 'center'
         },
-        // {
-        //   text: '车主姓名',
-        //   value: 'ownerName',
-        //   align: 'center'
-        // },
+        {
+          text: '车主姓名',
+          value: 'ownerName',
+          align: 'center'
+        },
         {
           text: '车主联系电话',
           value: 'phone',
diff --git a/src/views/ctrl/index.vue b/src/views/ctrl/index.vue
index fd36f2b..29923af 100644
--- a/src/views/ctrl/index.vue
+++ b/src/views/ctrl/index.vue
@@ -50,12 +50,13 @@
         <in-out-today />
       </el-col>
 
-      <el-col :span="7" class="chart-block">
+      <el-col id="dev-count"  :span="10" class="chart-block">
         <div class="chart-title">各类型设备安装数量</div>
         <dev-count />
       </el-col>
 
-      <el-col id="pass-count" :span="10" class="chart-block">
+      <!--<el-col id="pass-count" class="chart-block">-->
+      <el-col :span="7" class="chart-block">
         <div class="chart-title">进出营数量统计</div>
         <in-out-count />
       </el-col>
@@ -121,7 +122,7 @@
 <style scoped>
   .app-wrapper {
     background-color: #e9e9e9;
-    padding-bottom: 20px;
+    padding-bottom: 10px;
   }
 
   .sub-data-block {
@@ -129,6 +130,7 @@
     border-radius: 16px;
     float: left;
     margin: 10px;
+    margin-bottom: 0px;
     box-shadow: 1px 1px 5px #999;
   }
   .sub-title {
@@ -136,36 +138,38 @@
     text-align: center;
     font-family: 'Microsoft YaHei';
     color: #fff;
-    font-size: 24px;
-    padding: 10px;
+    font-size: 20px;
+    padding-top: 10px;
+    padding-bottom: 0px;
   }
   .statis-block {
     text-align: center;
     margin: 0px 10px 0px 10px;
-    padding: 0px 10px 10px 10px;
+    padding: 0px 10px 5px 10px;
     color: #fff;
     font-weight: bold;
     letter-spacing: 1px;
-    font-size: 24px;
+    font-size: 20px;
   }
   .big-size {
-    font-size: 64px;
+    font-size: 35px;
   }
 
   .chart-title {
     font-family: 'Microsoft YaHei';
     color: #000000;
     font-weight: bold;
-    font-size: 20px;
+    font-size: 18px;
     text-align: center;
     padding: 10px;
   }
   .chart-block {
     margin-left: 20px;
-    margin-top: 20px;
+    margin-top: 10px;
     border-radius: 16px;
     background-color: #FFFFFF;
     box-shadow: 1px 1px 5px #999;
+    height: 37vh;
   }
 
   #today-visitor {
@@ -187,7 +191,7 @@
     background-image: linear-gradient(to right, #ffa800, #ce7e00);
   }
 
-  #pass-count, #dev-alarm-count {
+  #dev-count, #dev-alarm-count {
     width: calc(250vw / 6 - 70px);
   }
 </style>
diff --git a/src/views/ctrl/overview.vue b/src/views/ctrl/overview.vue
index 62e1105..49ed928 100644
--- a/src/views/ctrl/overview.vue
+++ b/src/views/ctrl/overview.vue
@@ -59,26 +59,52 @@
           <i v-else class="el-icon-arrow-down"/>
         </span>
       </div>
-      <transition name="el-collapse-transition">
-        <el-scrollbar
-          v-show="tableShow"
-          :style="{ visibility: tableShow ? 'visible' : 'hidden'}"
-          :class="{ moredatascollor: alarmList.length > 6 }"
-          :native="false">
-          <el-table
-            :data="alarmList"
-            class="alarm-list-table"
-            border
-            stripe
-            @row-click="alarmRowClick">
-            <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{ scope.row[column.value] }}
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-scrollbar>
-      </transition>
+      <div v-show="alarmList.length > 4 && tableShow">
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 32px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 231px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          height="200"
+          style="border-left: 1px solid #2470AC;"
+          v-if="tableShow"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-show="alarmList.length < 5 && tableShow">
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          v-if="tableShow"
+          style="border: 1px solid #2470AC"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
     </div>
 
     <!-- 中间平面图区域 -->
@@ -145,9 +171,13 @@
         class="point-camera"
         @click="detailDev(item, $event)" />
     </div>
-
     <!-- 平面图区域设备类型按钮 -->
-    <div v-show="showType" class="bottom-center" :style="{ width: cameraTypeNum*btnwidth + 'px'}">
+    <div class="bottom-center" :style="{ width: btnNum*btnwidth + 'px'}">
+        <el-col v-show="btnNum!==1" ref="all" class="dev-icon dev-type-selected" @click.native="selectDevByType('all', $event)">
+          <img v-if="checkDevType[0]" src="@/assets/overview_images/icons/icon-all-checked.png">
+          <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
+          <span>全部</span>
+        </el-col>
       <el-col class="dev-icon" @click.native="selectDevByType('4', $event)">
         <img id="4-1-img" v-if="checkDevType1[0]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="4-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
@@ -178,20 +208,6 @@
         <img id="11-2-img" v-else src="@/assets/overview_images/icons/half-camera-blue.png">
         <span>标准半球</span>
       </el-col>
-    </div>
-    <!-- 平面图区域设备类型按钮 -->
-    <div v-show="!showType"class="bottom-center" :style="{ width: btnNum*btnwidth + 'px'}">
-        <el-col ref="all" class="dev-icon dev-type-selected" @click.native="selectDevByType('all', $event)">
-          <img v-if="checkDevType[0]" src="@/assets/overview_images/icons/icon-all-checked.png">
-          <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
-          <span>全部</span>
-        </el-col>
-        <el-col ref="camera" :class="cameraClass" @click.native="showType=!showType;selectDevByType('camera', $event)">
-        <!--<el-col ref="camera" class="dev-icon" @click.native="selectDevByType('camera', $event)">-->
-          <img id="cam_img_red" v-if="checkDevType[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-          <img id="cam_img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-          <span>摄像头</span>
-        </el-col>
         <el-col v-show="showFence" class="dev-icon" @click.native="selectDevByType('fence', $event)">
           <img v-if="checkDevType[2]" src="@/assets/overview_images/icons/icon-fence-checked.png">
           <img v-else src="@/assets/overview_images/icons/icon-fence-unchecked.png">
@@ -372,7 +388,7 @@
           height: 789
         }, // 屏幕窗口尺寸
         imgUrl: require('../../assets/overview_images/icons/icon-camera-point.png'),
-        btnNum: 3,
+        btnNum: 8,
         cameraTypeNum: 6,
         btnwidth: 210,
         halfLeft: 0,
@@ -498,25 +514,25 @@
             }
           }
         }
-        //跟换菜单
-        var item = ['人脸识别','车牌轨迹','周界防护','标准数字','智能球形','标准半球']
-        for(var i=0;i<item.length;i++){
-          if(item[i]===val.target.innerText){
-            return
-          }
-        }
-        if(val.target.id.endsWith('-1-img')||val.target.id.endsWith('-2-img')|| val.target.id==='cam_img' || val.target.id==='cam_img_red'){
-          return
-        }
-        if( val.target.innerText!=='摄像头') {
-          this.showType = false
-          const devTypes = document.querySelectorAll('.dev-icon')
-            for(var i=0;i<this.checkDevType.length;i++) {
-              if (this.checkDevType[i]) {
-                devTypes[i+6].className += ' dev-type-selected'
-              }
-            }
-        }
+        // //跟换菜单
+        // var item = ['人脸识别','车牌轨迹','周界防护','标准数字','智能球形','标准半球']
+        // for(var i=0;i<item.length;i++){
+        //   if(item[i]===val.target.innerText){
+        //     return
+        //   }
+        // }
+        // if(val.target.id.endsWith('-1-img')||val.target.id.endsWith('-2-img')|| val.target.id==='cam_img' || val.target.id==='cam_img_red'){
+        //   return
+        // }
+        // if( val.target.innerText!=='摄像头') {
+        //   this.showType = false
+        //   const devTypes = document.querySelectorAll('.dev-icon')
+        //     for(var i=0;i<this.checkDevType.length;i++) {
+        //       if (this.checkDevType[i]) {
+        //         devTypes[i+6].className += ' dev-type-selected'
+        //       }
+        //     }
+        // }
       },
       webSocket() {
         const that = this
@@ -586,7 +602,7 @@
         }else if(pic==='3'){
           this.changeMap('tg_4_1')
         }else if(pic==='4'){
-          this.changeMap('tg_4_1')
+          this.changeMap('tg_4_5')
         }
         setTimeout(() => {
           var obj = document.getElementById(val.toString());
@@ -771,7 +787,11 @@
           this.checkDevType1 = [false, false, false, false, false, false]
           // 添加选中的样式
           if (typeof event === 'undefined') {
-            devTypes[6].className += ' dev-type-selected'
+            if(this.btnNum===1){
+              devTypes[1].className += ' dev-type-selected'
+            }else{
+              devTypes[0].className += ' dev-type-selected'
+            }
           } else {
             event.currentTarget.className += ' dev-type-selected'
           }
@@ -1017,7 +1037,7 @@
           this.isMain = true
           // this.devListParams.picture = '1'
           this.imgSizeOriginal = { width: 2245, height: 1586 }
-          this.btnNum  = 3
+          this.btnNum  = 8
           this.cameraTypeNum  = 6
           this.showFence = true // 显示电子围栏
           this.showTemp = false // 隐藏温湿度设备
@@ -1027,6 +1047,7 @@
           this.showSubTabGuider = false
           this.showFloorThree = false
           this.showFloorFour = false
+          this.selectDevByType('all')
         } else if (index === 'tg_3_1') {
           this.bgImageSrc = tg_3_1
           // this.devListParams.picture = '2'
@@ -1037,6 +1058,7 @@
           this.showTemp = true // 隐藏温湿度
           this.showSmoking = true // 隐藏烟感
           this.showSound = true // 隐藏声光报警器
+          this.selectDevByType('all')
         } else if (index === 'tg_4_1') {
           this.bgImageSrc = tg_4_1
           // this.devListParams.picture = '3'
@@ -1048,18 +1070,19 @@
           this.showTemp = true // 显示温湿度
           this.showSmoking = true // 显示烟感
           this.showSound = true // 显示声光报警器
+          this.selectDevByType('all')
         } else if (index === 'tg_4_5') {
           this.bgImageSrc = tg_4_5
           // this.devListParams.picture = '4'
           this.imgSizeOriginal = { width: 2245, height: 1586 }
-          this.btnNum  = 2
+          this.btnNum  = 1
           this.cameraTypeNum  = 1
           this.showFence = false // 隐藏电子围栏
           this.showTemp = false // 隐藏温湿度
           this.showSmoking = false // 隐藏烟感
           this.showSound = false // 隐藏声光报警器
+          this.selectDevByType('4')
         }
-        this.selectDevByType('all')
       },
       // 查询并显示设备详情
       detailDev(dev, event) {
@@ -1201,10 +1224,14 @@
     left: 50%; transform: translateX(-50%);
     bottom: 25px;
   }
+  .tableLine {
+    margin-top: 9px;
+    width: 463px;
+  }
   .main-page {
     background-size: cover;
     background-color: #023d83;
-    height: 100vh;
+    height: 98vh;
   }
 
   .main-header {
@@ -1362,16 +1389,24 @@
         margin-left: 20px;
       }
     }
-    .el-scrollbar {
-      /*height: 200px;*/
-      width: 100%;
+    // 滚动条的滑块
+    /deep/ .el-table__body-wrapper  {
+      background-color: #023D83;
+      border: 0px solid white;
     }
-    .moredatascollor {
-      height: 200px;
+    /deep/ .el-table--border th.gutter:last-of-type {
+      border: 1px solid #023D83;
+      border-bottom-width: 1px;
+      background-color: #023D83;
     }
-    .el-scrollbar__wrap {
-      overflow-y: auto;
-      overflow-x: hidden;
+    /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
+      background-color: #023D83;
+    }
+    /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+      display: none;
+    }
+    /deep/ .el-scrollbar__wrap {
+      overflow-x: hidden !important;
       margin-bottom: 0px !important;
     }
     .el-table {
@@ -1405,16 +1440,25 @@
     font-size: 15px;
     color: #FFFFFF;
     font-weight: normal;
+    border-color: #2470AC;
   }
-
+  .el-table--border::after, .el-table--group::after, .el-table::before{
+    background-color: #023d83;
+  }
+  .alarm-now-block /deep/ .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
+    border-color: #023d83;
+  }
   .alarm-now-block /deep/ .el-table__row td {
     background-color: #023D83;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ .el-table__body tr:hover > td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ tr.el-table__row--striped td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
 
   .map-tab {
@@ -1601,6 +1645,10 @@
   /*}*/
 
   @media(max-width: 1440px) {
+    .tableLine {
+      margin-top: 0px;
+      width: 343px;
+    }
     .main-title {
       height: 65px;
       padding-top: 16px;
diff --git a/src/views/ctrl/statCharts/devAlarmCount.vue b/src/views/ctrl/statCharts/devAlarmCount.vue
index 7bea059..6b6939e 100644
--- a/src/views/ctrl/statCharts/devAlarmCount.vue
+++ b/src/views/ctrl/statCharts/devAlarmCount.vue
@@ -1,5 +1,6 @@
+<!--suppress ALL -->
 <template>
-  <div>
+  <div style="height: 90%">
     <el-date-picker
       v-model="timeRange"
       :picker-options="pickerOptions"
@@ -7,15 +8,16 @@
       range-separator="至"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
-      style="margin-bottom: 10px;" />
-    <ve-histogram :data="chartData" :settings="settings" height="350px" />
+      style="margin-bottom: 10px;z-index: 10000"
+      size="small"/>
+    <ve-histogram :data="chartData" :settings="settings" :extend="chartExtend" style="margin-top: -50px" height="100%"/>
   </div>
 </template>
 
 <script>
-import { formatToString, getDate, oneDayTime } from '@/utils/calendarUtil'
-import { devAlarmCount } from '@/api/statistics'
 
+import { devAlarmCount } from '@/api/statistics'
+import { formatToString, parseToDate, getDate, oneDayTime } from '@/utils/calendarUtil'
 const now = new Date()
 
 export default {
@@ -30,12 +32,22 @@
         columns: ['name', 'count'],
         rows: []
       },
+      chartExtend: {
+        series: {
+          barMaxWidth: 50
+        },
+        grid: {
+          containLabel: true,
+          bottom: '10%'
+        }
+      },
       settings: {
         labelMap: {
           'name': '设备类型',
-          'count': '报警数量'
+          'count': ''
         },
-        max: [4]
+        max: [4],
+        area: false
       },
       timeRange: [],
       pickerOptions: {
@@ -99,6 +111,13 @@
       devAlarmCount(this.params).then(response => {
         if (response.code === 200) {
           this.chartData.rows = response.data
+          var max = 4
+          for(var i=0;i<response.data.length;i++){
+            if(Number(response.data[i].count)>max){
+              max = Number(response.data[i].count)
+            }
+          }
+          this.settings.max = [max]
         }
       })
     }
diff --git a/src/views/ctrl/statCharts/devCount.vue b/src/views/ctrl/statCharts/devCount.vue
index d3e2902..db55fbe 100644
--- a/src/views/ctrl/statCharts/devCount.vue
+++ b/src/views/ctrl/statCharts/devCount.vue
@@ -1,5 +1,6 @@
 <template>
-  <ve-ring :data="chartData" :settings="settings" />
+  <ve-histogram :data="chartData" :settings="settings" :extend="chartExtend" style="margin-top: -20px" height="100%"/>
+  <!--<ve-ring :data="chartData" :settings="settings" />-->
 </template>
 
 <script>
@@ -9,14 +10,55 @@
   name: 'DevCount',
   data() {
     return {
+      chartExtend: {
+        series: {
+          barMaxWidth: 50
+        },
+        xAxis: {
+          axisLabel: {
+            interval: 0,
+            //换行显示
+            formatter: function(value) {
+              let result = ""; //拼接加\n返回的类目项
+              let maxLength = 2; //每项显示文字个数
+              let valLength = value.length; //X轴类目项的文字个数
+              let rowNumber = Math.ceil(valLength / maxLength); //类目项需要换行的行数
+              if (rowNumber > 1) {
+                //如果文字大于3,
+                for (let i = 0; i < rowNumber; i++) {
+                  let temp = ""; //每次截取的字符串
+                  let start = i * maxLength; //开始截取的位置
+                  let end = start + maxLength; //结束截取的位置
+                  temp = value.substring(start, end) + "\n";
+                  result += temp; //拼接生成最终的字符串
+                }
+                return "{labelText|" + result + "}";
+              } else {
+                return "{labelText|" + value + "}";
+              }
+            },
+            rich: {
+              labelText: {
+                lineHeight: 18
+              }
+            }
+          }
+        }
+      },
       chartData: {
         columns: ['name', 'count'],
         rows: []
       },
       settings: {
-        // legendLimit: 4
-        radius: [60, 100]
-      }
+        labelMap: {
+          'name': '设备类型',
+          'count': ''
+        }
+      },
+      // settings: {
+      //   // legendLimit: 4
+      //   radius: [60, 100]
+      // }
     }
   },
   activated() {
@@ -26,6 +68,9 @@
     fetchData() {
       devCount().then(response => {
         if (response.code === 200) {
+          for(var i=0;i<response.data.length;i++){
+            response.data[i].name = response.data[i].name.replace('防护','')
+          }
           this.chartData.rows = response.data
         }
       })
diff --git a/src/views/ctrl/statCharts/inOutCount.vue b/src/views/ctrl/statCharts/inOutCount.vue
index 502157e..d65ec69 100644
--- a/src/views/ctrl/statCharts/inOutCount.vue
+++ b/src/views/ctrl/statCharts/inOutCount.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="height: 100%">
     <el-date-picker
       v-model="timeRange"
       :picker-options="pickerOptions"
@@ -7,8 +7,9 @@
       range-separator="至"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
-      style="margin-bottom: 10px"/>
-    <ve-line :data="chartData" :settings="settings" height="350px" />
+      size="small"
+      style="margin-bottom: 10px;z-index: 10000"/>
+    <ve-line :data="chartData" :settings="settings" :extend="barExtend" style="margin-top: -50px;" height="93%"/>
   </div>
 </template>
 
@@ -30,6 +31,17 @@
         columns: ['date', 'staff', 'visitor', 'car', 'visitorCar'],
         rows: []
       },
+
+      barExtend:{
+        legend:{  // 隐藏图例
+          x: 'center',
+          y: 'bottom'
+        },
+        grid: {
+          containLabel: true,
+          bottom: '10%'
+        },
+      },
       settings: {
         labelMap: {
           'staff': '内部人员',
@@ -37,11 +49,11 @@
           'car': '内部车辆',
           'visitorCar': '来访车辆'
         },
-        xAxisType: 'time',
+        // xAxisType: 'time',
         max: [4],
         area: false,
         metrics: ['staff', 'visitor', 'car', 'visitorCar'],
-        dimension: ['date']
+        dimension: ['date'],
       },
       timeRange: [],
       pickerOptions: {
@@ -106,7 +118,7 @@
         if (response.code === 200) {
           const data = this.parseStatisticsData(response.data)
           this.chartData.rows = data.rowDatas
-          this.chartData.max = [data.maxCount]
+          this.settings.max = [data.maxCount]
         }
       })
     },
@@ -164,7 +176,7 @@
 
         if (typeof visitorCar !== 'undefined') {
           if (visitorCar.date === date) {
-            visitorCarCount = car.count
+            visitorCarCount = visitorCar.count
             indexVc++
           }
         }
@@ -172,6 +184,18 @@
         if (staffCount + visitorCount + carCount + visitorCarCount > 0) {
           rowDatas.push({ date: date, staff: staffCount, visitor: visitorCount, car: carCount, visitorCar: visitorCarCount })
         }
+        if(maxCount<staffCount){
+          maxCount = staffCount
+        }
+        if(maxCount<visitorCount){
+          maxCount = visitorCount
+        }
+        if(maxCount<carCount){
+          maxCount = carCount
+        }
+        if(maxCount<visitorCarCount){
+          maxCount = visitorCarCount
+        }
         start += oneDayTime
       }
 
diff --git a/src/views/ctrl/statCharts/inOutDoorCount.vue b/src/views/ctrl/statCharts/inOutDoorCount.vue
index ab28cdd..93f3458 100644
--- a/src/views/ctrl/statCharts/inOutDoorCount.vue
+++ b/src/views/ctrl/statCharts/inOutDoorCount.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="height: 100%">
     <el-date-picker
       v-model="timeRange"
       :picker-options="pickerOptions"
@@ -7,8 +7,9 @@
       range-separator="至"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
-      style="margin-bottom: 10px;" />
-    <ve-histogram :data="chartData" :settings="settings" height="350px" />
+      style="margin-bottom: 10px;z-index: 10000"
+      size="small"/>
+    <ve-histogram :data="chartData" :settings="settings" :extend="chartExtend" style="margin-top: -50px"height="93%"/>
   </div>
 </template>
 
@@ -26,11 +27,26 @@
         beginDate: '',
         endDate: ''
       },
+      chartExtend: {
+        legend:{  // 隐藏图例
+          x: 'center',
+          y: 'bottom'
+        },
+        grid: {
+          containLabel: true,
+          bottom: '10%'
+        },
+        series: {
+          barMaxWidth: 50,
+          center: ['50%', '50%']
+        }
+      },
       chartData: {
         columns: ['name', 'person', 'car'],
         rows: []
       },
       settings: {
+        radius: [60, 100],
         labelMap: {
           'person': '人员',
           'car': '车辆'
@@ -102,7 +118,7 @@
         if (response.code === 200) {
           const data = this.parseStatisticsData(response.data)
           this.chartData.rows = data.rowDatas
-          this.chartData.max = [data.maxCount]
+          this.settings.max = [data.maxCount]
         }
       })
     },
diff --git a/src/views/ctrl/statCharts/inOutKeyCount.vue b/src/views/ctrl/statCharts/inOutKeyCount.vue
index fa9a0b7..10108d6 100644
--- a/src/views/ctrl/statCharts/inOutKeyCount.vue
+++ b/src/views/ctrl/statCharts/inOutKeyCount.vue
@@ -1,5 +1,7 @@
 <template>
-  <ve-ring :data="chartData" :settings="settings" />
+  <div style="height: 100%">
+    <ve-ring :data="chartData" :settings="settings" :extend="chartExtend"  height="90%"/>
+  </div>
 </template>
 
 <script>
@@ -9,6 +11,19 @@
   name: 'InOutKeyCount',
   data() {
     return {
+      chartExtend: {
+        legend:{  // 隐藏图例
+          x: 'center',
+          y: 'top'
+        },
+        grid: {
+          containLabel: true,
+          top: '10%'
+        },
+        series: {
+          center: ['50%', '50%']
+        }
+      },
       chartData: {
         columns: ['name', 'count'],
         rows: []
diff --git a/src/views/ctrl/statCharts/inOutToday.vue b/src/views/ctrl/statCharts/inOutToday.vue
index c37fa7b..ae67856 100644
--- a/src/views/ctrl/statCharts/inOutToday.vue
+++ b/src/views/ctrl/statCharts/inOutToday.vue
@@ -1,5 +1,7 @@
 <template>
-  <ve-ring :data="chartData" :settings="settings" />
+  <div style="height: 100%">
+    <ve-ring :data="chartData" :settings="settings" :extend="chartExtend"  height="90%"/>
+  </div>
 </template>
 
 <script>
@@ -18,6 +20,15 @@
           { count: 1, name: '来访车辆' }
         ]
       },
+      chartExtend: {
+        legend:{  // 隐藏图例
+          x: 'center',
+          y: 'top'
+        },
+        series: {
+          center: ['50%', '50%']
+        }
+      },
       settings: {
         radius: [60, 100]
       }
diff --git a/src/views/deviceManage/deviceDetail.vue b/src/views/deviceManage/deviceDetail.vue
index 701052d..8245327 100644
--- a/src/views/deviceManage/deviceDetail.vue
+++ b/src/views/deviceManage/deviceDetail.vue
@@ -9,7 +9,7 @@
         <!--</el-col>-->
         <el-col :span="12">
           <el-form-item label="设备编号">
-            <el-input v-model.trim="dataForm.name" disabled type="text"/>
+            <el-input v-model.trim="dataForm.devcode" disabled type="text"/>
             <!--<span>{{ dataForm.devcode }}</span>-->
           </el-form-item>
         </el-col>
diff --git a/src/views/layout/components/AppHeader.vue b/src/views/layout/components/AppHeader.vue
index c3235b4..2e45954 100644
--- a/src/views/layout/components/AppHeader.vue
+++ b/src/views/layout/components/AppHeader.vue
@@ -1,12 +1,12 @@
 <template>
   <!--<div :style="{backgroundImage:'url('+headerUrl+')'}" class="app-header">-->
   <div style="background-color: #0078ff;" class="app-header">
-    <h3>{{ title }}</h3>
+    <h3 @click="backToIndex">{{ title }}</h3>
     <!--子系统选项-->
     <el-dropdown class="systemSelect" @command="handleCommand">
       <span class="el-dropdown-link" style="color: white">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
       </span>
-      <el-dropdown-menu slot="dropdown" >
+      <el-dropdown-menu slot="dropdown" style="z-index: 10000" >
         <el-dropdown-item>
           <span style="display:block;" @click="backToIndex">回首页</span>
         </el-dropdown-item>
@@ -15,7 +15,7 @@
     </el-dropdown>
 
     <div v-show="currentSystem.code === 'ctrl'" class="back-to-overview">
-      <el-button type="info" round @click="backToOverview">运行总览</el-button>
+      <el-button type="info" round @click="backToOverview" style="background-color: rgba(255,255,255,0.31);border: 0px">运行总览</el-button>
     </div>
 
     <el-dropdown class="avatar-container">
diff --git a/src/views/overview/doorIndex.vue b/src/views/overview/doorIndex.vue
index 5d2dce2..7cd40ff 100644
--- a/src/views/overview/doorIndex.vue
+++ b/src/views/overview/doorIndex.vue
@@ -58,26 +58,51 @@
           <i v-else class="el-icon-arrow-down"/>
         </span>
       </div>
-      <transition name="el-collapse-transition">
-        <el-scrollbar
-          v-show="tableShow"
-          :style="{ visibility: tableShow ? 'visible' : 'hidden'}"
-          :class="{ moredatascollor: alarmList.length > 6 }"
-          :native="false">
-          <el-table
-            :data="alarmList"
-            class="alarm-list-table"
-            border
-            stripe
-            @row-click="alarmRowClick">
-            <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{ scope.row[column.value] }}
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-scrollbar>
-      </transition>
+      <div v-show="alarmList.length > 4 && tableShow">
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 32px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 231px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          height="200"
+          style="border-left: 1px solid #2470AC;"
+          v-if="tableShow"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-show="alarmList.length < 5 && tableShow">
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          v-if="tableShow"
+          style="border: 1px solid #2470AC"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
     </div>
 
     <!-- 中间平面图区域 -->
@@ -730,9 +755,12 @@
   .main-page {
     background-size: cover;
     background-color: #023d83;
-    height: 100vh;
+    height: 98vh;
   }
-
+  .tableLine {
+    margin-top: 9px;
+    width: 463px;
+  }
   .main-header {
     width: 100vw;
   }
@@ -863,16 +891,24 @@
         margin-left: 20px;
       }
     }
-    .el-scrollbar {
-      /*height: 200px;*/
-      width: 100%;
+    // 滚动条的滑块
+    /deep/ .el-table__body-wrapper  {
+      background-color: #023D83;
+      border: 0px solid white;
     }
-    .moredatascollor {
-      height: 200px;
+    /deep/ .el-table--border th.gutter:last-of-type {
+      border: 1px solid #023D83;
+      border-bottom-width: 1px;
+      background-color: #023D83;
     }
-    .el-scrollbar__wrap {
-      overflow-y: auto;
-      overflow-x: hidden;
+    /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
+      background-color: #023D83;
+    }
+    /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+      display: none;
+    }
+    /deep/ .el-scrollbar__wrap {
+      overflow-x: hidden !important;
       margin-bottom: 0px !important;
     }
     .el-table {
@@ -906,16 +942,25 @@
     font-size: 15px;
     color: #FFFFFF;
     font-weight: normal;
+    border-color: #2470AC;
   }
-
+  .el-table--border::after, .el-table--group::after, .el-table::before{
+    background-color: #023d83;
+  }
+  .alarm-now-block /deep/ .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
+    border-color: #023d83;
+  }
   .alarm-now-block /deep/ .el-table__row td {
     background-color: #023D83;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ .el-table__body tr:hover > td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ tr.el-table__row--striped td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
 
   .map-tab {
@@ -1091,6 +1136,10 @@
   /*}*/
 
   @media(max-width: 1440px) {
+    .tableLine {
+      margin-top: 0px;
+      width: 343px;
+    }
     .main-title {
       height: 65px;
       padding-top: 16px;
diff --git a/src/views/overview/fenceIndex.vue b/src/views/overview/fenceIndex.vue
index 9466288..62a35e8 100644
--- a/src/views/overview/fenceIndex.vue
+++ b/src/views/overview/fenceIndex.vue
@@ -58,26 +58,52 @@
           <i v-else class="el-icon-arrow-down"/>
         </span>
       </div>
-      <transition name="el-collapse-transition">
-        <el-scrollbar
-          v-show="tableShow"
-          :style="{ visibility: tableShow ? 'visible' : 'hidden'}"
-          :class="{ moredatascollor: alarmList.length > 6 }"
-          :native="false">
-          <el-table
-            :data="alarmList"
-            class="alarm-list-table"
-            border
-            stripe
-            @row-click="alarmRowClick">
-            <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{ scope.row[column.value] }}
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-scrollbar>
-      </transition>
+      <div v-show="alarmList.length > 4 && tableShow">
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 32px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 231px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          height="200"
+          style="border-left: 1px solid #2470AC;"
+          v-if="tableShow"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-show="alarmList.length < 5 && tableShow">
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          v-if="tableShow"
+          style="border: 1px solid #2470AC"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
     </div>
 
     <!-- 中间平面图区域 -->
@@ -725,10 +751,14 @@
       font-weight: normal;
     }
   }
+  .tableLine {
+    margin-top: 9px;
+    width: 463px;
+  }
   .main-page {
     background-size: cover;
     background-color: #023d83;
-    height: 100vh;
+    height: 98vh;
   }
 
   .main-header {
@@ -859,16 +889,24 @@
         margin-left: 20px;
       }
     }
-    .el-scrollbar {
-      /*height: 200px;*/
-      width: 100%;
+    // 滚动条的滑块
+    /deep/ .el-table__body-wrapper  {
+      background-color: #023D83;
+      border: 0px solid white;
     }
-    .moredatascollor {
-      height: 200px;
+    /deep/ .el-table--border th.gutter:last-of-type {
+      border: 1px solid #023D83;
+      border-bottom-width: 1px;
+      background-color: #023D83;
     }
-    .el-scrollbar__wrap {
-      overflow-y: auto;
-      overflow-x: hidden;
+    /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
+      background-color: #023D83;
+    }
+    /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+      display: none;
+    }
+    /deep/ .el-scrollbar__wrap {
+      overflow-x: hidden !important;
       margin-bottom: 0px !important;
     }
     .el-table {
@@ -902,16 +940,25 @@
     font-size: 15px;
     color: #FFFFFF;
     font-weight: normal;
+    border-color: #2470AC;
   }
-
+  .el-table--border::after, .el-table--group::after, .el-table::before{
+    background-color: #023d83;
+  }
+  .alarm-now-block /deep/ .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
+    border-color: #023d83;
+  }
   .alarm-now-block /deep/ .el-table__row td {
     background-color: #023D83;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ .el-table__body tr:hover > td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ tr.el-table__row--striped td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
 
   .map-tab {
@@ -1087,6 +1134,10 @@
   /*}*/
 
   @media(max-width: 1440px) {
+    .tableLine {
+      margin-top: 0px;
+      width: 343px;
+    }
     .main-title {
       height: 65px;
       padding-top: 16px;
diff --git a/src/views/overview/keyIndex.vue b/src/views/overview/keyIndex.vue
index 37405a8..a461c94 100644
--- a/src/views/overview/keyIndex.vue
+++ b/src/views/overview/keyIndex.vue
@@ -33,20 +33,6 @@
             <span v-text="dev.alarm"/>
           </div>
         </el-col>
-
-        <!--<el-col :span="6" class="sub-data-block dev-offline">-->
-          <!--<div class="statis-block">-->
-            <!--<span v-text="dev.offLine"/>-->
-          <!--</div>-->
-          <!--<div class="sub-title">离线</div>-->
-        <!--</el-col>-->
-
-        <!--<el-col :span="6" class="sub-data-block dev-closed">-->
-          <!--<div class="statis-block">-->
-            <!--<span v-text="dev.closed"/>-->
-          <!--</div>-->
-          <!--<div class="sub-title">关闭</div>-->
-        <!--</el-col>-->
       </el-row>
     </div>
 
@@ -58,26 +44,52 @@
           <i v-else class="el-icon-arrow-down"/>
         </span>
       </div>
-      <transition name="el-collapse-transition">
-        <el-scrollbar
-          v-show="tableShow"
-          :style="{ visibility: tableShow ? 'visible' : 'hidden'}"
-          :class="{ moredatascollor: alarmList.length > 6 }"
-          :native="false">
-          <el-table
-            :data="alarmList"
-            class="alarm-list-table"
-            border
-            stripe
-            @row-click="alarmRowClick">
-            <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{ scope.row[column.value] }}
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-scrollbar>
-      </transition>
+      <div v-show="alarmList.length > 4 && tableShow">
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 32px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 231px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          height="200"
+          style="border-left: 1px solid #2470AC;"
+          v-if="tableShow"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-show="alarmList.length < 5 && tableShow">
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          v-if="tableShow"
+          style="border: 1px solid #2470AC"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
     </div>
 
     <!-- 中间平面图区域 -->
@@ -95,49 +107,16 @@
     </div>
 
     <!-- 平面图区域设备类型按钮 -->
-    <div v-show="showType" class="bottom-center" :style="{ width: btnwidth + 'px'}">
-      <el-col class="dev-icon" @click.native="selectDevByType('4', $event)">
-        <img id="4-1-img" v-if="checkDevType1[0]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-        <img id="4-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-        <span>人脸识别</span>
-      </el-col>
-      <!--<el-col class="dev-icon" @click.native="selectDevByType('5', $event)">-->
-        <!--<img id="5-1-img" v-if="checkDevType1[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
-        <!--<img id="5-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
-        <!--<span>车牌轨迹</span>-->
-      <!--</el-col>-->
-      <!--<el-col class="dev-icon" @click.native="selectDevByType('8', $event)">-->
-        <!--<img id="8-1-img" v-if="checkDevType1[2]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
-        <!--<img id="8-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
-        <!--<span>周界防护</span>-->
-      <!--</el-col>-->
-      <!--<el-col class="dev-icon" @click.native="selectDevByType('9', $event)">-->
-        <!--<img id="9-1-img" v-if="checkDevType1[3]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
-        <!--<img id="9-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
-        <!--<span>标准数字</span>-->
-      <!--</el-col>-->
-      <!--<el-col class="dev-icon" @click.native="selectDevByType('10', $event)">-->
-        <!--<img id="10-1-img" v-if="checkDevType1[4]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
-        <!--<img id="10-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
-        <!--<span>智能球形</span>-->
-      <!--</el-col>-->
-      <!--<el-col class="dev-icon" @click.native="selectDevByType('11', $event)">-->
-        <!--<img id="11-1-img" v-if="checkDevType1[5]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
-        <!--<img id="11-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
-        <!--<span>标准半球</span>-->
-      <!--</el-col>-->
-    </div>
-    <!-- 平面图区域设备类型按钮 -->
     <div v-show="!showType"class="bottom-center" :style="{ width: cameraTypeNum*btnwidth + 'px'}">
       <el-col ref="all" class="dev-icon dev-type-selected" @click.native="selectDevByType('all', $event)">
         <img v-if="checkDevType[0]" src="@/assets/overview_images/icons/icon-all-checked.png">
         <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
         <span>全部</span>
       </el-col>
-      <el-col ref="camera" :class="cameraClass" @click.native="showType=!showType;selectDevByType('camera', $event)">
-        <img id="cam_img_red" v-if="checkDevType[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-        <img id="cam_img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-        <span>摄像头</span>
+      <el-col class="dev-icon" @click.native="selectDevByType('camera4', $event)">
+        <img id="4-1-img" v-if="checkDevType[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
+        <img id="4-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
+        <span>人脸识别</span>
       </el-col>
       <el-col v-show="showTemp" class="dev-icon" @click.native="selectDevByType('temperature', $event)">
         <img v-if="checkDevType[2]" src="@/assets/overview_images/icons/icon-temperature-checked.png">
@@ -364,7 +343,6 @@
       }, // 设备详情表单
       cameraClass:'dev-icon',
       showType : false,
-      checkDevType1: [false, false, false, false, false, false], // 摄像头类型
       checkDevType: [true, false, false, false, false] // 选中设备类型
     }
   },
@@ -462,7 +440,7 @@
       }else if(pic==='3'){
         this.changeMap('tg_4_1')
       }else if(pic==='4'){
-        this.changeMap('tg_4_1')
+        this.changeMap('tg_4_5')
       }
       setTimeout(() => {
         var obj = document.getElementById(val.toString());
@@ -477,24 +455,6 @@
     handleKeyup(val){ //单击收起摄像头分类
       this.showAlarmDetail  = false
       this.showDevDetail  = false
-      var item = ['人脸识别']
-      for(var i=0;i<item.length;i++){
-        if(item[i]===val.target.innerText){
-          return
-        }
-      }
-      if(val.target.id.endsWith('-1-img')||val.target.id.endsWith('-2-img')|| val.target.id==='cam_img' || val.target.id==='cam_img_red'){
-        return
-      }
-      if( val.target.innerText!=='摄像头') {
-        this.showType = false
-        const devTypes = document.querySelectorAll('.dev-icon')
-        for(var i=0;i<this.checkDevType.length;i++) {
-          if (this.checkDevType[i]) {
-            devTypes[i+1].className += ' dev-type-selected'
-          }
-        }
-      }
     },
     handleSelect(key, keyPath) {
       this.selectDevByType(key,undefined)
@@ -643,14 +603,13 @@
       if(type !== 'camera'){
         // 添加选中的样式
         if (typeof event === 'undefined') {
-          devTypes[1].className += ' dev-type-selected'
+          devTypes[0].className += ' dev-type-selected'
         } else {
           event.currentTarget.className += ' dev-type-selected'
         }
       }
       if(type!=='camera'){
         this.checkDevType = [false, false, false, false, false]
-        this.checkDevType1 = [false, false, false, false, false, false]
       }
       if (type === 'all') {
         if(this.bgImageSrc===tg_4_5){
@@ -660,14 +619,7 @@
         }
         // this.devListParams.deviceTypes = []
         this.checkDevType[0] = true
-      } else if(type==='camera'){
-        for(var i=0;i<this.checkDevType1.length;i++){
-          if(this.checkDevType1[i]) {
-            devTypes[i].className += ' dev-type-selected'
-          }
-        }
-        return
-      } else if (type === 'temperature') {
+      }  else if (type === 'temperature') {
         this.devListParams.deviceTypes = temperatureTypes.toString()
         this.checkDevType[2] = true
       } else if (type === 'smoking') {
@@ -676,30 +628,24 @@
       } else if (type === 'sound') {
         this.devListParams.deviceTypes = soundTypes.toString()
         this.checkDevType[4] = true
-      }else if(type === '4'){
+      }else if(type === 'camera4'){
         this.devListParams.deviceTypes = '4'
         this.checkDevType[1] = true
-        this.checkDevType1[0] = true
       }else if(type === '5'){
         this.devListParams.deviceTypes = '5'
         this.checkDevType[1] = true
-        this.checkDevType1[1] = true
       }else if(type === '8'){
         this.devListParams.deviceTypes = '8'
         this.checkDevType[1] = true
-        this.checkDevType1[2] = true
       }else if(type === '9'){
         this.devListParams.deviceTypes = '9'
         this.checkDevType[1] = true
-        this.checkDevType1[3] = true
       }else if(type === '10'){
         this.devListParams.deviceTypes = '10'
         this.checkDevType[1] = true
-        this.checkDevType1[4] = true
       }else if(type === '11'){
         this.devListParams.deviceTypes = '11'
         this.checkDevType[1] = true
-        this.checkDevType1[5] = true
       }
       this.fetchDeviceData()
       // if(this.checkDevType[1]){
@@ -866,18 +812,13 @@
       }else{
         this.devListParams.deviceTypes = '1,2,4,12'
       }
-      // this.devListParams.deviceTypes = []
       if (index === 'tg_main') {
-        // this.imgSizeOriginal = { width: 2245, height: 1586 }
         this.devListParams.picture = '1'
       }else if (index === 'tg_3_1') {
-        // this.imgSizeOriginal = { width: 2245, height: 1586 }
         this.devListParams.picture = '2'
       } else if (index === 'tg_4_1') {
-        // this.imgSizeOriginal = { width: 2218, height: 2169 }
         this.devListParams.picture = '3'
       }else if (index === 'tg_4_5') {
-        // this.imgSizeOriginal = { width: 2245, height: 1586 }
         this.devListParams.picture = '4'
       }
       overviewDeviceList(this.devListParams).then(response => {
@@ -1060,10 +1001,14 @@
   /deep/ .el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
     border-bottom-width: 0px;
   }
+  .tableLine {
+    margin-top: 9px;
+    width: 463px;
+  }
   .main-page {
     background-size: cover;
     background-color: #023d83;
-    height: 100vh;
+    height: 98vh;
   }
 
   .main-header {
@@ -1194,16 +1139,24 @@
         margin-left: 20px;
       }
     }
-    .el-scrollbar {
-      /*height: 200px;*/
-      width: 100%;
+    // 滚动条的滑块
+    /deep/ .el-table__body-wrapper  {
+      background-color: #023D83;
+      border: 0px solid white;
     }
-    .moredatascollor {
-      height: 200px;
+    /deep/ .el-table--border th.gutter:last-of-type {
+      border: 1px solid #023D83;
+      border-bottom-width: 1px;
+      background-color: #023D83;
     }
-    .el-scrollbar__wrap {
-      overflow-y: auto;
-      overflow-x: hidden;
+    /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
+      background-color: #023D83;
+    }
+    /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+      display: none;
+    }
+    /deep/ .el-scrollbar__wrap {
+      overflow-x: hidden !important;
       margin-bottom: 0px !important;
     }
     .el-table {
@@ -1237,16 +1190,25 @@
     font-size: 15px;
     color: #FFFFFF;
     font-weight: normal;
+    border-color: #2470AC;
   }
-
+  .el-table--border::after, .el-table--group::after, .el-table::before{
+    background-color: #023d83;
+  }
+  .alarm-now-block /deep/ .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
+    border-color: #023d83;
+  }
   .alarm-now-block /deep/ .el-table__row td {
     background-color: #023D83;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ .el-table__body tr:hover > td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ tr.el-table__row--striped td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
 
   .map-tab {
@@ -1431,6 +1393,10 @@
   /*}*/
 
   @media(max-width: 1440px) {
+    .tableLine {
+      margin-top: 0px;
+      width: 343px;
+    }
     .main-title {
       height: 65px;
       padding-top: 16px;
diff --git a/src/views/overview/regionIndex.vue b/src/views/overview/regionIndex.vue
index 69e7606..d4ea083 100644
--- a/src/views/overview/regionIndex.vue
+++ b/src/views/overview/regionIndex.vue
@@ -58,26 +58,52 @@
           <i v-else class="el-icon-arrow-down"/>
         </span>
       </div>
-      <transition name="el-collapse-transition">
-        <el-scrollbar
-          v-show="tableShow"
-          :style="{ visibility: tableShow ? 'visible' : 'hidden'}"
-          :class="{ moredatascollor: alarmList.length > 6 }"
-          :native="false">
-          <el-table
-            :data="alarmList"
-            class="alarm-list-table"
-            border
-            stripe
-            @row-click="alarmRowClick">
-            <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{ scope.row[column.value] }}
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-scrollbar>
-      </transition>
+      <div v-show="alarmList.length > 4 && tableShow">
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 32px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 231px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          height="200"
+          style="border-left: 1px solid #2470AC;"
+          v-if="tableShow"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-show="alarmList.length < 5 && tableShow">
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          v-if="tableShow"
+          style="border: 1px solid #2470AC"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
     </div>
 
     <!-- 中间平面图区域 -->
@@ -293,7 +319,7 @@
       title: getProject().title,
       bgImageSrc: tg_main,
       devListParams: {
-        picture: '3',
+        picture: '1',
         areaTypeId: 3,
         deviceTypes: '4,9,10,11'
       },
@@ -718,10 +744,14 @@
       font-weight: normal;
     }
   }
+  .tableLine {
+    margin-top: 9px;
+    width: 463px;
+  }
   .main-page {
     background-size: cover;
     background-color: #023d83;
-    height: 100vh;
+    height: 98vh;
   }
 
   .main-header {
@@ -852,16 +882,24 @@
         margin-left: 20px;
       }
     }
-    .el-scrollbar {
-      /*height: 200px;*/
-      width: 100%;
+    // 滚动条的滑块
+    /deep/ .el-table__body-wrapper  {
+      background-color: #023D83;
+      border: 0px solid white;
     }
-    .moredatascollor {
-      height: 200px;
+    /deep/ .el-table--border th.gutter:last-of-type {
+      border: 1px solid #023D83;
+      border-bottom-width: 1px;
+      background-color: #023D83;
     }
-    .el-scrollbar__wrap {
-      overflow-y: auto;
-      overflow-x: hidden;
+    /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
+      background-color: #023D83;
+    }
+    /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+      display: none;
+    }
+    /deep/ .el-scrollbar__wrap {
+      overflow-x: hidden !important;
       margin-bottom: 0px !important;
     }
     .el-table {
@@ -895,16 +933,25 @@
     font-size: 15px;
     color: #FFFFFF;
     font-weight: normal;
+    border-color: #2470AC;
   }
-
+  .el-table--border::after, .el-table--group::after, .el-table::before{
+    background-color: #023d83;
+  }
+  .alarm-now-block /deep/ .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
+    border-color: #023d83;
+  }
   .alarm-now-block /deep/ .el-table__row td {
     background-color: #023D83;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ .el-table__body tr:hover > td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ tr.el-table__row--striped td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
 
   .map-tab {
@@ -1080,6 +1127,10 @@
   /*}*/
 
   @media(max-width: 1440px) {
+    .tableLine {
+      margin-top: 0px;
+      width: 343px;
+    }
     .main-title {
       height: 65px;
       padding-top: 16px;
diff --git a/src/views/staff/staffAdd.vue b/src/views/staff/staffAdd.vue
index 769e6d6..698cf37 100644
--- a/src/views/staff/staffAdd.vue
+++ b/src/views/staff/staffAdd.vue
@@ -116,6 +116,9 @@
           <el-row>
             <el-button type="primary" plain class="id-card-btn" :disabled="canRead" @click="readIDCard">读取身份证</el-button>
           </el-row>
+          <el-row>
+            <el-button type="primary" plain class="id-card-btn" @click="readCamera">{{ btnCamera }}</el-button>
+          </el-row>
         </el-col>
       </el-row>
     </el-form>
@@ -126,8 +129,13 @@
           <el-button v-show="isKey" type="primary" style="margin-left: 20px;" @click="registerIris"> 注册虹膜 </el-button>
           <el-button type="primary" style="margin-left: 20px;" @click="saveData"> 保存 </el-button>
         </el-col>
+        <el-col :span="6" :offset="3">
+          <video v-show="showVideo" width="200px" height="150px" style="margin-left: -8px"></video>
+          <canvas v-show = "false" width="200px" height="150px"></canvas>
+        </el-col>
       </el-row>
     </div>
+
     <capture-iris ref="captureIris"/>
   </div>
 </template>
@@ -150,6 +158,9 @@
       deptList: [],
       isEditMode: false, // 是否为编辑模式，编辑模式部分字段不允许修改，且没有重置和虹膜注册功能
       isKey: false, // 是否重点区域授权人员
+      btnCamera:'读取摄像头',
+      showVideo: false,
+      stream:'',
       personForm: {
         id: '', // 人员id
         idCard: '', // 身份证号
@@ -284,6 +295,81 @@
         this.formLoading = false
       })
     },
+    readCamera() {
+      if(this.btnCamera === '读取摄像头'){
+        this.cameraImgFile()
+      }else{
+        this.getAPhoto()
+      }
+    },
+    getAPhoto() {
+      //绘制canvas图形
+      let video = document.getElementsByTagName("video")[0]
+      var canvas = document.getElementsByTagName('canvas')[0]
+      var context = canvas.getContext('2d')
+      context.clearRect(0, 0, context.width, context.height);
+      context.drawImage(video, 0, 0,200,150);
+      this.showVideo = false
+      //把canvas图像转为img图片
+      this.photo = canvas.toDataURL("image/png");
+      var mediaStreamTrack =  this.stream.getTracks()[0];
+      mediaStreamTrack.stop();
+      this.btnCamera = '读取摄像头'
+    },
+    // 拍照上传获取video
+    cameraImgFile() {
+      let _this = this;
+
+      // 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象
+      if (navigator.mediaDevices === undefined) {
+        navigator.mediaDevices = {};
+      }
+      // 一些浏览器部分支持 mediaDevices。我们不能直接给对象设置 getUserMedia
+      // 因为这样可能会覆盖已有的属性。这里我们只会在没有getUserMedia属性的时候添加它。
+      if (navigator.mediaDevices.getUserMedia === undefined) {
+        navigator.mediaDevices.getUserMedia = function(constraints) {
+          // 首先，如果有getUserMedia的话，就获得它
+          var getUserMedia =
+            navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
+
+          // 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
+          if (!getUserMedia) {
+            return Promise.reject(
+              new Error("getUserMedia is not implemented in this browser")
+            );
+          }
+          // 否则，为老的navigator.getUserMedia方法包裹一个Promise
+          return new Promise(function(resolve, reject) {
+            getUserMedia.call(navigator, constraints, resolve, reject);
+          });
+        };
+      }
+      navigator.mediaDevices
+        .getUserMedia({ video: true, audio: false })
+        .then(function(stream) {
+          _this.stream = stream;
+          _this.videoShow = true;
+          // 旧的浏览器可能没有srcObject
+          _this.$nextTick(() => {
+            let video = document.getElementsByTagName("video")[0]
+            if ("srcObject" in video) {
+              video.srcObject = stream;
+            } else {
+              // 防止在新的浏览器里使用它，应为它已经不再支持了
+              video.src = window.URL.createObjectURL(stream);
+            }
+            _this.showVideo = true
+            _this.btnCamera = '拍照'
+            video.onloadedmetadata = function(e) {
+              video.play();
+            };
+          });
+        })
+        .catch(function(err) {
+          _this.videoShow = false;
+          _this.$message.warning("未发现可拍照设备或出现其他错误！");
+        });
+    },
     readIDCard() {
       this.resetForm()
       this.canRead = true
diff --git a/src/views/staff/staffEdit.vue b/src/views/staff/staffEdit.vue
index 2f8d4ca..04291b3 100644
--- a/src/views/staff/staffEdit.vue
+++ b/src/views/staff/staffEdit.vue
@@ -117,6 +117,9 @@
           <el-row>
             <el-button type="primary" plain :disabled="canRead"  class="id-card-btn" @click="readIDCard">读取身份证</el-button>
           </el-row>
+          <el-row>
+            <el-button type="primary" plain class="id-card-btn" @click="readCamera">{{ btnCamera }}</el-button>
+          </el-row>
         </el-col>
       </el-row>
     </el-form>
@@ -126,6 +129,10 @@
           <el-button v-show="isKey" type="primary" style="margin-left: 20px;" @click="registerIris"> 注册虹膜 </el-button>
           <el-button type="primary" style="margin-left: 20px;" @click="saveData"> 保存 </el-button>
         </el-col>
+        <el-col :span="6" :offset="3">
+          <video v-show="showVideo" width="200px" height="150px" style="margin-left: -8px"></video>
+          <canvas v-show = "false" width="200px" height="150px"></canvas>
+        </el-col>
       </el-row>
     </div>
 
@@ -161,6 +168,9 @@
     return {
       canRead: false,
       deptList: [],
+      btnCamera:'读取摄像头',
+      showVideo: false,
+      stream:'',
       isEditMode: false, // 是否为编辑模式，编辑模式部分字段不允许修改，且没有重置和虹膜注册功能
       isKey: false, // 是否重点区域授权人员
       reCaptureIris: '0', // 是否重新采集了虹膜
@@ -253,6 +263,81 @@
         this.keyAreaList = response.data
       })
     },
+    readCamera() {
+      if(this.btnCamera === '读取摄像头'){
+        this.cameraImgFile()
+      }else{
+        this.getAPhoto()
+      }
+    },
+    getAPhoto() {
+      //绘制canvas图形
+      let video = document.getElementsByTagName("video")[0]
+      var canvas = document.getElementsByTagName('canvas')[0]
+      var context = canvas.getContext('2d')
+      context.clearRect(0, 0, context.width, context.height);
+      context.drawImage(video, 0, 0,200,150);
+      this.showVideo = false
+      //把canvas图像转为img图片
+      this.photo = canvas.toDataURL("image/png");
+      var mediaStreamTrack =  this.stream.getTracks()[0];
+      mediaStreamTrack.stop();
+      this.btnCamera = '读取摄像头'
+    },
+    // 拍照上传获取video
+    cameraImgFile() {
+      let _this = this;
+
+      // 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象
+      if (navigator.mediaDevices === undefined) {
+        navigator.mediaDevices = {};
+      }
+      // 一些浏览器部分支持 mediaDevices。我们不能直接给对象设置 getUserMedia
+      // 因为这样可能会覆盖已有的属性。这里我们只会在没有getUserMedia属性的时候添加它。
+      if (navigator.mediaDevices.getUserMedia === undefined) {
+        navigator.mediaDevices.getUserMedia = function(constraints) {
+          // 首先，如果有getUserMedia的话，就获得它
+          var getUserMedia =
+            navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
+
+          // 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
+          if (!getUserMedia) {
+            return Promise.reject(
+              new Error("getUserMedia is not implemented in this browser")
+            );
+          }
+          // 否则，为老的navigator.getUserMedia方法包裹一个Promise
+          return new Promise(function(resolve, reject) {
+            getUserMedia.call(navigator, constraints, resolve, reject);
+          });
+        };
+      }
+      navigator.mediaDevices
+        .getUserMedia({ video: true, audio: false })
+        .then(function(stream) {
+          _this.stream = stream;
+          _this.videoShow = true;
+          // 旧的浏览器可能没有srcObject
+          _this.$nextTick(() => {
+            let video = document.getElementsByTagName("video")[0]
+            if ("srcObject" in video) {
+              video.srcObject = stream;
+            } else {
+              // 防止在新的浏览器里使用它，应为它已经不再支持了
+              video.src = window.URL.createObjectURL(stream);
+            }
+            _this.showVideo = true
+            _this.btnCamera = '拍照'
+            video.onloadedmetadata = function(e) {
+              video.play();
+            };
+          });
+        })
+        .catch(function(err) {
+          _this.videoShow = false;
+          _this.$message.warning("未发现可拍照设备或出现其他错误！");
+        });
+    },
     fetchData(id) {
       this.formLoading = true
       detailStaff(id).then(response => {
diff --git a/src/views/video/history.vue b/src/views/video/history.vue
index ed18111..de698a1 100644
--- a/src/views/video/history.vue
+++ b/src/views/video/history.vue
@@ -18,6 +18,7 @@
                   value-format="yyyy-MM-dd HH:mm:ss"
                   start-placeholder="搜索起始时间"
                   end-placeholder="搜索截止时间"
+                  arrow-control="true"
                   @focus="dateClick"
                   @change="dateSelected"/>
               </el-form-item>
@@ -25,11 +26,11 @@
               <!--<el-button class="filter-item" type="primary" @click="live">实时预览</el-button>-->
             </el-form>
           </div>
-          <div>
+          <div id="tabDiv">
             <!--<el-tabs v-model="activeName" type="card" @tab-click.once="handleClick">-->
               <!--<el-tab-pane label="海康" name="hk" >-->
                 <!--<iframe v-if="activeName==='hk'" zIndex="-1" name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html?wmode=opaque"/>-->
-                <iframe zIndex="-1" name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html?wmode=opaque"/>
+                <iframe name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html?wmode=opaque"/>
               <!--</el-tab-pane>-->
               <!--<el-tab-pane label="NVR" name="nvr">-->
                 <!--<iframe v-if="activeName==='nvr'" zIndex="-1" name="playNVR" class="iframe-body" src="/static/webCtrl/nvr/demo-easy.html?wmode=opaque"/>-->
@@ -43,6 +44,7 @@
 </template>
 <script>
 import VideoTree from './videoTree'
+import { formatToString, getDate, oneDayTime } from '@/utils/calendarUtil'
 export default {
   name: 'VideoHistory',
   components: { VideoTree },
@@ -84,9 +86,14 @@
     }
   },
   mounted() {
+    this.listQuery.startTime = getDate(0, 'DATE') + ' 00:00:00'
+    this.listQuery.endTime = getDate(0, 'SECOND')
+
+    this.timeRange = [this.listQuery.startTime, this.listQuery.endTime]
+    console.log(this.timeRange)
     setTimeout(() => {
       // console.log('treewidth: ' + this.$refs.tree.$el.offsetWidth.toString())
-      window.frames['playHK'].initPlugin('back')
+      window.frames['playHK'].initPlugin('back',document.getElementById("tabDiv").getBoundingClientRect().left)
     }, 1500)
   },
   methods: {
@@ -94,7 +101,7 @@
       if (tab.name === 'hk') {
         this.activeName = 'hk'
         console.log('hk')
-        window.frames['playHK'].initPlugin('back')
+        window.frames['playHK'].initPlugin('back',document.getElementById("tabDiv").getBoundingClientRect().left)
       } else if (tab.name === 'nvr') {
         this.activeName = 'nvr'
         // window.frames['playNVR'].stopPlayReal(null)
@@ -112,6 +119,7 @@
           if (this.activeName === 'nvr') {
             window.frames['playNVR'].search(0, this.listQuery.startTime, this.listQuery.endTime)
           } else if (this.activeName === 'hk') {
+            console.log(this.listQuery.monitorPoint, this.listQuery.startTime, this.listQuery.endTime)
             window.frames['playHK'].search(this.listQuery.monitorPoint, this.listQuery.startTime, this.listQuery.endTime)
           }
         }
@@ -120,7 +128,6 @@
     handleCameraClicked(camera) {
       console.log(camera)
       if (typeof camera.monitorPoint === 'undefined' || camera.monitorPoint === '') {
-        console.log('ip is null')
         return false
       } else {
         this.listQuery.monitorPoint = camera.monitorPoint
diff --git a/src/views/video/monitor.vue b/src/views/video/monitor.vue
index fa42257..dd66087 100644
--- a/src/views/video/monitor.vue
+++ b/src/views/video/monitor.vue
@@ -5,7 +5,7 @@
         <video-tree @click="handleCameraClicked"/>
       </el-col>
       <el-col :span="18">
-        <div ref="tabDiv" style="margin-top: 14px">
+        <div id="tabDiv">
           <!--<el-tabs v-model="activeName" type="border-card" @tab-click.once ="handleClick">-->
             <!--<el-tab-pane label="海康" name="hk">-->
               <!--<iframe v-if="activeName === 'hk'" name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html"/>-->
@@ -37,15 +37,16 @@
     }
   },
   mounted() {
+    // console.log(document.getElementById("tabDiv").getBoundingClientRect().left)
     setTimeout(() => {
-      window.frames['playHK'].initPlugin('real')
+      window.frames['playHK'].initPlugin('real',document.getElementById("tabDiv").getBoundingClientRect().left)
     }, 1000)
   },
   methods: {
     handleClick(tab, event) {
       if (tab.name === 'hk') {
         this.activeName = 'hk'
-        window.frames['playHK'].initPlugin('real')
+        window.frames['playHK'].initPlugin('real',document.getElementById("tabDiv").getBoundingClientRect().left)
       } else if (tab.name === 'nvr') {
         this.activeName = 'nvr'
         window.frames['playNVR'].stopPlayReal(null)
diff --git a/src/views/visitor/visitorAdd.vue b/src/views/visitor/visitorAdd.vue
index 87ec546..eb868d6 100644
--- a/src/views/visitor/visitorAdd.vue
+++ b/src/views/visitor/visitorAdd.vue
@@ -260,6 +260,11 @@
     },
     // 一位访客登记完毕
     visitorCheckedIn(visitor) {
+      if(visitor.sex === '2'){
+        visitor.sexStr = '女'
+      }else if(visitor.sex === '1'){
+        visitor.sexStr = '男'
+      }
       this.dataForm.visitorBaseDTOList.push(visitor)
     },
     detail(row) {

diff --git a/config/dev.env.js b/config/dev.env.js
index 6b4622a..095ba33 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -8,4 +8,5 @@
   NODE_ENV: '"development"',
   // BASE_API: '"http://192.168.5.220:20311"'
   BASE_API: '"http://111.198.10.15:11631"'
+  // BASE_API: '"http://192.168.5.220:20311"'
 })
diff --git a/config/prod.env.js b/config/prod.env.js
index f2501d0..ccbc615 100644
--- a/config/prod.env.js
+++ b/config/prod.env.js
@@ -1,5 +1,6 @@
 'use strict'
 module.exports = {
   NODE_ENV: '"production"',
-  BASE_API: '"http://192.168.5.220:20311"'
+  // BASE_API: '"http://192.168.5.220:20311"'
+  BASE_API: '"http://111.198.10.15:11631"'
 }
diff --git a/favicon.ico b/favicon.ico
index 34b63ac..bc1bfc5 100644
--- a/favicon.ico
+++ b/favicon.ico
Binary files differ
diff --git a/src/api/visitor.js b/src/api/visitor.js
index 05ed6ea..01a6c26 100644
--- a/src/api/visitor.js
+++ b/src/api/visitor.js
@@ -74,3 +74,14 @@
   })
 }
 
+// 查询人员轨迹
+export function getDetail(devcode) {
+  return request({
+    url: '/device/capturePhoto',
+    method: 'post',
+    params:{
+      devcode: devcode
+    }
+  })
+}
+
diff --git a/src/assets/dashboard_images/icon-defence.png b/src/assets/dashboard_images/icon-defence.png
index 8069376..11b41cb 100644
--- a/src/assets/dashboard_images/icon-defence.png
+++ b/src/assets/dashboard_images/icon-defence.png
Binary files differ
diff --git a/src/utils/calendarUtil.js b/src/utils/calendarUtil.js
index da840c3..e599bdd 100644
--- a/src/utils/calendarUtil.js
+++ b/src/utils/calendarUtil.js
@@ -61,7 +61,32 @@
 
   return yearMonth + '-' + format(day)
 }
+export function formatDateTime(cellval) {
+  var dateVal = cellval + "";//把时间戳转成字符串格式
+  if (cellval != null) {
+    //取得时间戳部分 如：获取 /Date(1545299299910)/ 中的 1545299299910 部分
+    var date = new Date(parseInt(dateVal.replace("/Date(", "")
+      .replace(")/", ""), 10));
+    //获取年，不需要其他操作所以可以直接返回	date.getFullYear()
+    //月份为0-11，所以+1，月份小于10时补个0
+    var month = date.getMonth() + 1 < 10 ? "0"
+      + (date.getMonth() + 1) : date.getMonth() + 1;
+    //获取日
+    var currentDate = date.getDate() < 10 ? "0" + date.getDate()
+      : date.getDate();
+    //获取时间
+    var hours = date.getHours() < 10 ? "0" + date.getHours() : date
+      .getHours();
+    var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes()
+      : date.getMinutes();
+    var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds()
+      : date.getSeconds();
 
+    //返回日期结果，需要时间的话在加上时间
+    return date.getFullYear() + "-" + month + "-" + currentDate+" "+hours+":"+
+      minutes+":"+seconds;
+  }
+}
 // 格式化日期为字符串
 export function formatToString(value, level) {
   const date = new Date(value)
diff --git a/src/views/alarm/alarmDetail.vue b/src/views/alarm/alarmDetail.vue
index 2c94629..8c32ee5 100644
--- a/src/views/alarm/alarmDetail.vue
+++ b/src/views/alarm/alarmDetail.vue
@@ -1,7 +1,7 @@
 <!-- 报警详情 -->
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :model="dataForm" label-well-code="right" label-width="110px">
+    <el-form v-loading="loading" ref="dataForm" :model="dataForm" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="报警编号">
@@ -86,6 +86,7 @@
   name: 'AlarmDetail',
   data() {
     return {
+      loading: true,
       dialogFormVisible: false, // 对话框是否显示
       dialogStatus: '', // 对话框类型：create,update,detail
       dataForm: {
@@ -123,7 +124,7 @@
         this.dataForm = {
           id: row.id
         }
-
+        this.loading = true
         alarmDetail(this.dataForm.id).then(response => {
           if (response.code === 200) {
             this.dataForm = {
@@ -140,7 +141,7 @@
               reason: response.data.reason,
               remark: response.data.remark
             }
-
+            this.loading = false
             // 格式化报警状态
             if (response.data.valid === 1) {
               this.dataForm.validStr = '正在报警'
diff --git a/src/views/car/carAdd.vue b/src/views/car/carAdd.vue
index ddb215f..5f54c93 100644
--- a/src/views/car/carAdd.vue
+++ b/src/views/car/carAdd.vue
@@ -10,7 +10,7 @@
         </el-col>
         <el-col :span="12">
           <el-form-item label="车辆性质" prop="property">
-            <el-radio-group v-model="dataForm.property" :disabled="isDetailMode">
+            <el-radio-group v-model="dataForm.property" :disabled="isDetailMode" @change="resetOwner">
               <el-radio v-for="item in carProperties" :key="item.value" :label="item.value">{{ item.name }}</el-radio>
             </el-radio-group>
           </el-form-item>
@@ -106,6 +106,12 @@
     this.fetchStaffList()
   },
   methods: {
+    resetOwner(){
+      if(this.dataForm.property!=='2'){
+        this.dataForm.ownerId = ''
+        // this.dataForm.phone = ''
+      }
+    },
     // 初始化对话框
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.btnLoading = false
@@ -208,6 +214,7 @@
           }
         })
         this.dataForm.phone = selectedStaff[0].phone
+        this.dataForm.deptid = selectedStaff[0].deptid
       } else {
         this.dataForm.phone = ''
       }
diff --git a/src/views/car/carList.vue b/src/views/car/carList.vue
index 8d924ff..4ff07ab 100644
--- a/src/views/car/carList.vue
+++ b/src/views/car/carList.vue
@@ -105,11 +105,11 @@
           value: 'propertyStr',
           align: 'center'
         },
-        // {
-        //   text: '车主姓名',
-        //   value: 'ownerName',
-        //   align: 'center'
-        // },
+        {
+          text: '车主姓名',
+          value: 'ownerName',
+          align: 'center'
+        },
         {
           text: '车主联系电话',
           value: 'phone',
diff --git a/src/views/ctrl/index.vue b/src/views/ctrl/index.vue
index fd36f2b..29923af 100644
--- a/src/views/ctrl/index.vue
+++ b/src/views/ctrl/index.vue
@@ -50,12 +50,13 @@
         <in-out-today />
       </el-col>
 
-      <el-col :span="7" class="chart-block">
+      <el-col id="dev-count"  :span="10" class="chart-block">
         <div class="chart-title">各类型设备安装数量</div>
         <dev-count />
       </el-col>
 
-      <el-col id="pass-count" :span="10" class="chart-block">
+      <!--<el-col id="pass-count" class="chart-block">-->
+      <el-col :span="7" class="chart-block">
         <div class="chart-title">进出营数量统计</div>
         <in-out-count />
       </el-col>
@@ -121,7 +122,7 @@
 <style scoped>
   .app-wrapper {
     background-color: #e9e9e9;
-    padding-bottom: 20px;
+    padding-bottom: 10px;
   }
 
   .sub-data-block {
@@ -129,6 +130,7 @@
     border-radius: 16px;
     float: left;
     margin: 10px;
+    margin-bottom: 0px;
     box-shadow: 1px 1px 5px #999;
   }
   .sub-title {
@@ -136,36 +138,38 @@
     text-align: center;
     font-family: 'Microsoft YaHei';
     color: #fff;
-    font-size: 24px;
-    padding: 10px;
+    font-size: 20px;
+    padding-top: 10px;
+    padding-bottom: 0px;
   }
   .statis-block {
     text-align: center;
     margin: 0px 10px 0px 10px;
-    padding: 0px 10px 10px 10px;
+    padding: 0px 10px 5px 10px;
     color: #fff;
     font-weight: bold;
     letter-spacing: 1px;
-    font-size: 24px;
+    font-size: 20px;
   }
   .big-size {
-    font-size: 64px;
+    font-size: 35px;
   }
 
   .chart-title {
     font-family: 'Microsoft YaHei';
     color: #000000;
     font-weight: bold;
-    font-size: 20px;
+    font-size: 18px;
     text-align: center;
     padding: 10px;
   }
   .chart-block {
     margin-left: 20px;
-    margin-top: 20px;
+    margin-top: 10px;
     border-radius: 16px;
     background-color: #FFFFFF;
     box-shadow: 1px 1px 5px #999;
+    height: 37vh;
   }
 
   #today-visitor {
@@ -187,7 +191,7 @@
     background-image: linear-gradient(to right, #ffa800, #ce7e00);
   }
 
-  #pass-count, #dev-alarm-count {
+  #dev-count, #dev-alarm-count {
     width: calc(250vw / 6 - 70px);
   }
 </style>
diff --git a/src/views/ctrl/overview.vue b/src/views/ctrl/overview.vue
index 62e1105..49ed928 100644
--- a/src/views/ctrl/overview.vue
+++ b/src/views/ctrl/overview.vue
@@ -59,26 +59,52 @@
           <i v-else class="el-icon-arrow-down"/>
         </span>
       </div>
-      <transition name="el-collapse-transition">
-        <el-scrollbar
-          v-show="tableShow"
-          :style="{ visibility: tableShow ? 'visible' : 'hidden'}"
-          :class="{ moredatascollor: alarmList.length > 6 }"
-          :native="false">
-          <el-table
-            :data="alarmList"
-            class="alarm-list-table"
-            border
-            stripe
-            @row-click="alarmRowClick">
-            <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{ scope.row[column.value] }}
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-scrollbar>
-      </transition>
+      <div v-show="alarmList.length > 4 && tableShow">
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 32px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 231px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          height="200"
+          style="border-left: 1px solid #2470AC;"
+          v-if="tableShow"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-show="alarmList.length < 5 && tableShow">
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          v-if="tableShow"
+          style="border: 1px solid #2470AC"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
     </div>
 
     <!-- 中间平面图区域 -->
@@ -145,9 +171,13 @@
         class="point-camera"
         @click="detailDev(item, $event)" />
     </div>
-
     <!-- 平面图区域设备类型按钮 -->
-    <div v-show="showType" class="bottom-center" :style="{ width: cameraTypeNum*btnwidth + 'px'}">
+    <div class="bottom-center" :style="{ width: btnNum*btnwidth + 'px'}">
+        <el-col v-show="btnNum!==1" ref="all" class="dev-icon dev-type-selected" @click.native="selectDevByType('all', $event)">
+          <img v-if="checkDevType[0]" src="@/assets/overview_images/icons/icon-all-checked.png">
+          <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
+          <span>全部</span>
+        </el-col>
       <el-col class="dev-icon" @click.native="selectDevByType('4', $event)">
         <img id="4-1-img" v-if="checkDevType1[0]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="4-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
@@ -178,20 +208,6 @@
         <img id="11-2-img" v-else src="@/assets/overview_images/icons/half-camera-blue.png">
         <span>标准半球</span>
       </el-col>
-    </div>
-    <!-- 平面图区域设备类型按钮 -->
-    <div v-show="!showType"class="bottom-center" :style="{ width: btnNum*btnwidth + 'px'}">
-        <el-col ref="all" class="dev-icon dev-type-selected" @click.native="selectDevByType('all', $event)">
-          <img v-if="checkDevType[0]" src="@/assets/overview_images/icons/icon-all-checked.png">
-          <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
-          <span>全部</span>
-        </el-col>
-        <el-col ref="camera" :class="cameraClass" @click.native="showType=!showType;selectDevByType('camera', $event)">
-        <!--<el-col ref="camera" class="dev-icon" @click.native="selectDevByType('camera', $event)">-->
-          <img id="cam_img_red" v-if="checkDevType[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-          <img id="cam_img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-          <span>摄像头</span>
-        </el-col>
         <el-col v-show="showFence" class="dev-icon" @click.native="selectDevByType('fence', $event)">
           <img v-if="checkDevType[2]" src="@/assets/overview_images/icons/icon-fence-checked.png">
           <img v-else src="@/assets/overview_images/icons/icon-fence-unchecked.png">
@@ -372,7 +388,7 @@
           height: 789
         }, // 屏幕窗口尺寸
         imgUrl: require('../../assets/overview_images/icons/icon-camera-point.png'),
-        btnNum: 3,
+        btnNum: 8,
         cameraTypeNum: 6,
         btnwidth: 210,
         halfLeft: 0,
@@ -498,25 +514,25 @@
             }
           }
         }
-        //跟换菜单
-        var item = ['人脸识别','车牌轨迹','周界防护','标准数字','智能球形','标准半球']
-        for(var i=0;i<item.length;i++){
-          if(item[i]===val.target.innerText){
-            return
-          }
-        }
-        if(val.target.id.endsWith('-1-img')||val.target.id.endsWith('-2-img')|| val.target.id==='cam_img' || val.target.id==='cam_img_red'){
-          return
-        }
-        if( val.target.innerText!=='摄像头') {
-          this.showType = false
-          const devTypes = document.querySelectorAll('.dev-icon')
-            for(var i=0;i<this.checkDevType.length;i++) {
-              if (this.checkDevType[i]) {
-                devTypes[i+6].className += ' dev-type-selected'
-              }
-            }
-        }
+        // //跟换菜单
+        // var item = ['人脸识别','车牌轨迹','周界防护','标准数字','智能球形','标准半球']
+        // for(var i=0;i<item.length;i++){
+        //   if(item[i]===val.target.innerText){
+        //     return
+        //   }
+        // }
+        // if(val.target.id.endsWith('-1-img')||val.target.id.endsWith('-2-img')|| val.target.id==='cam_img' || val.target.id==='cam_img_red'){
+        //   return
+        // }
+        // if( val.target.innerText!=='摄像头') {
+        //   this.showType = false
+        //   const devTypes = document.querySelectorAll('.dev-icon')
+        //     for(var i=0;i<this.checkDevType.length;i++) {
+        //       if (this.checkDevType[i]) {
+        //         devTypes[i+6].className += ' dev-type-selected'
+        //       }
+        //     }
+        // }
       },
       webSocket() {
         const that = this
@@ -586,7 +602,7 @@
         }else if(pic==='3'){
           this.changeMap('tg_4_1')
         }else if(pic==='4'){
-          this.changeMap('tg_4_1')
+          this.changeMap('tg_4_5')
         }
         setTimeout(() => {
           var obj = document.getElementById(val.toString());
@@ -771,7 +787,11 @@
           this.checkDevType1 = [false, false, false, false, false, false]
           // 添加选中的样式
           if (typeof event === 'undefined') {
-            devTypes[6].className += ' dev-type-selected'
+            if(this.btnNum===1){
+              devTypes[1].className += ' dev-type-selected'
+            }else{
+              devTypes[0].className += ' dev-type-selected'
+            }
           } else {
             event.currentTarget.className += ' dev-type-selected'
           }
@@ -1017,7 +1037,7 @@
           this.isMain = true
           // this.devListParams.picture = '1'
           this.imgSizeOriginal = { width: 2245, height: 1586 }
-          this.btnNum  = 3
+          this.btnNum  = 8
           this.cameraTypeNum  = 6
           this.showFence = true // 显示电子围栏
           this.showTemp = false // 隐藏温湿度设备
@@ -1027,6 +1047,7 @@
           this.showSubTabGuider = false
           this.showFloorThree = false
           this.showFloorFour = false
+          this.selectDevByType('all')
         } else if (index === 'tg_3_1') {
           this.bgImageSrc = tg_3_1
           // this.devListParams.picture = '2'
@@ -1037,6 +1058,7 @@
           this.showTemp = true // 隐藏温湿度
           this.showSmoking = true // 隐藏烟感
           this.showSound = true // 隐藏声光报警器
+          this.selectDevByType('all')
         } else if (index === 'tg_4_1') {
           this.bgImageSrc = tg_4_1
           // this.devListParams.picture = '3'
@@ -1048,18 +1070,19 @@
           this.showTemp = true // 显示温湿度
           this.showSmoking = true // 显示烟感
           this.showSound = true // 显示声光报警器
+          this.selectDevByType('all')
         } else if (index === 'tg_4_5') {
           this.bgImageSrc = tg_4_5
           // this.devListParams.picture = '4'
           this.imgSizeOriginal = { width: 2245, height: 1586 }
-          this.btnNum  = 2
+          this.btnNum  = 1
           this.cameraTypeNum  = 1
           this.showFence = false // 隐藏电子围栏
           this.showTemp = false // 隐藏温湿度
           this.showSmoking = false // 隐藏烟感
           this.showSound = false // 隐藏声光报警器
+          this.selectDevByType('4')
         }
-        this.selectDevByType('all')
       },
       // 查询并显示设备详情
       detailDev(dev, event) {
@@ -1201,10 +1224,14 @@
     left: 50%; transform: translateX(-50%);
     bottom: 25px;
   }
+  .tableLine {
+    margin-top: 9px;
+    width: 463px;
+  }
   .main-page {
     background-size: cover;
     background-color: #023d83;
-    height: 100vh;
+    height: 98vh;
   }
 
   .main-header {
@@ -1362,16 +1389,24 @@
         margin-left: 20px;
       }
     }
-    .el-scrollbar {
-      /*height: 200px;*/
-      width: 100%;
+    // 滚动条的滑块
+    /deep/ .el-table__body-wrapper  {
+      background-color: #023D83;
+      border: 0px solid white;
     }
-    .moredatascollor {
-      height: 200px;
+    /deep/ .el-table--border th.gutter:last-of-type {
+      border: 1px solid #023D83;
+      border-bottom-width: 1px;
+      background-color: #023D83;
     }
-    .el-scrollbar__wrap {
-      overflow-y: auto;
-      overflow-x: hidden;
+    /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
+      background-color: #023D83;
+    }
+    /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+      display: none;
+    }
+    /deep/ .el-scrollbar__wrap {
+      overflow-x: hidden !important;
       margin-bottom: 0px !important;
     }
     .el-table {
@@ -1405,16 +1440,25 @@
     font-size: 15px;
     color: #FFFFFF;
     font-weight: normal;
+    border-color: #2470AC;
   }
-
+  .el-table--border::after, .el-table--group::after, .el-table::before{
+    background-color: #023d83;
+  }
+  .alarm-now-block /deep/ .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
+    border-color: #023d83;
+  }
   .alarm-now-block /deep/ .el-table__row td {
     background-color: #023D83;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ .el-table__body tr:hover > td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ tr.el-table__row--striped td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
 
   .map-tab {
@@ -1601,6 +1645,10 @@
   /*}*/
 
   @media(max-width: 1440px) {
+    .tableLine {
+      margin-top: 0px;
+      width: 343px;
+    }
     .main-title {
       height: 65px;
       padding-top: 16px;
diff --git a/src/views/ctrl/statCharts/devAlarmCount.vue b/src/views/ctrl/statCharts/devAlarmCount.vue
index 7bea059..6b6939e 100644
--- a/src/views/ctrl/statCharts/devAlarmCount.vue
+++ b/src/views/ctrl/statCharts/devAlarmCount.vue
@@ -1,5 +1,6 @@
+<!--suppress ALL -->
 <template>
-  <div>
+  <div style="height: 90%">
     <el-date-picker
       v-model="timeRange"
       :picker-options="pickerOptions"
@@ -7,15 +8,16 @@
       range-separator="至"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
-      style="margin-bottom: 10px;" />
-    <ve-histogram :data="chartData" :settings="settings" height="350px" />
+      style="margin-bottom: 10px;z-index: 10000"
+      size="small"/>
+    <ve-histogram :data="chartData" :settings="settings" :extend="chartExtend" style="margin-top: -50px" height="100%"/>
   </div>
 </template>
 
 <script>
-import { formatToString, getDate, oneDayTime } from '@/utils/calendarUtil'
-import { devAlarmCount } from '@/api/statistics'
 
+import { devAlarmCount } from '@/api/statistics'
+import { formatToString, parseToDate, getDate, oneDayTime } from '@/utils/calendarUtil'
 const now = new Date()
 
 export default {
@@ -30,12 +32,22 @@
         columns: ['name', 'count'],
         rows: []
       },
+      chartExtend: {
+        series: {
+          barMaxWidth: 50
+        },
+        grid: {
+          containLabel: true,
+          bottom: '10%'
+        }
+      },
       settings: {
         labelMap: {
           'name': '设备类型',
-          'count': '报警数量'
+          'count': ''
         },
-        max: [4]
+        max: [4],
+        area: false
       },
       timeRange: [],
       pickerOptions: {
@@ -99,6 +111,13 @@
       devAlarmCount(this.params).then(response => {
         if (response.code === 200) {
           this.chartData.rows = response.data
+          var max = 4
+          for(var i=0;i<response.data.length;i++){
+            if(Number(response.data[i].count)>max){
+              max = Number(response.data[i].count)
+            }
+          }
+          this.settings.max = [max]
         }
       })
     }
diff --git a/src/views/ctrl/statCharts/devCount.vue b/src/views/ctrl/statCharts/devCount.vue
index d3e2902..db55fbe 100644
--- a/src/views/ctrl/statCharts/devCount.vue
+++ b/src/views/ctrl/statCharts/devCount.vue
@@ -1,5 +1,6 @@
 <template>
-  <ve-ring :data="chartData" :settings="settings" />
+  <ve-histogram :data="chartData" :settings="settings" :extend="chartExtend" style="margin-top: -20px" height="100%"/>
+  <!--<ve-ring :data="chartData" :settings="settings" />-->
 </template>
 
 <script>
@@ -9,14 +10,55 @@
   name: 'DevCount',
   data() {
     return {
+      chartExtend: {
+        series: {
+          barMaxWidth: 50
+        },
+        xAxis: {
+          axisLabel: {
+            interval: 0,
+            //换行显示
+            formatter: function(value) {
+              let result = ""; //拼接加\n返回的类目项
+              let maxLength = 2; //每项显示文字个数
+              let valLength = value.length; //X轴类目项的文字个数
+              let rowNumber = Math.ceil(valLength / maxLength); //类目项需要换行的行数
+              if (rowNumber > 1) {
+                //如果文字大于3,
+                for (let i = 0; i < rowNumber; i++) {
+                  let temp = ""; //每次截取的字符串
+                  let start = i * maxLength; //开始截取的位置
+                  let end = start + maxLength; //结束截取的位置
+                  temp = value.substring(start, end) + "\n";
+                  result += temp; //拼接生成最终的字符串
+                }
+                return "{labelText|" + result + "}";
+              } else {
+                return "{labelText|" + value + "}";
+              }
+            },
+            rich: {
+              labelText: {
+                lineHeight: 18
+              }
+            }
+          }
+        }
+      },
       chartData: {
         columns: ['name', 'count'],
         rows: []
       },
       settings: {
-        // legendLimit: 4
-        radius: [60, 100]
-      }
+        labelMap: {
+          'name': '设备类型',
+          'count': ''
+        }
+      },
+      // settings: {
+      //   // legendLimit: 4
+      //   radius: [60, 100]
+      // }
     }
   },
   activated() {
@@ -26,6 +68,9 @@
     fetchData() {
       devCount().then(response => {
         if (response.code === 200) {
+          for(var i=0;i<response.data.length;i++){
+            response.data[i].name = response.data[i].name.replace('防护','')
+          }
           this.chartData.rows = response.data
         }
       })
diff --git a/src/views/ctrl/statCharts/inOutCount.vue b/src/views/ctrl/statCharts/inOutCount.vue
index 502157e..d65ec69 100644
--- a/src/views/ctrl/statCharts/inOutCount.vue
+++ b/src/views/ctrl/statCharts/inOutCount.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="height: 100%">
     <el-date-picker
       v-model="timeRange"
       :picker-options="pickerOptions"
@@ -7,8 +7,9 @@
       range-separator="至"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
-      style="margin-bottom: 10px"/>
-    <ve-line :data="chartData" :settings="settings" height="350px" />
+      size="small"
+      style="margin-bottom: 10px;z-index: 10000"/>
+    <ve-line :data="chartData" :settings="settings" :extend="barExtend" style="margin-top: -50px;" height="93%"/>
   </div>
 </template>
 
@@ -30,6 +31,17 @@
         columns: ['date', 'staff', 'visitor', 'car', 'visitorCar'],
         rows: []
       },
+
+      barExtend:{
+        legend:{  // 隐藏图例
+          x: 'center',
+          y: 'bottom'
+        },
+        grid: {
+          containLabel: true,
+          bottom: '10%'
+        },
+      },
       settings: {
         labelMap: {
           'staff': '内部人员',
@@ -37,11 +49,11 @@
           'car': '内部车辆',
           'visitorCar': '来访车辆'
         },
-        xAxisType: 'time',
+        // xAxisType: 'time',
         max: [4],
         area: false,
         metrics: ['staff', 'visitor', 'car', 'visitorCar'],
-        dimension: ['date']
+        dimension: ['date'],
       },
       timeRange: [],
       pickerOptions: {
@@ -106,7 +118,7 @@
         if (response.code === 200) {
           const data = this.parseStatisticsData(response.data)
           this.chartData.rows = data.rowDatas
-          this.chartData.max = [data.maxCount]
+          this.settings.max = [data.maxCount]
         }
       })
     },
@@ -164,7 +176,7 @@
 
         if (typeof visitorCar !== 'undefined') {
           if (visitorCar.date === date) {
-            visitorCarCount = car.count
+            visitorCarCount = visitorCar.count
             indexVc++
           }
         }
@@ -172,6 +184,18 @@
         if (staffCount + visitorCount + carCount + visitorCarCount > 0) {
           rowDatas.push({ date: date, staff: staffCount, visitor: visitorCount, car: carCount, visitorCar: visitorCarCount })
         }
+        if(maxCount<staffCount){
+          maxCount = staffCount
+        }
+        if(maxCount<visitorCount){
+          maxCount = visitorCount
+        }
+        if(maxCount<carCount){
+          maxCount = carCount
+        }
+        if(maxCount<visitorCarCount){
+          maxCount = visitorCarCount
+        }
         start += oneDayTime
       }
 
diff --git a/src/views/ctrl/statCharts/inOutDoorCount.vue b/src/views/ctrl/statCharts/inOutDoorCount.vue
index ab28cdd..93f3458 100644
--- a/src/views/ctrl/statCharts/inOutDoorCount.vue
+++ b/src/views/ctrl/statCharts/inOutDoorCount.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="height: 100%">
     <el-date-picker
       v-model="timeRange"
       :picker-options="pickerOptions"
@@ -7,8 +7,9 @@
       range-separator="至"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
-      style="margin-bottom: 10px;" />
-    <ve-histogram :data="chartData" :settings="settings" height="350px" />
+      style="margin-bottom: 10px;z-index: 10000"
+      size="small"/>
+    <ve-histogram :data="chartData" :settings="settings" :extend="chartExtend" style="margin-top: -50px"height="93%"/>
   </div>
 </template>
 
@@ -26,11 +27,26 @@
         beginDate: '',
         endDate: ''
       },
+      chartExtend: {
+        legend:{  // 隐藏图例
+          x: 'center',
+          y: 'bottom'
+        },
+        grid: {
+          containLabel: true,
+          bottom: '10%'
+        },
+        series: {
+          barMaxWidth: 50,
+          center: ['50%', '50%']
+        }
+      },
       chartData: {
         columns: ['name', 'person', 'car'],
         rows: []
       },
       settings: {
+        radius: [60, 100],
         labelMap: {
           'person': '人员',
           'car': '车辆'
@@ -102,7 +118,7 @@
         if (response.code === 200) {
           const data = this.parseStatisticsData(response.data)
           this.chartData.rows = data.rowDatas
-          this.chartData.max = [data.maxCount]
+          this.settings.max = [data.maxCount]
         }
       })
     },
diff --git a/src/views/ctrl/statCharts/inOutKeyCount.vue b/src/views/ctrl/statCharts/inOutKeyCount.vue
index fa9a0b7..10108d6 100644
--- a/src/views/ctrl/statCharts/inOutKeyCount.vue
+++ b/src/views/ctrl/statCharts/inOutKeyCount.vue
@@ -1,5 +1,7 @@
 <template>
-  <ve-ring :data="chartData" :settings="settings" />
+  <div style="height: 100%">
+    <ve-ring :data="chartData" :settings="settings" :extend="chartExtend"  height="90%"/>
+  </div>
 </template>
 
 <script>
@@ -9,6 +11,19 @@
   name: 'InOutKeyCount',
   data() {
     return {
+      chartExtend: {
+        legend:{  // 隐藏图例
+          x: 'center',
+          y: 'top'
+        },
+        grid: {
+          containLabel: true,
+          top: '10%'
+        },
+        series: {
+          center: ['50%', '50%']
+        }
+      },
       chartData: {
         columns: ['name', 'count'],
         rows: []
diff --git a/src/views/ctrl/statCharts/inOutToday.vue b/src/views/ctrl/statCharts/inOutToday.vue
index c37fa7b..ae67856 100644
--- a/src/views/ctrl/statCharts/inOutToday.vue
+++ b/src/views/ctrl/statCharts/inOutToday.vue
@@ -1,5 +1,7 @@
 <template>
-  <ve-ring :data="chartData" :settings="settings" />
+  <div style="height: 100%">
+    <ve-ring :data="chartData" :settings="settings" :extend="chartExtend"  height="90%"/>
+  </div>
 </template>
 
 <script>
@@ -18,6 +20,15 @@
           { count: 1, name: '来访车辆' }
         ]
       },
+      chartExtend: {
+        legend:{  // 隐藏图例
+          x: 'center',
+          y: 'top'
+        },
+        series: {
+          center: ['50%', '50%']
+        }
+      },
       settings: {
         radius: [60, 100]
       }
diff --git a/src/views/deviceManage/deviceDetail.vue b/src/views/deviceManage/deviceDetail.vue
index 701052d..8245327 100644
--- a/src/views/deviceManage/deviceDetail.vue
+++ b/src/views/deviceManage/deviceDetail.vue
@@ -9,7 +9,7 @@
         <!--</el-col>-->
         <el-col :span="12">
           <el-form-item label="设备编号">
-            <el-input v-model.trim="dataForm.name" disabled type="text"/>
+            <el-input v-model.trim="dataForm.devcode" disabled type="text"/>
             <!--<span>{{ dataForm.devcode }}</span>-->
           </el-form-item>
         </el-col>
diff --git a/src/views/layout/components/AppHeader.vue b/src/views/layout/components/AppHeader.vue
index c3235b4..2e45954 100644
--- a/src/views/layout/components/AppHeader.vue
+++ b/src/views/layout/components/AppHeader.vue
@@ -1,12 +1,12 @@
 <template>
   <!--<div :style="{backgroundImage:'url('+headerUrl+')'}" class="app-header">-->
   <div style="background-color: #0078ff;" class="app-header">
-    <h3>{{ title }}</h3>
+    <h3 @click="backToIndex">{{ title }}</h3>
     <!--子系统选项-->
     <el-dropdown class="systemSelect" @command="handleCommand">
       <span class="el-dropdown-link" style="color: white">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
       </span>
-      <el-dropdown-menu slot="dropdown" >
+      <el-dropdown-menu slot="dropdown" style="z-index: 10000" >
         <el-dropdown-item>
           <span style="display:block;" @click="backToIndex">回首页</span>
         </el-dropdown-item>
@@ -15,7 +15,7 @@
     </el-dropdown>
 
     <div v-show="currentSystem.code === 'ctrl'" class="back-to-overview">
-      <el-button type="info" round @click="backToOverview">运行总览</el-button>
+      <el-button type="info" round @click="backToOverview" style="background-color: rgba(255,255,255,0.31);border: 0px">运行总览</el-button>
     </div>
 
     <el-dropdown class="avatar-container">
diff --git a/src/views/overview/doorIndex.vue b/src/views/overview/doorIndex.vue
index 5d2dce2..7cd40ff 100644
--- a/src/views/overview/doorIndex.vue
+++ b/src/views/overview/doorIndex.vue
@@ -58,26 +58,51 @@
           <i v-else class="el-icon-arrow-down"/>
         </span>
       </div>
-      <transition name="el-collapse-transition">
-        <el-scrollbar
-          v-show="tableShow"
-          :style="{ visibility: tableShow ? 'visible' : 'hidden'}"
-          :class="{ moredatascollor: alarmList.length > 6 }"
-          :native="false">
-          <el-table
-            :data="alarmList"
-            class="alarm-list-table"
-            border
-            stripe
-            @row-click="alarmRowClick">
-            <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{ scope.row[column.value] }}
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-scrollbar>
-      </transition>
+      <div v-show="alarmList.length > 4 && tableShow">
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 32px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 231px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          height="200"
+          style="border-left: 1px solid #2470AC;"
+          v-if="tableShow"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-show="alarmList.length < 5 && tableShow">
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          v-if="tableShow"
+          style="border: 1px solid #2470AC"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
     </div>
 
     <!-- 中间平面图区域 -->
@@ -730,9 +755,12 @@
   .main-page {
     background-size: cover;
     background-color: #023d83;
-    height: 100vh;
+    height: 98vh;
   }
-
+  .tableLine {
+    margin-top: 9px;
+    width: 463px;
+  }
   .main-header {
     width: 100vw;
   }
@@ -863,16 +891,24 @@
         margin-left: 20px;
       }
     }
-    .el-scrollbar {
-      /*height: 200px;*/
-      width: 100%;
+    // 滚动条的滑块
+    /deep/ .el-table__body-wrapper  {
+      background-color: #023D83;
+      border: 0px solid white;
     }
-    .moredatascollor {
-      height: 200px;
+    /deep/ .el-table--border th.gutter:last-of-type {
+      border: 1px solid #023D83;
+      border-bottom-width: 1px;
+      background-color: #023D83;
     }
-    .el-scrollbar__wrap {
-      overflow-y: auto;
-      overflow-x: hidden;
+    /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
+      background-color: #023D83;
+    }
+    /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+      display: none;
+    }
+    /deep/ .el-scrollbar__wrap {
+      overflow-x: hidden !important;
       margin-bottom: 0px !important;
     }
     .el-table {
@@ -906,16 +942,25 @@
     font-size: 15px;
     color: #FFFFFF;
     font-weight: normal;
+    border-color: #2470AC;
   }
-
+  .el-table--border::after, .el-table--group::after, .el-table::before{
+    background-color: #023d83;
+  }
+  .alarm-now-block /deep/ .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
+    border-color: #023d83;
+  }
   .alarm-now-block /deep/ .el-table__row td {
     background-color: #023D83;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ .el-table__body tr:hover > td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ tr.el-table__row--striped td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
 
   .map-tab {
@@ -1091,6 +1136,10 @@
   /*}*/
 
   @media(max-width: 1440px) {
+    .tableLine {
+      margin-top: 0px;
+      width: 343px;
+    }
     .main-title {
       height: 65px;
       padding-top: 16px;
diff --git a/src/views/overview/fenceIndex.vue b/src/views/overview/fenceIndex.vue
index 9466288..62a35e8 100644
--- a/src/views/overview/fenceIndex.vue
+++ b/src/views/overview/fenceIndex.vue
@@ -58,26 +58,52 @@
           <i v-else class="el-icon-arrow-down"/>
         </span>
       </div>
-      <transition name="el-collapse-transition">
-        <el-scrollbar
-          v-show="tableShow"
-          :style="{ visibility: tableShow ? 'visible' : 'hidden'}"
-          :class="{ moredatascollor: alarmList.length > 6 }"
-          :native="false">
-          <el-table
-            :data="alarmList"
-            class="alarm-list-table"
-            border
-            stripe
-            @row-click="alarmRowClick">
-            <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{ scope.row[column.value] }}
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-scrollbar>
-      </transition>
+      <div v-show="alarmList.length > 4 && tableShow">
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 32px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 231px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          height="200"
+          style="border-left: 1px solid #2470AC;"
+          v-if="tableShow"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-show="alarmList.length < 5 && tableShow">
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          v-if="tableShow"
+          style="border: 1px solid #2470AC"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
     </div>
 
     <!-- 中间平面图区域 -->
@@ -725,10 +751,14 @@
       font-weight: normal;
     }
   }
+  .tableLine {
+    margin-top: 9px;
+    width: 463px;
+  }
   .main-page {
     background-size: cover;
     background-color: #023d83;
-    height: 100vh;
+    height: 98vh;
   }
 
   .main-header {
@@ -859,16 +889,24 @@
         margin-left: 20px;
       }
     }
-    .el-scrollbar {
-      /*height: 200px;*/
-      width: 100%;
+    // 滚动条的滑块
+    /deep/ .el-table__body-wrapper  {
+      background-color: #023D83;
+      border: 0px solid white;
     }
-    .moredatascollor {
-      height: 200px;
+    /deep/ .el-table--border th.gutter:last-of-type {
+      border: 1px solid #023D83;
+      border-bottom-width: 1px;
+      background-color: #023D83;
     }
-    .el-scrollbar__wrap {
-      overflow-y: auto;
-      overflow-x: hidden;
+    /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
+      background-color: #023D83;
+    }
+    /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+      display: none;
+    }
+    /deep/ .el-scrollbar__wrap {
+      overflow-x: hidden !important;
       margin-bottom: 0px !important;
     }
     .el-table {
@@ -902,16 +940,25 @@
     font-size: 15px;
     color: #FFFFFF;
     font-weight: normal;
+    border-color: #2470AC;
   }
-
+  .el-table--border::after, .el-table--group::after, .el-table::before{
+    background-color: #023d83;
+  }
+  .alarm-now-block /deep/ .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
+    border-color: #023d83;
+  }
   .alarm-now-block /deep/ .el-table__row td {
     background-color: #023D83;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ .el-table__body tr:hover > td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ tr.el-table__row--striped td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
 
   .map-tab {
@@ -1087,6 +1134,10 @@
   /*}*/
 
   @media(max-width: 1440px) {
+    .tableLine {
+      margin-top: 0px;
+      width: 343px;
+    }
     .main-title {
       height: 65px;
       padding-top: 16px;
diff --git a/src/views/overview/keyIndex.vue b/src/views/overview/keyIndex.vue
index 37405a8..a461c94 100644
--- a/src/views/overview/keyIndex.vue
+++ b/src/views/overview/keyIndex.vue
@@ -33,20 +33,6 @@
             <span v-text="dev.alarm"/>
           </div>
         </el-col>
-
-        <!--<el-col :span="6" class="sub-data-block dev-offline">-->
-          <!--<div class="statis-block">-->
-            <!--<span v-text="dev.offLine"/>-->
-          <!--</div>-->
-          <!--<div class="sub-title">离线</div>-->
-        <!--</el-col>-->
-
-        <!--<el-col :span="6" class="sub-data-block dev-closed">-->
-          <!--<div class="statis-block">-->
-            <!--<span v-text="dev.closed"/>-->
-          <!--</div>-->
-          <!--<div class="sub-title">关闭</div>-->
-        <!--</el-col>-->
       </el-row>
     </div>
 
@@ -58,26 +44,52 @@
           <i v-else class="el-icon-arrow-down"/>
         </span>
       </div>
-      <transition name="el-collapse-transition">
-        <el-scrollbar
-          v-show="tableShow"
-          :style="{ visibility: tableShow ? 'visible' : 'hidden'}"
-          :class="{ moredatascollor: alarmList.length > 6 }"
-          :native="false">
-          <el-table
-            :data="alarmList"
-            class="alarm-list-table"
-            border
-            stripe
-            @row-click="alarmRowClick">
-            <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{ scope.row[column.value] }}
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-scrollbar>
-      </transition>
+      <div v-show="alarmList.length > 4 && tableShow">
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 32px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 231px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          height="200"
+          style="border-left: 1px solid #2470AC;"
+          v-if="tableShow"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-show="alarmList.length < 5 && tableShow">
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          v-if="tableShow"
+          style="border: 1px solid #2470AC"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
     </div>
 
     <!-- 中间平面图区域 -->
@@ -95,49 +107,16 @@
     </div>
 
     <!-- 平面图区域设备类型按钮 -->
-    <div v-show="showType" class="bottom-center" :style="{ width: btnwidth + 'px'}">
-      <el-col class="dev-icon" @click.native="selectDevByType('4', $event)">
-        <img id="4-1-img" v-if="checkDevType1[0]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-        <img id="4-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-        <span>人脸识别</span>
-      </el-col>
-      <!--<el-col class="dev-icon" @click.native="selectDevByType('5', $event)">-->
-        <!--<img id="5-1-img" v-if="checkDevType1[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
-        <!--<img id="5-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
-        <!--<span>车牌轨迹</span>-->
-      <!--</el-col>-->
-      <!--<el-col class="dev-icon" @click.native="selectDevByType('8', $event)">-->
-        <!--<img id="8-1-img" v-if="checkDevType1[2]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
-        <!--<img id="8-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
-        <!--<span>周界防护</span>-->
-      <!--</el-col>-->
-      <!--<el-col class="dev-icon" @click.native="selectDevByType('9', $event)">-->
-        <!--<img id="9-1-img" v-if="checkDevType1[3]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
-        <!--<img id="9-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
-        <!--<span>标准数字</span>-->
-      <!--</el-col>-->
-      <!--<el-col class="dev-icon" @click.native="selectDevByType('10', $event)">-->
-        <!--<img id="10-1-img" v-if="checkDevType1[4]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
-        <!--<img id="10-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
-        <!--<span>智能球形</span>-->
-      <!--</el-col>-->
-      <!--<el-col class="dev-icon" @click.native="selectDevByType('11', $event)">-->
-        <!--<img id="11-1-img" v-if="checkDevType1[5]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
-        <!--<img id="11-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
-        <!--<span>标准半球</span>-->
-      <!--</el-col>-->
-    </div>
-    <!-- 平面图区域设备类型按钮 -->
     <div v-show="!showType"class="bottom-center" :style="{ width: cameraTypeNum*btnwidth + 'px'}">
       <el-col ref="all" class="dev-icon dev-type-selected" @click.native="selectDevByType('all', $event)">
         <img v-if="checkDevType[0]" src="@/assets/overview_images/icons/icon-all-checked.png">
         <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
         <span>全部</span>
       </el-col>
-      <el-col ref="camera" :class="cameraClass" @click.native="showType=!showType;selectDevByType('camera', $event)">
-        <img id="cam_img_red" v-if="checkDevType[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-        <img id="cam_img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-        <span>摄像头</span>
+      <el-col class="dev-icon" @click.native="selectDevByType('camera4', $event)">
+        <img id="4-1-img" v-if="checkDevType[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
+        <img id="4-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
+        <span>人脸识别</span>
       </el-col>
       <el-col v-show="showTemp" class="dev-icon" @click.native="selectDevByType('temperature', $event)">
         <img v-if="checkDevType[2]" src="@/assets/overview_images/icons/icon-temperature-checked.png">
@@ -364,7 +343,6 @@
       }, // 设备详情表单
       cameraClass:'dev-icon',
       showType : false,
-      checkDevType1: [false, false, false, false, false, false], // 摄像头类型
       checkDevType: [true, false, false, false, false] // 选中设备类型
     }
   },
@@ -462,7 +440,7 @@
       }else if(pic==='3'){
         this.changeMap('tg_4_1')
       }else if(pic==='4'){
-        this.changeMap('tg_4_1')
+        this.changeMap('tg_4_5')
       }
       setTimeout(() => {
         var obj = document.getElementById(val.toString());
@@ -477,24 +455,6 @@
     handleKeyup(val){ //单击收起摄像头分类
       this.showAlarmDetail  = false
       this.showDevDetail  = false
-      var item = ['人脸识别']
-      for(var i=0;i<item.length;i++){
-        if(item[i]===val.target.innerText){
-          return
-        }
-      }
-      if(val.target.id.endsWith('-1-img')||val.target.id.endsWith('-2-img')|| val.target.id==='cam_img' || val.target.id==='cam_img_red'){
-        return
-      }
-      if( val.target.innerText!=='摄像头') {
-        this.showType = false
-        const devTypes = document.querySelectorAll('.dev-icon')
-        for(var i=0;i<this.checkDevType.length;i++) {
-          if (this.checkDevType[i]) {
-            devTypes[i+1].className += ' dev-type-selected'
-          }
-        }
-      }
     },
     handleSelect(key, keyPath) {
       this.selectDevByType(key,undefined)
@@ -643,14 +603,13 @@
       if(type !== 'camera'){
         // 添加选中的样式
         if (typeof event === 'undefined') {
-          devTypes[1].className += ' dev-type-selected'
+          devTypes[0].className += ' dev-type-selected'
         } else {
           event.currentTarget.className += ' dev-type-selected'
         }
       }
       if(type!=='camera'){
         this.checkDevType = [false, false, false, false, false]
-        this.checkDevType1 = [false, false, false, false, false, false]
       }
       if (type === 'all') {
         if(this.bgImageSrc===tg_4_5){
@@ -660,14 +619,7 @@
         }
         // this.devListParams.deviceTypes = []
         this.checkDevType[0] = true
-      } else if(type==='camera'){
-        for(var i=0;i<this.checkDevType1.length;i++){
-          if(this.checkDevType1[i]) {
-            devTypes[i].className += ' dev-type-selected'
-          }
-        }
-        return
-      } else if (type === 'temperature') {
+      }  else if (type === 'temperature') {
         this.devListParams.deviceTypes = temperatureTypes.toString()
         this.checkDevType[2] = true
       } else if (type === 'smoking') {
@@ -676,30 +628,24 @@
       } else if (type === 'sound') {
         this.devListParams.deviceTypes = soundTypes.toString()
         this.checkDevType[4] = true
-      }else if(type === '4'){
+      }else if(type === 'camera4'){
         this.devListParams.deviceTypes = '4'
         this.checkDevType[1] = true
-        this.checkDevType1[0] = true
       }else if(type === '5'){
         this.devListParams.deviceTypes = '5'
         this.checkDevType[1] = true
-        this.checkDevType1[1] = true
       }else if(type === '8'){
         this.devListParams.deviceTypes = '8'
         this.checkDevType[1] = true
-        this.checkDevType1[2] = true
       }else if(type === '9'){
         this.devListParams.deviceTypes = '9'
         this.checkDevType[1] = true
-        this.checkDevType1[3] = true
       }else if(type === '10'){
         this.devListParams.deviceTypes = '10'
         this.checkDevType[1] = true
-        this.checkDevType1[4] = true
       }else if(type === '11'){
         this.devListParams.deviceTypes = '11'
         this.checkDevType[1] = true
-        this.checkDevType1[5] = true
       }
       this.fetchDeviceData()
       // if(this.checkDevType[1]){
@@ -866,18 +812,13 @@
       }else{
         this.devListParams.deviceTypes = '1,2,4,12'
       }
-      // this.devListParams.deviceTypes = []
       if (index === 'tg_main') {
-        // this.imgSizeOriginal = { width: 2245, height: 1586 }
         this.devListParams.picture = '1'
       }else if (index === 'tg_3_1') {
-        // this.imgSizeOriginal = { width: 2245, height: 1586 }
         this.devListParams.picture = '2'
       } else if (index === 'tg_4_1') {
-        // this.imgSizeOriginal = { width: 2218, height: 2169 }
         this.devListParams.picture = '3'
       }else if (index === 'tg_4_5') {
-        // this.imgSizeOriginal = { width: 2245, height: 1586 }
         this.devListParams.picture = '4'
       }
       overviewDeviceList(this.devListParams).then(response => {
@@ -1060,10 +1001,14 @@
   /deep/ .el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
     border-bottom-width: 0px;
   }
+  .tableLine {
+    margin-top: 9px;
+    width: 463px;
+  }
   .main-page {
     background-size: cover;
     background-color: #023d83;
-    height: 100vh;
+    height: 98vh;
   }
 
   .main-header {
@@ -1194,16 +1139,24 @@
         margin-left: 20px;
       }
     }
-    .el-scrollbar {
-      /*height: 200px;*/
-      width: 100%;
+    // 滚动条的滑块
+    /deep/ .el-table__body-wrapper  {
+      background-color: #023D83;
+      border: 0px solid white;
     }
-    .moredatascollor {
-      height: 200px;
+    /deep/ .el-table--border th.gutter:last-of-type {
+      border: 1px solid #023D83;
+      border-bottom-width: 1px;
+      background-color: #023D83;
     }
-    .el-scrollbar__wrap {
-      overflow-y: auto;
-      overflow-x: hidden;
+    /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
+      background-color: #023D83;
+    }
+    /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+      display: none;
+    }
+    /deep/ .el-scrollbar__wrap {
+      overflow-x: hidden !important;
       margin-bottom: 0px !important;
     }
     .el-table {
@@ -1237,16 +1190,25 @@
     font-size: 15px;
     color: #FFFFFF;
     font-weight: normal;
+    border-color: #2470AC;
   }
-
+  .el-table--border::after, .el-table--group::after, .el-table::before{
+    background-color: #023d83;
+  }
+  .alarm-now-block /deep/ .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
+    border-color: #023d83;
+  }
   .alarm-now-block /deep/ .el-table__row td {
     background-color: #023D83;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ .el-table__body tr:hover > td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ tr.el-table__row--striped td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
 
   .map-tab {
@@ -1431,6 +1393,10 @@
   /*}*/
 
   @media(max-width: 1440px) {
+    .tableLine {
+      margin-top: 0px;
+      width: 343px;
+    }
     .main-title {
       height: 65px;
       padding-top: 16px;
diff --git a/src/views/overview/regionIndex.vue b/src/views/overview/regionIndex.vue
index 69e7606..d4ea083 100644
--- a/src/views/overview/regionIndex.vue
+++ b/src/views/overview/regionIndex.vue
@@ -58,26 +58,52 @@
           <i v-else class="el-icon-arrow-down"/>
         </span>
       </div>
-      <transition name="el-collapse-transition">
-        <el-scrollbar
-          v-show="tableShow"
-          :style="{ visibility: tableShow ? 'visible' : 'hidden'}"
-          :class="{ moredatascollor: alarmList.length > 6 }"
-          :native="false">
-          <el-table
-            :data="alarmList"
-            class="alarm-list-table"
-            border
-            stripe
-            @row-click="alarmRowClick">
-            <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{ scope.row[column.value] }}
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-scrollbar>
-      </transition>
+      <div v-show="alarmList.length > 4 && tableShow">
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 32px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 231px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          height="200"
+          style="border-left: 1px solid #2470AC;"
+          v-if="tableShow"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-show="alarmList.length < 5 && tableShow">
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          v-if="tableShow"
+          style="border: 1px solid #2470AC"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
     </div>
 
     <!-- 中间平面图区域 -->
@@ -293,7 +319,7 @@
       title: getProject().title,
       bgImageSrc: tg_main,
       devListParams: {
-        picture: '3',
+        picture: '1',
         areaTypeId: 3,
         deviceTypes: '4,9,10,11'
       },
@@ -718,10 +744,14 @@
       font-weight: normal;
     }
   }
+  .tableLine {
+    margin-top: 9px;
+    width: 463px;
+  }
   .main-page {
     background-size: cover;
     background-color: #023d83;
-    height: 100vh;
+    height: 98vh;
   }
 
   .main-header {
@@ -852,16 +882,24 @@
         margin-left: 20px;
       }
     }
-    .el-scrollbar {
-      /*height: 200px;*/
-      width: 100%;
+    // 滚动条的滑块
+    /deep/ .el-table__body-wrapper  {
+      background-color: #023D83;
+      border: 0px solid white;
     }
-    .moredatascollor {
-      height: 200px;
+    /deep/ .el-table--border th.gutter:last-of-type {
+      border: 1px solid #023D83;
+      border-bottom-width: 1px;
+      background-color: #023D83;
     }
-    .el-scrollbar__wrap {
-      overflow-y: auto;
-      overflow-x: hidden;
+    /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
+      background-color: #023D83;
+    }
+    /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+      display: none;
+    }
+    /deep/ .el-scrollbar__wrap {
+      overflow-x: hidden !important;
       margin-bottom: 0px !important;
     }
     .el-table {
@@ -895,16 +933,25 @@
     font-size: 15px;
     color: #FFFFFF;
     font-weight: normal;
+    border-color: #2470AC;
   }
-
+  .el-table--border::after, .el-table--group::after, .el-table::before{
+    background-color: #023d83;
+  }
+  .alarm-now-block /deep/ .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
+    border-color: #023d83;
+  }
   .alarm-now-block /deep/ .el-table__row td {
     background-color: #023D83;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ .el-table__body tr:hover > td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ tr.el-table__row--striped td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
 
   .map-tab {
@@ -1080,6 +1127,10 @@
   /*}*/
 
   @media(max-width: 1440px) {
+    .tableLine {
+      margin-top: 0px;
+      width: 343px;
+    }
     .main-title {
       height: 65px;
       padding-top: 16px;
diff --git a/src/views/staff/staffAdd.vue b/src/views/staff/staffAdd.vue
index 769e6d6..698cf37 100644
--- a/src/views/staff/staffAdd.vue
+++ b/src/views/staff/staffAdd.vue
@@ -116,6 +116,9 @@
           <el-row>
             <el-button type="primary" plain class="id-card-btn" :disabled="canRead" @click="readIDCard">读取身份证</el-button>
           </el-row>
+          <el-row>
+            <el-button type="primary" plain class="id-card-btn" @click="readCamera">{{ btnCamera }}</el-button>
+          </el-row>
         </el-col>
       </el-row>
     </el-form>
@@ -126,8 +129,13 @@
           <el-button v-show="isKey" type="primary" style="margin-left: 20px;" @click="registerIris"> 注册虹膜 </el-button>
           <el-button type="primary" style="margin-left: 20px;" @click="saveData"> 保存 </el-button>
         </el-col>
+        <el-col :span="6" :offset="3">
+          <video v-show="showVideo" width="200px" height="150px" style="margin-left: -8px"></video>
+          <canvas v-show = "false" width="200px" height="150px"></canvas>
+        </el-col>
       </el-row>
     </div>
+
     <capture-iris ref="captureIris"/>
   </div>
 </template>
@@ -150,6 +158,9 @@
       deptList: [],
       isEditMode: false, // 是否为编辑模式，编辑模式部分字段不允许修改，且没有重置和虹膜注册功能
       isKey: false, // 是否重点区域授权人员
+      btnCamera:'读取摄像头',
+      showVideo: false,
+      stream:'',
       personForm: {
         id: '', // 人员id
         idCard: '', // 身份证号
@@ -284,6 +295,81 @@
         this.formLoading = false
       })
     },
+    readCamera() {
+      if(this.btnCamera === '读取摄像头'){
+        this.cameraImgFile()
+      }else{
+        this.getAPhoto()
+      }
+    },
+    getAPhoto() {
+      //绘制canvas图形
+      let video = document.getElementsByTagName("video")[0]
+      var canvas = document.getElementsByTagName('canvas')[0]
+      var context = canvas.getContext('2d')
+      context.clearRect(0, 0, context.width, context.height);
+      context.drawImage(video, 0, 0,200,150);
+      this.showVideo = false
+      //把canvas图像转为img图片
+      this.photo = canvas.toDataURL("image/png");
+      var mediaStreamTrack =  this.stream.getTracks()[0];
+      mediaStreamTrack.stop();
+      this.btnCamera = '读取摄像头'
+    },
+    // 拍照上传获取video
+    cameraImgFile() {
+      let _this = this;
+
+      // 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象
+      if (navigator.mediaDevices === undefined) {
+        navigator.mediaDevices = {};
+      }
+      // 一些浏览器部分支持 mediaDevices。我们不能直接给对象设置 getUserMedia
+      // 因为这样可能会覆盖已有的属性。这里我们只会在没有getUserMedia属性的时候添加它。
+      if (navigator.mediaDevices.getUserMedia === undefined) {
+        navigator.mediaDevices.getUserMedia = function(constraints) {
+          // 首先，如果有getUserMedia的话，就获得它
+          var getUserMedia =
+            navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
+
+          // 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
+          if (!getUserMedia) {
+            return Promise.reject(
+              new Error("getUserMedia is not implemented in this browser")
+            );
+          }
+          // 否则，为老的navigator.getUserMedia方法包裹一个Promise
+          return new Promise(function(resolve, reject) {
+            getUserMedia.call(navigator, constraints, resolve, reject);
+          });
+        };
+      }
+      navigator.mediaDevices
+        .getUserMedia({ video: true, audio: false })
+        .then(function(stream) {
+          _this.stream = stream;
+          _this.videoShow = true;
+          // 旧的浏览器可能没有srcObject
+          _this.$nextTick(() => {
+            let video = document.getElementsByTagName("video")[0]
+            if ("srcObject" in video) {
+              video.srcObject = stream;
+            } else {
+              // 防止在新的浏览器里使用它，应为它已经不再支持了
+              video.src = window.URL.createObjectURL(stream);
+            }
+            _this.showVideo = true
+            _this.btnCamera = '拍照'
+            video.onloadedmetadata = function(e) {
+              video.play();
+            };
+          });
+        })
+        .catch(function(err) {
+          _this.videoShow = false;
+          _this.$message.warning("未发现可拍照设备或出现其他错误！");
+        });
+    },
     readIDCard() {
       this.resetForm()
       this.canRead = true
diff --git a/src/views/staff/staffEdit.vue b/src/views/staff/staffEdit.vue
index 2f8d4ca..04291b3 100644
--- a/src/views/staff/staffEdit.vue
+++ b/src/views/staff/staffEdit.vue
@@ -117,6 +117,9 @@
           <el-row>
             <el-button type="primary" plain :disabled="canRead"  class="id-card-btn" @click="readIDCard">读取身份证</el-button>
           </el-row>
+          <el-row>
+            <el-button type="primary" plain class="id-card-btn" @click="readCamera">{{ btnCamera }}</el-button>
+          </el-row>
         </el-col>
       </el-row>
     </el-form>
@@ -126,6 +129,10 @@
           <el-button v-show="isKey" type="primary" style="margin-left: 20px;" @click="registerIris"> 注册虹膜 </el-button>
           <el-button type="primary" style="margin-left: 20px;" @click="saveData"> 保存 </el-button>
         </el-col>
+        <el-col :span="6" :offset="3">
+          <video v-show="showVideo" width="200px" height="150px" style="margin-left: -8px"></video>
+          <canvas v-show = "false" width="200px" height="150px"></canvas>
+        </el-col>
       </el-row>
     </div>
 
@@ -161,6 +168,9 @@
     return {
       canRead: false,
       deptList: [],
+      btnCamera:'读取摄像头',
+      showVideo: false,
+      stream:'',
       isEditMode: false, // 是否为编辑模式，编辑模式部分字段不允许修改，且没有重置和虹膜注册功能
       isKey: false, // 是否重点区域授权人员
       reCaptureIris: '0', // 是否重新采集了虹膜
@@ -253,6 +263,81 @@
         this.keyAreaList = response.data
       })
     },
+    readCamera() {
+      if(this.btnCamera === '读取摄像头'){
+        this.cameraImgFile()
+      }else{
+        this.getAPhoto()
+      }
+    },
+    getAPhoto() {
+      //绘制canvas图形
+      let video = document.getElementsByTagName("video")[0]
+      var canvas = document.getElementsByTagName('canvas')[0]
+      var context = canvas.getContext('2d')
+      context.clearRect(0, 0, context.width, context.height);
+      context.drawImage(video, 0, 0,200,150);
+      this.showVideo = false
+      //把canvas图像转为img图片
+      this.photo = canvas.toDataURL("image/png");
+      var mediaStreamTrack =  this.stream.getTracks()[0];
+      mediaStreamTrack.stop();
+      this.btnCamera = '读取摄像头'
+    },
+    // 拍照上传获取video
+    cameraImgFile() {
+      let _this = this;
+
+      // 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象
+      if (navigator.mediaDevices === undefined) {
+        navigator.mediaDevices = {};
+      }
+      // 一些浏览器部分支持 mediaDevices。我们不能直接给对象设置 getUserMedia
+      // 因为这样可能会覆盖已有的属性。这里我们只会在没有getUserMedia属性的时候添加它。
+      if (navigator.mediaDevices.getUserMedia === undefined) {
+        navigator.mediaDevices.getUserMedia = function(constraints) {
+          // 首先，如果有getUserMedia的话，就获得它
+          var getUserMedia =
+            navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
+
+          // 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
+          if (!getUserMedia) {
+            return Promise.reject(
+              new Error("getUserMedia is not implemented in this browser")
+            );
+          }
+          // 否则，为老的navigator.getUserMedia方法包裹一个Promise
+          return new Promise(function(resolve, reject) {
+            getUserMedia.call(navigator, constraints, resolve, reject);
+          });
+        };
+      }
+      navigator.mediaDevices
+        .getUserMedia({ video: true, audio: false })
+        .then(function(stream) {
+          _this.stream = stream;
+          _this.videoShow = true;
+          // 旧的浏览器可能没有srcObject
+          _this.$nextTick(() => {
+            let video = document.getElementsByTagName("video")[0]
+            if ("srcObject" in video) {
+              video.srcObject = stream;
+            } else {
+              // 防止在新的浏览器里使用它，应为它已经不再支持了
+              video.src = window.URL.createObjectURL(stream);
+            }
+            _this.showVideo = true
+            _this.btnCamera = '拍照'
+            video.onloadedmetadata = function(e) {
+              video.play();
+            };
+          });
+        })
+        .catch(function(err) {
+          _this.videoShow = false;
+          _this.$message.warning("未发现可拍照设备或出现其他错误！");
+        });
+    },
     fetchData(id) {
       this.formLoading = true
       detailStaff(id).then(response => {
diff --git a/src/views/video/history.vue b/src/views/video/history.vue
index ed18111..de698a1 100644
--- a/src/views/video/history.vue
+++ b/src/views/video/history.vue
@@ -18,6 +18,7 @@
                   value-format="yyyy-MM-dd HH:mm:ss"
                   start-placeholder="搜索起始时间"
                   end-placeholder="搜索截止时间"
+                  arrow-control="true"
                   @focus="dateClick"
                   @change="dateSelected"/>
               </el-form-item>
@@ -25,11 +26,11 @@
               <!--<el-button class="filter-item" type="primary" @click="live">实时预览</el-button>-->
             </el-form>
           </div>
-          <div>
+          <div id="tabDiv">
             <!--<el-tabs v-model="activeName" type="card" @tab-click.once="handleClick">-->
               <!--<el-tab-pane label="海康" name="hk" >-->
                 <!--<iframe v-if="activeName==='hk'" zIndex="-1" name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html?wmode=opaque"/>-->
-                <iframe zIndex="-1" name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html?wmode=opaque"/>
+                <iframe name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html?wmode=opaque"/>
               <!--</el-tab-pane>-->
               <!--<el-tab-pane label="NVR" name="nvr">-->
                 <!--<iframe v-if="activeName==='nvr'" zIndex="-1" name="playNVR" class="iframe-body" src="/static/webCtrl/nvr/demo-easy.html?wmode=opaque"/>-->
@@ -43,6 +44,7 @@
 </template>
 <script>
 import VideoTree from './videoTree'
+import { formatToString, getDate, oneDayTime } from '@/utils/calendarUtil'
 export default {
   name: 'VideoHistory',
   components: { VideoTree },
@@ -84,9 +86,14 @@
     }
   },
   mounted() {
+    this.listQuery.startTime = getDate(0, 'DATE') + ' 00:00:00'
+    this.listQuery.endTime = getDate(0, 'SECOND')
+
+    this.timeRange = [this.listQuery.startTime, this.listQuery.endTime]
+    console.log(this.timeRange)
     setTimeout(() => {
       // console.log('treewidth: ' + this.$refs.tree.$el.offsetWidth.toString())
-      window.frames['playHK'].initPlugin('back')
+      window.frames['playHK'].initPlugin('back',document.getElementById("tabDiv").getBoundingClientRect().left)
     }, 1500)
   },
   methods: {
@@ -94,7 +101,7 @@
       if (tab.name === 'hk') {
         this.activeName = 'hk'
         console.log('hk')
-        window.frames['playHK'].initPlugin('back')
+        window.frames['playHK'].initPlugin('back',document.getElementById("tabDiv").getBoundingClientRect().left)
       } else if (tab.name === 'nvr') {
         this.activeName = 'nvr'
         // window.frames['playNVR'].stopPlayReal(null)
@@ -112,6 +119,7 @@
           if (this.activeName === 'nvr') {
             window.frames['playNVR'].search(0, this.listQuery.startTime, this.listQuery.endTime)
           } else if (this.activeName === 'hk') {
+            console.log(this.listQuery.monitorPoint, this.listQuery.startTime, this.listQuery.endTime)
             window.frames['playHK'].search(this.listQuery.monitorPoint, this.listQuery.startTime, this.listQuery.endTime)
           }
         }
@@ -120,7 +128,6 @@
     handleCameraClicked(camera) {
       console.log(camera)
       if (typeof camera.monitorPoint === 'undefined' || camera.monitorPoint === '') {
-        console.log('ip is null')
         return false
       } else {
         this.listQuery.monitorPoint = camera.monitorPoint
diff --git a/src/views/video/monitor.vue b/src/views/video/monitor.vue
index fa42257..dd66087 100644
--- a/src/views/video/monitor.vue
+++ b/src/views/video/monitor.vue
@@ -5,7 +5,7 @@
         <video-tree @click="handleCameraClicked"/>
       </el-col>
       <el-col :span="18">
-        <div ref="tabDiv" style="margin-top: 14px">
+        <div id="tabDiv">
           <!--<el-tabs v-model="activeName" type="border-card" @tab-click.once ="handleClick">-->
             <!--<el-tab-pane label="海康" name="hk">-->
               <!--<iframe v-if="activeName === 'hk'" name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html"/>-->
@@ -37,15 +37,16 @@
     }
   },
   mounted() {
+    // console.log(document.getElementById("tabDiv").getBoundingClientRect().left)
     setTimeout(() => {
-      window.frames['playHK'].initPlugin('real')
+      window.frames['playHK'].initPlugin('real',document.getElementById("tabDiv").getBoundingClientRect().left)
     }, 1000)
   },
   methods: {
     handleClick(tab, event) {
       if (tab.name === 'hk') {
         this.activeName = 'hk'
-        window.frames['playHK'].initPlugin('real')
+        window.frames['playHK'].initPlugin('real',document.getElementById("tabDiv").getBoundingClientRect().left)
       } else if (tab.name === 'nvr') {
         this.activeName = 'nvr'
         window.frames['playNVR'].stopPlayReal(null)
diff --git a/src/views/visitor/visitorAdd.vue b/src/views/visitor/visitorAdd.vue
index 87ec546..eb868d6 100644
--- a/src/views/visitor/visitorAdd.vue
+++ b/src/views/visitor/visitorAdd.vue
@@ -260,6 +260,11 @@
     },
     // 一位访客登记完毕
     visitorCheckedIn(visitor) {
+      if(visitor.sex === '2'){
+        visitor.sexStr = '女'
+      }else if(visitor.sex === '1'){
+        visitor.sexStr = '男'
+      }
       this.dataForm.visitorBaseDTOList.push(visitor)
     },
     detail(row) {
diff --git a/src/views/visitor/visitorAddCar.vue b/src/views/visitor/visitorAddCar.vue
index 8513b4c..83608e6 100644
--- a/src/views/visitor/visitorAddCar.vue
+++ b/src/views/visitor/visitorAddCar.vue
@@ -304,6 +304,11 @@
       if (type === 'createCar') {
         this.dataForm.visitCarDTOList.push(visitor)
       } else if (type === 'createPerson') {
+        if(visitor.sex === '2'){
+          visitor.sexStr = '女'
+        }else if(visitor.sex === '1'){
+          visitor.sexStr = '男'
+        }
         this.dataForm.visitorBaseDTOList.push(visitor)
       }
     },

diff --git a/config/dev.env.js b/config/dev.env.js
index 6b4622a..095ba33 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -8,4 +8,5 @@
   NODE_ENV: '"development"',
   // BASE_API: '"http://192.168.5.220:20311"'
   BASE_API: '"http://111.198.10.15:11631"'
+  // BASE_API: '"http://192.168.5.220:20311"'
 })
diff --git a/config/prod.env.js b/config/prod.env.js
index f2501d0..ccbc615 100644
--- a/config/prod.env.js
+++ b/config/prod.env.js
@@ -1,5 +1,6 @@
 'use strict'
 module.exports = {
   NODE_ENV: '"production"',
-  BASE_API: '"http://192.168.5.220:20311"'
+  // BASE_API: '"http://192.168.5.220:20311"'
+  BASE_API: '"http://111.198.10.15:11631"'
 }
diff --git a/favicon.ico b/favicon.ico
index 34b63ac..bc1bfc5 100644
--- a/favicon.ico
+++ b/favicon.ico
Binary files differ
diff --git a/src/api/visitor.js b/src/api/visitor.js
index 05ed6ea..01a6c26 100644
--- a/src/api/visitor.js
+++ b/src/api/visitor.js
@@ -74,3 +74,14 @@
   })
 }
 
+// 查询人员轨迹
+export function getDetail(devcode) {
+  return request({
+    url: '/device/capturePhoto',
+    method: 'post',
+    params:{
+      devcode: devcode
+    }
+  })
+}
+
diff --git a/src/assets/dashboard_images/icon-defence.png b/src/assets/dashboard_images/icon-defence.png
index 8069376..11b41cb 100644
--- a/src/assets/dashboard_images/icon-defence.png
+++ b/src/assets/dashboard_images/icon-defence.png
Binary files differ
diff --git a/src/utils/calendarUtil.js b/src/utils/calendarUtil.js
index da840c3..e599bdd 100644
--- a/src/utils/calendarUtil.js
+++ b/src/utils/calendarUtil.js
@@ -61,7 +61,32 @@
 
   return yearMonth + '-' + format(day)
 }
+export function formatDateTime(cellval) {
+  var dateVal = cellval + "";//把时间戳转成字符串格式
+  if (cellval != null) {
+    //取得时间戳部分 如：获取 /Date(1545299299910)/ 中的 1545299299910 部分
+    var date = new Date(parseInt(dateVal.replace("/Date(", "")
+      .replace(")/", ""), 10));
+    //获取年，不需要其他操作所以可以直接返回	date.getFullYear()
+    //月份为0-11，所以+1，月份小于10时补个0
+    var month = date.getMonth() + 1 < 10 ? "0"
+      + (date.getMonth() + 1) : date.getMonth() + 1;
+    //获取日
+    var currentDate = date.getDate() < 10 ? "0" + date.getDate()
+      : date.getDate();
+    //获取时间
+    var hours = date.getHours() < 10 ? "0" + date.getHours() : date
+      .getHours();
+    var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes()
+      : date.getMinutes();
+    var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds()
+      : date.getSeconds();
 
+    //返回日期结果，需要时间的话在加上时间
+    return date.getFullYear() + "-" + month + "-" + currentDate+" "+hours+":"+
+      minutes+":"+seconds;
+  }
+}
 // 格式化日期为字符串
 export function formatToString(value, level) {
   const date = new Date(value)
diff --git a/src/views/alarm/alarmDetail.vue b/src/views/alarm/alarmDetail.vue
index 2c94629..8c32ee5 100644
--- a/src/views/alarm/alarmDetail.vue
+++ b/src/views/alarm/alarmDetail.vue
@@ -1,7 +1,7 @@
 <!-- 报警详情 -->
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :model="dataForm" label-well-code="right" label-width="110px">
+    <el-form v-loading="loading" ref="dataForm" :model="dataForm" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="报警编号">
@@ -86,6 +86,7 @@
   name: 'AlarmDetail',
   data() {
     return {
+      loading: true,
       dialogFormVisible: false, // 对话框是否显示
       dialogStatus: '', // 对话框类型：create,update,detail
       dataForm: {
@@ -123,7 +124,7 @@
         this.dataForm = {
           id: row.id
         }
-
+        this.loading = true
         alarmDetail(this.dataForm.id).then(response => {
           if (response.code === 200) {
             this.dataForm = {
@@ -140,7 +141,7 @@
               reason: response.data.reason,
               remark: response.data.remark
             }
-
+            this.loading = false
             // 格式化报警状态
             if (response.data.valid === 1) {
               this.dataForm.validStr = '正在报警'
diff --git a/src/views/car/carAdd.vue b/src/views/car/carAdd.vue
index ddb215f..5f54c93 100644
--- a/src/views/car/carAdd.vue
+++ b/src/views/car/carAdd.vue
@@ -10,7 +10,7 @@
         </el-col>
         <el-col :span="12">
           <el-form-item label="车辆性质" prop="property">
-            <el-radio-group v-model="dataForm.property" :disabled="isDetailMode">
+            <el-radio-group v-model="dataForm.property" :disabled="isDetailMode" @change="resetOwner">
               <el-radio v-for="item in carProperties" :key="item.value" :label="item.value">{{ item.name }}</el-radio>
             </el-radio-group>
           </el-form-item>
@@ -106,6 +106,12 @@
     this.fetchStaffList()
   },
   methods: {
+    resetOwner(){
+      if(this.dataForm.property!=='2'){
+        this.dataForm.ownerId = ''
+        // this.dataForm.phone = ''
+      }
+    },
     // 初始化对话框
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.btnLoading = false
@@ -208,6 +214,7 @@
           }
         })
         this.dataForm.phone = selectedStaff[0].phone
+        this.dataForm.deptid = selectedStaff[0].deptid
       } else {
         this.dataForm.phone = ''
       }
diff --git a/src/views/car/carList.vue b/src/views/car/carList.vue
index 8d924ff..4ff07ab 100644
--- a/src/views/car/carList.vue
+++ b/src/views/car/carList.vue
@@ -105,11 +105,11 @@
           value: 'propertyStr',
           align: 'center'
         },
-        // {
-        //   text: '车主姓名',
-        //   value: 'ownerName',
-        //   align: 'center'
-        // },
+        {
+          text: '车主姓名',
+          value: 'ownerName',
+          align: 'center'
+        },
         {
           text: '车主联系电话',
           value: 'phone',
diff --git a/src/views/ctrl/index.vue b/src/views/ctrl/index.vue
index fd36f2b..29923af 100644
--- a/src/views/ctrl/index.vue
+++ b/src/views/ctrl/index.vue
@@ -50,12 +50,13 @@
         <in-out-today />
       </el-col>
 
-      <el-col :span="7" class="chart-block">
+      <el-col id="dev-count"  :span="10" class="chart-block">
         <div class="chart-title">各类型设备安装数量</div>
         <dev-count />
       </el-col>
 
-      <el-col id="pass-count" :span="10" class="chart-block">
+      <!--<el-col id="pass-count" class="chart-block">-->
+      <el-col :span="7" class="chart-block">
         <div class="chart-title">进出营数量统计</div>
         <in-out-count />
       </el-col>
@@ -121,7 +122,7 @@
 <style scoped>
   .app-wrapper {
     background-color: #e9e9e9;
-    padding-bottom: 20px;
+    padding-bottom: 10px;
   }
 
   .sub-data-block {
@@ -129,6 +130,7 @@
     border-radius: 16px;
     float: left;
     margin: 10px;
+    margin-bottom: 0px;
     box-shadow: 1px 1px 5px #999;
   }
   .sub-title {
@@ -136,36 +138,38 @@
     text-align: center;
     font-family: 'Microsoft YaHei';
     color: #fff;
-    font-size: 24px;
-    padding: 10px;
+    font-size: 20px;
+    padding-top: 10px;
+    padding-bottom: 0px;
   }
   .statis-block {
     text-align: center;
     margin: 0px 10px 0px 10px;
-    padding: 0px 10px 10px 10px;
+    padding: 0px 10px 5px 10px;
     color: #fff;
     font-weight: bold;
     letter-spacing: 1px;
-    font-size: 24px;
+    font-size: 20px;
   }
   .big-size {
-    font-size: 64px;
+    font-size: 35px;
   }
 
   .chart-title {
     font-family: 'Microsoft YaHei';
     color: #000000;
     font-weight: bold;
-    font-size: 20px;
+    font-size: 18px;
     text-align: center;
     padding: 10px;
   }
   .chart-block {
     margin-left: 20px;
-    margin-top: 20px;
+    margin-top: 10px;
     border-radius: 16px;
     background-color: #FFFFFF;
     box-shadow: 1px 1px 5px #999;
+    height: 37vh;
   }
 
   #today-visitor {
@@ -187,7 +191,7 @@
     background-image: linear-gradient(to right, #ffa800, #ce7e00);
   }
 
-  #pass-count, #dev-alarm-count {
+  #dev-count, #dev-alarm-count {
     width: calc(250vw / 6 - 70px);
   }
 </style>
diff --git a/src/views/ctrl/overview.vue b/src/views/ctrl/overview.vue
index 62e1105..49ed928 100644
--- a/src/views/ctrl/overview.vue
+++ b/src/views/ctrl/overview.vue
@@ -59,26 +59,52 @@
           <i v-else class="el-icon-arrow-down"/>
         </span>
       </div>
-      <transition name="el-collapse-transition">
-        <el-scrollbar
-          v-show="tableShow"
-          :style="{ visibility: tableShow ? 'visible' : 'hidden'}"
-          :class="{ moredatascollor: alarmList.length > 6 }"
-          :native="false">
-          <el-table
-            :data="alarmList"
-            class="alarm-list-table"
-            border
-            stripe
-            @row-click="alarmRowClick">
-            <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{ scope.row[column.value] }}
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-scrollbar>
-      </transition>
+      <div v-show="alarmList.length > 4 && tableShow">
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 32px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 231px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          height="200"
+          style="border-left: 1px solid #2470AC;"
+          v-if="tableShow"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-show="alarmList.length < 5 && tableShow">
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          v-if="tableShow"
+          style="border: 1px solid #2470AC"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
     </div>
 
     <!-- 中间平面图区域 -->
@@ -145,9 +171,13 @@
         class="point-camera"
         @click="detailDev(item, $event)" />
     </div>
-
     <!-- 平面图区域设备类型按钮 -->
-    <div v-show="showType" class="bottom-center" :style="{ width: cameraTypeNum*btnwidth + 'px'}">
+    <div class="bottom-center" :style="{ width: btnNum*btnwidth + 'px'}">
+        <el-col v-show="btnNum!==1" ref="all" class="dev-icon dev-type-selected" @click.native="selectDevByType('all', $event)">
+          <img v-if="checkDevType[0]" src="@/assets/overview_images/icons/icon-all-checked.png">
+          <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
+          <span>全部</span>
+        </el-col>
       <el-col class="dev-icon" @click.native="selectDevByType('4', $event)">
         <img id="4-1-img" v-if="checkDevType1[0]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="4-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
@@ -178,20 +208,6 @@
         <img id="11-2-img" v-else src="@/assets/overview_images/icons/half-camera-blue.png">
         <span>标准半球</span>
       </el-col>
-    </div>
-    <!-- 平面图区域设备类型按钮 -->
-    <div v-show="!showType"class="bottom-center" :style="{ width: btnNum*btnwidth + 'px'}">
-        <el-col ref="all" class="dev-icon dev-type-selected" @click.native="selectDevByType('all', $event)">
-          <img v-if="checkDevType[0]" src="@/assets/overview_images/icons/icon-all-checked.png">
-          <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
-          <span>全部</span>
-        </el-col>
-        <el-col ref="camera" :class="cameraClass" @click.native="showType=!showType;selectDevByType('camera', $event)">
-        <!--<el-col ref="camera" class="dev-icon" @click.native="selectDevByType('camera', $event)">-->
-          <img id="cam_img_red" v-if="checkDevType[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-          <img id="cam_img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-          <span>摄像头</span>
-        </el-col>
         <el-col v-show="showFence" class="dev-icon" @click.native="selectDevByType('fence', $event)">
           <img v-if="checkDevType[2]" src="@/assets/overview_images/icons/icon-fence-checked.png">
           <img v-else src="@/assets/overview_images/icons/icon-fence-unchecked.png">
@@ -372,7 +388,7 @@
           height: 789
         }, // 屏幕窗口尺寸
         imgUrl: require('../../assets/overview_images/icons/icon-camera-point.png'),
-        btnNum: 3,
+        btnNum: 8,
         cameraTypeNum: 6,
         btnwidth: 210,
         halfLeft: 0,
@@ -498,25 +514,25 @@
             }
           }
         }
-        //跟换菜单
-        var item = ['人脸识别','车牌轨迹','周界防护','标准数字','智能球形','标准半球']
-        for(var i=0;i<item.length;i++){
-          if(item[i]===val.target.innerText){
-            return
-          }
-        }
-        if(val.target.id.endsWith('-1-img')||val.target.id.endsWith('-2-img')|| val.target.id==='cam_img' || val.target.id==='cam_img_red'){
-          return
-        }
-        if( val.target.innerText!=='摄像头') {
-          this.showType = false
-          const devTypes = document.querySelectorAll('.dev-icon')
-            for(var i=0;i<this.checkDevType.length;i++) {
-              if (this.checkDevType[i]) {
-                devTypes[i+6].className += ' dev-type-selected'
-              }
-            }
-        }
+        // //跟换菜单
+        // var item = ['人脸识别','车牌轨迹','周界防护','标准数字','智能球形','标准半球']
+        // for(var i=0;i<item.length;i++){
+        //   if(item[i]===val.target.innerText){
+        //     return
+        //   }
+        // }
+        // if(val.target.id.endsWith('-1-img')||val.target.id.endsWith('-2-img')|| val.target.id==='cam_img' || val.target.id==='cam_img_red'){
+        //   return
+        // }
+        // if( val.target.innerText!=='摄像头') {
+        //   this.showType = false
+        //   const devTypes = document.querySelectorAll('.dev-icon')
+        //     for(var i=0;i<this.checkDevType.length;i++) {
+        //       if (this.checkDevType[i]) {
+        //         devTypes[i+6].className += ' dev-type-selected'
+        //       }
+        //     }
+        // }
       },
       webSocket() {
         const that = this
@@ -586,7 +602,7 @@
         }else if(pic==='3'){
           this.changeMap('tg_4_1')
         }else if(pic==='4'){
-          this.changeMap('tg_4_1')
+          this.changeMap('tg_4_5')
         }
         setTimeout(() => {
           var obj = document.getElementById(val.toString());
@@ -771,7 +787,11 @@
           this.checkDevType1 = [false, false, false, false, false, false]
           // 添加选中的样式
           if (typeof event === 'undefined') {
-            devTypes[6].className += ' dev-type-selected'
+            if(this.btnNum===1){
+              devTypes[1].className += ' dev-type-selected'
+            }else{
+              devTypes[0].className += ' dev-type-selected'
+            }
           } else {
             event.currentTarget.className += ' dev-type-selected'
           }
@@ -1017,7 +1037,7 @@
           this.isMain = true
           // this.devListParams.picture = '1'
           this.imgSizeOriginal = { width: 2245, height: 1586 }
-          this.btnNum  = 3
+          this.btnNum  = 8
           this.cameraTypeNum  = 6
           this.showFence = true // 显示电子围栏
           this.showTemp = false // 隐藏温湿度设备
@@ -1027,6 +1047,7 @@
           this.showSubTabGuider = false
           this.showFloorThree = false
           this.showFloorFour = false
+          this.selectDevByType('all')
         } else if (index === 'tg_3_1') {
           this.bgImageSrc = tg_3_1
           // this.devListParams.picture = '2'
@@ -1037,6 +1058,7 @@
           this.showTemp = true // 隐藏温湿度
           this.showSmoking = true // 隐藏烟感
           this.showSound = true // 隐藏声光报警器
+          this.selectDevByType('all')
         } else if (index === 'tg_4_1') {
           this.bgImageSrc = tg_4_1
           // this.devListParams.picture = '3'
@@ -1048,18 +1070,19 @@
           this.showTemp = true // 显示温湿度
           this.showSmoking = true // 显示烟感
           this.showSound = true // 显示声光报警器
+          this.selectDevByType('all')
         } else if (index === 'tg_4_5') {
           this.bgImageSrc = tg_4_5
           // this.devListParams.picture = '4'
           this.imgSizeOriginal = { width: 2245, height: 1586 }
-          this.btnNum  = 2
+          this.btnNum  = 1
           this.cameraTypeNum  = 1
           this.showFence = false // 隐藏电子围栏
           this.showTemp = false // 隐藏温湿度
           this.showSmoking = false // 隐藏烟感
           this.showSound = false // 隐藏声光报警器
+          this.selectDevByType('4')
         }
-        this.selectDevByType('all')
       },
       // 查询并显示设备详情
       detailDev(dev, event) {
@@ -1201,10 +1224,14 @@
     left: 50%; transform: translateX(-50%);
     bottom: 25px;
   }
+  .tableLine {
+    margin-top: 9px;
+    width: 463px;
+  }
   .main-page {
     background-size: cover;
     background-color: #023d83;
-    height: 100vh;
+    height: 98vh;
   }
 
   .main-header {
@@ -1362,16 +1389,24 @@
         margin-left: 20px;
       }
     }
-    .el-scrollbar {
-      /*height: 200px;*/
-      width: 100%;
+    // 滚动条的滑块
+    /deep/ .el-table__body-wrapper  {
+      background-color: #023D83;
+      border: 0px solid white;
     }
-    .moredatascollor {
-      height: 200px;
+    /deep/ .el-table--border th.gutter:last-of-type {
+      border: 1px solid #023D83;
+      border-bottom-width: 1px;
+      background-color: #023D83;
     }
-    .el-scrollbar__wrap {
-      overflow-y: auto;
-      overflow-x: hidden;
+    /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
+      background-color: #023D83;
+    }
+    /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+      display: none;
+    }
+    /deep/ .el-scrollbar__wrap {
+      overflow-x: hidden !important;
       margin-bottom: 0px !important;
     }
     .el-table {
@@ -1405,16 +1440,25 @@
     font-size: 15px;
     color: #FFFFFF;
     font-weight: normal;
+    border-color: #2470AC;
   }
-
+  .el-table--border::after, .el-table--group::after, .el-table::before{
+    background-color: #023d83;
+  }
+  .alarm-now-block /deep/ .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
+    border-color: #023d83;
+  }
   .alarm-now-block /deep/ .el-table__row td {
     background-color: #023D83;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ .el-table__body tr:hover > td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ tr.el-table__row--striped td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
 
   .map-tab {
@@ -1601,6 +1645,10 @@
   /*}*/
 
   @media(max-width: 1440px) {
+    .tableLine {
+      margin-top: 0px;
+      width: 343px;
+    }
     .main-title {
       height: 65px;
       padding-top: 16px;
diff --git a/src/views/ctrl/statCharts/devAlarmCount.vue b/src/views/ctrl/statCharts/devAlarmCount.vue
index 7bea059..6b6939e 100644
--- a/src/views/ctrl/statCharts/devAlarmCount.vue
+++ b/src/views/ctrl/statCharts/devAlarmCount.vue
@@ -1,5 +1,6 @@
+<!--suppress ALL -->
 <template>
-  <div>
+  <div style="height: 90%">
     <el-date-picker
       v-model="timeRange"
       :picker-options="pickerOptions"
@@ -7,15 +8,16 @@
       range-separator="至"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
-      style="margin-bottom: 10px;" />
-    <ve-histogram :data="chartData" :settings="settings" height="350px" />
+      style="margin-bottom: 10px;z-index: 10000"
+      size="small"/>
+    <ve-histogram :data="chartData" :settings="settings" :extend="chartExtend" style="margin-top: -50px" height="100%"/>
   </div>
 </template>
 
 <script>
-import { formatToString, getDate, oneDayTime } from '@/utils/calendarUtil'
-import { devAlarmCount } from '@/api/statistics'
 
+import { devAlarmCount } from '@/api/statistics'
+import { formatToString, parseToDate, getDate, oneDayTime } from '@/utils/calendarUtil'
 const now = new Date()
 
 export default {
@@ -30,12 +32,22 @@
         columns: ['name', 'count'],
         rows: []
       },
+      chartExtend: {
+        series: {
+          barMaxWidth: 50
+        },
+        grid: {
+          containLabel: true,
+          bottom: '10%'
+        }
+      },
       settings: {
         labelMap: {
           'name': '设备类型',
-          'count': '报警数量'
+          'count': ''
         },
-        max: [4]
+        max: [4],
+        area: false
       },
       timeRange: [],
       pickerOptions: {
@@ -99,6 +111,13 @@
       devAlarmCount(this.params).then(response => {
         if (response.code === 200) {
           this.chartData.rows = response.data
+          var max = 4
+          for(var i=0;i<response.data.length;i++){
+            if(Number(response.data[i].count)>max){
+              max = Number(response.data[i].count)
+            }
+          }
+          this.settings.max = [max]
         }
       })
     }
diff --git a/src/views/ctrl/statCharts/devCount.vue b/src/views/ctrl/statCharts/devCount.vue
index d3e2902..db55fbe 100644
--- a/src/views/ctrl/statCharts/devCount.vue
+++ b/src/views/ctrl/statCharts/devCount.vue
@@ -1,5 +1,6 @@
 <template>
-  <ve-ring :data="chartData" :settings="settings" />
+  <ve-histogram :data="chartData" :settings="settings" :extend="chartExtend" style="margin-top: -20px" height="100%"/>
+  <!--<ve-ring :data="chartData" :settings="settings" />-->
 </template>
 
 <script>
@@ -9,14 +10,55 @@
   name: 'DevCount',
   data() {
     return {
+      chartExtend: {
+        series: {
+          barMaxWidth: 50
+        },
+        xAxis: {
+          axisLabel: {
+            interval: 0,
+            //换行显示
+            formatter: function(value) {
+              let result = ""; //拼接加\n返回的类目项
+              let maxLength = 2; //每项显示文字个数
+              let valLength = value.length; //X轴类目项的文字个数
+              let rowNumber = Math.ceil(valLength / maxLength); //类目项需要换行的行数
+              if (rowNumber > 1) {
+                //如果文字大于3,
+                for (let i = 0; i < rowNumber; i++) {
+                  let temp = ""; //每次截取的字符串
+                  let start = i * maxLength; //开始截取的位置
+                  let end = start + maxLength; //结束截取的位置
+                  temp = value.substring(start, end) + "\n";
+                  result += temp; //拼接生成最终的字符串
+                }
+                return "{labelText|" + result + "}";
+              } else {
+                return "{labelText|" + value + "}";
+              }
+            },
+            rich: {
+              labelText: {
+                lineHeight: 18
+              }
+            }
+          }
+        }
+      },
       chartData: {
         columns: ['name', 'count'],
         rows: []
       },
       settings: {
-        // legendLimit: 4
-        radius: [60, 100]
-      }
+        labelMap: {
+          'name': '设备类型',
+          'count': ''
+        }
+      },
+      // settings: {
+      //   // legendLimit: 4
+      //   radius: [60, 100]
+      // }
     }
   },
   activated() {
@@ -26,6 +68,9 @@
     fetchData() {
       devCount().then(response => {
         if (response.code === 200) {
+          for(var i=0;i<response.data.length;i++){
+            response.data[i].name = response.data[i].name.replace('防护','')
+          }
           this.chartData.rows = response.data
         }
       })
diff --git a/src/views/ctrl/statCharts/inOutCount.vue b/src/views/ctrl/statCharts/inOutCount.vue
index 502157e..d65ec69 100644
--- a/src/views/ctrl/statCharts/inOutCount.vue
+++ b/src/views/ctrl/statCharts/inOutCount.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="height: 100%">
     <el-date-picker
       v-model="timeRange"
       :picker-options="pickerOptions"
@@ -7,8 +7,9 @@
       range-separator="至"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
-      style="margin-bottom: 10px"/>
-    <ve-line :data="chartData" :settings="settings" height="350px" />
+      size="small"
+      style="margin-bottom: 10px;z-index: 10000"/>
+    <ve-line :data="chartData" :settings="settings" :extend="barExtend" style="margin-top: -50px;" height="93%"/>
   </div>
 </template>
 
@@ -30,6 +31,17 @@
         columns: ['date', 'staff', 'visitor', 'car', 'visitorCar'],
         rows: []
       },
+
+      barExtend:{
+        legend:{  // 隐藏图例
+          x: 'center',
+          y: 'bottom'
+        },
+        grid: {
+          containLabel: true,
+          bottom: '10%'
+        },
+      },
       settings: {
         labelMap: {
           'staff': '内部人员',
@@ -37,11 +49,11 @@
           'car': '内部车辆',
           'visitorCar': '来访车辆'
         },
-        xAxisType: 'time',
+        // xAxisType: 'time',
         max: [4],
         area: false,
         metrics: ['staff', 'visitor', 'car', 'visitorCar'],
-        dimension: ['date']
+        dimension: ['date'],
       },
       timeRange: [],
       pickerOptions: {
@@ -106,7 +118,7 @@
         if (response.code === 200) {
           const data = this.parseStatisticsData(response.data)
           this.chartData.rows = data.rowDatas
-          this.chartData.max = [data.maxCount]
+          this.settings.max = [data.maxCount]
         }
       })
     },
@@ -164,7 +176,7 @@
 
         if (typeof visitorCar !== 'undefined') {
           if (visitorCar.date === date) {
-            visitorCarCount = car.count
+            visitorCarCount = visitorCar.count
             indexVc++
           }
         }
@@ -172,6 +184,18 @@
         if (staffCount + visitorCount + carCount + visitorCarCount > 0) {
           rowDatas.push({ date: date, staff: staffCount, visitor: visitorCount, car: carCount, visitorCar: visitorCarCount })
         }
+        if(maxCount<staffCount){
+          maxCount = staffCount
+        }
+        if(maxCount<visitorCount){
+          maxCount = visitorCount
+        }
+        if(maxCount<carCount){
+          maxCount = carCount
+        }
+        if(maxCount<visitorCarCount){
+          maxCount = visitorCarCount
+        }
         start += oneDayTime
       }
 
diff --git a/src/views/ctrl/statCharts/inOutDoorCount.vue b/src/views/ctrl/statCharts/inOutDoorCount.vue
index ab28cdd..93f3458 100644
--- a/src/views/ctrl/statCharts/inOutDoorCount.vue
+++ b/src/views/ctrl/statCharts/inOutDoorCount.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="height: 100%">
     <el-date-picker
       v-model="timeRange"
       :picker-options="pickerOptions"
@@ -7,8 +7,9 @@
       range-separator="至"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
-      style="margin-bottom: 10px;" />
-    <ve-histogram :data="chartData" :settings="settings" height="350px" />
+      style="margin-bottom: 10px;z-index: 10000"
+      size="small"/>
+    <ve-histogram :data="chartData" :settings="settings" :extend="chartExtend" style="margin-top: -50px"height="93%"/>
   </div>
 </template>
 
@@ -26,11 +27,26 @@
         beginDate: '',
         endDate: ''
       },
+      chartExtend: {
+        legend:{  // 隐藏图例
+          x: 'center',
+          y: 'bottom'
+        },
+        grid: {
+          containLabel: true,
+          bottom: '10%'
+        },
+        series: {
+          barMaxWidth: 50,
+          center: ['50%', '50%']
+        }
+      },
       chartData: {
         columns: ['name', 'person', 'car'],
         rows: []
       },
       settings: {
+        radius: [60, 100],
         labelMap: {
           'person': '人员',
           'car': '车辆'
@@ -102,7 +118,7 @@
         if (response.code === 200) {
           const data = this.parseStatisticsData(response.data)
           this.chartData.rows = data.rowDatas
-          this.chartData.max = [data.maxCount]
+          this.settings.max = [data.maxCount]
         }
       })
     },
diff --git a/src/views/ctrl/statCharts/inOutKeyCount.vue b/src/views/ctrl/statCharts/inOutKeyCount.vue
index fa9a0b7..10108d6 100644
--- a/src/views/ctrl/statCharts/inOutKeyCount.vue
+++ b/src/views/ctrl/statCharts/inOutKeyCount.vue
@@ -1,5 +1,7 @@
 <template>
-  <ve-ring :data="chartData" :settings="settings" />
+  <div style="height: 100%">
+    <ve-ring :data="chartData" :settings="settings" :extend="chartExtend"  height="90%"/>
+  </div>
 </template>
 
 <script>
@@ -9,6 +11,19 @@
   name: 'InOutKeyCount',
   data() {
     return {
+      chartExtend: {
+        legend:{  // 隐藏图例
+          x: 'center',
+          y: 'top'
+        },
+        grid: {
+          containLabel: true,
+          top: '10%'
+        },
+        series: {
+          center: ['50%', '50%']
+        }
+      },
       chartData: {
         columns: ['name', 'count'],
         rows: []
diff --git a/src/views/ctrl/statCharts/inOutToday.vue b/src/views/ctrl/statCharts/inOutToday.vue
index c37fa7b..ae67856 100644
--- a/src/views/ctrl/statCharts/inOutToday.vue
+++ b/src/views/ctrl/statCharts/inOutToday.vue
@@ -1,5 +1,7 @@
 <template>
-  <ve-ring :data="chartData" :settings="settings" />
+  <div style="height: 100%">
+    <ve-ring :data="chartData" :settings="settings" :extend="chartExtend"  height="90%"/>
+  </div>
 </template>
 
 <script>
@@ -18,6 +20,15 @@
           { count: 1, name: '来访车辆' }
         ]
       },
+      chartExtend: {
+        legend:{  // 隐藏图例
+          x: 'center',
+          y: 'top'
+        },
+        series: {
+          center: ['50%', '50%']
+        }
+      },
       settings: {
         radius: [60, 100]
       }
diff --git a/src/views/deviceManage/deviceDetail.vue b/src/views/deviceManage/deviceDetail.vue
index 701052d..8245327 100644
--- a/src/views/deviceManage/deviceDetail.vue
+++ b/src/views/deviceManage/deviceDetail.vue
@@ -9,7 +9,7 @@
         <!--</el-col>-->
         <el-col :span="12">
           <el-form-item label="设备编号">
-            <el-input v-model.trim="dataForm.name" disabled type="text"/>
+            <el-input v-model.trim="dataForm.devcode" disabled type="text"/>
             <!--<span>{{ dataForm.devcode }}</span>-->
           </el-form-item>
         </el-col>
diff --git a/src/views/layout/components/AppHeader.vue b/src/views/layout/components/AppHeader.vue
index c3235b4..2e45954 100644
--- a/src/views/layout/components/AppHeader.vue
+++ b/src/views/layout/components/AppHeader.vue
@@ -1,12 +1,12 @@
 <template>
   <!--<div :style="{backgroundImage:'url('+headerUrl+')'}" class="app-header">-->
   <div style="background-color: #0078ff;" class="app-header">
-    <h3>{{ title }}</h3>
+    <h3 @click="backToIndex">{{ title }}</h3>
     <!--子系统选项-->
     <el-dropdown class="systemSelect" @command="handleCommand">
       <span class="el-dropdown-link" style="color: white">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
       </span>
-      <el-dropdown-menu slot="dropdown" >
+      <el-dropdown-menu slot="dropdown" style="z-index: 10000" >
         <el-dropdown-item>
           <span style="display:block;" @click="backToIndex">回首页</span>
         </el-dropdown-item>
@@ -15,7 +15,7 @@
     </el-dropdown>
 
     <div v-show="currentSystem.code === 'ctrl'" class="back-to-overview">
-      <el-button type="info" round @click="backToOverview">运行总览</el-button>
+      <el-button type="info" round @click="backToOverview" style="background-color: rgba(255,255,255,0.31);border: 0px">运行总览</el-button>
     </div>
 
     <el-dropdown class="avatar-container">
diff --git a/src/views/overview/doorIndex.vue b/src/views/overview/doorIndex.vue
index 5d2dce2..7cd40ff 100644
--- a/src/views/overview/doorIndex.vue
+++ b/src/views/overview/doorIndex.vue
@@ -58,26 +58,51 @@
           <i v-else class="el-icon-arrow-down"/>
         </span>
       </div>
-      <transition name="el-collapse-transition">
-        <el-scrollbar
-          v-show="tableShow"
-          :style="{ visibility: tableShow ? 'visible' : 'hidden'}"
-          :class="{ moredatascollor: alarmList.length > 6 }"
-          :native="false">
-          <el-table
-            :data="alarmList"
-            class="alarm-list-table"
-            border
-            stripe
-            @row-click="alarmRowClick">
-            <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{ scope.row[column.value] }}
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-scrollbar>
-      </transition>
+      <div v-show="alarmList.length > 4 && tableShow">
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 32px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 231px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          height="200"
+          style="border-left: 1px solid #2470AC;"
+          v-if="tableShow"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-show="alarmList.length < 5 && tableShow">
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          v-if="tableShow"
+          style="border: 1px solid #2470AC"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
     </div>
 
     <!-- 中间平面图区域 -->
@@ -730,9 +755,12 @@
   .main-page {
     background-size: cover;
     background-color: #023d83;
-    height: 100vh;
+    height: 98vh;
   }
-
+  .tableLine {
+    margin-top: 9px;
+    width: 463px;
+  }
   .main-header {
     width: 100vw;
   }
@@ -863,16 +891,24 @@
         margin-left: 20px;
       }
     }
-    .el-scrollbar {
-      /*height: 200px;*/
-      width: 100%;
+    // 滚动条的滑块
+    /deep/ .el-table__body-wrapper  {
+      background-color: #023D83;
+      border: 0px solid white;
     }
-    .moredatascollor {
-      height: 200px;
+    /deep/ .el-table--border th.gutter:last-of-type {
+      border: 1px solid #023D83;
+      border-bottom-width: 1px;
+      background-color: #023D83;
     }
-    .el-scrollbar__wrap {
-      overflow-y: auto;
-      overflow-x: hidden;
+    /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
+      background-color: #023D83;
+    }
+    /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+      display: none;
+    }
+    /deep/ .el-scrollbar__wrap {
+      overflow-x: hidden !important;
       margin-bottom: 0px !important;
     }
     .el-table {
@@ -906,16 +942,25 @@
     font-size: 15px;
     color: #FFFFFF;
     font-weight: normal;
+    border-color: #2470AC;
   }
-
+  .el-table--border::after, .el-table--group::after, .el-table::before{
+    background-color: #023d83;
+  }
+  .alarm-now-block /deep/ .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
+    border-color: #023d83;
+  }
   .alarm-now-block /deep/ .el-table__row td {
     background-color: #023D83;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ .el-table__body tr:hover > td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ tr.el-table__row--striped td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
 
   .map-tab {
@@ -1091,6 +1136,10 @@
   /*}*/
 
   @media(max-width: 1440px) {
+    .tableLine {
+      margin-top: 0px;
+      width: 343px;
+    }
     .main-title {
       height: 65px;
       padding-top: 16px;
diff --git a/src/views/overview/fenceIndex.vue b/src/views/overview/fenceIndex.vue
index 9466288..62a35e8 100644
--- a/src/views/overview/fenceIndex.vue
+++ b/src/views/overview/fenceIndex.vue
@@ -58,26 +58,52 @@
           <i v-else class="el-icon-arrow-down"/>
         </span>
       </div>
-      <transition name="el-collapse-transition">
-        <el-scrollbar
-          v-show="tableShow"
-          :style="{ visibility: tableShow ? 'visible' : 'hidden'}"
-          :class="{ moredatascollor: alarmList.length > 6 }"
-          :native="false">
-          <el-table
-            :data="alarmList"
-            class="alarm-list-table"
-            border
-            stripe
-            @row-click="alarmRowClick">
-            <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{ scope.row[column.value] }}
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-scrollbar>
-      </transition>
+      <div v-show="alarmList.length > 4 && tableShow">
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 32px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 231px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          height="200"
+          style="border-left: 1px solid #2470AC;"
+          v-if="tableShow"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-show="alarmList.length < 5 && tableShow">
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          v-if="tableShow"
+          style="border: 1px solid #2470AC"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
     </div>
 
     <!-- 中间平面图区域 -->
@@ -725,10 +751,14 @@
       font-weight: normal;
     }
   }
+  .tableLine {
+    margin-top: 9px;
+    width: 463px;
+  }
   .main-page {
     background-size: cover;
     background-color: #023d83;
-    height: 100vh;
+    height: 98vh;
   }
 
   .main-header {
@@ -859,16 +889,24 @@
         margin-left: 20px;
       }
     }
-    .el-scrollbar {
-      /*height: 200px;*/
-      width: 100%;
+    // 滚动条的滑块
+    /deep/ .el-table__body-wrapper  {
+      background-color: #023D83;
+      border: 0px solid white;
     }
-    .moredatascollor {
-      height: 200px;
+    /deep/ .el-table--border th.gutter:last-of-type {
+      border: 1px solid #023D83;
+      border-bottom-width: 1px;
+      background-color: #023D83;
     }
-    .el-scrollbar__wrap {
-      overflow-y: auto;
-      overflow-x: hidden;
+    /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
+      background-color: #023D83;
+    }
+    /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+      display: none;
+    }
+    /deep/ .el-scrollbar__wrap {
+      overflow-x: hidden !important;
       margin-bottom: 0px !important;
     }
     .el-table {
@@ -902,16 +940,25 @@
     font-size: 15px;
     color: #FFFFFF;
     font-weight: normal;
+    border-color: #2470AC;
   }
-
+  .el-table--border::after, .el-table--group::after, .el-table::before{
+    background-color: #023d83;
+  }
+  .alarm-now-block /deep/ .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
+    border-color: #023d83;
+  }
   .alarm-now-block /deep/ .el-table__row td {
     background-color: #023D83;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ .el-table__body tr:hover > td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ tr.el-table__row--striped td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
 
   .map-tab {
@@ -1087,6 +1134,10 @@
   /*}*/
 
   @media(max-width: 1440px) {
+    .tableLine {
+      margin-top: 0px;
+      width: 343px;
+    }
     .main-title {
       height: 65px;
       padding-top: 16px;
diff --git a/src/views/overview/keyIndex.vue b/src/views/overview/keyIndex.vue
index 37405a8..a461c94 100644
--- a/src/views/overview/keyIndex.vue
+++ b/src/views/overview/keyIndex.vue
@@ -33,20 +33,6 @@
             <span v-text="dev.alarm"/>
           </div>
         </el-col>
-
-        <!--<el-col :span="6" class="sub-data-block dev-offline">-->
-          <!--<div class="statis-block">-->
-            <!--<span v-text="dev.offLine"/>-->
-          <!--</div>-->
-          <!--<div class="sub-title">离线</div>-->
-        <!--</el-col>-->
-
-        <!--<el-col :span="6" class="sub-data-block dev-closed">-->
-          <!--<div class="statis-block">-->
-            <!--<span v-text="dev.closed"/>-->
-          <!--</div>-->
-          <!--<div class="sub-title">关闭</div>-->
-        <!--</el-col>-->
       </el-row>
     </div>
 
@@ -58,26 +44,52 @@
           <i v-else class="el-icon-arrow-down"/>
         </span>
       </div>
-      <transition name="el-collapse-transition">
-        <el-scrollbar
-          v-show="tableShow"
-          :style="{ visibility: tableShow ? 'visible' : 'hidden'}"
-          :class="{ moredatascollor: alarmList.length > 6 }"
-          :native="false">
-          <el-table
-            :data="alarmList"
-            class="alarm-list-table"
-            border
-            stripe
-            @row-click="alarmRowClick">
-            <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{ scope.row[column.value] }}
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-scrollbar>
-      </transition>
+      <div v-show="alarmList.length > 4 && tableShow">
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 32px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 231px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          height="200"
+          style="border-left: 1px solid #2470AC;"
+          v-if="tableShow"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-show="alarmList.length < 5 && tableShow">
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          v-if="tableShow"
+          style="border: 1px solid #2470AC"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
     </div>
 
     <!-- 中间平面图区域 -->
@@ -95,49 +107,16 @@
     </div>
 
     <!-- 平面图区域设备类型按钮 -->
-    <div v-show="showType" class="bottom-center" :style="{ width: btnwidth + 'px'}">
-      <el-col class="dev-icon" @click.native="selectDevByType('4', $event)">
-        <img id="4-1-img" v-if="checkDevType1[0]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-        <img id="4-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-        <span>人脸识别</span>
-      </el-col>
-      <!--<el-col class="dev-icon" @click.native="selectDevByType('5', $event)">-->
-        <!--<img id="5-1-img" v-if="checkDevType1[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
-        <!--<img id="5-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
-        <!--<span>车牌轨迹</span>-->
-      <!--</el-col>-->
-      <!--<el-col class="dev-icon" @click.native="selectDevByType('8', $event)">-->
-        <!--<img id="8-1-img" v-if="checkDevType1[2]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
-        <!--<img id="8-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
-        <!--<span>周界防护</span>-->
-      <!--</el-col>-->
-      <!--<el-col class="dev-icon" @click.native="selectDevByType('9', $event)">-->
-        <!--<img id="9-1-img" v-if="checkDevType1[3]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
-        <!--<img id="9-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
-        <!--<span>标准数字</span>-->
-      <!--</el-col>-->
-      <!--<el-col class="dev-icon" @click.native="selectDevByType('10', $event)">-->
-        <!--<img id="10-1-img" v-if="checkDevType1[4]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
-        <!--<img id="10-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
-        <!--<span>智能球形</span>-->
-      <!--</el-col>-->
-      <!--<el-col class="dev-icon" @click.native="selectDevByType('11', $event)">-->
-        <!--<img id="11-1-img" v-if="checkDevType1[5]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
-        <!--<img id="11-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
-        <!--<span>标准半球</span>-->
-      <!--</el-col>-->
-    </div>
-    <!-- 平面图区域设备类型按钮 -->
     <div v-show="!showType"class="bottom-center" :style="{ width: cameraTypeNum*btnwidth + 'px'}">
       <el-col ref="all" class="dev-icon dev-type-selected" @click.native="selectDevByType('all', $event)">
         <img v-if="checkDevType[0]" src="@/assets/overview_images/icons/icon-all-checked.png">
         <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
         <span>全部</span>
       </el-col>
-      <el-col ref="camera" :class="cameraClass" @click.native="showType=!showType;selectDevByType('camera', $event)">
-        <img id="cam_img_red" v-if="checkDevType[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-        <img id="cam_img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-        <span>摄像头</span>
+      <el-col class="dev-icon" @click.native="selectDevByType('camera4', $event)">
+        <img id="4-1-img" v-if="checkDevType[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
+        <img id="4-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
+        <span>人脸识别</span>
       </el-col>
       <el-col v-show="showTemp" class="dev-icon" @click.native="selectDevByType('temperature', $event)">
         <img v-if="checkDevType[2]" src="@/assets/overview_images/icons/icon-temperature-checked.png">
@@ -364,7 +343,6 @@
       }, // 设备详情表单
       cameraClass:'dev-icon',
       showType : false,
-      checkDevType1: [false, false, false, false, false, false], // 摄像头类型
       checkDevType: [true, false, false, false, false] // 选中设备类型
     }
   },
@@ -462,7 +440,7 @@
       }else if(pic==='3'){
         this.changeMap('tg_4_1')
       }else if(pic==='4'){
-        this.changeMap('tg_4_1')
+        this.changeMap('tg_4_5')
       }
       setTimeout(() => {
         var obj = document.getElementById(val.toString());
@@ -477,24 +455,6 @@
     handleKeyup(val){ //单击收起摄像头分类
       this.showAlarmDetail  = false
       this.showDevDetail  = false
-      var item = ['人脸识别']
-      for(var i=0;i<item.length;i++){
-        if(item[i]===val.target.innerText){
-          return
-        }
-      }
-      if(val.target.id.endsWith('-1-img')||val.target.id.endsWith('-2-img')|| val.target.id==='cam_img' || val.target.id==='cam_img_red'){
-        return
-      }
-      if( val.target.innerText!=='摄像头') {
-        this.showType = false
-        const devTypes = document.querySelectorAll('.dev-icon')
-        for(var i=0;i<this.checkDevType.length;i++) {
-          if (this.checkDevType[i]) {
-            devTypes[i+1].className += ' dev-type-selected'
-          }
-        }
-      }
     },
     handleSelect(key, keyPath) {
       this.selectDevByType(key,undefined)
@@ -643,14 +603,13 @@
       if(type !== 'camera'){
         // 添加选中的样式
         if (typeof event === 'undefined') {
-          devTypes[1].className += ' dev-type-selected'
+          devTypes[0].className += ' dev-type-selected'
         } else {
           event.currentTarget.className += ' dev-type-selected'
         }
       }
       if(type!=='camera'){
         this.checkDevType = [false, false, false, false, false]
-        this.checkDevType1 = [false, false, false, false, false, false]
       }
       if (type === 'all') {
         if(this.bgImageSrc===tg_4_5){
@@ -660,14 +619,7 @@
         }
         // this.devListParams.deviceTypes = []
         this.checkDevType[0] = true
-      } else if(type==='camera'){
-        for(var i=0;i<this.checkDevType1.length;i++){
-          if(this.checkDevType1[i]) {
-            devTypes[i].className += ' dev-type-selected'
-          }
-        }
-        return
-      } else if (type === 'temperature') {
+      }  else if (type === 'temperature') {
         this.devListParams.deviceTypes = temperatureTypes.toString()
         this.checkDevType[2] = true
       } else if (type === 'smoking') {
@@ -676,30 +628,24 @@
       } else if (type === 'sound') {
         this.devListParams.deviceTypes = soundTypes.toString()
         this.checkDevType[4] = true
-      }else if(type === '4'){
+      }else if(type === 'camera4'){
         this.devListParams.deviceTypes = '4'
         this.checkDevType[1] = true
-        this.checkDevType1[0] = true
       }else if(type === '5'){
         this.devListParams.deviceTypes = '5'
         this.checkDevType[1] = true
-        this.checkDevType1[1] = true
       }else if(type === '8'){
         this.devListParams.deviceTypes = '8'
         this.checkDevType[1] = true
-        this.checkDevType1[2] = true
       }else if(type === '9'){
         this.devListParams.deviceTypes = '9'
         this.checkDevType[1] = true
-        this.checkDevType1[3] = true
       }else if(type === '10'){
         this.devListParams.deviceTypes = '10'
         this.checkDevType[1] = true
-        this.checkDevType1[4] = true
       }else if(type === '11'){
         this.devListParams.deviceTypes = '11'
         this.checkDevType[1] = true
-        this.checkDevType1[5] = true
       }
       this.fetchDeviceData()
       // if(this.checkDevType[1]){
@@ -866,18 +812,13 @@
       }else{
         this.devListParams.deviceTypes = '1,2,4,12'
       }
-      // this.devListParams.deviceTypes = []
       if (index === 'tg_main') {
-        // this.imgSizeOriginal = { width: 2245, height: 1586 }
         this.devListParams.picture = '1'
       }else if (index === 'tg_3_1') {
-        // this.imgSizeOriginal = { width: 2245, height: 1586 }
         this.devListParams.picture = '2'
       } else if (index === 'tg_4_1') {
-        // this.imgSizeOriginal = { width: 2218, height: 2169 }
         this.devListParams.picture = '3'
       }else if (index === 'tg_4_5') {
-        // this.imgSizeOriginal = { width: 2245, height: 1586 }
         this.devListParams.picture = '4'
       }
       overviewDeviceList(this.devListParams).then(response => {
@@ -1060,10 +1001,14 @@
   /deep/ .el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
     border-bottom-width: 0px;
   }
+  .tableLine {
+    margin-top: 9px;
+    width: 463px;
+  }
   .main-page {
     background-size: cover;
     background-color: #023d83;
-    height: 100vh;
+    height: 98vh;
   }
 
   .main-header {
@@ -1194,16 +1139,24 @@
         margin-left: 20px;
       }
     }
-    .el-scrollbar {
-      /*height: 200px;*/
-      width: 100%;
+    // 滚动条的滑块
+    /deep/ .el-table__body-wrapper  {
+      background-color: #023D83;
+      border: 0px solid white;
     }
-    .moredatascollor {
-      height: 200px;
+    /deep/ .el-table--border th.gutter:last-of-type {
+      border: 1px solid #023D83;
+      border-bottom-width: 1px;
+      background-color: #023D83;
     }
-    .el-scrollbar__wrap {
-      overflow-y: auto;
-      overflow-x: hidden;
+    /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
+      background-color: #023D83;
+    }
+    /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+      display: none;
+    }
+    /deep/ .el-scrollbar__wrap {
+      overflow-x: hidden !important;
       margin-bottom: 0px !important;
     }
     .el-table {
@@ -1237,16 +1190,25 @@
     font-size: 15px;
     color: #FFFFFF;
     font-weight: normal;
+    border-color: #2470AC;
   }
-
+  .el-table--border::after, .el-table--group::after, .el-table::before{
+    background-color: #023d83;
+  }
+  .alarm-now-block /deep/ .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
+    border-color: #023d83;
+  }
   .alarm-now-block /deep/ .el-table__row td {
     background-color: #023D83;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ .el-table__body tr:hover > td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ tr.el-table__row--striped td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
 
   .map-tab {
@@ -1431,6 +1393,10 @@
   /*}*/
 
   @media(max-width: 1440px) {
+    .tableLine {
+      margin-top: 0px;
+      width: 343px;
+    }
     .main-title {
       height: 65px;
       padding-top: 16px;
diff --git a/src/views/overview/regionIndex.vue b/src/views/overview/regionIndex.vue
index 69e7606..d4ea083 100644
--- a/src/views/overview/regionIndex.vue
+++ b/src/views/overview/regionIndex.vue
@@ -58,26 +58,52 @@
           <i v-else class="el-icon-arrow-down"/>
         </span>
       </div>
-      <transition name="el-collapse-transition">
-        <el-scrollbar
-          v-show="tableShow"
-          :style="{ visibility: tableShow ? 'visible' : 'hidden'}"
-          :class="{ moredatascollor: alarmList.length > 6 }"
-          :native="false">
-          <el-table
-            :data="alarmList"
-            class="alarm-list-table"
-            border
-            stripe
-            @row-click="alarmRowClick">
-            <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{ scope.row[column.value] }}
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-scrollbar>
-      </transition>
+      <div v-show="alarmList.length > 4 && tableShow">
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 32px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 231px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          height="200"
+          style="border-left: 1px solid #2470AC;"
+          v-if="tableShow"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-show="alarmList.length < 5 && tableShow">
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          v-if="tableShow"
+          style="border: 1px solid #2470AC"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
     </div>
 
     <!-- 中间平面图区域 -->
@@ -293,7 +319,7 @@
       title: getProject().title,
       bgImageSrc: tg_main,
       devListParams: {
-        picture: '3',
+        picture: '1',
         areaTypeId: 3,
         deviceTypes: '4,9,10,11'
       },
@@ -718,10 +744,14 @@
       font-weight: normal;
     }
   }
+  .tableLine {
+    margin-top: 9px;
+    width: 463px;
+  }
   .main-page {
     background-size: cover;
     background-color: #023d83;
-    height: 100vh;
+    height: 98vh;
   }
 
   .main-header {
@@ -852,16 +882,24 @@
         margin-left: 20px;
       }
     }
-    .el-scrollbar {
-      /*height: 200px;*/
-      width: 100%;
+    // 滚动条的滑块
+    /deep/ .el-table__body-wrapper  {
+      background-color: #023D83;
+      border: 0px solid white;
     }
-    .moredatascollor {
-      height: 200px;
+    /deep/ .el-table--border th.gutter:last-of-type {
+      border: 1px solid #023D83;
+      border-bottom-width: 1px;
+      background-color: #023D83;
     }
-    .el-scrollbar__wrap {
-      overflow-y: auto;
-      overflow-x: hidden;
+    /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
+      background-color: #023D83;
+    }
+    /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+      display: none;
+    }
+    /deep/ .el-scrollbar__wrap {
+      overflow-x: hidden !important;
       margin-bottom: 0px !important;
     }
     .el-table {
@@ -895,16 +933,25 @@
     font-size: 15px;
     color: #FFFFFF;
     font-weight: normal;
+    border-color: #2470AC;
   }
-
+  .el-table--border::after, .el-table--group::after, .el-table::before{
+    background-color: #023d83;
+  }
+  .alarm-now-block /deep/ .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
+    border-color: #023d83;
+  }
   .alarm-now-block /deep/ .el-table__row td {
     background-color: #023D83;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ .el-table__body tr:hover > td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ tr.el-table__row--striped td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
 
   .map-tab {
@@ -1080,6 +1127,10 @@
   /*}*/
 
   @media(max-width: 1440px) {
+    .tableLine {
+      margin-top: 0px;
+      width: 343px;
+    }
     .main-title {
       height: 65px;
       padding-top: 16px;
diff --git a/src/views/staff/staffAdd.vue b/src/views/staff/staffAdd.vue
index 769e6d6..698cf37 100644
--- a/src/views/staff/staffAdd.vue
+++ b/src/views/staff/staffAdd.vue
@@ -116,6 +116,9 @@
           <el-row>
             <el-button type="primary" plain class="id-card-btn" :disabled="canRead" @click="readIDCard">读取身份证</el-button>
           </el-row>
+          <el-row>
+            <el-button type="primary" plain class="id-card-btn" @click="readCamera">{{ btnCamera }}</el-button>
+          </el-row>
         </el-col>
       </el-row>
     </el-form>
@@ -126,8 +129,13 @@
           <el-button v-show="isKey" type="primary" style="margin-left: 20px;" @click="registerIris"> 注册虹膜 </el-button>
           <el-button type="primary" style="margin-left: 20px;" @click="saveData"> 保存 </el-button>
         </el-col>
+        <el-col :span="6" :offset="3">
+          <video v-show="showVideo" width="200px" height="150px" style="margin-left: -8px"></video>
+          <canvas v-show = "false" width="200px" height="150px"></canvas>
+        </el-col>
       </el-row>
     </div>
+
     <capture-iris ref="captureIris"/>
   </div>
 </template>
@@ -150,6 +158,9 @@
       deptList: [],
       isEditMode: false, // 是否为编辑模式，编辑模式部分字段不允许修改，且没有重置和虹膜注册功能
       isKey: false, // 是否重点区域授权人员
+      btnCamera:'读取摄像头',
+      showVideo: false,
+      stream:'',
       personForm: {
         id: '', // 人员id
         idCard: '', // 身份证号
@@ -284,6 +295,81 @@
         this.formLoading = false
       })
     },
+    readCamera() {
+      if(this.btnCamera === '读取摄像头'){
+        this.cameraImgFile()
+      }else{
+        this.getAPhoto()
+      }
+    },
+    getAPhoto() {
+      //绘制canvas图形
+      let video = document.getElementsByTagName("video")[0]
+      var canvas = document.getElementsByTagName('canvas')[0]
+      var context = canvas.getContext('2d')
+      context.clearRect(0, 0, context.width, context.height);
+      context.drawImage(video, 0, 0,200,150);
+      this.showVideo = false
+      //把canvas图像转为img图片
+      this.photo = canvas.toDataURL("image/png");
+      var mediaStreamTrack =  this.stream.getTracks()[0];
+      mediaStreamTrack.stop();
+      this.btnCamera = '读取摄像头'
+    },
+    // 拍照上传获取video
+    cameraImgFile() {
+      let _this = this;
+
+      // 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象
+      if (navigator.mediaDevices === undefined) {
+        navigator.mediaDevices = {};
+      }
+      // 一些浏览器部分支持 mediaDevices。我们不能直接给对象设置 getUserMedia
+      // 因为这样可能会覆盖已有的属性。这里我们只会在没有getUserMedia属性的时候添加它。
+      if (navigator.mediaDevices.getUserMedia === undefined) {
+        navigator.mediaDevices.getUserMedia = function(constraints) {
+          // 首先，如果有getUserMedia的话，就获得它
+          var getUserMedia =
+            navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
+
+          // 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
+          if (!getUserMedia) {
+            return Promise.reject(
+              new Error("getUserMedia is not implemented in this browser")
+            );
+          }
+          // 否则，为老的navigator.getUserMedia方法包裹一个Promise
+          return new Promise(function(resolve, reject) {
+            getUserMedia.call(navigator, constraints, resolve, reject);
+          });
+        };
+      }
+      navigator.mediaDevices
+        .getUserMedia({ video: true, audio: false })
+        .then(function(stream) {
+          _this.stream = stream;
+          _this.videoShow = true;
+          // 旧的浏览器可能没有srcObject
+          _this.$nextTick(() => {
+            let video = document.getElementsByTagName("video")[0]
+            if ("srcObject" in video) {
+              video.srcObject = stream;
+            } else {
+              // 防止在新的浏览器里使用它，应为它已经不再支持了
+              video.src = window.URL.createObjectURL(stream);
+            }
+            _this.showVideo = true
+            _this.btnCamera = '拍照'
+            video.onloadedmetadata = function(e) {
+              video.play();
+            };
+          });
+        })
+        .catch(function(err) {
+          _this.videoShow = false;
+          _this.$message.warning("未发现可拍照设备或出现其他错误！");
+        });
+    },
     readIDCard() {
       this.resetForm()
       this.canRead = true
diff --git a/src/views/staff/staffEdit.vue b/src/views/staff/staffEdit.vue
index 2f8d4ca..04291b3 100644
--- a/src/views/staff/staffEdit.vue
+++ b/src/views/staff/staffEdit.vue
@@ -117,6 +117,9 @@
           <el-row>
             <el-button type="primary" plain :disabled="canRead"  class="id-card-btn" @click="readIDCard">读取身份证</el-button>
           </el-row>
+          <el-row>
+            <el-button type="primary" plain class="id-card-btn" @click="readCamera">{{ btnCamera }}</el-button>
+          </el-row>
         </el-col>
       </el-row>
     </el-form>
@@ -126,6 +129,10 @@
           <el-button v-show="isKey" type="primary" style="margin-left: 20px;" @click="registerIris"> 注册虹膜 </el-button>
           <el-button type="primary" style="margin-left: 20px;" @click="saveData"> 保存 </el-button>
         </el-col>
+        <el-col :span="6" :offset="3">
+          <video v-show="showVideo" width="200px" height="150px" style="margin-left: -8px"></video>
+          <canvas v-show = "false" width="200px" height="150px"></canvas>
+        </el-col>
       </el-row>
     </div>
 
@@ -161,6 +168,9 @@
     return {
       canRead: false,
       deptList: [],
+      btnCamera:'读取摄像头',
+      showVideo: false,
+      stream:'',
       isEditMode: false, // 是否为编辑模式，编辑模式部分字段不允许修改，且没有重置和虹膜注册功能
       isKey: false, // 是否重点区域授权人员
       reCaptureIris: '0', // 是否重新采集了虹膜
@@ -253,6 +263,81 @@
         this.keyAreaList = response.data
       })
     },
+    readCamera() {
+      if(this.btnCamera === '读取摄像头'){
+        this.cameraImgFile()
+      }else{
+        this.getAPhoto()
+      }
+    },
+    getAPhoto() {
+      //绘制canvas图形
+      let video = document.getElementsByTagName("video")[0]
+      var canvas = document.getElementsByTagName('canvas')[0]
+      var context = canvas.getContext('2d')
+      context.clearRect(0, 0, context.width, context.height);
+      context.drawImage(video, 0, 0,200,150);
+      this.showVideo = false
+      //把canvas图像转为img图片
+      this.photo = canvas.toDataURL("image/png");
+      var mediaStreamTrack =  this.stream.getTracks()[0];
+      mediaStreamTrack.stop();
+      this.btnCamera = '读取摄像头'
+    },
+    // 拍照上传获取video
+    cameraImgFile() {
+      let _this = this;
+
+      // 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象
+      if (navigator.mediaDevices === undefined) {
+        navigator.mediaDevices = {};
+      }
+      // 一些浏览器部分支持 mediaDevices。我们不能直接给对象设置 getUserMedia
+      // 因为这样可能会覆盖已有的属性。这里我们只会在没有getUserMedia属性的时候添加它。
+      if (navigator.mediaDevices.getUserMedia === undefined) {
+        navigator.mediaDevices.getUserMedia = function(constraints) {
+          // 首先，如果有getUserMedia的话，就获得它
+          var getUserMedia =
+            navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
+
+          // 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
+          if (!getUserMedia) {
+            return Promise.reject(
+              new Error("getUserMedia is not implemented in this browser")
+            );
+          }
+          // 否则，为老的navigator.getUserMedia方法包裹一个Promise
+          return new Promise(function(resolve, reject) {
+            getUserMedia.call(navigator, constraints, resolve, reject);
+          });
+        };
+      }
+      navigator.mediaDevices
+        .getUserMedia({ video: true, audio: false })
+        .then(function(stream) {
+          _this.stream = stream;
+          _this.videoShow = true;
+          // 旧的浏览器可能没有srcObject
+          _this.$nextTick(() => {
+            let video = document.getElementsByTagName("video")[0]
+            if ("srcObject" in video) {
+              video.srcObject = stream;
+            } else {
+              // 防止在新的浏览器里使用它，应为它已经不再支持了
+              video.src = window.URL.createObjectURL(stream);
+            }
+            _this.showVideo = true
+            _this.btnCamera = '拍照'
+            video.onloadedmetadata = function(e) {
+              video.play();
+            };
+          });
+        })
+        .catch(function(err) {
+          _this.videoShow = false;
+          _this.$message.warning("未发现可拍照设备或出现其他错误！");
+        });
+    },
     fetchData(id) {
       this.formLoading = true
       detailStaff(id).then(response => {
diff --git a/src/views/video/history.vue b/src/views/video/history.vue
index ed18111..de698a1 100644
--- a/src/views/video/history.vue
+++ b/src/views/video/history.vue
@@ -18,6 +18,7 @@
                   value-format="yyyy-MM-dd HH:mm:ss"
                   start-placeholder="搜索起始时间"
                   end-placeholder="搜索截止时间"
+                  arrow-control="true"
                   @focus="dateClick"
                   @change="dateSelected"/>
               </el-form-item>
@@ -25,11 +26,11 @@
               <!--<el-button class="filter-item" type="primary" @click="live">实时预览</el-button>-->
             </el-form>
           </div>
-          <div>
+          <div id="tabDiv">
             <!--<el-tabs v-model="activeName" type="card" @tab-click.once="handleClick">-->
               <!--<el-tab-pane label="海康" name="hk" >-->
                 <!--<iframe v-if="activeName==='hk'" zIndex="-1" name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html?wmode=opaque"/>-->
-                <iframe zIndex="-1" name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html?wmode=opaque"/>
+                <iframe name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html?wmode=opaque"/>
               <!--</el-tab-pane>-->
               <!--<el-tab-pane label="NVR" name="nvr">-->
                 <!--<iframe v-if="activeName==='nvr'" zIndex="-1" name="playNVR" class="iframe-body" src="/static/webCtrl/nvr/demo-easy.html?wmode=opaque"/>-->
@@ -43,6 +44,7 @@
 </template>
 <script>
 import VideoTree from './videoTree'
+import { formatToString, getDate, oneDayTime } from '@/utils/calendarUtil'
 export default {
   name: 'VideoHistory',
   components: { VideoTree },
@@ -84,9 +86,14 @@
     }
   },
   mounted() {
+    this.listQuery.startTime = getDate(0, 'DATE') + ' 00:00:00'
+    this.listQuery.endTime = getDate(0, 'SECOND')
+
+    this.timeRange = [this.listQuery.startTime, this.listQuery.endTime]
+    console.log(this.timeRange)
     setTimeout(() => {
       // console.log('treewidth: ' + this.$refs.tree.$el.offsetWidth.toString())
-      window.frames['playHK'].initPlugin('back')
+      window.frames['playHK'].initPlugin('back',document.getElementById("tabDiv").getBoundingClientRect().left)
     }, 1500)
   },
   methods: {
@@ -94,7 +101,7 @@
       if (tab.name === 'hk') {
         this.activeName = 'hk'
         console.log('hk')
-        window.frames['playHK'].initPlugin('back')
+        window.frames['playHK'].initPlugin('back',document.getElementById("tabDiv").getBoundingClientRect().left)
       } else if (tab.name === 'nvr') {
         this.activeName = 'nvr'
         // window.frames['playNVR'].stopPlayReal(null)
@@ -112,6 +119,7 @@
           if (this.activeName === 'nvr') {
             window.frames['playNVR'].search(0, this.listQuery.startTime, this.listQuery.endTime)
           } else if (this.activeName === 'hk') {
+            console.log(this.listQuery.monitorPoint, this.listQuery.startTime, this.listQuery.endTime)
             window.frames['playHK'].search(this.listQuery.monitorPoint, this.listQuery.startTime, this.listQuery.endTime)
           }
         }
@@ -120,7 +128,6 @@
     handleCameraClicked(camera) {
       console.log(camera)
       if (typeof camera.monitorPoint === 'undefined' || camera.monitorPoint === '') {
-        console.log('ip is null')
         return false
       } else {
         this.listQuery.monitorPoint = camera.monitorPoint
diff --git a/src/views/video/monitor.vue b/src/views/video/monitor.vue
index fa42257..dd66087 100644
--- a/src/views/video/monitor.vue
+++ b/src/views/video/monitor.vue
@@ -5,7 +5,7 @@
         <video-tree @click="handleCameraClicked"/>
       </el-col>
       <el-col :span="18">
-        <div ref="tabDiv" style="margin-top: 14px">
+        <div id="tabDiv">
           <!--<el-tabs v-model="activeName" type="border-card" @tab-click.once ="handleClick">-->
             <!--<el-tab-pane label="海康" name="hk">-->
               <!--<iframe v-if="activeName === 'hk'" name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html"/>-->
@@ -37,15 +37,16 @@
     }
   },
   mounted() {
+    // console.log(document.getElementById("tabDiv").getBoundingClientRect().left)
     setTimeout(() => {
-      window.frames['playHK'].initPlugin('real')
+      window.frames['playHK'].initPlugin('real',document.getElementById("tabDiv").getBoundingClientRect().left)
     }, 1000)
   },
   methods: {
     handleClick(tab, event) {
       if (tab.name === 'hk') {
         this.activeName = 'hk'
-        window.frames['playHK'].initPlugin('real')
+        window.frames['playHK'].initPlugin('real',document.getElementById("tabDiv").getBoundingClientRect().left)
       } else if (tab.name === 'nvr') {
         this.activeName = 'nvr'
         window.frames['playNVR'].stopPlayReal(null)
diff --git a/src/views/visitor/visitorAdd.vue b/src/views/visitor/visitorAdd.vue
index 87ec546..eb868d6 100644
--- a/src/views/visitor/visitorAdd.vue
+++ b/src/views/visitor/visitorAdd.vue
@@ -260,6 +260,11 @@
     },
     // 一位访客登记完毕
     visitorCheckedIn(visitor) {
+      if(visitor.sex === '2'){
+        visitor.sexStr = '女'
+      }else if(visitor.sex === '1'){
+        visitor.sexStr = '男'
+      }
       this.dataForm.visitorBaseDTOList.push(visitor)
     },
     detail(row) {
diff --git a/src/views/visitor/visitorAddCar.vue b/src/views/visitor/visitorAddCar.vue
index 8513b4c..83608e6 100644
--- a/src/views/visitor/visitorAddCar.vue
+++ b/src/views/visitor/visitorAddCar.vue
@@ -304,6 +304,11 @@
       if (type === 'createCar') {
         this.dataForm.visitCarDTOList.push(visitor)
       } else if (type === 'createPerson') {
+        if(visitor.sex === '2'){
+          visitor.sexStr = '女'
+        }else if(visitor.sex === '1'){
+          visitor.sexStr = '男'
+        }
         this.dataForm.visitorBaseDTOList.push(visitor)
       }
     },
diff --git a/src/views/visitor/visitorCarCheckIn.vue b/src/views/visitor/visitorCarCheckIn.vue
index c09abbb..149b940 100644
--- a/src/views/visitor/visitorCarCheckIn.vue
+++ b/src/views/visitor/visitorCarCheckIn.vue
@@ -1,6 +1,6 @@
 <!-- 访客车辆刷证登记页面 -->
 <template>
-  <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
+  <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body @close="closeDialog">
     <el-form ref="dataForm" :rules="rules" :model="dataForm" label-well-code="right" label-width="100px">
       <el-row>
         <el-col :span="6">
@@ -12,9 +12,12 @@
                 style="width: 130px; height: 175px"/>
             </div>
           </el-row>
-          <el-row>
+          <el-row style="margin-top: -20px">
             <el-button v-show="isEditMode" :disabled="readCard||canRead" type="primary" plain class="id-card-btn" @click="readIDCard">读取身份证</el-button>
           </el-row>
+          <el-row style="margin-top: -10px">
+            <el-button type="primary" plain class="id-card-btn" @click="readCamera">{{ btnCamera }}</el-button>
+          </el-row>
         </el-col>
 
         <el-col :span="16">
@@ -64,12 +67,14 @@
               </el-form-item>
             </el-col>
           </el-row>
+          <el-row class="dialog-footer">
+            <video v-show="showVideo" width="200px" height="150px" style="margin-right: 20px"></video>
+            <canvas v-show = "false" width="200px" height="150px"></canvas>
+            <el-button :loading="btnLoading" type="primary" @click="saveData" style="width: 150px">保 存</el-button>
+          </el-row>
         </el-col>
       </el-row>
     </el-form>
-    <div v-show="isEditMode" slot="footer" class="dialog-footer">
-      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
-    </div>
   </el-dialog>
 </template>
 
@@ -100,6 +105,9 @@
         address: '',
         plateNumber: '' // 来访车辆车牌号
       }, // 表单
+      btnCamera:'读取摄像头',
+      showVideo: false,
+      stream:'',
       photo: '', // 图片路径
       defaultPhoto: require('@/assets/global_images/photo.png'), // 默认图片路径
       textMap: {
@@ -129,12 +137,92 @@
     })
   },
   methods: {
+    closeDialog(){
+      var mediaStreamTrack =  this.stream.getTracks()[0];
+      mediaStreamTrack.stop();
+    },
+    readCamera() {
+      if(this.btnCamera === '读取摄像头'){
+        this.cameraImgFile()
+      }else{
+        this.getAPhoto()
+      }
+    },
+    getAPhoto() {
+      //绘制canvas图形
+      let video = document.getElementsByTagName("video")[0]
+      var canvas = document.getElementsByTagName('canvas')[0]
+      var context = canvas.getContext('2d')
+      context.clearRect(0, 0, context.width, context.height);
+      context.drawImage(video, 0, 0,200,150);
+      this.showVideo = false
+      //把canvas图像转为img图片
+      this.photo = canvas.toDataURL("image/png");
+      var mediaStreamTrack =  this.stream.getTracks()[0];
+      mediaStreamTrack.stop();
+      this.btnCamera = '读取摄像头'
+    },
+    // 拍照上传获取video
+    cameraImgFile() {
+      let _this = this;
+
+      // 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象
+      if (navigator.mediaDevices === undefined) {
+        navigator.mediaDevices = {};
+      }
+      // 一些浏览器部分支持 mediaDevices。我们不能直接给对象设置 getUserMedia
+      // 因为这样可能会覆盖已有的属性。这里我们只会在没有getUserMedia属性的时候添加它。
+      if (navigator.mediaDevices.getUserMedia === undefined) {
+        navigator.mediaDevices.getUserMedia = function(constraints) {
+          // 首先，如果有getUserMedia的话，就获得它
+          var getUserMedia =
+            navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
+
+          // 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
+          if (!getUserMedia) {
+            return Promise.reject(
+              new Error("getUserMedia is not implemented in this browser")
+            );
+          }
+          // 否则，为老的navigator.getUserMedia方法包裹一个Promise
+          return new Promise(function(resolve, reject) {
+            getUserMedia.call(navigator, constraints, resolve, reject);
+          });
+        };
+      }
+      navigator.mediaDevices
+        .getUserMedia({ video: true, audio: false })
+        .then(function(stream) {
+          _this.stream = stream;
+          _this.videoShow = true;
+          // 旧的浏览器可能没有srcObject
+          _this.$nextTick(() => {
+            let video = document.getElementsByTagName("video")[0]
+            if ("srcObject" in video) {
+              video.srcObject = stream;
+            } else {
+              // 防止在新的浏览器里使用它，应为它已经不再支持了
+              video.src = window.URL.createObjectURL(stream);
+            }
+            _this.showVideo = true
+            _this.btnCamera = '拍照'
+            video.onloadedmetadata = function(e) {
+              video.play();
+            };
+          });
+        })
+        .catch(function(err) {
+          _this.videoShow = false;
+          _this.$message.warning("未发现可拍照设备或出现其他错误！");
+        });
+    },
     // 初始化对话框
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.btnLoading = false
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
-
+      this.showVideo = false
+      this.btnCamera = '读取摄像头'
       this.resetForm()
 
       if (dialogStatus === 'createCar') { // 如果是新增，清除验证
@@ -243,7 +331,7 @@
     // 新增数据
     visitorCheckedIn: function() {
       this.$refs['dataForm'].validate((valid) => {
-        if (valid && this.readCard) {
+        if (valid) {
           // 车辆列表
           const carList = this.$parent.dataForm.visitCarDTOList
           let isCarChecked = false
@@ -259,8 +347,20 @@
                 isCarChecked = true
               }
             })
-
-            // 首先添加车辆
+            // carList.forEach(item => {
+            //   if (item.idCard === this.dataForm.idCard) {
+            //     isChecked = true
+            //   }
+            // })
+            //
+            // if (isChecked === true) {
+            //   this.$message.error('该身份证已经登记过，请检查')
+            //
+            //   this.$nextTick(() => {
+            //     this.btnLoading = false
+            //     this.readCard = false
+            //   })
+            // }else
             if (isCarChecked === true) {
               this.$message.error('该辆车已经登记过，请检查')
 
@@ -334,7 +434,6 @@
     width: 100%;
   }
   .dialog-footer {
-    margin-top: -20px;
     text-align: center;
   }
 </style>

diff --git a/config/dev.env.js b/config/dev.env.js
index 6b4622a..095ba33 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -8,4 +8,5 @@
   NODE_ENV: '"development"',
   // BASE_API: '"http://192.168.5.220:20311"'
   BASE_API: '"http://111.198.10.15:11631"'
+  // BASE_API: '"http://192.168.5.220:20311"'
 })
diff --git a/config/prod.env.js b/config/prod.env.js
index f2501d0..ccbc615 100644
--- a/config/prod.env.js
+++ b/config/prod.env.js
@@ -1,5 +1,6 @@
 'use strict'
 module.exports = {
   NODE_ENV: '"production"',
-  BASE_API: '"http://192.168.5.220:20311"'
+  // BASE_API: '"http://192.168.5.220:20311"'
+  BASE_API: '"http://111.198.10.15:11631"'
 }
diff --git a/favicon.ico b/favicon.ico
index 34b63ac..bc1bfc5 100644
--- a/favicon.ico
+++ b/favicon.ico
Binary files differ
diff --git a/src/api/visitor.js b/src/api/visitor.js
index 05ed6ea..01a6c26 100644
--- a/src/api/visitor.js
+++ b/src/api/visitor.js
@@ -74,3 +74,14 @@
   })
 }
 
+// 查询人员轨迹
+export function getDetail(devcode) {
+  return request({
+    url: '/device/capturePhoto',
+    method: 'post',
+    params:{
+      devcode: devcode
+    }
+  })
+}
+
diff --git a/src/assets/dashboard_images/icon-defence.png b/src/assets/dashboard_images/icon-defence.png
index 8069376..11b41cb 100644
--- a/src/assets/dashboard_images/icon-defence.png
+++ b/src/assets/dashboard_images/icon-defence.png
Binary files differ
diff --git a/src/utils/calendarUtil.js b/src/utils/calendarUtil.js
index da840c3..e599bdd 100644
--- a/src/utils/calendarUtil.js
+++ b/src/utils/calendarUtil.js
@@ -61,7 +61,32 @@
 
   return yearMonth + '-' + format(day)
 }
+export function formatDateTime(cellval) {
+  var dateVal = cellval + "";//把时间戳转成字符串格式
+  if (cellval != null) {
+    //取得时间戳部分 如：获取 /Date(1545299299910)/ 中的 1545299299910 部分
+    var date = new Date(parseInt(dateVal.replace("/Date(", "")
+      .replace(")/", ""), 10));
+    //获取年，不需要其他操作所以可以直接返回	date.getFullYear()
+    //月份为0-11，所以+1，月份小于10时补个0
+    var month = date.getMonth() + 1 < 10 ? "0"
+      + (date.getMonth() + 1) : date.getMonth() + 1;
+    //获取日
+    var currentDate = date.getDate() < 10 ? "0" + date.getDate()
+      : date.getDate();
+    //获取时间
+    var hours = date.getHours() < 10 ? "0" + date.getHours() : date
+      .getHours();
+    var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes()
+      : date.getMinutes();
+    var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds()
+      : date.getSeconds();
 
+    //返回日期结果，需要时间的话在加上时间
+    return date.getFullYear() + "-" + month + "-" + currentDate+" "+hours+":"+
+      minutes+":"+seconds;
+  }
+}
 // 格式化日期为字符串
 export function formatToString(value, level) {
   const date = new Date(value)
diff --git a/src/views/alarm/alarmDetail.vue b/src/views/alarm/alarmDetail.vue
index 2c94629..8c32ee5 100644
--- a/src/views/alarm/alarmDetail.vue
+++ b/src/views/alarm/alarmDetail.vue
@@ -1,7 +1,7 @@
 <!-- 报警详情 -->
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :model="dataForm" label-well-code="right" label-width="110px">
+    <el-form v-loading="loading" ref="dataForm" :model="dataForm" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="报警编号">
@@ -86,6 +86,7 @@
   name: 'AlarmDetail',
   data() {
     return {
+      loading: true,
       dialogFormVisible: false, // 对话框是否显示
       dialogStatus: '', // 对话框类型：create,update,detail
       dataForm: {
@@ -123,7 +124,7 @@
         this.dataForm = {
           id: row.id
         }
-
+        this.loading = true
         alarmDetail(this.dataForm.id).then(response => {
           if (response.code === 200) {
             this.dataForm = {
@@ -140,7 +141,7 @@
               reason: response.data.reason,
               remark: response.data.remark
             }
-
+            this.loading = false
             // 格式化报警状态
             if (response.data.valid === 1) {
               this.dataForm.validStr = '正在报警'
diff --git a/src/views/car/carAdd.vue b/src/views/car/carAdd.vue
index ddb215f..5f54c93 100644
--- a/src/views/car/carAdd.vue
+++ b/src/views/car/carAdd.vue
@@ -10,7 +10,7 @@
         </el-col>
         <el-col :span="12">
           <el-form-item label="车辆性质" prop="property">
-            <el-radio-group v-model="dataForm.property" :disabled="isDetailMode">
+            <el-radio-group v-model="dataForm.property" :disabled="isDetailMode" @change="resetOwner">
               <el-radio v-for="item in carProperties" :key="item.value" :label="item.value">{{ item.name }}</el-radio>
             </el-radio-group>
           </el-form-item>
@@ -106,6 +106,12 @@
     this.fetchStaffList()
   },
   methods: {
+    resetOwner(){
+      if(this.dataForm.property!=='2'){
+        this.dataForm.ownerId = ''
+        // this.dataForm.phone = ''
+      }
+    },
     // 初始化对话框
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.btnLoading = false
@@ -208,6 +214,7 @@
           }
         })
         this.dataForm.phone = selectedStaff[0].phone
+        this.dataForm.deptid = selectedStaff[0].deptid
       } else {
         this.dataForm.phone = ''
       }
diff --git a/src/views/car/carList.vue b/src/views/car/carList.vue
index 8d924ff..4ff07ab 100644
--- a/src/views/car/carList.vue
+++ b/src/views/car/carList.vue
@@ -105,11 +105,11 @@
           value: 'propertyStr',
           align: 'center'
         },
-        // {
-        //   text: '车主姓名',
-        //   value: 'ownerName',
-        //   align: 'center'
-        // },
+        {
+          text: '车主姓名',
+          value: 'ownerName',
+          align: 'center'
+        },
         {
           text: '车主联系电话',
           value: 'phone',
diff --git a/src/views/ctrl/index.vue b/src/views/ctrl/index.vue
index fd36f2b..29923af 100644
--- a/src/views/ctrl/index.vue
+++ b/src/views/ctrl/index.vue
@@ -50,12 +50,13 @@
         <in-out-today />
       </el-col>
 
-      <el-col :span="7" class="chart-block">
+      <el-col id="dev-count"  :span="10" class="chart-block">
         <div class="chart-title">各类型设备安装数量</div>
         <dev-count />
       </el-col>
 
-      <el-col id="pass-count" :span="10" class="chart-block">
+      <!--<el-col id="pass-count" class="chart-block">-->
+      <el-col :span="7" class="chart-block">
         <div class="chart-title">进出营数量统计</div>
         <in-out-count />
       </el-col>
@@ -121,7 +122,7 @@
 <style scoped>
   .app-wrapper {
     background-color: #e9e9e9;
-    padding-bottom: 20px;
+    padding-bottom: 10px;
   }
 
   .sub-data-block {
@@ -129,6 +130,7 @@
     border-radius: 16px;
     float: left;
     margin: 10px;
+    margin-bottom: 0px;
     box-shadow: 1px 1px 5px #999;
   }
   .sub-title {
@@ -136,36 +138,38 @@
     text-align: center;
     font-family: 'Microsoft YaHei';
     color: #fff;
-    font-size: 24px;
-    padding: 10px;
+    font-size: 20px;
+    padding-top: 10px;
+    padding-bottom: 0px;
   }
   .statis-block {
     text-align: center;
     margin: 0px 10px 0px 10px;
-    padding: 0px 10px 10px 10px;
+    padding: 0px 10px 5px 10px;
     color: #fff;
     font-weight: bold;
     letter-spacing: 1px;
-    font-size: 24px;
+    font-size: 20px;
   }
   .big-size {
-    font-size: 64px;
+    font-size: 35px;
   }
 
   .chart-title {
     font-family: 'Microsoft YaHei';
     color: #000000;
     font-weight: bold;
-    font-size: 20px;
+    font-size: 18px;
     text-align: center;
     padding: 10px;
   }
   .chart-block {
     margin-left: 20px;
-    margin-top: 20px;
+    margin-top: 10px;
     border-radius: 16px;
     background-color: #FFFFFF;
     box-shadow: 1px 1px 5px #999;
+    height: 37vh;
   }
 
   #today-visitor {
@@ -187,7 +191,7 @@
     background-image: linear-gradient(to right, #ffa800, #ce7e00);
   }
 
-  #pass-count, #dev-alarm-count {
+  #dev-count, #dev-alarm-count {
     width: calc(250vw / 6 - 70px);
   }
 </style>
diff --git a/src/views/ctrl/overview.vue b/src/views/ctrl/overview.vue
index 62e1105..49ed928 100644
--- a/src/views/ctrl/overview.vue
+++ b/src/views/ctrl/overview.vue
@@ -59,26 +59,52 @@
           <i v-else class="el-icon-arrow-down"/>
         </span>
       </div>
-      <transition name="el-collapse-transition">
-        <el-scrollbar
-          v-show="tableShow"
-          :style="{ visibility: tableShow ? 'visible' : 'hidden'}"
-          :class="{ moredatascollor: alarmList.length > 6 }"
-          :native="false">
-          <el-table
-            :data="alarmList"
-            class="alarm-list-table"
-            border
-            stripe
-            @row-click="alarmRowClick">
-            <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{ scope.row[column.value] }}
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-scrollbar>
-      </transition>
+      <div v-show="alarmList.length > 4 && tableShow">
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 32px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 231px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          height="200"
+          style="border-left: 1px solid #2470AC;"
+          v-if="tableShow"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-show="alarmList.length < 5 && tableShow">
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          v-if="tableShow"
+          style="border: 1px solid #2470AC"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
     </div>
 
     <!-- 中间平面图区域 -->
@@ -145,9 +171,13 @@
         class="point-camera"
         @click="detailDev(item, $event)" />
     </div>
-
     <!-- 平面图区域设备类型按钮 -->
-    <div v-show="showType" class="bottom-center" :style="{ width: cameraTypeNum*btnwidth + 'px'}">
+    <div class="bottom-center" :style="{ width: btnNum*btnwidth + 'px'}">
+        <el-col v-show="btnNum!==1" ref="all" class="dev-icon dev-type-selected" @click.native="selectDevByType('all', $event)">
+          <img v-if="checkDevType[0]" src="@/assets/overview_images/icons/icon-all-checked.png">
+          <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
+          <span>全部</span>
+        </el-col>
       <el-col class="dev-icon" @click.native="selectDevByType('4', $event)">
         <img id="4-1-img" v-if="checkDevType1[0]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="4-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
@@ -178,20 +208,6 @@
         <img id="11-2-img" v-else src="@/assets/overview_images/icons/half-camera-blue.png">
         <span>标准半球</span>
       </el-col>
-    </div>
-    <!-- 平面图区域设备类型按钮 -->
-    <div v-show="!showType"class="bottom-center" :style="{ width: btnNum*btnwidth + 'px'}">
-        <el-col ref="all" class="dev-icon dev-type-selected" @click.native="selectDevByType('all', $event)">
-          <img v-if="checkDevType[0]" src="@/assets/overview_images/icons/icon-all-checked.png">
-          <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
-          <span>全部</span>
-        </el-col>
-        <el-col ref="camera" :class="cameraClass" @click.native="showType=!showType;selectDevByType('camera', $event)">
-        <!--<el-col ref="camera" class="dev-icon" @click.native="selectDevByType('camera', $event)">-->
-          <img id="cam_img_red" v-if="checkDevType[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-          <img id="cam_img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-          <span>摄像头</span>
-        </el-col>
         <el-col v-show="showFence" class="dev-icon" @click.native="selectDevByType('fence', $event)">
           <img v-if="checkDevType[2]" src="@/assets/overview_images/icons/icon-fence-checked.png">
           <img v-else src="@/assets/overview_images/icons/icon-fence-unchecked.png">
@@ -372,7 +388,7 @@
           height: 789
         }, // 屏幕窗口尺寸
         imgUrl: require('../../assets/overview_images/icons/icon-camera-point.png'),
-        btnNum: 3,
+        btnNum: 8,
         cameraTypeNum: 6,
         btnwidth: 210,
         halfLeft: 0,
@@ -498,25 +514,25 @@
             }
           }
         }
-        //跟换菜单
-        var item = ['人脸识别','车牌轨迹','周界防护','标准数字','智能球形','标准半球']
-        for(var i=0;i<item.length;i++){
-          if(item[i]===val.target.innerText){
-            return
-          }
-        }
-        if(val.target.id.endsWith('-1-img')||val.target.id.endsWith('-2-img')|| val.target.id==='cam_img' || val.target.id==='cam_img_red'){
-          return
-        }
-        if( val.target.innerText!=='摄像头') {
-          this.showType = false
-          const devTypes = document.querySelectorAll('.dev-icon')
-            for(var i=0;i<this.checkDevType.length;i++) {
-              if (this.checkDevType[i]) {
-                devTypes[i+6].className += ' dev-type-selected'
-              }
-            }
-        }
+        // //跟换菜单
+        // var item = ['人脸识别','车牌轨迹','周界防护','标准数字','智能球形','标准半球']
+        // for(var i=0;i<item.length;i++){
+        //   if(item[i]===val.target.innerText){
+        //     return
+        //   }
+        // }
+        // if(val.target.id.endsWith('-1-img')||val.target.id.endsWith('-2-img')|| val.target.id==='cam_img' || val.target.id==='cam_img_red'){
+        //   return
+        // }
+        // if( val.target.innerText!=='摄像头') {
+        //   this.showType = false
+        //   const devTypes = document.querySelectorAll('.dev-icon')
+        //     for(var i=0;i<this.checkDevType.length;i++) {
+        //       if (this.checkDevType[i]) {
+        //         devTypes[i+6].className += ' dev-type-selected'
+        //       }
+        //     }
+        // }
       },
       webSocket() {
         const that = this
@@ -586,7 +602,7 @@
         }else if(pic==='3'){
           this.changeMap('tg_4_1')
         }else if(pic==='4'){
-          this.changeMap('tg_4_1')
+          this.changeMap('tg_4_5')
         }
         setTimeout(() => {
           var obj = document.getElementById(val.toString());
@@ -771,7 +787,11 @@
           this.checkDevType1 = [false, false, false, false, false, false]
           // 添加选中的样式
           if (typeof event === 'undefined') {
-            devTypes[6].className += ' dev-type-selected'
+            if(this.btnNum===1){
+              devTypes[1].className += ' dev-type-selected'
+            }else{
+              devTypes[0].className += ' dev-type-selected'
+            }
           } else {
             event.currentTarget.className += ' dev-type-selected'
           }
@@ -1017,7 +1037,7 @@
           this.isMain = true
           // this.devListParams.picture = '1'
           this.imgSizeOriginal = { width: 2245, height: 1586 }
-          this.btnNum  = 3
+          this.btnNum  = 8
           this.cameraTypeNum  = 6
           this.showFence = true // 显示电子围栏
           this.showTemp = false // 隐藏温湿度设备
@@ -1027,6 +1047,7 @@
           this.showSubTabGuider = false
           this.showFloorThree = false
           this.showFloorFour = false
+          this.selectDevByType('all')
         } else if (index === 'tg_3_1') {
           this.bgImageSrc = tg_3_1
           // this.devListParams.picture = '2'
@@ -1037,6 +1058,7 @@
           this.showTemp = true // 隐藏温湿度
           this.showSmoking = true // 隐藏烟感
           this.showSound = true // 隐藏声光报警器
+          this.selectDevByType('all')
         } else if (index === 'tg_4_1') {
           this.bgImageSrc = tg_4_1
           // this.devListParams.picture = '3'
@@ -1048,18 +1070,19 @@
           this.showTemp = true // 显示温湿度
           this.showSmoking = true // 显示烟感
           this.showSound = true // 显示声光报警器
+          this.selectDevByType('all')
         } else if (index === 'tg_4_5') {
           this.bgImageSrc = tg_4_5
           // this.devListParams.picture = '4'
           this.imgSizeOriginal = { width: 2245, height: 1586 }
-          this.btnNum  = 2
+          this.btnNum  = 1
           this.cameraTypeNum  = 1
           this.showFence = false // 隐藏电子围栏
           this.showTemp = false // 隐藏温湿度
           this.showSmoking = false // 隐藏烟感
           this.showSound = false // 隐藏声光报警器
+          this.selectDevByType('4')
         }
-        this.selectDevByType('all')
       },
       // 查询并显示设备详情
       detailDev(dev, event) {
@@ -1201,10 +1224,14 @@
     left: 50%; transform: translateX(-50%);
     bottom: 25px;
   }
+  .tableLine {
+    margin-top: 9px;
+    width: 463px;
+  }
   .main-page {
     background-size: cover;
     background-color: #023d83;
-    height: 100vh;
+    height: 98vh;
   }
 
   .main-header {
@@ -1362,16 +1389,24 @@
         margin-left: 20px;
       }
     }
-    .el-scrollbar {
-      /*height: 200px;*/
-      width: 100%;
+    // 滚动条的滑块
+    /deep/ .el-table__body-wrapper  {
+      background-color: #023D83;
+      border: 0px solid white;
     }
-    .moredatascollor {
-      height: 200px;
+    /deep/ .el-table--border th.gutter:last-of-type {
+      border: 1px solid #023D83;
+      border-bottom-width: 1px;
+      background-color: #023D83;
     }
-    .el-scrollbar__wrap {
-      overflow-y: auto;
-      overflow-x: hidden;
+    /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
+      background-color: #023D83;
+    }
+    /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+      display: none;
+    }
+    /deep/ .el-scrollbar__wrap {
+      overflow-x: hidden !important;
       margin-bottom: 0px !important;
     }
     .el-table {
@@ -1405,16 +1440,25 @@
     font-size: 15px;
     color: #FFFFFF;
     font-weight: normal;
+    border-color: #2470AC;
   }
-
+  .el-table--border::after, .el-table--group::after, .el-table::before{
+    background-color: #023d83;
+  }
+  .alarm-now-block /deep/ .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
+    border-color: #023d83;
+  }
   .alarm-now-block /deep/ .el-table__row td {
     background-color: #023D83;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ .el-table__body tr:hover > td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ tr.el-table__row--striped td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
 
   .map-tab {
@@ -1601,6 +1645,10 @@
   /*}*/
 
   @media(max-width: 1440px) {
+    .tableLine {
+      margin-top: 0px;
+      width: 343px;
+    }
     .main-title {
       height: 65px;
       padding-top: 16px;
diff --git a/src/views/ctrl/statCharts/devAlarmCount.vue b/src/views/ctrl/statCharts/devAlarmCount.vue
index 7bea059..6b6939e 100644
--- a/src/views/ctrl/statCharts/devAlarmCount.vue
+++ b/src/views/ctrl/statCharts/devAlarmCount.vue
@@ -1,5 +1,6 @@
+<!--suppress ALL -->
 <template>
-  <div>
+  <div style="height: 90%">
     <el-date-picker
       v-model="timeRange"
       :picker-options="pickerOptions"
@@ -7,15 +8,16 @@
       range-separator="至"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
-      style="margin-bottom: 10px;" />
-    <ve-histogram :data="chartData" :settings="settings" height="350px" />
+      style="margin-bottom: 10px;z-index: 10000"
+      size="small"/>
+    <ve-histogram :data="chartData" :settings="settings" :extend="chartExtend" style="margin-top: -50px" height="100%"/>
   </div>
 </template>
 
 <script>
-import { formatToString, getDate, oneDayTime } from '@/utils/calendarUtil'
-import { devAlarmCount } from '@/api/statistics'
 
+import { devAlarmCount } from '@/api/statistics'
+import { formatToString, parseToDate, getDate, oneDayTime } from '@/utils/calendarUtil'
 const now = new Date()
 
 export default {
@@ -30,12 +32,22 @@
         columns: ['name', 'count'],
         rows: []
       },
+      chartExtend: {
+        series: {
+          barMaxWidth: 50
+        },
+        grid: {
+          containLabel: true,
+          bottom: '10%'
+        }
+      },
       settings: {
         labelMap: {
           'name': '设备类型',
-          'count': '报警数量'
+          'count': ''
         },
-        max: [4]
+        max: [4],
+        area: false
       },
       timeRange: [],
       pickerOptions: {
@@ -99,6 +111,13 @@
       devAlarmCount(this.params).then(response => {
         if (response.code === 200) {
           this.chartData.rows = response.data
+          var max = 4
+          for(var i=0;i<response.data.length;i++){
+            if(Number(response.data[i].count)>max){
+              max = Number(response.data[i].count)
+            }
+          }
+          this.settings.max = [max]
         }
       })
     }
diff --git a/src/views/ctrl/statCharts/devCount.vue b/src/views/ctrl/statCharts/devCount.vue
index d3e2902..db55fbe 100644
--- a/src/views/ctrl/statCharts/devCount.vue
+++ b/src/views/ctrl/statCharts/devCount.vue
@@ -1,5 +1,6 @@
 <template>
-  <ve-ring :data="chartData" :settings="settings" />
+  <ve-histogram :data="chartData" :settings="settings" :extend="chartExtend" style="margin-top: -20px" height="100%"/>
+  <!--<ve-ring :data="chartData" :settings="settings" />-->
 </template>
 
 <script>
@@ -9,14 +10,55 @@
   name: 'DevCount',
   data() {
     return {
+      chartExtend: {
+        series: {
+          barMaxWidth: 50
+        },
+        xAxis: {
+          axisLabel: {
+            interval: 0,
+            //换行显示
+            formatter: function(value) {
+              let result = ""; //拼接加\n返回的类目项
+              let maxLength = 2; //每项显示文字个数
+              let valLength = value.length; //X轴类目项的文字个数
+              let rowNumber = Math.ceil(valLength / maxLength); //类目项需要换行的行数
+              if (rowNumber > 1) {
+                //如果文字大于3,
+                for (let i = 0; i < rowNumber; i++) {
+                  let temp = ""; //每次截取的字符串
+                  let start = i * maxLength; //开始截取的位置
+                  let end = start + maxLength; //结束截取的位置
+                  temp = value.substring(start, end) + "\n";
+                  result += temp; //拼接生成最终的字符串
+                }
+                return "{labelText|" + result + "}";
+              } else {
+                return "{labelText|" + value + "}";
+              }
+            },
+            rich: {
+              labelText: {
+                lineHeight: 18
+              }
+            }
+          }
+        }
+      },
       chartData: {
         columns: ['name', 'count'],
         rows: []
       },
       settings: {
-        // legendLimit: 4
-        radius: [60, 100]
-      }
+        labelMap: {
+          'name': '设备类型',
+          'count': ''
+        }
+      },
+      // settings: {
+      //   // legendLimit: 4
+      //   radius: [60, 100]
+      // }
     }
   },
   activated() {
@@ -26,6 +68,9 @@
     fetchData() {
       devCount().then(response => {
         if (response.code === 200) {
+          for(var i=0;i<response.data.length;i++){
+            response.data[i].name = response.data[i].name.replace('防护','')
+          }
           this.chartData.rows = response.data
         }
       })
diff --git a/src/views/ctrl/statCharts/inOutCount.vue b/src/views/ctrl/statCharts/inOutCount.vue
index 502157e..d65ec69 100644
--- a/src/views/ctrl/statCharts/inOutCount.vue
+++ b/src/views/ctrl/statCharts/inOutCount.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="height: 100%">
     <el-date-picker
       v-model="timeRange"
       :picker-options="pickerOptions"
@@ -7,8 +7,9 @@
       range-separator="至"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
-      style="margin-bottom: 10px"/>
-    <ve-line :data="chartData" :settings="settings" height="350px" />
+      size="small"
+      style="margin-bottom: 10px;z-index: 10000"/>
+    <ve-line :data="chartData" :settings="settings" :extend="barExtend" style="margin-top: -50px;" height="93%"/>
   </div>
 </template>
 
@@ -30,6 +31,17 @@
         columns: ['date', 'staff', 'visitor', 'car', 'visitorCar'],
         rows: []
       },
+
+      barExtend:{
+        legend:{  // 隐藏图例
+          x: 'center',
+          y: 'bottom'
+        },
+        grid: {
+          containLabel: true,
+          bottom: '10%'
+        },
+      },
       settings: {
         labelMap: {
           'staff': '内部人员',
@@ -37,11 +49,11 @@
           'car': '内部车辆',
           'visitorCar': '来访车辆'
         },
-        xAxisType: 'time',
+        // xAxisType: 'time',
         max: [4],
         area: false,
         metrics: ['staff', 'visitor', 'car', 'visitorCar'],
-        dimension: ['date']
+        dimension: ['date'],
       },
       timeRange: [],
       pickerOptions: {
@@ -106,7 +118,7 @@
         if (response.code === 200) {
           const data = this.parseStatisticsData(response.data)
           this.chartData.rows = data.rowDatas
-          this.chartData.max = [data.maxCount]
+          this.settings.max = [data.maxCount]
         }
       })
     },
@@ -164,7 +176,7 @@
 
         if (typeof visitorCar !== 'undefined') {
           if (visitorCar.date === date) {
-            visitorCarCount = car.count
+            visitorCarCount = visitorCar.count
             indexVc++
           }
         }
@@ -172,6 +184,18 @@
         if (staffCount + visitorCount + carCount + visitorCarCount > 0) {
           rowDatas.push({ date: date, staff: staffCount, visitor: visitorCount, car: carCount, visitorCar: visitorCarCount })
         }
+        if(maxCount<staffCount){
+          maxCount = staffCount
+        }
+        if(maxCount<visitorCount){
+          maxCount = visitorCount
+        }
+        if(maxCount<carCount){
+          maxCount = carCount
+        }
+        if(maxCount<visitorCarCount){
+          maxCount = visitorCarCount
+        }
         start += oneDayTime
       }
 
diff --git a/src/views/ctrl/statCharts/inOutDoorCount.vue b/src/views/ctrl/statCharts/inOutDoorCount.vue
index ab28cdd..93f3458 100644
--- a/src/views/ctrl/statCharts/inOutDoorCount.vue
+++ b/src/views/ctrl/statCharts/inOutDoorCount.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="height: 100%">
     <el-date-picker
       v-model="timeRange"
       :picker-options="pickerOptions"
@@ -7,8 +7,9 @@
       range-separator="至"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
-      style="margin-bottom: 10px;" />
-    <ve-histogram :data="chartData" :settings="settings" height="350px" />
+      style="margin-bottom: 10px;z-index: 10000"
+      size="small"/>
+    <ve-histogram :data="chartData" :settings="settings" :extend="chartExtend" style="margin-top: -50px"height="93%"/>
   </div>
 </template>
 
@@ -26,11 +27,26 @@
         beginDate: '',
         endDate: ''
       },
+      chartExtend: {
+        legend:{  // 隐藏图例
+          x: 'center',
+          y: 'bottom'
+        },
+        grid: {
+          containLabel: true,
+          bottom: '10%'
+        },
+        series: {
+          barMaxWidth: 50,
+          center: ['50%', '50%']
+        }
+      },
       chartData: {
         columns: ['name', 'person', 'car'],
         rows: []
       },
       settings: {
+        radius: [60, 100],
         labelMap: {
           'person': '人员',
           'car': '车辆'
@@ -102,7 +118,7 @@
         if (response.code === 200) {
           const data = this.parseStatisticsData(response.data)
           this.chartData.rows = data.rowDatas
-          this.chartData.max = [data.maxCount]
+          this.settings.max = [data.maxCount]
         }
       })
     },
diff --git a/src/views/ctrl/statCharts/inOutKeyCount.vue b/src/views/ctrl/statCharts/inOutKeyCount.vue
index fa9a0b7..10108d6 100644
--- a/src/views/ctrl/statCharts/inOutKeyCount.vue
+++ b/src/views/ctrl/statCharts/inOutKeyCount.vue
@@ -1,5 +1,7 @@
 <template>
-  <ve-ring :data="chartData" :settings="settings" />
+  <div style="height: 100%">
+    <ve-ring :data="chartData" :settings="settings" :extend="chartExtend"  height="90%"/>
+  </div>
 </template>
 
 <script>
@@ -9,6 +11,19 @@
   name: 'InOutKeyCount',
   data() {
     return {
+      chartExtend: {
+        legend:{  // 隐藏图例
+          x: 'center',
+          y: 'top'
+        },
+        grid: {
+          containLabel: true,
+          top: '10%'
+        },
+        series: {
+          center: ['50%', '50%']
+        }
+      },
       chartData: {
         columns: ['name', 'count'],
         rows: []
diff --git a/src/views/ctrl/statCharts/inOutToday.vue b/src/views/ctrl/statCharts/inOutToday.vue
index c37fa7b..ae67856 100644
--- a/src/views/ctrl/statCharts/inOutToday.vue
+++ b/src/views/ctrl/statCharts/inOutToday.vue
@@ -1,5 +1,7 @@
 <template>
-  <ve-ring :data="chartData" :settings="settings" />
+  <div style="height: 100%">
+    <ve-ring :data="chartData" :settings="settings" :extend="chartExtend"  height="90%"/>
+  </div>
 </template>
 
 <script>
@@ -18,6 +20,15 @@
           { count: 1, name: '来访车辆' }
         ]
       },
+      chartExtend: {
+        legend:{  // 隐藏图例
+          x: 'center',
+          y: 'top'
+        },
+        series: {
+          center: ['50%', '50%']
+        }
+      },
       settings: {
         radius: [60, 100]
       }
diff --git a/src/views/deviceManage/deviceDetail.vue b/src/views/deviceManage/deviceDetail.vue
index 701052d..8245327 100644
--- a/src/views/deviceManage/deviceDetail.vue
+++ b/src/views/deviceManage/deviceDetail.vue
@@ -9,7 +9,7 @@
         <!--</el-col>-->
         <el-col :span="12">
           <el-form-item label="设备编号">
-            <el-input v-model.trim="dataForm.name" disabled type="text"/>
+            <el-input v-model.trim="dataForm.devcode" disabled type="text"/>
             <!--<span>{{ dataForm.devcode }}</span>-->
           </el-form-item>
         </el-col>
diff --git a/src/views/layout/components/AppHeader.vue b/src/views/layout/components/AppHeader.vue
index c3235b4..2e45954 100644
--- a/src/views/layout/components/AppHeader.vue
+++ b/src/views/layout/components/AppHeader.vue
@@ -1,12 +1,12 @@
 <template>
   <!--<div :style="{backgroundImage:'url('+headerUrl+')'}" class="app-header">-->
   <div style="background-color: #0078ff;" class="app-header">
-    <h3>{{ title }}</h3>
+    <h3 @click="backToIndex">{{ title }}</h3>
     <!--子系统选项-->
     <el-dropdown class="systemSelect" @command="handleCommand">
       <span class="el-dropdown-link" style="color: white">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
       </span>
-      <el-dropdown-menu slot="dropdown" >
+      <el-dropdown-menu slot="dropdown" style="z-index: 10000" >
         <el-dropdown-item>
           <span style="display:block;" @click="backToIndex">回首页</span>
         </el-dropdown-item>
@@ -15,7 +15,7 @@
     </el-dropdown>
 
     <div v-show="currentSystem.code === 'ctrl'" class="back-to-overview">
-      <el-button type="info" round @click="backToOverview">运行总览</el-button>
+      <el-button type="info" round @click="backToOverview" style="background-color: rgba(255,255,255,0.31);border: 0px">运行总览</el-button>
     </div>
 
     <el-dropdown class="avatar-container">
diff --git a/src/views/overview/doorIndex.vue b/src/views/overview/doorIndex.vue
index 5d2dce2..7cd40ff 100644
--- a/src/views/overview/doorIndex.vue
+++ b/src/views/overview/doorIndex.vue
@@ -58,26 +58,51 @@
           <i v-else class="el-icon-arrow-down"/>
         </span>
       </div>
-      <transition name="el-collapse-transition">
-        <el-scrollbar
-          v-show="tableShow"
-          :style="{ visibility: tableShow ? 'visible' : 'hidden'}"
-          :class="{ moredatascollor: alarmList.length > 6 }"
-          :native="false">
-          <el-table
-            :data="alarmList"
-            class="alarm-list-table"
-            border
-            stripe
-            @row-click="alarmRowClick">
-            <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{ scope.row[column.value] }}
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-scrollbar>
-      </transition>
+      <div v-show="alarmList.length > 4 && tableShow">
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 32px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 231px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          height="200"
+          style="border-left: 1px solid #2470AC;"
+          v-if="tableShow"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-show="alarmList.length < 5 && tableShow">
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          v-if="tableShow"
+          style="border: 1px solid #2470AC"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
     </div>
 
     <!-- 中间平面图区域 -->
@@ -730,9 +755,12 @@
   .main-page {
     background-size: cover;
     background-color: #023d83;
-    height: 100vh;
+    height: 98vh;
   }
-
+  .tableLine {
+    margin-top: 9px;
+    width: 463px;
+  }
   .main-header {
     width: 100vw;
   }
@@ -863,16 +891,24 @@
         margin-left: 20px;
       }
     }
-    .el-scrollbar {
-      /*height: 200px;*/
-      width: 100%;
+    // 滚动条的滑块
+    /deep/ .el-table__body-wrapper  {
+      background-color: #023D83;
+      border: 0px solid white;
     }
-    .moredatascollor {
-      height: 200px;
+    /deep/ .el-table--border th.gutter:last-of-type {
+      border: 1px solid #023D83;
+      border-bottom-width: 1px;
+      background-color: #023D83;
     }
-    .el-scrollbar__wrap {
-      overflow-y: auto;
-      overflow-x: hidden;
+    /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
+      background-color: #023D83;
+    }
+    /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+      display: none;
+    }
+    /deep/ .el-scrollbar__wrap {
+      overflow-x: hidden !important;
       margin-bottom: 0px !important;
     }
     .el-table {
@@ -906,16 +942,25 @@
     font-size: 15px;
     color: #FFFFFF;
     font-weight: normal;
+    border-color: #2470AC;
   }
-
+  .el-table--border::after, .el-table--group::after, .el-table::before{
+    background-color: #023d83;
+  }
+  .alarm-now-block /deep/ .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
+    border-color: #023d83;
+  }
   .alarm-now-block /deep/ .el-table__row td {
     background-color: #023D83;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ .el-table__body tr:hover > td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ tr.el-table__row--striped td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
 
   .map-tab {
@@ -1091,6 +1136,10 @@
   /*}*/
 
   @media(max-width: 1440px) {
+    .tableLine {
+      margin-top: 0px;
+      width: 343px;
+    }
     .main-title {
       height: 65px;
       padding-top: 16px;
diff --git a/src/views/overview/fenceIndex.vue b/src/views/overview/fenceIndex.vue
index 9466288..62a35e8 100644
--- a/src/views/overview/fenceIndex.vue
+++ b/src/views/overview/fenceIndex.vue
@@ -58,26 +58,52 @@
           <i v-else class="el-icon-arrow-down"/>
         </span>
       </div>
-      <transition name="el-collapse-transition">
-        <el-scrollbar
-          v-show="tableShow"
-          :style="{ visibility: tableShow ? 'visible' : 'hidden'}"
-          :class="{ moredatascollor: alarmList.length > 6 }"
-          :native="false">
-          <el-table
-            :data="alarmList"
-            class="alarm-list-table"
-            border
-            stripe
-            @row-click="alarmRowClick">
-            <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{ scope.row[column.value] }}
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-scrollbar>
-      </transition>
+      <div v-show="alarmList.length > 4 && tableShow">
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 32px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 231px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          height="200"
+          style="border-left: 1px solid #2470AC;"
+          v-if="tableShow"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-show="alarmList.length < 5 && tableShow">
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          v-if="tableShow"
+          style="border: 1px solid #2470AC"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
     </div>
 
     <!-- 中间平面图区域 -->
@@ -725,10 +751,14 @@
       font-weight: normal;
     }
   }
+  .tableLine {
+    margin-top: 9px;
+    width: 463px;
+  }
   .main-page {
     background-size: cover;
     background-color: #023d83;
-    height: 100vh;
+    height: 98vh;
   }
 
   .main-header {
@@ -859,16 +889,24 @@
         margin-left: 20px;
       }
     }
-    .el-scrollbar {
-      /*height: 200px;*/
-      width: 100%;
+    // 滚动条的滑块
+    /deep/ .el-table__body-wrapper  {
+      background-color: #023D83;
+      border: 0px solid white;
     }
-    .moredatascollor {
-      height: 200px;
+    /deep/ .el-table--border th.gutter:last-of-type {
+      border: 1px solid #023D83;
+      border-bottom-width: 1px;
+      background-color: #023D83;
     }
-    .el-scrollbar__wrap {
-      overflow-y: auto;
-      overflow-x: hidden;
+    /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
+      background-color: #023D83;
+    }
+    /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+      display: none;
+    }
+    /deep/ .el-scrollbar__wrap {
+      overflow-x: hidden !important;
       margin-bottom: 0px !important;
     }
     .el-table {
@@ -902,16 +940,25 @@
     font-size: 15px;
     color: #FFFFFF;
     font-weight: normal;
+    border-color: #2470AC;
   }
-
+  .el-table--border::after, .el-table--group::after, .el-table::before{
+    background-color: #023d83;
+  }
+  .alarm-now-block /deep/ .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
+    border-color: #023d83;
+  }
   .alarm-now-block /deep/ .el-table__row td {
     background-color: #023D83;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ .el-table__body tr:hover > td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ tr.el-table__row--striped td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
 
   .map-tab {
@@ -1087,6 +1134,10 @@
   /*}*/
 
   @media(max-width: 1440px) {
+    .tableLine {
+      margin-top: 0px;
+      width: 343px;
+    }
     .main-title {
       height: 65px;
       padding-top: 16px;
diff --git a/src/views/overview/keyIndex.vue b/src/views/overview/keyIndex.vue
index 37405a8..a461c94 100644
--- a/src/views/overview/keyIndex.vue
+++ b/src/views/overview/keyIndex.vue
@@ -33,20 +33,6 @@
             <span v-text="dev.alarm"/>
           </div>
         </el-col>
-
-        <!--<el-col :span="6" class="sub-data-block dev-offline">-->
-          <!--<div class="statis-block">-->
-            <!--<span v-text="dev.offLine"/>-->
-          <!--</div>-->
-          <!--<div class="sub-title">离线</div>-->
-        <!--</el-col>-->
-
-        <!--<el-col :span="6" class="sub-data-block dev-closed">-->
-          <!--<div class="statis-block">-->
-            <!--<span v-text="dev.closed"/>-->
-          <!--</div>-->
-          <!--<div class="sub-title">关闭</div>-->
-        <!--</el-col>-->
       </el-row>
     </div>
 
@@ -58,26 +44,52 @@
           <i v-else class="el-icon-arrow-down"/>
         </span>
       </div>
-      <transition name="el-collapse-transition">
-        <el-scrollbar
-          v-show="tableShow"
-          :style="{ visibility: tableShow ? 'visible' : 'hidden'}"
-          :class="{ moredatascollor: alarmList.length > 6 }"
-          :native="false">
-          <el-table
-            :data="alarmList"
-            class="alarm-list-table"
-            border
-            stripe
-            @row-click="alarmRowClick">
-            <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{ scope.row[column.value] }}
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-scrollbar>
-      </transition>
+      <div v-show="alarmList.length > 4 && tableShow">
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 32px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 231px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          height="200"
+          style="border-left: 1px solid #2470AC;"
+          v-if="tableShow"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-show="alarmList.length < 5 && tableShow">
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          v-if="tableShow"
+          style="border: 1px solid #2470AC"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
     </div>
 
     <!-- 中间平面图区域 -->
@@ -95,49 +107,16 @@
     </div>
 
     <!-- 平面图区域设备类型按钮 -->
-    <div v-show="showType" class="bottom-center" :style="{ width: btnwidth + 'px'}">
-      <el-col class="dev-icon" @click.native="selectDevByType('4', $event)">
-        <img id="4-1-img" v-if="checkDevType1[0]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-        <img id="4-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-        <span>人脸识别</span>
-      </el-col>
-      <!--<el-col class="dev-icon" @click.native="selectDevByType('5', $event)">-->
-        <!--<img id="5-1-img" v-if="checkDevType1[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
-        <!--<img id="5-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
-        <!--<span>车牌轨迹</span>-->
-      <!--</el-col>-->
-      <!--<el-col class="dev-icon" @click.native="selectDevByType('8', $event)">-->
-        <!--<img id="8-1-img" v-if="checkDevType1[2]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
-        <!--<img id="8-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
-        <!--<span>周界防护</span>-->
-      <!--</el-col>-->
-      <!--<el-col class="dev-icon" @click.native="selectDevByType('9', $event)">-->
-        <!--<img id="9-1-img" v-if="checkDevType1[3]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
-        <!--<img id="9-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
-        <!--<span>标准数字</span>-->
-      <!--</el-col>-->
-      <!--<el-col class="dev-icon" @click.native="selectDevByType('10', $event)">-->
-        <!--<img id="10-1-img" v-if="checkDevType1[4]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
-        <!--<img id="10-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
-        <!--<span>智能球形</span>-->
-      <!--</el-col>-->
-      <!--<el-col class="dev-icon" @click.native="selectDevByType('11', $event)">-->
-        <!--<img id="11-1-img" v-if="checkDevType1[5]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
-        <!--<img id="11-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
-        <!--<span>标准半球</span>-->
-      <!--</el-col>-->
-    </div>
-    <!-- 平面图区域设备类型按钮 -->
     <div v-show="!showType"class="bottom-center" :style="{ width: cameraTypeNum*btnwidth + 'px'}">
       <el-col ref="all" class="dev-icon dev-type-selected" @click.native="selectDevByType('all', $event)">
         <img v-if="checkDevType[0]" src="@/assets/overview_images/icons/icon-all-checked.png">
         <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
         <span>全部</span>
       </el-col>
-      <el-col ref="camera" :class="cameraClass" @click.native="showType=!showType;selectDevByType('camera', $event)">
-        <img id="cam_img_red" v-if="checkDevType[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-        <img id="cam_img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-        <span>摄像头</span>
+      <el-col class="dev-icon" @click.native="selectDevByType('camera4', $event)">
+        <img id="4-1-img" v-if="checkDevType[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
+        <img id="4-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
+        <span>人脸识别</span>
       </el-col>
       <el-col v-show="showTemp" class="dev-icon" @click.native="selectDevByType('temperature', $event)">
         <img v-if="checkDevType[2]" src="@/assets/overview_images/icons/icon-temperature-checked.png">
@@ -364,7 +343,6 @@
       }, // 设备详情表单
       cameraClass:'dev-icon',
       showType : false,
-      checkDevType1: [false, false, false, false, false, false], // 摄像头类型
       checkDevType: [true, false, false, false, false] // 选中设备类型
     }
   },
@@ -462,7 +440,7 @@
       }else if(pic==='3'){
         this.changeMap('tg_4_1')
       }else if(pic==='4'){
-        this.changeMap('tg_4_1')
+        this.changeMap('tg_4_5')
       }
       setTimeout(() => {
         var obj = document.getElementById(val.toString());
@@ -477,24 +455,6 @@
     handleKeyup(val){ //单击收起摄像头分类
       this.showAlarmDetail  = false
       this.showDevDetail  = false
-      var item = ['人脸识别']
-      for(var i=0;i<item.length;i++){
-        if(item[i]===val.target.innerText){
-          return
-        }
-      }
-      if(val.target.id.endsWith('-1-img')||val.target.id.endsWith('-2-img')|| val.target.id==='cam_img' || val.target.id==='cam_img_red'){
-        return
-      }
-      if( val.target.innerText!=='摄像头') {
-        this.showType = false
-        const devTypes = document.querySelectorAll('.dev-icon')
-        for(var i=0;i<this.checkDevType.length;i++) {
-          if (this.checkDevType[i]) {
-            devTypes[i+1].className += ' dev-type-selected'
-          }
-        }
-      }
     },
     handleSelect(key, keyPath) {
       this.selectDevByType(key,undefined)
@@ -643,14 +603,13 @@
       if(type !== 'camera'){
         // 添加选中的样式
         if (typeof event === 'undefined') {
-          devTypes[1].className += ' dev-type-selected'
+          devTypes[0].className += ' dev-type-selected'
         } else {
           event.currentTarget.className += ' dev-type-selected'
         }
       }
       if(type!=='camera'){
         this.checkDevType = [false, false, false, false, false]
-        this.checkDevType1 = [false, false, false, false, false, false]
       }
       if (type === 'all') {
         if(this.bgImageSrc===tg_4_5){
@@ -660,14 +619,7 @@
         }
         // this.devListParams.deviceTypes = []
         this.checkDevType[0] = true
-      } else if(type==='camera'){
-        for(var i=0;i<this.checkDevType1.length;i++){
-          if(this.checkDevType1[i]) {
-            devTypes[i].className += ' dev-type-selected'
-          }
-        }
-        return
-      } else if (type === 'temperature') {
+      }  else if (type === 'temperature') {
         this.devListParams.deviceTypes = temperatureTypes.toString()
         this.checkDevType[2] = true
       } else if (type === 'smoking') {
@@ -676,30 +628,24 @@
       } else if (type === 'sound') {
         this.devListParams.deviceTypes = soundTypes.toString()
         this.checkDevType[4] = true
-      }else if(type === '4'){
+      }else if(type === 'camera4'){
         this.devListParams.deviceTypes = '4'
         this.checkDevType[1] = true
-        this.checkDevType1[0] = true
       }else if(type === '5'){
         this.devListParams.deviceTypes = '5'
         this.checkDevType[1] = true
-        this.checkDevType1[1] = true
       }else if(type === '8'){
         this.devListParams.deviceTypes = '8'
         this.checkDevType[1] = true
-        this.checkDevType1[2] = true
       }else if(type === '9'){
         this.devListParams.deviceTypes = '9'
         this.checkDevType[1] = true
-        this.checkDevType1[3] = true
       }else if(type === '10'){
         this.devListParams.deviceTypes = '10'
         this.checkDevType[1] = true
-        this.checkDevType1[4] = true
       }else if(type === '11'){
         this.devListParams.deviceTypes = '11'
         this.checkDevType[1] = true
-        this.checkDevType1[5] = true
       }
       this.fetchDeviceData()
       // if(this.checkDevType[1]){
@@ -866,18 +812,13 @@
       }else{
         this.devListParams.deviceTypes = '1,2,4,12'
       }
-      // this.devListParams.deviceTypes = []
       if (index === 'tg_main') {
-        // this.imgSizeOriginal = { width: 2245, height: 1586 }
         this.devListParams.picture = '1'
       }else if (index === 'tg_3_1') {
-        // this.imgSizeOriginal = { width: 2245, height: 1586 }
         this.devListParams.picture = '2'
       } else if (index === 'tg_4_1') {
-        // this.imgSizeOriginal = { width: 2218, height: 2169 }
         this.devListParams.picture = '3'
       }else if (index === 'tg_4_5') {
-        // this.imgSizeOriginal = { width: 2245, height: 1586 }
         this.devListParams.picture = '4'
       }
       overviewDeviceList(this.devListParams).then(response => {
@@ -1060,10 +1001,14 @@
   /deep/ .el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
     border-bottom-width: 0px;
   }
+  .tableLine {
+    margin-top: 9px;
+    width: 463px;
+  }
   .main-page {
     background-size: cover;
     background-color: #023d83;
-    height: 100vh;
+    height: 98vh;
   }
 
   .main-header {
@@ -1194,16 +1139,24 @@
         margin-left: 20px;
       }
     }
-    .el-scrollbar {
-      /*height: 200px;*/
-      width: 100%;
+    // 滚动条的滑块
+    /deep/ .el-table__body-wrapper  {
+      background-color: #023D83;
+      border: 0px solid white;
     }
-    .moredatascollor {
-      height: 200px;
+    /deep/ .el-table--border th.gutter:last-of-type {
+      border: 1px solid #023D83;
+      border-bottom-width: 1px;
+      background-color: #023D83;
     }
-    .el-scrollbar__wrap {
-      overflow-y: auto;
-      overflow-x: hidden;
+    /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
+      background-color: #023D83;
+    }
+    /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+      display: none;
+    }
+    /deep/ .el-scrollbar__wrap {
+      overflow-x: hidden !important;
       margin-bottom: 0px !important;
     }
     .el-table {
@@ -1237,16 +1190,25 @@
     font-size: 15px;
     color: #FFFFFF;
     font-weight: normal;
+    border-color: #2470AC;
   }
-
+  .el-table--border::after, .el-table--group::after, .el-table::before{
+    background-color: #023d83;
+  }
+  .alarm-now-block /deep/ .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
+    border-color: #023d83;
+  }
   .alarm-now-block /deep/ .el-table__row td {
     background-color: #023D83;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ .el-table__body tr:hover > td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ tr.el-table__row--striped td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
 
   .map-tab {
@@ -1431,6 +1393,10 @@
   /*}*/
 
   @media(max-width: 1440px) {
+    .tableLine {
+      margin-top: 0px;
+      width: 343px;
+    }
     .main-title {
       height: 65px;
       padding-top: 16px;
diff --git a/src/views/overview/regionIndex.vue b/src/views/overview/regionIndex.vue
index 69e7606..d4ea083 100644
--- a/src/views/overview/regionIndex.vue
+++ b/src/views/overview/regionIndex.vue
@@ -58,26 +58,52 @@
           <i v-else class="el-icon-arrow-down"/>
         </span>
       </div>
-      <transition name="el-collapse-transition">
-        <el-scrollbar
-          v-show="tableShow"
-          :style="{ visibility: tableShow ? 'visible' : 'hidden'}"
-          :class="{ moredatascollor: alarmList.length > 6 }"
-          :native="false">
-          <el-table
-            :data="alarmList"
-            class="alarm-list-table"
-            border
-            stripe
-            @row-click="alarmRowClick">
-            <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{ scope.row[column.value] }}
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-scrollbar>
-      </transition>
+      <div v-show="alarmList.length > 4 && tableShow">
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 32px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 231px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          height="200"
+          style="border-left: 1px solid #2470AC;"
+          v-if="tableShow"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-show="alarmList.length < 5 && tableShow">
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          v-if="tableShow"
+          style="border: 1px solid #2470AC"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
     </div>
 
     <!-- 中间平面图区域 -->
@@ -293,7 +319,7 @@
       title: getProject().title,
       bgImageSrc: tg_main,
       devListParams: {
-        picture: '3',
+        picture: '1',
         areaTypeId: 3,
         deviceTypes: '4,9,10,11'
       },
@@ -718,10 +744,14 @@
       font-weight: normal;
     }
   }
+  .tableLine {
+    margin-top: 9px;
+    width: 463px;
+  }
   .main-page {
     background-size: cover;
     background-color: #023d83;
-    height: 100vh;
+    height: 98vh;
   }
 
   .main-header {
@@ -852,16 +882,24 @@
         margin-left: 20px;
       }
     }
-    .el-scrollbar {
-      /*height: 200px;*/
-      width: 100%;
+    // 滚动条的滑块
+    /deep/ .el-table__body-wrapper  {
+      background-color: #023D83;
+      border: 0px solid white;
     }
-    .moredatascollor {
-      height: 200px;
+    /deep/ .el-table--border th.gutter:last-of-type {
+      border: 1px solid #023D83;
+      border-bottom-width: 1px;
+      background-color: #023D83;
     }
-    .el-scrollbar__wrap {
-      overflow-y: auto;
-      overflow-x: hidden;
+    /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
+      background-color: #023D83;
+    }
+    /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+      display: none;
+    }
+    /deep/ .el-scrollbar__wrap {
+      overflow-x: hidden !important;
       margin-bottom: 0px !important;
     }
     .el-table {
@@ -895,16 +933,25 @@
     font-size: 15px;
     color: #FFFFFF;
     font-weight: normal;
+    border-color: #2470AC;
   }
-
+  .el-table--border::after, .el-table--group::after, .el-table::before{
+    background-color: #023d83;
+  }
+  .alarm-now-block /deep/ .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
+    border-color: #023d83;
+  }
   .alarm-now-block /deep/ .el-table__row td {
     background-color: #023D83;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ .el-table__body tr:hover > td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ tr.el-table__row--striped td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
 
   .map-tab {
@@ -1080,6 +1127,10 @@
   /*}*/
 
   @media(max-width: 1440px) {
+    .tableLine {
+      margin-top: 0px;
+      width: 343px;
+    }
     .main-title {
       height: 65px;
       padding-top: 16px;
diff --git a/src/views/staff/staffAdd.vue b/src/views/staff/staffAdd.vue
index 769e6d6..698cf37 100644
--- a/src/views/staff/staffAdd.vue
+++ b/src/views/staff/staffAdd.vue
@@ -116,6 +116,9 @@
           <el-row>
             <el-button type="primary" plain class="id-card-btn" :disabled="canRead" @click="readIDCard">读取身份证</el-button>
           </el-row>
+          <el-row>
+            <el-button type="primary" plain class="id-card-btn" @click="readCamera">{{ btnCamera }}</el-button>
+          </el-row>
         </el-col>
       </el-row>
     </el-form>
@@ -126,8 +129,13 @@
           <el-button v-show="isKey" type="primary" style="margin-left: 20px;" @click="registerIris"> 注册虹膜 </el-button>
           <el-button type="primary" style="margin-left: 20px;" @click="saveData"> 保存 </el-button>
         </el-col>
+        <el-col :span="6" :offset="3">
+          <video v-show="showVideo" width="200px" height="150px" style="margin-left: -8px"></video>
+          <canvas v-show = "false" width="200px" height="150px"></canvas>
+        </el-col>
       </el-row>
     </div>
+
     <capture-iris ref="captureIris"/>
   </div>
 </template>
@@ -150,6 +158,9 @@
       deptList: [],
       isEditMode: false, // 是否为编辑模式，编辑模式部分字段不允许修改，且没有重置和虹膜注册功能
       isKey: false, // 是否重点区域授权人员
+      btnCamera:'读取摄像头',
+      showVideo: false,
+      stream:'',
       personForm: {
         id: '', // 人员id
         idCard: '', // 身份证号
@@ -284,6 +295,81 @@
         this.formLoading = false
       })
     },
+    readCamera() {
+      if(this.btnCamera === '读取摄像头'){
+        this.cameraImgFile()
+      }else{
+        this.getAPhoto()
+      }
+    },
+    getAPhoto() {
+      //绘制canvas图形
+      let video = document.getElementsByTagName("video")[0]
+      var canvas = document.getElementsByTagName('canvas')[0]
+      var context = canvas.getContext('2d')
+      context.clearRect(0, 0, context.width, context.height);
+      context.drawImage(video, 0, 0,200,150);
+      this.showVideo = false
+      //把canvas图像转为img图片
+      this.photo = canvas.toDataURL("image/png");
+      var mediaStreamTrack =  this.stream.getTracks()[0];
+      mediaStreamTrack.stop();
+      this.btnCamera = '读取摄像头'
+    },
+    // 拍照上传获取video
+    cameraImgFile() {
+      let _this = this;
+
+      // 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象
+      if (navigator.mediaDevices === undefined) {
+        navigator.mediaDevices = {};
+      }
+      // 一些浏览器部分支持 mediaDevices。我们不能直接给对象设置 getUserMedia
+      // 因为这样可能会覆盖已有的属性。这里我们只会在没有getUserMedia属性的时候添加它。
+      if (navigator.mediaDevices.getUserMedia === undefined) {
+        navigator.mediaDevices.getUserMedia = function(constraints) {
+          // 首先，如果有getUserMedia的话，就获得它
+          var getUserMedia =
+            navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
+
+          // 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
+          if (!getUserMedia) {
+            return Promise.reject(
+              new Error("getUserMedia is not implemented in this browser")
+            );
+          }
+          // 否则，为老的navigator.getUserMedia方法包裹一个Promise
+          return new Promise(function(resolve, reject) {
+            getUserMedia.call(navigator, constraints, resolve, reject);
+          });
+        };
+      }
+      navigator.mediaDevices
+        .getUserMedia({ video: true, audio: false })
+        .then(function(stream) {
+          _this.stream = stream;
+          _this.videoShow = true;
+          // 旧的浏览器可能没有srcObject
+          _this.$nextTick(() => {
+            let video = document.getElementsByTagName("video")[0]
+            if ("srcObject" in video) {
+              video.srcObject = stream;
+            } else {
+              // 防止在新的浏览器里使用它，应为它已经不再支持了
+              video.src = window.URL.createObjectURL(stream);
+            }
+            _this.showVideo = true
+            _this.btnCamera = '拍照'
+            video.onloadedmetadata = function(e) {
+              video.play();
+            };
+          });
+        })
+        .catch(function(err) {
+          _this.videoShow = false;
+          _this.$message.warning("未发现可拍照设备或出现其他错误！");
+        });
+    },
     readIDCard() {
       this.resetForm()
       this.canRead = true
diff --git a/src/views/staff/staffEdit.vue b/src/views/staff/staffEdit.vue
index 2f8d4ca..04291b3 100644
--- a/src/views/staff/staffEdit.vue
+++ b/src/views/staff/staffEdit.vue
@@ -117,6 +117,9 @@
           <el-row>
             <el-button type="primary" plain :disabled="canRead"  class="id-card-btn" @click="readIDCard">读取身份证</el-button>
           </el-row>
+          <el-row>
+            <el-button type="primary" plain class="id-card-btn" @click="readCamera">{{ btnCamera }}</el-button>
+          </el-row>
         </el-col>
       </el-row>
     </el-form>
@@ -126,6 +129,10 @@
           <el-button v-show="isKey" type="primary" style="margin-left: 20px;" @click="registerIris"> 注册虹膜 </el-button>
           <el-button type="primary" style="margin-left: 20px;" @click="saveData"> 保存 </el-button>
         </el-col>
+        <el-col :span="6" :offset="3">
+          <video v-show="showVideo" width="200px" height="150px" style="margin-left: -8px"></video>
+          <canvas v-show = "false" width="200px" height="150px"></canvas>
+        </el-col>
       </el-row>
     </div>
 
@@ -161,6 +168,9 @@
     return {
       canRead: false,
       deptList: [],
+      btnCamera:'读取摄像头',
+      showVideo: false,
+      stream:'',
       isEditMode: false, // 是否为编辑模式，编辑模式部分字段不允许修改，且没有重置和虹膜注册功能
       isKey: false, // 是否重点区域授权人员
       reCaptureIris: '0', // 是否重新采集了虹膜
@@ -253,6 +263,81 @@
         this.keyAreaList = response.data
       })
     },
+    readCamera() {
+      if(this.btnCamera === '读取摄像头'){
+        this.cameraImgFile()
+      }else{
+        this.getAPhoto()
+      }
+    },
+    getAPhoto() {
+      //绘制canvas图形
+      let video = document.getElementsByTagName("video")[0]
+      var canvas = document.getElementsByTagName('canvas')[0]
+      var context = canvas.getContext('2d')
+      context.clearRect(0, 0, context.width, context.height);
+      context.drawImage(video, 0, 0,200,150);
+      this.showVideo = false
+      //把canvas图像转为img图片
+      this.photo = canvas.toDataURL("image/png");
+      var mediaStreamTrack =  this.stream.getTracks()[0];
+      mediaStreamTrack.stop();
+      this.btnCamera = '读取摄像头'
+    },
+    // 拍照上传获取video
+    cameraImgFile() {
+      let _this = this;
+
+      // 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象
+      if (navigator.mediaDevices === undefined) {
+        navigator.mediaDevices = {};
+      }
+      // 一些浏览器部分支持 mediaDevices。我们不能直接给对象设置 getUserMedia
+      // 因为这样可能会覆盖已有的属性。这里我们只会在没有getUserMedia属性的时候添加它。
+      if (navigator.mediaDevices.getUserMedia === undefined) {
+        navigator.mediaDevices.getUserMedia = function(constraints) {
+          // 首先，如果有getUserMedia的话，就获得它
+          var getUserMedia =
+            navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
+
+          // 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
+          if (!getUserMedia) {
+            return Promise.reject(
+              new Error("getUserMedia is not implemented in this browser")
+            );
+          }
+          // 否则，为老的navigator.getUserMedia方法包裹一个Promise
+          return new Promise(function(resolve, reject) {
+            getUserMedia.call(navigator, constraints, resolve, reject);
+          });
+        };
+      }
+      navigator.mediaDevices
+        .getUserMedia({ video: true, audio: false })
+        .then(function(stream) {
+          _this.stream = stream;
+          _this.videoShow = true;
+          // 旧的浏览器可能没有srcObject
+          _this.$nextTick(() => {
+            let video = document.getElementsByTagName("video")[0]
+            if ("srcObject" in video) {
+              video.srcObject = stream;
+            } else {
+              // 防止在新的浏览器里使用它，应为它已经不再支持了
+              video.src = window.URL.createObjectURL(stream);
+            }
+            _this.showVideo = true
+            _this.btnCamera = '拍照'
+            video.onloadedmetadata = function(e) {
+              video.play();
+            };
+          });
+        })
+        .catch(function(err) {
+          _this.videoShow = false;
+          _this.$message.warning("未发现可拍照设备或出现其他错误！");
+        });
+    },
     fetchData(id) {
       this.formLoading = true
       detailStaff(id).then(response => {
diff --git a/src/views/video/history.vue b/src/views/video/history.vue
index ed18111..de698a1 100644
--- a/src/views/video/history.vue
+++ b/src/views/video/history.vue
@@ -18,6 +18,7 @@
                   value-format="yyyy-MM-dd HH:mm:ss"
                   start-placeholder="搜索起始时间"
                   end-placeholder="搜索截止时间"
+                  arrow-control="true"
                   @focus="dateClick"
                   @change="dateSelected"/>
               </el-form-item>
@@ -25,11 +26,11 @@
               <!--<el-button class="filter-item" type="primary" @click="live">实时预览</el-button>-->
             </el-form>
           </div>
-          <div>
+          <div id="tabDiv">
             <!--<el-tabs v-model="activeName" type="card" @tab-click.once="handleClick">-->
               <!--<el-tab-pane label="海康" name="hk" >-->
                 <!--<iframe v-if="activeName==='hk'" zIndex="-1" name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html?wmode=opaque"/>-->
-                <iframe zIndex="-1" name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html?wmode=opaque"/>
+                <iframe name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html?wmode=opaque"/>
               <!--</el-tab-pane>-->
               <!--<el-tab-pane label="NVR" name="nvr">-->
                 <!--<iframe v-if="activeName==='nvr'" zIndex="-1" name="playNVR" class="iframe-body" src="/static/webCtrl/nvr/demo-easy.html?wmode=opaque"/>-->
@@ -43,6 +44,7 @@
 </template>
 <script>
 import VideoTree from './videoTree'
+import { formatToString, getDate, oneDayTime } from '@/utils/calendarUtil'
 export default {
   name: 'VideoHistory',
   components: { VideoTree },
@@ -84,9 +86,14 @@
     }
   },
   mounted() {
+    this.listQuery.startTime = getDate(0, 'DATE') + ' 00:00:00'
+    this.listQuery.endTime = getDate(0, 'SECOND')
+
+    this.timeRange = [this.listQuery.startTime, this.listQuery.endTime]
+    console.log(this.timeRange)
     setTimeout(() => {
       // console.log('treewidth: ' + this.$refs.tree.$el.offsetWidth.toString())
-      window.frames['playHK'].initPlugin('back')
+      window.frames['playHK'].initPlugin('back',document.getElementById("tabDiv").getBoundingClientRect().left)
     }, 1500)
   },
   methods: {
@@ -94,7 +101,7 @@
       if (tab.name === 'hk') {
         this.activeName = 'hk'
         console.log('hk')
-        window.frames['playHK'].initPlugin('back')
+        window.frames['playHK'].initPlugin('back',document.getElementById("tabDiv").getBoundingClientRect().left)
       } else if (tab.name === 'nvr') {
         this.activeName = 'nvr'
         // window.frames['playNVR'].stopPlayReal(null)
@@ -112,6 +119,7 @@
           if (this.activeName === 'nvr') {
             window.frames['playNVR'].search(0, this.listQuery.startTime, this.listQuery.endTime)
           } else if (this.activeName === 'hk') {
+            console.log(this.listQuery.monitorPoint, this.listQuery.startTime, this.listQuery.endTime)
             window.frames['playHK'].search(this.listQuery.monitorPoint, this.listQuery.startTime, this.listQuery.endTime)
           }
         }
@@ -120,7 +128,6 @@
     handleCameraClicked(camera) {
       console.log(camera)
       if (typeof camera.monitorPoint === 'undefined' || camera.monitorPoint === '') {
-        console.log('ip is null')
         return false
       } else {
         this.listQuery.monitorPoint = camera.monitorPoint
diff --git a/src/views/video/monitor.vue b/src/views/video/monitor.vue
index fa42257..dd66087 100644
--- a/src/views/video/monitor.vue
+++ b/src/views/video/monitor.vue
@@ -5,7 +5,7 @@
         <video-tree @click="handleCameraClicked"/>
       </el-col>
       <el-col :span="18">
-        <div ref="tabDiv" style="margin-top: 14px">
+        <div id="tabDiv">
           <!--<el-tabs v-model="activeName" type="border-card" @tab-click.once ="handleClick">-->
             <!--<el-tab-pane label="海康" name="hk">-->
               <!--<iframe v-if="activeName === 'hk'" name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html"/>-->
@@ -37,15 +37,16 @@
     }
   },
   mounted() {
+    // console.log(document.getElementById("tabDiv").getBoundingClientRect().left)
     setTimeout(() => {
-      window.frames['playHK'].initPlugin('real')
+      window.frames['playHK'].initPlugin('real',document.getElementById("tabDiv").getBoundingClientRect().left)
     }, 1000)
   },
   methods: {
     handleClick(tab, event) {
       if (tab.name === 'hk') {
         this.activeName = 'hk'
-        window.frames['playHK'].initPlugin('real')
+        window.frames['playHK'].initPlugin('real',document.getElementById("tabDiv").getBoundingClientRect().left)
       } else if (tab.name === 'nvr') {
         this.activeName = 'nvr'
         window.frames['playNVR'].stopPlayReal(null)
diff --git a/src/views/visitor/visitorAdd.vue b/src/views/visitor/visitorAdd.vue
index 87ec546..eb868d6 100644
--- a/src/views/visitor/visitorAdd.vue
+++ b/src/views/visitor/visitorAdd.vue
@@ -260,6 +260,11 @@
     },
     // 一位访客登记完毕
     visitorCheckedIn(visitor) {
+      if(visitor.sex === '2'){
+        visitor.sexStr = '女'
+      }else if(visitor.sex === '1'){
+        visitor.sexStr = '男'
+      }
       this.dataForm.visitorBaseDTOList.push(visitor)
     },
     detail(row) {
diff --git a/src/views/visitor/visitorAddCar.vue b/src/views/visitor/visitorAddCar.vue
index 8513b4c..83608e6 100644
--- a/src/views/visitor/visitorAddCar.vue
+++ b/src/views/visitor/visitorAddCar.vue
@@ -304,6 +304,11 @@
       if (type === 'createCar') {
         this.dataForm.visitCarDTOList.push(visitor)
       } else if (type === 'createPerson') {
+        if(visitor.sex === '2'){
+          visitor.sexStr = '女'
+        }else if(visitor.sex === '1'){
+          visitor.sexStr = '男'
+        }
         this.dataForm.visitorBaseDTOList.push(visitor)
       }
     },
diff --git a/src/views/visitor/visitorCarCheckIn.vue b/src/views/visitor/visitorCarCheckIn.vue
index c09abbb..149b940 100644
--- a/src/views/visitor/visitorCarCheckIn.vue
+++ b/src/views/visitor/visitorCarCheckIn.vue
@@ -1,6 +1,6 @@
 <!-- 访客车辆刷证登记页面 -->
 <template>
-  <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
+  <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body @close="closeDialog">
     <el-form ref="dataForm" :rules="rules" :model="dataForm" label-well-code="right" label-width="100px">
       <el-row>
         <el-col :span="6">
@@ -12,9 +12,12 @@
                 style="width: 130px; height: 175px"/>
             </div>
           </el-row>
-          <el-row>
+          <el-row style="margin-top: -20px">
             <el-button v-show="isEditMode" :disabled="readCard||canRead" type="primary" plain class="id-card-btn" @click="readIDCard">读取身份证</el-button>
           </el-row>
+          <el-row style="margin-top: -10px">
+            <el-button type="primary" plain class="id-card-btn" @click="readCamera">{{ btnCamera }}</el-button>
+          </el-row>
         </el-col>
 
         <el-col :span="16">
@@ -64,12 +67,14 @@
               </el-form-item>
             </el-col>
           </el-row>
+          <el-row class="dialog-footer">
+            <video v-show="showVideo" width="200px" height="150px" style="margin-right: 20px"></video>
+            <canvas v-show = "false" width="200px" height="150px"></canvas>
+            <el-button :loading="btnLoading" type="primary" @click="saveData" style="width: 150px">保 存</el-button>
+          </el-row>
         </el-col>
       </el-row>
     </el-form>
-    <div v-show="isEditMode" slot="footer" class="dialog-footer">
-      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
-    </div>
   </el-dialog>
 </template>
 
@@ -100,6 +105,9 @@
         address: '',
         plateNumber: '' // 来访车辆车牌号
       }, // 表单
+      btnCamera:'读取摄像头',
+      showVideo: false,
+      stream:'',
       photo: '', // 图片路径
       defaultPhoto: require('@/assets/global_images/photo.png'), // 默认图片路径
       textMap: {
@@ -129,12 +137,92 @@
     })
   },
   methods: {
+    closeDialog(){
+      var mediaStreamTrack =  this.stream.getTracks()[0];
+      mediaStreamTrack.stop();
+    },
+    readCamera() {
+      if(this.btnCamera === '读取摄像头'){
+        this.cameraImgFile()
+      }else{
+        this.getAPhoto()
+      }
+    },
+    getAPhoto() {
+      //绘制canvas图形
+      let video = document.getElementsByTagName("video")[0]
+      var canvas = document.getElementsByTagName('canvas')[0]
+      var context = canvas.getContext('2d')
+      context.clearRect(0, 0, context.width, context.height);
+      context.drawImage(video, 0, 0,200,150);
+      this.showVideo = false
+      //把canvas图像转为img图片
+      this.photo = canvas.toDataURL("image/png");
+      var mediaStreamTrack =  this.stream.getTracks()[0];
+      mediaStreamTrack.stop();
+      this.btnCamera = '读取摄像头'
+    },
+    // 拍照上传获取video
+    cameraImgFile() {
+      let _this = this;
+
+      // 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象
+      if (navigator.mediaDevices === undefined) {
+        navigator.mediaDevices = {};
+      }
+      // 一些浏览器部分支持 mediaDevices。我们不能直接给对象设置 getUserMedia
+      // 因为这样可能会覆盖已有的属性。这里我们只会在没有getUserMedia属性的时候添加它。
+      if (navigator.mediaDevices.getUserMedia === undefined) {
+        navigator.mediaDevices.getUserMedia = function(constraints) {
+          // 首先，如果有getUserMedia的话，就获得它
+          var getUserMedia =
+            navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
+
+          // 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
+          if (!getUserMedia) {
+            return Promise.reject(
+              new Error("getUserMedia is not implemented in this browser")
+            );
+          }
+          // 否则，为老的navigator.getUserMedia方法包裹一个Promise
+          return new Promise(function(resolve, reject) {
+            getUserMedia.call(navigator, constraints, resolve, reject);
+          });
+        };
+      }
+      navigator.mediaDevices
+        .getUserMedia({ video: true, audio: false })
+        .then(function(stream) {
+          _this.stream = stream;
+          _this.videoShow = true;
+          // 旧的浏览器可能没有srcObject
+          _this.$nextTick(() => {
+            let video = document.getElementsByTagName("video")[0]
+            if ("srcObject" in video) {
+              video.srcObject = stream;
+            } else {
+              // 防止在新的浏览器里使用它，应为它已经不再支持了
+              video.src = window.URL.createObjectURL(stream);
+            }
+            _this.showVideo = true
+            _this.btnCamera = '拍照'
+            video.onloadedmetadata = function(e) {
+              video.play();
+            };
+          });
+        })
+        .catch(function(err) {
+          _this.videoShow = false;
+          _this.$message.warning("未发现可拍照设备或出现其他错误！");
+        });
+    },
     // 初始化对话框
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.btnLoading = false
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
-
+      this.showVideo = false
+      this.btnCamera = '读取摄像头'
       this.resetForm()
 
       if (dialogStatus === 'createCar') { // 如果是新增，清除验证
@@ -243,7 +331,7 @@
     // 新增数据
     visitorCheckedIn: function() {
       this.$refs['dataForm'].validate((valid) => {
-        if (valid && this.readCard) {
+        if (valid) {
           // 车辆列表
           const carList = this.$parent.dataForm.visitCarDTOList
           let isCarChecked = false
@@ -259,8 +347,20 @@
                 isCarChecked = true
               }
             })
-
-            // 首先添加车辆
+            // carList.forEach(item => {
+            //   if (item.idCard === this.dataForm.idCard) {
+            //     isChecked = true
+            //   }
+            // })
+            //
+            // if (isChecked === true) {
+            //   this.$message.error('该身份证已经登记过，请检查')
+            //
+            //   this.$nextTick(() => {
+            //     this.btnLoading = false
+            //     this.readCard = false
+            //   })
+            // }else
             if (isCarChecked === true) {
               this.$message.error('该辆车已经登记过，请检查')
 
@@ -334,7 +434,6 @@
     width: 100%;
   }
   .dialog-footer {
-    margin-top: -20px;
     text-align: center;
   }
 </style>
diff --git a/src/views/visitor/visitorCheckIn.vue b/src/views/visitor/visitorCheckIn.vue
index 1aba7cc..9abeebd 100644
--- a/src/views/visitor/visitorCheckIn.vue
+++ b/src/views/visitor/visitorCheckIn.vue
@@ -1,10 +1,10 @@
 <!-- 访客刷证登记页面 -->
 <template>
-  <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
+  <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body  @close="closeDialog">
     <el-form ref="dataForm" :rules="rules" :model="dataForm" label-well-code="right" label-width="100px">
       <el-row>
         <el-col :span="6">
-          <el-row>
+          <el-row style="margin-top: -20px">
             <div class="avatar">
               <el-image
                 :src="photo!==''?photo:defaultPhoto"
@@ -12,9 +12,12 @@
                 style="width: 130px; height: 175px"/>
             </div>
           </el-row>
-          <el-row>
+          <el-row style="margin-top: -20px">
             <el-button v-show="isEditMode" :disabled="readCard||canRead" type="primary" plain class="id-card-btn" @click="readIDCard">读取身份证</el-button>
           </el-row>
+          <el-row style="margin-top: -10px">
+            <el-button type="primary" plain class="id-card-btn" @click="readCamera">{{ btnCamera }}</el-button>
+          </el-row>
         </el-col>
 
         <el-col :span="16">
@@ -53,37 +56,14 @@
               </el-form-item>
             </el-col>
           </el-row>
-
-          <!--          <el-row>-->
-          <!--            <el-col :span="24" >-->
-          <!--              <el-form-item label="出生日期" prop="birthday">-->
-          <!--                <el-date-picker-->
-          <!--                  v-model="dataForm.birthday"-->
-          <!--                  :editable="false"-->
-          <!--                  :readonly="readCard"-->
-          <!--                  :disabled="!isEditMode"-->
-          <!--                  type="date"-->
-          <!--                  style="width: 100%"-->
-          <!--                  value-format="yyyy-MM-dd"-->
-          <!--                  placeholder="选择出生日期"/>-->
-          <!--              </el-form-item>-->
-          <!--            </el-col>-->
-          <!--          </el-row>-->
-
-          <!--          <el-row :gutter="20">-->
-          <!--            <el-col :span="24">-->
-          <!--              <el-form-item label="住址" prop="address">-->
-          <!--                <el-input v-model.trim="dataForm.address" :readonly="readCard" :disabled="!isEditMode" type="text" placeholder="非必填"/>-->
-          <!--              </el-form-item>-->
-          <!--            </el-col>-->
-          <!--          </el-row>-->
+          <el-row class="dialog-footer">
+            <video v-show="showVideo" width="200px" height="150px" style="margin-right: 20px"></video>
+            <canvas v-show = "false" width="200px" height="150px"></canvas>
+            <el-button :loading="btnLoading" type="primary" @click="saveData" style="width: 150px">保 存</el-button>
+          </el-row>
         </el-col>
       </el-row>
     </el-form>
-    <div v-show="isEditMode" slot="footer" class="dialog-footer">
-      <!--<el-button :loading="btnLoading" :disabled="!readCard" type="primary" @click="saveData">保存</el-button>-->
-      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
-    </div>
   </el-dialog>
 </template>
 
@@ -97,6 +77,9 @@
   data() {
     return {
       canRead: false,
+      btnCamera:'读取摄像头',
+      showVideo: false,
+      stream:'',
       isEditMode: true, // 是否为编辑模式，非编辑模式都为只读
       readCard: false, // 是否从读卡器读卡，未从读卡器读卡不能提交，读卡之后不能编辑
       dialogFormVisible: false, // 对话框是否显示
@@ -142,12 +125,92 @@
     })
   },
   methods: {
+    readCamera() {
+      if(this.btnCamera === '读取摄像头'){
+        this.cameraImgFile()
+      }else{
+        this.getAPhoto()
+      }
+    },
+    closeDialog(){
+      var mediaStreamTrack =  this.stream.getTracks()[0];
+      mediaStreamTrack.stop();
+    },
+    getAPhoto() {
+      //绘制canvas图形
+      let video = document.getElementsByTagName("video")[0]
+      var canvas = document.getElementsByTagName('canvas')[0]
+      var context = canvas.getContext('2d')
+      context.clearRect(0, 0, context.width, context.height);
+      context.drawImage(video, 0, 0,200,150);
+      this.showVideo = false
+      //把canvas图像转为img图片
+      this.photo = canvas.toDataURL("image/png");
+      var mediaStreamTrack =  this.stream.getTracks()[0];
+      mediaStreamTrack.stop();
+      this.btnCamera = '读取摄像头'
+    },
+    // 拍照上传获取video
+    cameraImgFile() {
+      let _this = this;
+
+      // 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象
+      if (navigator.mediaDevices === undefined) {
+        navigator.mediaDevices = {};
+      }
+      // 一些浏览器部分支持 mediaDevices。我们不能直接给对象设置 getUserMedia
+      // 因为这样可能会覆盖已有的属性。这里我们只会在没有getUserMedia属性的时候添加它。
+      if (navigator.mediaDevices.getUserMedia === undefined) {
+        navigator.mediaDevices.getUserMedia = function(constraints) {
+          // 首先，如果有getUserMedia的话，就获得它
+          var getUserMedia =
+            navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
+
+          // 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
+          if (!getUserMedia) {
+            return Promise.reject(
+              new Error("getUserMedia is not implemented in this browser")
+            );
+          }
+          // 否则，为老的navigator.getUserMedia方法包裹一个Promise
+          return new Promise(function(resolve, reject) {
+            getUserMedia.call(navigator, constraints, resolve, reject);
+          });
+        };
+      }
+      navigator.mediaDevices
+        .getUserMedia({ video: true, audio: false })
+        .then(function(stream) {
+          _this.stream = stream;
+          _this.videoShow = true;
+          // 旧的浏览器可能没有srcObject
+          _this.$nextTick(() => {
+            let video = document.getElementsByTagName("video")[0]
+            if ("srcObject" in video) {
+              video.srcObject = stream;
+            } else {
+              // 防止在新的浏览器里使用它，应为它已经不再支持了
+              video.src = window.URL.createObjectURL(stream);
+            }
+            _this.showVideo = true
+            _this.btnCamera = '拍照'
+            video.onloadedmetadata = function(e) {
+              video.play();
+            };
+          });
+        })
+        .catch(function(err) {
+          _this.videoShow = false;
+          _this.$message.warning("未发现可拍照设备或出现其他错误！");
+        });
+    },
     // 初始化对话框
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.btnLoading = false
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
-
+      this.showVideo = false
+      this.btnCamera = '读取摄像头'
       this.resetForm()
 
       if (dialogStatus === 'create') { // 如果是新增，清除验证
@@ -261,6 +324,7 @@
               this.readCard = false
             })
           } else {
+            console.log(this.dataForm)
             // 发送信号让父组件添加
             this.$emit('checked', this.dataForm)
 
@@ -294,7 +358,7 @@
     width: 100%;
   }
   .dialog-footer {
-    margin-top: -20px;
+    margin-top: 10px;
     text-align: center;
   }
 </style>

diff --git a/config/dev.env.js b/config/dev.env.js
index 6b4622a..095ba33 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -8,4 +8,5 @@
   NODE_ENV: '"development"',
   // BASE_API: '"http://192.168.5.220:20311"'
   BASE_API: '"http://111.198.10.15:11631"'
+  // BASE_API: '"http://192.168.5.220:20311"'
 })
diff --git a/config/prod.env.js b/config/prod.env.js
index f2501d0..ccbc615 100644
--- a/config/prod.env.js
+++ b/config/prod.env.js
@@ -1,5 +1,6 @@
 'use strict'
 module.exports = {
   NODE_ENV: '"production"',
-  BASE_API: '"http://192.168.5.220:20311"'
+  // BASE_API: '"http://192.168.5.220:20311"'
+  BASE_API: '"http://111.198.10.15:11631"'
 }
diff --git a/favicon.ico b/favicon.ico
index 34b63ac..bc1bfc5 100644
--- a/favicon.ico
+++ b/favicon.ico
Binary files differ
diff --git a/src/api/visitor.js b/src/api/visitor.js
index 05ed6ea..01a6c26 100644
--- a/src/api/visitor.js
+++ b/src/api/visitor.js
@@ -74,3 +74,14 @@
   })
 }
 
+// 查询人员轨迹
+export function getDetail(devcode) {
+  return request({
+    url: '/device/capturePhoto',
+    method: 'post',
+    params:{
+      devcode: devcode
+    }
+  })
+}
+
diff --git a/src/assets/dashboard_images/icon-defence.png b/src/assets/dashboard_images/icon-defence.png
index 8069376..11b41cb 100644
--- a/src/assets/dashboard_images/icon-defence.png
+++ b/src/assets/dashboard_images/icon-defence.png
Binary files differ
diff --git a/src/utils/calendarUtil.js b/src/utils/calendarUtil.js
index da840c3..e599bdd 100644
--- a/src/utils/calendarUtil.js
+++ b/src/utils/calendarUtil.js
@@ -61,7 +61,32 @@
 
   return yearMonth + '-' + format(day)
 }
+export function formatDateTime(cellval) {
+  var dateVal = cellval + "";//把时间戳转成字符串格式
+  if (cellval != null) {
+    //取得时间戳部分 如：获取 /Date(1545299299910)/ 中的 1545299299910 部分
+    var date = new Date(parseInt(dateVal.replace("/Date(", "")
+      .replace(")/", ""), 10));
+    //获取年，不需要其他操作所以可以直接返回	date.getFullYear()
+    //月份为0-11，所以+1，月份小于10时补个0
+    var month = date.getMonth() + 1 < 10 ? "0"
+      + (date.getMonth() + 1) : date.getMonth() + 1;
+    //获取日
+    var currentDate = date.getDate() < 10 ? "0" + date.getDate()
+      : date.getDate();
+    //获取时间
+    var hours = date.getHours() < 10 ? "0" + date.getHours() : date
+      .getHours();
+    var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes()
+      : date.getMinutes();
+    var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds()
+      : date.getSeconds();
 
+    //返回日期结果，需要时间的话在加上时间
+    return date.getFullYear() + "-" + month + "-" + currentDate+" "+hours+":"+
+      minutes+":"+seconds;
+  }
+}
 // 格式化日期为字符串
 export function formatToString(value, level) {
   const date = new Date(value)
diff --git a/src/views/alarm/alarmDetail.vue b/src/views/alarm/alarmDetail.vue
index 2c94629..8c32ee5 100644
--- a/src/views/alarm/alarmDetail.vue
+++ b/src/views/alarm/alarmDetail.vue
@@ -1,7 +1,7 @@
 <!-- 报警详情 -->
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :model="dataForm" label-well-code="right" label-width="110px">
+    <el-form v-loading="loading" ref="dataForm" :model="dataForm" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="报警编号">
@@ -86,6 +86,7 @@
   name: 'AlarmDetail',
   data() {
     return {
+      loading: true,
       dialogFormVisible: false, // 对话框是否显示
       dialogStatus: '', // 对话框类型：create,update,detail
       dataForm: {
@@ -123,7 +124,7 @@
         this.dataForm = {
           id: row.id
         }
-
+        this.loading = true
         alarmDetail(this.dataForm.id).then(response => {
           if (response.code === 200) {
             this.dataForm = {
@@ -140,7 +141,7 @@
               reason: response.data.reason,
               remark: response.data.remark
             }
-
+            this.loading = false
             // 格式化报警状态
             if (response.data.valid === 1) {
               this.dataForm.validStr = '正在报警'
diff --git a/src/views/car/carAdd.vue b/src/views/car/carAdd.vue
index ddb215f..5f54c93 100644
--- a/src/views/car/carAdd.vue
+++ b/src/views/car/carAdd.vue
@@ -10,7 +10,7 @@
         </el-col>
         <el-col :span="12">
           <el-form-item label="车辆性质" prop="property">
-            <el-radio-group v-model="dataForm.property" :disabled="isDetailMode">
+            <el-radio-group v-model="dataForm.property" :disabled="isDetailMode" @change="resetOwner">
               <el-radio v-for="item in carProperties" :key="item.value" :label="item.value">{{ item.name }}</el-radio>
             </el-radio-group>
           </el-form-item>
@@ -106,6 +106,12 @@
     this.fetchStaffList()
   },
   methods: {
+    resetOwner(){
+      if(this.dataForm.property!=='2'){
+        this.dataForm.ownerId = ''
+        // this.dataForm.phone = ''
+      }
+    },
     // 初始化对话框
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.btnLoading = false
@@ -208,6 +214,7 @@
           }
         })
         this.dataForm.phone = selectedStaff[0].phone
+        this.dataForm.deptid = selectedStaff[0].deptid
       } else {
         this.dataForm.phone = ''
       }
diff --git a/src/views/car/carList.vue b/src/views/car/carList.vue
index 8d924ff..4ff07ab 100644
--- a/src/views/car/carList.vue
+++ b/src/views/car/carList.vue
@@ -105,11 +105,11 @@
           value: 'propertyStr',
           align: 'center'
         },
-        // {
-        //   text: '车主姓名',
-        //   value: 'ownerName',
-        //   align: 'center'
-        // },
+        {
+          text: '车主姓名',
+          value: 'ownerName',
+          align: 'center'
+        },
         {
           text: '车主联系电话',
           value: 'phone',
diff --git a/src/views/ctrl/index.vue b/src/views/ctrl/index.vue
index fd36f2b..29923af 100644
--- a/src/views/ctrl/index.vue
+++ b/src/views/ctrl/index.vue
@@ -50,12 +50,13 @@
         <in-out-today />
       </el-col>
 
-      <el-col :span="7" class="chart-block">
+      <el-col id="dev-count"  :span="10" class="chart-block">
         <div class="chart-title">各类型设备安装数量</div>
         <dev-count />
       </el-col>
 
-      <el-col id="pass-count" :span="10" class="chart-block">
+      <!--<el-col id="pass-count" class="chart-block">-->
+      <el-col :span="7" class="chart-block">
         <div class="chart-title">进出营数量统计</div>
         <in-out-count />
       </el-col>
@@ -121,7 +122,7 @@
 <style scoped>
   .app-wrapper {
     background-color: #e9e9e9;
-    padding-bottom: 20px;
+    padding-bottom: 10px;
   }
 
   .sub-data-block {
@@ -129,6 +130,7 @@
     border-radius: 16px;
     float: left;
     margin: 10px;
+    margin-bottom: 0px;
     box-shadow: 1px 1px 5px #999;
   }
   .sub-title {
@@ -136,36 +138,38 @@
     text-align: center;
     font-family: 'Microsoft YaHei';
     color: #fff;
-    font-size: 24px;
-    padding: 10px;
+    font-size: 20px;
+    padding-top: 10px;
+    padding-bottom: 0px;
   }
   .statis-block {
     text-align: center;
     margin: 0px 10px 0px 10px;
-    padding: 0px 10px 10px 10px;
+    padding: 0px 10px 5px 10px;
     color: #fff;
     font-weight: bold;
     letter-spacing: 1px;
-    font-size: 24px;
+    font-size: 20px;
   }
   .big-size {
-    font-size: 64px;
+    font-size: 35px;
   }
 
   .chart-title {
     font-family: 'Microsoft YaHei';
     color: #000000;
     font-weight: bold;
-    font-size: 20px;
+    font-size: 18px;
     text-align: center;
     padding: 10px;
   }
   .chart-block {
     margin-left: 20px;
-    margin-top: 20px;
+    margin-top: 10px;
     border-radius: 16px;
     background-color: #FFFFFF;
     box-shadow: 1px 1px 5px #999;
+    height: 37vh;
   }
 
   #today-visitor {
@@ -187,7 +191,7 @@
     background-image: linear-gradient(to right, #ffa800, #ce7e00);
   }
 
-  #pass-count, #dev-alarm-count {
+  #dev-count, #dev-alarm-count {
     width: calc(250vw / 6 - 70px);
   }
 </style>
diff --git a/src/views/ctrl/overview.vue b/src/views/ctrl/overview.vue
index 62e1105..49ed928 100644
--- a/src/views/ctrl/overview.vue
+++ b/src/views/ctrl/overview.vue
@@ -59,26 +59,52 @@
           <i v-else class="el-icon-arrow-down"/>
         </span>
       </div>
-      <transition name="el-collapse-transition">
-        <el-scrollbar
-          v-show="tableShow"
-          :style="{ visibility: tableShow ? 'visible' : 'hidden'}"
-          :class="{ moredatascollor: alarmList.length > 6 }"
-          :native="false">
-          <el-table
-            :data="alarmList"
-            class="alarm-list-table"
-            border
-            stripe
-            @row-click="alarmRowClick">
-            <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{ scope.row[column.value] }}
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-scrollbar>
-      </transition>
+      <div v-show="alarmList.length > 4 && tableShow">
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 32px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 231px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          height="200"
+          style="border-left: 1px solid #2470AC;"
+          v-if="tableShow"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-show="alarmList.length < 5 && tableShow">
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          v-if="tableShow"
+          style="border: 1px solid #2470AC"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
     </div>
 
     <!-- 中间平面图区域 -->
@@ -145,9 +171,13 @@
         class="point-camera"
         @click="detailDev(item, $event)" />
     </div>
-
     <!-- 平面图区域设备类型按钮 -->
-    <div v-show="showType" class="bottom-center" :style="{ width: cameraTypeNum*btnwidth + 'px'}">
+    <div class="bottom-center" :style="{ width: btnNum*btnwidth + 'px'}">
+        <el-col v-show="btnNum!==1" ref="all" class="dev-icon dev-type-selected" @click.native="selectDevByType('all', $event)">
+          <img v-if="checkDevType[0]" src="@/assets/overview_images/icons/icon-all-checked.png">
+          <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
+          <span>全部</span>
+        </el-col>
       <el-col class="dev-icon" @click.native="selectDevByType('4', $event)">
         <img id="4-1-img" v-if="checkDevType1[0]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="4-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
@@ -178,20 +208,6 @@
         <img id="11-2-img" v-else src="@/assets/overview_images/icons/half-camera-blue.png">
         <span>标准半球</span>
       </el-col>
-    </div>
-    <!-- 平面图区域设备类型按钮 -->
-    <div v-show="!showType"class="bottom-center" :style="{ width: btnNum*btnwidth + 'px'}">
-        <el-col ref="all" class="dev-icon dev-type-selected" @click.native="selectDevByType('all', $event)">
-          <img v-if="checkDevType[0]" src="@/assets/overview_images/icons/icon-all-checked.png">
-          <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
-          <span>全部</span>
-        </el-col>
-        <el-col ref="camera" :class="cameraClass" @click.native="showType=!showType;selectDevByType('camera', $event)">
-        <!--<el-col ref="camera" class="dev-icon" @click.native="selectDevByType('camera', $event)">-->
-          <img id="cam_img_red" v-if="checkDevType[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-          <img id="cam_img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-          <span>摄像头</span>
-        </el-col>
         <el-col v-show="showFence" class="dev-icon" @click.native="selectDevByType('fence', $event)">
           <img v-if="checkDevType[2]" src="@/assets/overview_images/icons/icon-fence-checked.png">
           <img v-else src="@/assets/overview_images/icons/icon-fence-unchecked.png">
@@ -372,7 +388,7 @@
           height: 789
         }, // 屏幕窗口尺寸
         imgUrl: require('../../assets/overview_images/icons/icon-camera-point.png'),
-        btnNum: 3,
+        btnNum: 8,
         cameraTypeNum: 6,
         btnwidth: 210,
         halfLeft: 0,
@@ -498,25 +514,25 @@
             }
           }
         }
-        //跟换菜单
-        var item = ['人脸识别','车牌轨迹','周界防护','标准数字','智能球形','标准半球']
-        for(var i=0;i<item.length;i++){
-          if(item[i]===val.target.innerText){
-            return
-          }
-        }
-        if(val.target.id.endsWith('-1-img')||val.target.id.endsWith('-2-img')|| val.target.id==='cam_img' || val.target.id==='cam_img_red'){
-          return
-        }
-        if( val.target.innerText!=='摄像头') {
-          this.showType = false
-          const devTypes = document.querySelectorAll('.dev-icon')
-            for(var i=0;i<this.checkDevType.length;i++) {
-              if (this.checkDevType[i]) {
-                devTypes[i+6].className += ' dev-type-selected'
-              }
-            }
-        }
+        // //跟换菜单
+        // var item = ['人脸识别','车牌轨迹','周界防护','标准数字','智能球形','标准半球']
+        // for(var i=0;i<item.length;i++){
+        //   if(item[i]===val.target.innerText){
+        //     return
+        //   }
+        // }
+        // if(val.target.id.endsWith('-1-img')||val.target.id.endsWith('-2-img')|| val.target.id==='cam_img' || val.target.id==='cam_img_red'){
+        //   return
+        // }
+        // if( val.target.innerText!=='摄像头') {
+        //   this.showType = false
+        //   const devTypes = document.querySelectorAll('.dev-icon')
+        //     for(var i=0;i<this.checkDevType.length;i++) {
+        //       if (this.checkDevType[i]) {
+        //         devTypes[i+6].className += ' dev-type-selected'
+        //       }
+        //     }
+        // }
       },
       webSocket() {
         const that = this
@@ -586,7 +602,7 @@
         }else if(pic==='3'){
           this.changeMap('tg_4_1')
         }else if(pic==='4'){
-          this.changeMap('tg_4_1')
+          this.changeMap('tg_4_5')
         }
         setTimeout(() => {
           var obj = document.getElementById(val.toString());
@@ -771,7 +787,11 @@
           this.checkDevType1 = [false, false, false, false, false, false]
           // 添加选中的样式
           if (typeof event === 'undefined') {
-            devTypes[6].className += ' dev-type-selected'
+            if(this.btnNum===1){
+              devTypes[1].className += ' dev-type-selected'
+            }else{
+              devTypes[0].className += ' dev-type-selected'
+            }
           } else {
             event.currentTarget.className += ' dev-type-selected'
           }
@@ -1017,7 +1037,7 @@
           this.isMain = true
           // this.devListParams.picture = '1'
           this.imgSizeOriginal = { width: 2245, height: 1586 }
-          this.btnNum  = 3
+          this.btnNum  = 8
           this.cameraTypeNum  = 6
           this.showFence = true // 显示电子围栏
           this.showTemp = false // 隐藏温湿度设备
@@ -1027,6 +1047,7 @@
           this.showSubTabGuider = false
           this.showFloorThree = false
           this.showFloorFour = false
+          this.selectDevByType('all')
         } else if (index === 'tg_3_1') {
           this.bgImageSrc = tg_3_1
           // this.devListParams.picture = '2'
@@ -1037,6 +1058,7 @@
           this.showTemp = true // 隐藏温湿度
           this.showSmoking = true // 隐藏烟感
           this.showSound = true // 隐藏声光报警器
+          this.selectDevByType('all')
         } else if (index === 'tg_4_1') {
           this.bgImageSrc = tg_4_1
           // this.devListParams.picture = '3'
@@ -1048,18 +1070,19 @@
           this.showTemp = true // 显示温湿度
           this.showSmoking = true // 显示烟感
           this.showSound = true // 显示声光报警器
+          this.selectDevByType('all')
         } else if (index === 'tg_4_5') {
           this.bgImageSrc = tg_4_5
           // this.devListParams.picture = '4'
           this.imgSizeOriginal = { width: 2245, height: 1586 }
-          this.btnNum  = 2
+          this.btnNum  = 1
           this.cameraTypeNum  = 1
           this.showFence = false // 隐藏电子围栏
           this.showTemp = false // 隐藏温湿度
           this.showSmoking = false // 隐藏烟感
           this.showSound = false // 隐藏声光报警器
+          this.selectDevByType('4')
         }
-        this.selectDevByType('all')
       },
       // 查询并显示设备详情
       detailDev(dev, event) {
@@ -1201,10 +1224,14 @@
     left: 50%; transform: translateX(-50%);
     bottom: 25px;
   }
+  .tableLine {
+    margin-top: 9px;
+    width: 463px;
+  }
   .main-page {
     background-size: cover;
     background-color: #023d83;
-    height: 100vh;
+    height: 98vh;
   }
 
   .main-header {
@@ -1362,16 +1389,24 @@
         margin-left: 20px;
       }
     }
-    .el-scrollbar {
-      /*height: 200px;*/
-      width: 100%;
+    // 滚动条的滑块
+    /deep/ .el-table__body-wrapper  {
+      background-color: #023D83;
+      border: 0px solid white;
     }
-    .moredatascollor {
-      height: 200px;
+    /deep/ .el-table--border th.gutter:last-of-type {
+      border: 1px solid #023D83;
+      border-bottom-width: 1px;
+      background-color: #023D83;
     }
-    .el-scrollbar__wrap {
-      overflow-y: auto;
-      overflow-x: hidden;
+    /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
+      background-color: #023D83;
+    }
+    /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+      display: none;
+    }
+    /deep/ .el-scrollbar__wrap {
+      overflow-x: hidden !important;
       margin-bottom: 0px !important;
     }
     .el-table {
@@ -1405,16 +1440,25 @@
     font-size: 15px;
     color: #FFFFFF;
     font-weight: normal;
+    border-color: #2470AC;
   }
-
+  .el-table--border::after, .el-table--group::after, .el-table::before{
+    background-color: #023d83;
+  }
+  .alarm-now-block /deep/ .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
+    border-color: #023d83;
+  }
   .alarm-now-block /deep/ .el-table__row td {
     background-color: #023D83;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ .el-table__body tr:hover > td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ tr.el-table__row--striped td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
 
   .map-tab {
@@ -1601,6 +1645,10 @@
   /*}*/
 
   @media(max-width: 1440px) {
+    .tableLine {
+      margin-top: 0px;
+      width: 343px;
+    }
     .main-title {
       height: 65px;
       padding-top: 16px;
diff --git a/src/views/ctrl/statCharts/devAlarmCount.vue b/src/views/ctrl/statCharts/devAlarmCount.vue
index 7bea059..6b6939e 100644
--- a/src/views/ctrl/statCharts/devAlarmCount.vue
+++ b/src/views/ctrl/statCharts/devAlarmCount.vue
@@ -1,5 +1,6 @@
+<!--suppress ALL -->
 <template>
-  <div>
+  <div style="height: 90%">
     <el-date-picker
       v-model="timeRange"
       :picker-options="pickerOptions"
@@ -7,15 +8,16 @@
       range-separator="至"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
-      style="margin-bottom: 10px;" />
-    <ve-histogram :data="chartData" :settings="settings" height="350px" />
+      style="margin-bottom: 10px;z-index: 10000"
+      size="small"/>
+    <ve-histogram :data="chartData" :settings="settings" :extend="chartExtend" style="margin-top: -50px" height="100%"/>
   </div>
 </template>
 
 <script>
-import { formatToString, getDate, oneDayTime } from '@/utils/calendarUtil'
-import { devAlarmCount } from '@/api/statistics'
 
+import { devAlarmCount } from '@/api/statistics'
+import { formatToString, parseToDate, getDate, oneDayTime } from '@/utils/calendarUtil'
 const now = new Date()
 
 export default {
@@ -30,12 +32,22 @@
         columns: ['name', 'count'],
         rows: []
       },
+      chartExtend: {
+        series: {
+          barMaxWidth: 50
+        },
+        grid: {
+          containLabel: true,
+          bottom: '10%'
+        }
+      },
       settings: {
         labelMap: {
           'name': '设备类型',
-          'count': '报警数量'
+          'count': ''
         },
-        max: [4]
+        max: [4],
+        area: false
       },
       timeRange: [],
       pickerOptions: {
@@ -99,6 +111,13 @@
       devAlarmCount(this.params).then(response => {
         if (response.code === 200) {
           this.chartData.rows = response.data
+          var max = 4
+          for(var i=0;i<response.data.length;i++){
+            if(Number(response.data[i].count)>max){
+              max = Number(response.data[i].count)
+            }
+          }
+          this.settings.max = [max]
         }
       })
     }
diff --git a/src/views/ctrl/statCharts/devCount.vue b/src/views/ctrl/statCharts/devCount.vue
index d3e2902..db55fbe 100644
--- a/src/views/ctrl/statCharts/devCount.vue
+++ b/src/views/ctrl/statCharts/devCount.vue
@@ -1,5 +1,6 @@
 <template>
-  <ve-ring :data="chartData" :settings="settings" />
+  <ve-histogram :data="chartData" :settings="settings" :extend="chartExtend" style="margin-top: -20px" height="100%"/>
+  <!--<ve-ring :data="chartData" :settings="settings" />-->
 </template>
 
 <script>
@@ -9,14 +10,55 @@
   name: 'DevCount',
   data() {
     return {
+      chartExtend: {
+        series: {
+          barMaxWidth: 50
+        },
+        xAxis: {
+          axisLabel: {
+            interval: 0,
+            //换行显示
+            formatter: function(value) {
+              let result = ""; //拼接加\n返回的类目项
+              let maxLength = 2; //每项显示文字个数
+              let valLength = value.length; //X轴类目项的文字个数
+              let rowNumber = Math.ceil(valLength / maxLength); //类目项需要换行的行数
+              if (rowNumber > 1) {
+                //如果文字大于3,
+                for (let i = 0; i < rowNumber; i++) {
+                  let temp = ""; //每次截取的字符串
+                  let start = i * maxLength; //开始截取的位置
+                  let end = start + maxLength; //结束截取的位置
+                  temp = value.substring(start, end) + "\n";
+                  result += temp; //拼接生成最终的字符串
+                }
+                return "{labelText|" + result + "}";
+              } else {
+                return "{labelText|" + value + "}";
+              }
+            },
+            rich: {
+              labelText: {
+                lineHeight: 18
+              }
+            }
+          }
+        }
+      },
       chartData: {
         columns: ['name', 'count'],
         rows: []
       },
       settings: {
-        // legendLimit: 4
-        radius: [60, 100]
-      }
+        labelMap: {
+          'name': '设备类型',
+          'count': ''
+        }
+      },
+      // settings: {
+      //   // legendLimit: 4
+      //   radius: [60, 100]
+      // }
     }
   },
   activated() {
@@ -26,6 +68,9 @@
     fetchData() {
       devCount().then(response => {
         if (response.code === 200) {
+          for(var i=0;i<response.data.length;i++){
+            response.data[i].name = response.data[i].name.replace('防护','')
+          }
           this.chartData.rows = response.data
         }
       })
diff --git a/src/views/ctrl/statCharts/inOutCount.vue b/src/views/ctrl/statCharts/inOutCount.vue
index 502157e..d65ec69 100644
--- a/src/views/ctrl/statCharts/inOutCount.vue
+++ b/src/views/ctrl/statCharts/inOutCount.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="height: 100%">
     <el-date-picker
       v-model="timeRange"
       :picker-options="pickerOptions"
@@ -7,8 +7,9 @@
       range-separator="至"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
-      style="margin-bottom: 10px"/>
-    <ve-line :data="chartData" :settings="settings" height="350px" />
+      size="small"
+      style="margin-bottom: 10px;z-index: 10000"/>
+    <ve-line :data="chartData" :settings="settings" :extend="barExtend" style="margin-top: -50px;" height="93%"/>
   </div>
 </template>
 
@@ -30,6 +31,17 @@
         columns: ['date', 'staff', 'visitor', 'car', 'visitorCar'],
         rows: []
       },
+
+      barExtend:{
+        legend:{  // 隐藏图例
+          x: 'center',
+          y: 'bottom'
+        },
+        grid: {
+          containLabel: true,
+          bottom: '10%'
+        },
+      },
       settings: {
         labelMap: {
           'staff': '内部人员',
@@ -37,11 +49,11 @@
           'car': '内部车辆',
           'visitorCar': '来访车辆'
         },
-        xAxisType: 'time',
+        // xAxisType: 'time',
         max: [4],
         area: false,
         metrics: ['staff', 'visitor', 'car', 'visitorCar'],
-        dimension: ['date']
+        dimension: ['date'],
       },
       timeRange: [],
       pickerOptions: {
@@ -106,7 +118,7 @@
         if (response.code === 200) {
           const data = this.parseStatisticsData(response.data)
           this.chartData.rows = data.rowDatas
-          this.chartData.max = [data.maxCount]
+          this.settings.max = [data.maxCount]
         }
       })
     },
@@ -164,7 +176,7 @@
 
         if (typeof visitorCar !== 'undefined') {
           if (visitorCar.date === date) {
-            visitorCarCount = car.count
+            visitorCarCount = visitorCar.count
             indexVc++
           }
         }
@@ -172,6 +184,18 @@
         if (staffCount + visitorCount + carCount + visitorCarCount > 0) {
           rowDatas.push({ date: date, staff: staffCount, visitor: visitorCount, car: carCount, visitorCar: visitorCarCount })
         }
+        if(maxCount<staffCount){
+          maxCount = staffCount
+        }
+        if(maxCount<visitorCount){
+          maxCount = visitorCount
+        }
+        if(maxCount<carCount){
+          maxCount = carCount
+        }
+        if(maxCount<visitorCarCount){
+          maxCount = visitorCarCount
+        }
         start += oneDayTime
       }
 
diff --git a/src/views/ctrl/statCharts/inOutDoorCount.vue b/src/views/ctrl/statCharts/inOutDoorCount.vue
index ab28cdd..93f3458 100644
--- a/src/views/ctrl/statCharts/inOutDoorCount.vue
+++ b/src/views/ctrl/statCharts/inOutDoorCount.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="height: 100%">
     <el-date-picker
       v-model="timeRange"
       :picker-options="pickerOptions"
@@ -7,8 +7,9 @@
       range-separator="至"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
-      style="margin-bottom: 10px;" />
-    <ve-histogram :data="chartData" :settings="settings" height="350px" />
+      style="margin-bottom: 10px;z-index: 10000"
+      size="small"/>
+    <ve-histogram :data="chartData" :settings="settings" :extend="chartExtend" style="margin-top: -50px"height="93%"/>
   </div>
 </template>
 
@@ -26,11 +27,26 @@
         beginDate: '',
         endDate: ''
       },
+      chartExtend: {
+        legend:{  // 隐藏图例
+          x: 'center',
+          y: 'bottom'
+        },
+        grid: {
+          containLabel: true,
+          bottom: '10%'
+        },
+        series: {
+          barMaxWidth: 50,
+          center: ['50%', '50%']
+        }
+      },
       chartData: {
         columns: ['name', 'person', 'car'],
         rows: []
       },
       settings: {
+        radius: [60, 100],
         labelMap: {
           'person': '人员',
           'car': '车辆'
@@ -102,7 +118,7 @@
         if (response.code === 200) {
           const data = this.parseStatisticsData(response.data)
           this.chartData.rows = data.rowDatas
-          this.chartData.max = [data.maxCount]
+          this.settings.max = [data.maxCount]
         }
       })
     },
diff --git a/src/views/ctrl/statCharts/inOutKeyCount.vue b/src/views/ctrl/statCharts/inOutKeyCount.vue
index fa9a0b7..10108d6 100644
--- a/src/views/ctrl/statCharts/inOutKeyCount.vue
+++ b/src/views/ctrl/statCharts/inOutKeyCount.vue
@@ -1,5 +1,7 @@
 <template>
-  <ve-ring :data="chartData" :settings="settings" />
+  <div style="height: 100%">
+    <ve-ring :data="chartData" :settings="settings" :extend="chartExtend"  height="90%"/>
+  </div>
 </template>
 
 <script>
@@ -9,6 +11,19 @@
   name: 'InOutKeyCount',
   data() {
     return {
+      chartExtend: {
+        legend:{  // 隐藏图例
+          x: 'center',
+          y: 'top'
+        },
+        grid: {
+          containLabel: true,
+          top: '10%'
+        },
+        series: {
+          center: ['50%', '50%']
+        }
+      },
       chartData: {
         columns: ['name', 'count'],
         rows: []
diff --git a/src/views/ctrl/statCharts/inOutToday.vue b/src/views/ctrl/statCharts/inOutToday.vue
index c37fa7b..ae67856 100644
--- a/src/views/ctrl/statCharts/inOutToday.vue
+++ b/src/views/ctrl/statCharts/inOutToday.vue
@@ -1,5 +1,7 @@
 <template>
-  <ve-ring :data="chartData" :settings="settings" />
+  <div style="height: 100%">
+    <ve-ring :data="chartData" :settings="settings" :extend="chartExtend"  height="90%"/>
+  </div>
 </template>
 
 <script>
@@ -18,6 +20,15 @@
           { count: 1, name: '来访车辆' }
         ]
       },
+      chartExtend: {
+        legend:{  // 隐藏图例
+          x: 'center',
+          y: 'top'
+        },
+        series: {
+          center: ['50%', '50%']
+        }
+      },
       settings: {
         radius: [60, 100]
       }
diff --git a/src/views/deviceManage/deviceDetail.vue b/src/views/deviceManage/deviceDetail.vue
index 701052d..8245327 100644
--- a/src/views/deviceManage/deviceDetail.vue
+++ b/src/views/deviceManage/deviceDetail.vue
@@ -9,7 +9,7 @@
         <!--</el-col>-->
         <el-col :span="12">
           <el-form-item label="设备编号">
-            <el-input v-model.trim="dataForm.name" disabled type="text"/>
+            <el-input v-model.trim="dataForm.devcode" disabled type="text"/>
             <!--<span>{{ dataForm.devcode }}</span>-->
           </el-form-item>
         </el-col>
diff --git a/src/views/layout/components/AppHeader.vue b/src/views/layout/components/AppHeader.vue
index c3235b4..2e45954 100644
--- a/src/views/layout/components/AppHeader.vue
+++ b/src/views/layout/components/AppHeader.vue
@@ -1,12 +1,12 @@
 <template>
   <!--<div :style="{backgroundImage:'url('+headerUrl+')'}" class="app-header">-->
   <div style="background-color: #0078ff;" class="app-header">
-    <h3>{{ title }}</h3>
+    <h3 @click="backToIndex">{{ title }}</h3>
     <!--子系统选项-->
     <el-dropdown class="systemSelect" @command="handleCommand">
       <span class="el-dropdown-link" style="color: white">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
       </span>
-      <el-dropdown-menu slot="dropdown" >
+      <el-dropdown-menu slot="dropdown" style="z-index: 10000" >
         <el-dropdown-item>
           <span style="display:block;" @click="backToIndex">回首页</span>
         </el-dropdown-item>
@@ -15,7 +15,7 @@
     </el-dropdown>
 
     <div v-show="currentSystem.code === 'ctrl'" class="back-to-overview">
-      <el-button type="info" round @click="backToOverview">运行总览</el-button>
+      <el-button type="info" round @click="backToOverview" style="background-color: rgba(255,255,255,0.31);border: 0px">运行总览</el-button>
     </div>
 
     <el-dropdown class="avatar-container">
diff --git a/src/views/overview/doorIndex.vue b/src/views/overview/doorIndex.vue
index 5d2dce2..7cd40ff 100644
--- a/src/views/overview/doorIndex.vue
+++ b/src/views/overview/doorIndex.vue
@@ -58,26 +58,51 @@
           <i v-else class="el-icon-arrow-down"/>
         </span>
       </div>
-      <transition name="el-collapse-transition">
-        <el-scrollbar
-          v-show="tableShow"
-          :style="{ visibility: tableShow ? 'visible' : 'hidden'}"
-          :class="{ moredatascollor: alarmList.length > 6 }"
-          :native="false">
-          <el-table
-            :data="alarmList"
-            class="alarm-list-table"
-            border
-            stripe
-            @row-click="alarmRowClick">
-            <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{ scope.row[column.value] }}
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-scrollbar>
-      </transition>
+      <div v-show="alarmList.length > 4 && tableShow">
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 32px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 231px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          height="200"
+          style="border-left: 1px solid #2470AC;"
+          v-if="tableShow"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-show="alarmList.length < 5 && tableShow">
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          v-if="tableShow"
+          style="border: 1px solid #2470AC"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
     </div>
 
     <!-- 中间平面图区域 -->
@@ -730,9 +755,12 @@
   .main-page {
     background-size: cover;
     background-color: #023d83;
-    height: 100vh;
+    height: 98vh;
   }
-
+  .tableLine {
+    margin-top: 9px;
+    width: 463px;
+  }
   .main-header {
     width: 100vw;
   }
@@ -863,16 +891,24 @@
         margin-left: 20px;
       }
     }
-    .el-scrollbar {
-      /*height: 200px;*/
-      width: 100%;
+    // 滚动条的滑块
+    /deep/ .el-table__body-wrapper  {
+      background-color: #023D83;
+      border: 0px solid white;
     }
-    .moredatascollor {
-      height: 200px;
+    /deep/ .el-table--border th.gutter:last-of-type {
+      border: 1px solid #023D83;
+      border-bottom-width: 1px;
+      background-color: #023D83;
     }
-    .el-scrollbar__wrap {
-      overflow-y: auto;
-      overflow-x: hidden;
+    /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
+      background-color: #023D83;
+    }
+    /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+      display: none;
+    }
+    /deep/ .el-scrollbar__wrap {
+      overflow-x: hidden !important;
       margin-bottom: 0px !important;
     }
     .el-table {
@@ -906,16 +942,25 @@
     font-size: 15px;
     color: #FFFFFF;
     font-weight: normal;
+    border-color: #2470AC;
   }
-
+  .el-table--border::after, .el-table--group::after, .el-table::before{
+    background-color: #023d83;
+  }
+  .alarm-now-block /deep/ .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
+    border-color: #023d83;
+  }
   .alarm-now-block /deep/ .el-table__row td {
     background-color: #023D83;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ .el-table__body tr:hover > td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ tr.el-table__row--striped td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
 
   .map-tab {
@@ -1091,6 +1136,10 @@
   /*}*/
 
   @media(max-width: 1440px) {
+    .tableLine {
+      margin-top: 0px;
+      width: 343px;
+    }
     .main-title {
       height: 65px;
       padding-top: 16px;
diff --git a/src/views/overview/fenceIndex.vue b/src/views/overview/fenceIndex.vue
index 9466288..62a35e8 100644
--- a/src/views/overview/fenceIndex.vue
+++ b/src/views/overview/fenceIndex.vue
@@ -58,26 +58,52 @@
           <i v-else class="el-icon-arrow-down"/>
         </span>
       </div>
-      <transition name="el-collapse-transition">
-        <el-scrollbar
-          v-show="tableShow"
-          :style="{ visibility: tableShow ? 'visible' : 'hidden'}"
-          :class="{ moredatascollor: alarmList.length > 6 }"
-          :native="false">
-          <el-table
-            :data="alarmList"
-            class="alarm-list-table"
-            border
-            stripe
-            @row-click="alarmRowClick">
-            <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{ scope.row[column.value] }}
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-scrollbar>
-      </transition>
+      <div v-show="alarmList.length > 4 && tableShow">
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 32px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 231px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          height="200"
+          style="border-left: 1px solid #2470AC;"
+          v-if="tableShow"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-show="alarmList.length < 5 && tableShow">
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          v-if="tableShow"
+          style="border: 1px solid #2470AC"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
     </div>
 
     <!-- 中间平面图区域 -->
@@ -725,10 +751,14 @@
       font-weight: normal;
     }
   }
+  .tableLine {
+    margin-top: 9px;
+    width: 463px;
+  }
   .main-page {
     background-size: cover;
     background-color: #023d83;
-    height: 100vh;
+    height: 98vh;
   }
 
   .main-header {
@@ -859,16 +889,24 @@
         margin-left: 20px;
       }
     }
-    .el-scrollbar {
-      /*height: 200px;*/
-      width: 100%;
+    // 滚动条的滑块
+    /deep/ .el-table__body-wrapper  {
+      background-color: #023D83;
+      border: 0px solid white;
     }
-    .moredatascollor {
-      height: 200px;
+    /deep/ .el-table--border th.gutter:last-of-type {
+      border: 1px solid #023D83;
+      border-bottom-width: 1px;
+      background-color: #023D83;
     }
-    .el-scrollbar__wrap {
-      overflow-y: auto;
-      overflow-x: hidden;
+    /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
+      background-color: #023D83;
+    }
+    /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+      display: none;
+    }
+    /deep/ .el-scrollbar__wrap {
+      overflow-x: hidden !important;
       margin-bottom: 0px !important;
     }
     .el-table {
@@ -902,16 +940,25 @@
     font-size: 15px;
     color: #FFFFFF;
     font-weight: normal;
+    border-color: #2470AC;
   }
-
+  .el-table--border::after, .el-table--group::after, .el-table::before{
+    background-color: #023d83;
+  }
+  .alarm-now-block /deep/ .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
+    border-color: #023d83;
+  }
   .alarm-now-block /deep/ .el-table__row td {
     background-color: #023D83;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ .el-table__body tr:hover > td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ tr.el-table__row--striped td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
 
   .map-tab {
@@ -1087,6 +1134,10 @@
   /*}*/
 
   @media(max-width: 1440px) {
+    .tableLine {
+      margin-top: 0px;
+      width: 343px;
+    }
     .main-title {
       height: 65px;
       padding-top: 16px;
diff --git a/src/views/overview/keyIndex.vue b/src/views/overview/keyIndex.vue
index 37405a8..a461c94 100644
--- a/src/views/overview/keyIndex.vue
+++ b/src/views/overview/keyIndex.vue
@@ -33,20 +33,6 @@
             <span v-text="dev.alarm"/>
           </div>
         </el-col>
-
-        <!--<el-col :span="6" class="sub-data-block dev-offline">-->
-          <!--<div class="statis-block">-->
-            <!--<span v-text="dev.offLine"/>-->
-          <!--</div>-->
-          <!--<div class="sub-title">离线</div>-->
-        <!--</el-col>-->
-
-        <!--<el-col :span="6" class="sub-data-block dev-closed">-->
-          <!--<div class="statis-block">-->
-            <!--<span v-text="dev.closed"/>-->
-          <!--</div>-->
-          <!--<div class="sub-title">关闭</div>-->
-        <!--</el-col>-->
       </el-row>
     </div>
 
@@ -58,26 +44,52 @@
           <i v-else class="el-icon-arrow-down"/>
         </span>
       </div>
-      <transition name="el-collapse-transition">
-        <el-scrollbar
-          v-show="tableShow"
-          :style="{ visibility: tableShow ? 'visible' : 'hidden'}"
-          :class="{ moredatascollor: alarmList.length > 6 }"
-          :native="false">
-          <el-table
-            :data="alarmList"
-            class="alarm-list-table"
-            border
-            stripe
-            @row-click="alarmRowClick">
-            <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{ scope.row[column.value] }}
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-scrollbar>
-      </transition>
+      <div v-show="alarmList.length > 4 && tableShow">
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 32px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 231px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          height="200"
+          style="border-left: 1px solid #2470AC;"
+          v-if="tableShow"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-show="alarmList.length < 5 && tableShow">
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          v-if="tableShow"
+          style="border: 1px solid #2470AC"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
     </div>
 
     <!-- 中间平面图区域 -->
@@ -95,49 +107,16 @@
     </div>
 
     <!-- 平面图区域设备类型按钮 -->
-    <div v-show="showType" class="bottom-center" :style="{ width: btnwidth + 'px'}">
-      <el-col class="dev-icon" @click.native="selectDevByType('4', $event)">
-        <img id="4-1-img" v-if="checkDevType1[0]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-        <img id="4-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-        <span>人脸识别</span>
-      </el-col>
-      <!--<el-col class="dev-icon" @click.native="selectDevByType('5', $event)">-->
-        <!--<img id="5-1-img" v-if="checkDevType1[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
-        <!--<img id="5-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
-        <!--<span>车牌轨迹</span>-->
-      <!--</el-col>-->
-      <!--<el-col class="dev-icon" @click.native="selectDevByType('8', $event)">-->
-        <!--<img id="8-1-img" v-if="checkDevType1[2]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
-        <!--<img id="8-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
-        <!--<span>周界防护</span>-->
-      <!--</el-col>-->
-      <!--<el-col class="dev-icon" @click.native="selectDevByType('9', $event)">-->
-        <!--<img id="9-1-img" v-if="checkDevType1[3]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
-        <!--<img id="9-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
-        <!--<span>标准数字</span>-->
-      <!--</el-col>-->
-      <!--<el-col class="dev-icon" @click.native="selectDevByType('10', $event)">-->
-        <!--<img id="10-1-img" v-if="checkDevType1[4]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
-        <!--<img id="10-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
-        <!--<span>智能球形</span>-->
-      <!--</el-col>-->
-      <!--<el-col class="dev-icon" @click.native="selectDevByType('11', $event)">-->
-        <!--<img id="11-1-img" v-if="checkDevType1[5]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
-        <!--<img id="11-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
-        <!--<span>标准半球</span>-->
-      <!--</el-col>-->
-    </div>
-    <!-- 平面图区域设备类型按钮 -->
     <div v-show="!showType"class="bottom-center" :style="{ width: cameraTypeNum*btnwidth + 'px'}">
       <el-col ref="all" class="dev-icon dev-type-selected" @click.native="selectDevByType('all', $event)">
         <img v-if="checkDevType[0]" src="@/assets/overview_images/icons/icon-all-checked.png">
         <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
         <span>全部</span>
       </el-col>
-      <el-col ref="camera" :class="cameraClass" @click.native="showType=!showType;selectDevByType('camera', $event)">
-        <img id="cam_img_red" v-if="checkDevType[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-        <img id="cam_img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-        <span>摄像头</span>
+      <el-col class="dev-icon" @click.native="selectDevByType('camera4', $event)">
+        <img id="4-1-img" v-if="checkDevType[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
+        <img id="4-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
+        <span>人脸识别</span>
       </el-col>
       <el-col v-show="showTemp" class="dev-icon" @click.native="selectDevByType('temperature', $event)">
         <img v-if="checkDevType[2]" src="@/assets/overview_images/icons/icon-temperature-checked.png">
@@ -364,7 +343,6 @@
       }, // 设备详情表单
       cameraClass:'dev-icon',
       showType : false,
-      checkDevType1: [false, false, false, false, false, false], // 摄像头类型
       checkDevType: [true, false, false, false, false] // 选中设备类型
     }
   },
@@ -462,7 +440,7 @@
       }else if(pic==='3'){
         this.changeMap('tg_4_1')
       }else if(pic==='4'){
-        this.changeMap('tg_4_1')
+        this.changeMap('tg_4_5')
       }
       setTimeout(() => {
         var obj = document.getElementById(val.toString());
@@ -477,24 +455,6 @@
     handleKeyup(val){ //单击收起摄像头分类
       this.showAlarmDetail  = false
       this.showDevDetail  = false
-      var item = ['人脸识别']
-      for(var i=0;i<item.length;i++){
-        if(item[i]===val.target.innerText){
-          return
-        }
-      }
-      if(val.target.id.endsWith('-1-img')||val.target.id.endsWith('-2-img')|| val.target.id==='cam_img' || val.target.id==='cam_img_red'){
-        return
-      }
-      if( val.target.innerText!=='摄像头') {
-        this.showType = false
-        const devTypes = document.querySelectorAll('.dev-icon')
-        for(var i=0;i<this.checkDevType.length;i++) {
-          if (this.checkDevType[i]) {
-            devTypes[i+1].className += ' dev-type-selected'
-          }
-        }
-      }
     },
     handleSelect(key, keyPath) {
       this.selectDevByType(key,undefined)
@@ -643,14 +603,13 @@
       if(type !== 'camera'){
         // 添加选中的样式
         if (typeof event === 'undefined') {
-          devTypes[1].className += ' dev-type-selected'
+          devTypes[0].className += ' dev-type-selected'
         } else {
           event.currentTarget.className += ' dev-type-selected'
         }
       }
       if(type!=='camera'){
         this.checkDevType = [false, false, false, false, false]
-        this.checkDevType1 = [false, false, false, false, false, false]
       }
       if (type === 'all') {
         if(this.bgImageSrc===tg_4_5){
@@ -660,14 +619,7 @@
         }
         // this.devListParams.deviceTypes = []
         this.checkDevType[0] = true
-      } else if(type==='camera'){
-        for(var i=0;i<this.checkDevType1.length;i++){
-          if(this.checkDevType1[i]) {
-            devTypes[i].className += ' dev-type-selected'
-          }
-        }
-        return
-      } else if (type === 'temperature') {
+      }  else if (type === 'temperature') {
         this.devListParams.deviceTypes = temperatureTypes.toString()
         this.checkDevType[2] = true
       } else if (type === 'smoking') {
@@ -676,30 +628,24 @@
       } else if (type === 'sound') {
         this.devListParams.deviceTypes = soundTypes.toString()
         this.checkDevType[4] = true
-      }else if(type === '4'){
+      }else if(type === 'camera4'){
         this.devListParams.deviceTypes = '4'
         this.checkDevType[1] = true
-        this.checkDevType1[0] = true
       }else if(type === '5'){
         this.devListParams.deviceTypes = '5'
         this.checkDevType[1] = true
-        this.checkDevType1[1] = true
       }else if(type === '8'){
         this.devListParams.deviceTypes = '8'
         this.checkDevType[1] = true
-        this.checkDevType1[2] = true
       }else if(type === '9'){
         this.devListParams.deviceTypes = '9'
         this.checkDevType[1] = true
-        this.checkDevType1[3] = true
       }else if(type === '10'){
         this.devListParams.deviceTypes = '10'
         this.checkDevType[1] = true
-        this.checkDevType1[4] = true
       }else if(type === '11'){
         this.devListParams.deviceTypes = '11'
         this.checkDevType[1] = true
-        this.checkDevType1[5] = true
       }
       this.fetchDeviceData()
       // if(this.checkDevType[1]){
@@ -866,18 +812,13 @@
       }else{
         this.devListParams.deviceTypes = '1,2,4,12'
       }
-      // this.devListParams.deviceTypes = []
       if (index === 'tg_main') {
-        // this.imgSizeOriginal = { width: 2245, height: 1586 }
         this.devListParams.picture = '1'
       }else if (index === 'tg_3_1') {
-        // this.imgSizeOriginal = { width: 2245, height: 1586 }
         this.devListParams.picture = '2'
       } else if (index === 'tg_4_1') {
-        // this.imgSizeOriginal = { width: 2218, height: 2169 }
         this.devListParams.picture = '3'
       }else if (index === 'tg_4_5') {
-        // this.imgSizeOriginal = { width: 2245, height: 1586 }
         this.devListParams.picture = '4'
       }
       overviewDeviceList(this.devListParams).then(response => {
@@ -1060,10 +1001,14 @@
   /deep/ .el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
     border-bottom-width: 0px;
   }
+  .tableLine {
+    margin-top: 9px;
+    width: 463px;
+  }
   .main-page {
     background-size: cover;
     background-color: #023d83;
-    height: 100vh;
+    height: 98vh;
   }
 
   .main-header {
@@ -1194,16 +1139,24 @@
         margin-left: 20px;
       }
     }
-    .el-scrollbar {
-      /*height: 200px;*/
-      width: 100%;
+    // 滚动条的滑块
+    /deep/ .el-table__body-wrapper  {
+      background-color: #023D83;
+      border: 0px solid white;
     }
-    .moredatascollor {
-      height: 200px;
+    /deep/ .el-table--border th.gutter:last-of-type {
+      border: 1px solid #023D83;
+      border-bottom-width: 1px;
+      background-color: #023D83;
     }
-    .el-scrollbar__wrap {
-      overflow-y: auto;
-      overflow-x: hidden;
+    /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
+      background-color: #023D83;
+    }
+    /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+      display: none;
+    }
+    /deep/ .el-scrollbar__wrap {
+      overflow-x: hidden !important;
       margin-bottom: 0px !important;
     }
     .el-table {
@@ -1237,16 +1190,25 @@
     font-size: 15px;
     color: #FFFFFF;
     font-weight: normal;
+    border-color: #2470AC;
   }
-
+  .el-table--border::after, .el-table--group::after, .el-table::before{
+    background-color: #023d83;
+  }
+  .alarm-now-block /deep/ .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
+    border-color: #023d83;
+  }
   .alarm-now-block /deep/ .el-table__row td {
     background-color: #023D83;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ .el-table__body tr:hover > td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ tr.el-table__row--striped td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
 
   .map-tab {
@@ -1431,6 +1393,10 @@
   /*}*/
 
   @media(max-width: 1440px) {
+    .tableLine {
+      margin-top: 0px;
+      width: 343px;
+    }
     .main-title {
       height: 65px;
       padding-top: 16px;
diff --git a/src/views/overview/regionIndex.vue b/src/views/overview/regionIndex.vue
index 69e7606..d4ea083 100644
--- a/src/views/overview/regionIndex.vue
+++ b/src/views/overview/regionIndex.vue
@@ -58,26 +58,52 @@
           <i v-else class="el-icon-arrow-down"/>
         </span>
       </div>
-      <transition name="el-collapse-transition">
-        <el-scrollbar
-          v-show="tableShow"
-          :style="{ visibility: tableShow ? 'visible' : 'hidden'}"
-          :class="{ moredatascollor: alarmList.length > 6 }"
-          :native="false">
-          <el-table
-            :data="alarmList"
-            class="alarm-list-table"
-            border
-            stripe
-            @row-click="alarmRowClick">
-            <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{ scope.row[column.value] }}
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-scrollbar>
-      </transition>
+      <div v-show="alarmList.length > 4 && tableShow">
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 32px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 231px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          height="200"
+          style="border-left: 1px solid #2470AC;"
+          v-if="tableShow"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-show="alarmList.length < 5 && tableShow">
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          v-if="tableShow"
+          style="border: 1px solid #2470AC"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
     </div>
 
     <!-- 中间平面图区域 -->
@@ -293,7 +319,7 @@
       title: getProject().title,
       bgImageSrc: tg_main,
       devListParams: {
-        picture: '3',
+        picture: '1',
         areaTypeId: 3,
         deviceTypes: '4,9,10,11'
       },
@@ -718,10 +744,14 @@
       font-weight: normal;
     }
   }
+  .tableLine {
+    margin-top: 9px;
+    width: 463px;
+  }
   .main-page {
     background-size: cover;
     background-color: #023d83;
-    height: 100vh;
+    height: 98vh;
   }
 
   .main-header {
@@ -852,16 +882,24 @@
         margin-left: 20px;
       }
     }
-    .el-scrollbar {
-      /*height: 200px;*/
-      width: 100%;
+    // 滚动条的滑块
+    /deep/ .el-table__body-wrapper  {
+      background-color: #023D83;
+      border: 0px solid white;
     }
-    .moredatascollor {
-      height: 200px;
+    /deep/ .el-table--border th.gutter:last-of-type {
+      border: 1px solid #023D83;
+      border-bottom-width: 1px;
+      background-color: #023D83;
     }
-    .el-scrollbar__wrap {
-      overflow-y: auto;
-      overflow-x: hidden;
+    /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
+      background-color: #023D83;
+    }
+    /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+      display: none;
+    }
+    /deep/ .el-scrollbar__wrap {
+      overflow-x: hidden !important;
       margin-bottom: 0px !important;
     }
     .el-table {
@@ -895,16 +933,25 @@
     font-size: 15px;
     color: #FFFFFF;
     font-weight: normal;
+    border-color: #2470AC;
   }
-
+  .el-table--border::after, .el-table--group::after, .el-table::before{
+    background-color: #023d83;
+  }
+  .alarm-now-block /deep/ .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
+    border-color: #023d83;
+  }
   .alarm-now-block /deep/ .el-table__row td {
     background-color: #023D83;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ .el-table__body tr:hover > td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ tr.el-table__row--striped td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
 
   .map-tab {
@@ -1080,6 +1127,10 @@
   /*}*/
 
   @media(max-width: 1440px) {
+    .tableLine {
+      margin-top: 0px;
+      width: 343px;
+    }
     .main-title {
       height: 65px;
       padding-top: 16px;
diff --git a/src/views/staff/staffAdd.vue b/src/views/staff/staffAdd.vue
index 769e6d6..698cf37 100644
--- a/src/views/staff/staffAdd.vue
+++ b/src/views/staff/staffAdd.vue
@@ -116,6 +116,9 @@
           <el-row>
             <el-button type="primary" plain class="id-card-btn" :disabled="canRead" @click="readIDCard">读取身份证</el-button>
           </el-row>
+          <el-row>
+            <el-button type="primary" plain class="id-card-btn" @click="readCamera">{{ btnCamera }}</el-button>
+          </el-row>
         </el-col>
       </el-row>
     </el-form>
@@ -126,8 +129,13 @@
           <el-button v-show="isKey" type="primary" style="margin-left: 20px;" @click="registerIris"> 注册虹膜 </el-button>
           <el-button type="primary" style="margin-left: 20px;" @click="saveData"> 保存 </el-button>
         </el-col>
+        <el-col :span="6" :offset="3">
+          <video v-show="showVideo" width="200px" height="150px" style="margin-left: -8px"></video>
+          <canvas v-show = "false" width="200px" height="150px"></canvas>
+        </el-col>
       </el-row>
     </div>
+
     <capture-iris ref="captureIris"/>
   </div>
 </template>
@@ -150,6 +158,9 @@
       deptList: [],
       isEditMode: false, // 是否为编辑模式，编辑模式部分字段不允许修改，且没有重置和虹膜注册功能
       isKey: false, // 是否重点区域授权人员
+      btnCamera:'读取摄像头',
+      showVideo: false,
+      stream:'',
       personForm: {
         id: '', // 人员id
         idCard: '', // 身份证号
@@ -284,6 +295,81 @@
         this.formLoading = false
       })
     },
+    readCamera() {
+      if(this.btnCamera === '读取摄像头'){
+        this.cameraImgFile()
+      }else{
+        this.getAPhoto()
+      }
+    },
+    getAPhoto() {
+      //绘制canvas图形
+      let video = document.getElementsByTagName("video")[0]
+      var canvas = document.getElementsByTagName('canvas')[0]
+      var context = canvas.getContext('2d')
+      context.clearRect(0, 0, context.width, context.height);
+      context.drawImage(video, 0, 0,200,150);
+      this.showVideo = false
+      //把canvas图像转为img图片
+      this.photo = canvas.toDataURL("image/png");
+      var mediaStreamTrack =  this.stream.getTracks()[0];
+      mediaStreamTrack.stop();
+      this.btnCamera = '读取摄像头'
+    },
+    // 拍照上传获取video
+    cameraImgFile() {
+      let _this = this;
+
+      // 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象
+      if (navigator.mediaDevices === undefined) {
+        navigator.mediaDevices = {};
+      }
+      // 一些浏览器部分支持 mediaDevices。我们不能直接给对象设置 getUserMedia
+      // 因为这样可能会覆盖已有的属性。这里我们只会在没有getUserMedia属性的时候添加它。
+      if (navigator.mediaDevices.getUserMedia === undefined) {
+        navigator.mediaDevices.getUserMedia = function(constraints) {
+          // 首先，如果有getUserMedia的话，就获得它
+          var getUserMedia =
+            navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
+
+          // 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
+          if (!getUserMedia) {
+            return Promise.reject(
+              new Error("getUserMedia is not implemented in this browser")
+            );
+          }
+          // 否则，为老的navigator.getUserMedia方法包裹一个Promise
+          return new Promise(function(resolve, reject) {
+            getUserMedia.call(navigator, constraints, resolve, reject);
+          });
+        };
+      }
+      navigator.mediaDevices
+        .getUserMedia({ video: true, audio: false })
+        .then(function(stream) {
+          _this.stream = stream;
+          _this.videoShow = true;
+          // 旧的浏览器可能没有srcObject
+          _this.$nextTick(() => {
+            let video = document.getElementsByTagName("video")[0]
+            if ("srcObject" in video) {
+              video.srcObject = stream;
+            } else {
+              // 防止在新的浏览器里使用它，应为它已经不再支持了
+              video.src = window.URL.createObjectURL(stream);
+            }
+            _this.showVideo = true
+            _this.btnCamera = '拍照'
+            video.onloadedmetadata = function(e) {
+              video.play();
+            };
+          });
+        })
+        .catch(function(err) {
+          _this.videoShow = false;
+          _this.$message.warning("未发现可拍照设备或出现其他错误！");
+        });
+    },
     readIDCard() {
       this.resetForm()
       this.canRead = true
diff --git a/src/views/staff/staffEdit.vue b/src/views/staff/staffEdit.vue
index 2f8d4ca..04291b3 100644
--- a/src/views/staff/staffEdit.vue
+++ b/src/views/staff/staffEdit.vue
@@ -117,6 +117,9 @@
           <el-row>
             <el-button type="primary" plain :disabled="canRead"  class="id-card-btn" @click="readIDCard">读取身份证</el-button>
           </el-row>
+          <el-row>
+            <el-button type="primary" plain class="id-card-btn" @click="readCamera">{{ btnCamera }}</el-button>
+          </el-row>
         </el-col>
       </el-row>
     </el-form>
@@ -126,6 +129,10 @@
           <el-button v-show="isKey" type="primary" style="margin-left: 20px;" @click="registerIris"> 注册虹膜 </el-button>
           <el-button type="primary" style="margin-left: 20px;" @click="saveData"> 保存 </el-button>
         </el-col>
+        <el-col :span="6" :offset="3">
+          <video v-show="showVideo" width="200px" height="150px" style="margin-left: -8px"></video>
+          <canvas v-show = "false" width="200px" height="150px"></canvas>
+        </el-col>
       </el-row>
     </div>
 
@@ -161,6 +168,9 @@
     return {
       canRead: false,
       deptList: [],
+      btnCamera:'读取摄像头',
+      showVideo: false,
+      stream:'',
       isEditMode: false, // 是否为编辑模式，编辑模式部分字段不允许修改，且没有重置和虹膜注册功能
       isKey: false, // 是否重点区域授权人员
       reCaptureIris: '0', // 是否重新采集了虹膜
@@ -253,6 +263,81 @@
         this.keyAreaList = response.data
       })
     },
+    readCamera() {
+      if(this.btnCamera === '读取摄像头'){
+        this.cameraImgFile()
+      }else{
+        this.getAPhoto()
+      }
+    },
+    getAPhoto() {
+      //绘制canvas图形
+      let video = document.getElementsByTagName("video")[0]
+      var canvas = document.getElementsByTagName('canvas')[0]
+      var context = canvas.getContext('2d')
+      context.clearRect(0, 0, context.width, context.height);
+      context.drawImage(video, 0, 0,200,150);
+      this.showVideo = false
+      //把canvas图像转为img图片
+      this.photo = canvas.toDataURL("image/png");
+      var mediaStreamTrack =  this.stream.getTracks()[0];
+      mediaStreamTrack.stop();
+      this.btnCamera = '读取摄像头'
+    },
+    // 拍照上传获取video
+    cameraImgFile() {
+      let _this = this;
+
+      // 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象
+      if (navigator.mediaDevices === undefined) {
+        navigator.mediaDevices = {};
+      }
+      // 一些浏览器部分支持 mediaDevices。我们不能直接给对象设置 getUserMedia
+      // 因为这样可能会覆盖已有的属性。这里我们只会在没有getUserMedia属性的时候添加它。
+      if (navigator.mediaDevices.getUserMedia === undefined) {
+        navigator.mediaDevices.getUserMedia = function(constraints) {
+          // 首先，如果有getUserMedia的话，就获得它
+          var getUserMedia =
+            navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
+
+          // 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
+          if (!getUserMedia) {
+            return Promise.reject(
+              new Error("getUserMedia is not implemented in this browser")
+            );
+          }
+          // 否则，为老的navigator.getUserMedia方法包裹一个Promise
+          return new Promise(function(resolve, reject) {
+            getUserMedia.call(navigator, constraints, resolve, reject);
+          });
+        };
+      }
+      navigator.mediaDevices
+        .getUserMedia({ video: true, audio: false })
+        .then(function(stream) {
+          _this.stream = stream;
+          _this.videoShow = true;
+          // 旧的浏览器可能没有srcObject
+          _this.$nextTick(() => {
+            let video = document.getElementsByTagName("video")[0]
+            if ("srcObject" in video) {
+              video.srcObject = stream;
+            } else {
+              // 防止在新的浏览器里使用它，应为它已经不再支持了
+              video.src = window.URL.createObjectURL(stream);
+            }
+            _this.showVideo = true
+            _this.btnCamera = '拍照'
+            video.onloadedmetadata = function(e) {
+              video.play();
+            };
+          });
+        })
+        .catch(function(err) {
+          _this.videoShow = false;
+          _this.$message.warning("未发现可拍照设备或出现其他错误！");
+        });
+    },
     fetchData(id) {
       this.formLoading = true
       detailStaff(id).then(response => {
diff --git a/src/views/video/history.vue b/src/views/video/history.vue
index ed18111..de698a1 100644
--- a/src/views/video/history.vue
+++ b/src/views/video/history.vue
@@ -18,6 +18,7 @@
                   value-format="yyyy-MM-dd HH:mm:ss"
                   start-placeholder="搜索起始时间"
                   end-placeholder="搜索截止时间"
+                  arrow-control="true"
                   @focus="dateClick"
                   @change="dateSelected"/>
               </el-form-item>
@@ -25,11 +26,11 @@
               <!--<el-button class="filter-item" type="primary" @click="live">实时预览</el-button>-->
             </el-form>
           </div>
-          <div>
+          <div id="tabDiv">
             <!--<el-tabs v-model="activeName" type="card" @tab-click.once="handleClick">-->
               <!--<el-tab-pane label="海康" name="hk" >-->
                 <!--<iframe v-if="activeName==='hk'" zIndex="-1" name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html?wmode=opaque"/>-->
-                <iframe zIndex="-1" name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html?wmode=opaque"/>
+                <iframe name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html?wmode=opaque"/>
               <!--</el-tab-pane>-->
               <!--<el-tab-pane label="NVR" name="nvr">-->
                 <!--<iframe v-if="activeName==='nvr'" zIndex="-1" name="playNVR" class="iframe-body" src="/static/webCtrl/nvr/demo-easy.html?wmode=opaque"/>-->
@@ -43,6 +44,7 @@
 </template>
 <script>
 import VideoTree from './videoTree'
+import { formatToString, getDate, oneDayTime } from '@/utils/calendarUtil'
 export default {
   name: 'VideoHistory',
   components: { VideoTree },
@@ -84,9 +86,14 @@
     }
   },
   mounted() {
+    this.listQuery.startTime = getDate(0, 'DATE') + ' 00:00:00'
+    this.listQuery.endTime = getDate(0, 'SECOND')
+
+    this.timeRange = [this.listQuery.startTime, this.listQuery.endTime]
+    console.log(this.timeRange)
     setTimeout(() => {
       // console.log('treewidth: ' + this.$refs.tree.$el.offsetWidth.toString())
-      window.frames['playHK'].initPlugin('back')
+      window.frames['playHK'].initPlugin('back',document.getElementById("tabDiv").getBoundingClientRect().left)
     }, 1500)
   },
   methods: {
@@ -94,7 +101,7 @@
       if (tab.name === 'hk') {
         this.activeName = 'hk'
         console.log('hk')
-        window.frames['playHK'].initPlugin('back')
+        window.frames['playHK'].initPlugin('back',document.getElementById("tabDiv").getBoundingClientRect().left)
       } else if (tab.name === 'nvr') {
         this.activeName = 'nvr'
         // window.frames['playNVR'].stopPlayReal(null)
@@ -112,6 +119,7 @@
           if (this.activeName === 'nvr') {
             window.frames['playNVR'].search(0, this.listQuery.startTime, this.listQuery.endTime)
           } else if (this.activeName === 'hk') {
+            console.log(this.listQuery.monitorPoint, this.listQuery.startTime, this.listQuery.endTime)
             window.frames['playHK'].search(this.listQuery.monitorPoint, this.listQuery.startTime, this.listQuery.endTime)
           }
         }
@@ -120,7 +128,6 @@
     handleCameraClicked(camera) {
       console.log(camera)
       if (typeof camera.monitorPoint === 'undefined' || camera.monitorPoint === '') {
-        console.log('ip is null')
         return false
       } else {
         this.listQuery.monitorPoint = camera.monitorPoint
diff --git a/src/views/video/monitor.vue b/src/views/video/monitor.vue
index fa42257..dd66087 100644
--- a/src/views/video/monitor.vue
+++ b/src/views/video/monitor.vue
@@ -5,7 +5,7 @@
         <video-tree @click="handleCameraClicked"/>
       </el-col>
       <el-col :span="18">
-        <div ref="tabDiv" style="margin-top: 14px">
+        <div id="tabDiv">
           <!--<el-tabs v-model="activeName" type="border-card" @tab-click.once ="handleClick">-->
             <!--<el-tab-pane label="海康" name="hk">-->
               <!--<iframe v-if="activeName === 'hk'" name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html"/>-->
@@ -37,15 +37,16 @@
     }
   },
   mounted() {
+    // console.log(document.getElementById("tabDiv").getBoundingClientRect().left)
     setTimeout(() => {
-      window.frames['playHK'].initPlugin('real')
+      window.frames['playHK'].initPlugin('real',document.getElementById("tabDiv").getBoundingClientRect().left)
     }, 1000)
   },
   methods: {
     handleClick(tab, event) {
       if (tab.name === 'hk') {
         this.activeName = 'hk'
-        window.frames['playHK'].initPlugin('real')
+        window.frames['playHK'].initPlugin('real',document.getElementById("tabDiv").getBoundingClientRect().left)
       } else if (tab.name === 'nvr') {
         this.activeName = 'nvr'
         window.frames['playNVR'].stopPlayReal(null)
diff --git a/src/views/visitor/visitorAdd.vue b/src/views/visitor/visitorAdd.vue
index 87ec546..eb868d6 100644
--- a/src/views/visitor/visitorAdd.vue
+++ b/src/views/visitor/visitorAdd.vue
@@ -260,6 +260,11 @@
     },
     // 一位访客登记完毕
     visitorCheckedIn(visitor) {
+      if(visitor.sex === '2'){
+        visitor.sexStr = '女'
+      }else if(visitor.sex === '1'){
+        visitor.sexStr = '男'
+      }
       this.dataForm.visitorBaseDTOList.push(visitor)
     },
     detail(row) {
diff --git a/src/views/visitor/visitorAddCar.vue b/src/views/visitor/visitorAddCar.vue
index 8513b4c..83608e6 100644
--- a/src/views/visitor/visitorAddCar.vue
+++ b/src/views/visitor/visitorAddCar.vue
@@ -304,6 +304,11 @@
       if (type === 'createCar') {
         this.dataForm.visitCarDTOList.push(visitor)
       } else if (type === 'createPerson') {
+        if(visitor.sex === '2'){
+          visitor.sexStr = '女'
+        }else if(visitor.sex === '1'){
+          visitor.sexStr = '男'
+        }
         this.dataForm.visitorBaseDTOList.push(visitor)
       }
     },
diff --git a/src/views/visitor/visitorCarCheckIn.vue b/src/views/visitor/visitorCarCheckIn.vue
index c09abbb..149b940 100644
--- a/src/views/visitor/visitorCarCheckIn.vue
+++ b/src/views/visitor/visitorCarCheckIn.vue
@@ -1,6 +1,6 @@
 <!-- 访客车辆刷证登记页面 -->
 <template>
-  <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
+  <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body @close="closeDialog">
     <el-form ref="dataForm" :rules="rules" :model="dataForm" label-well-code="right" label-width="100px">
       <el-row>
         <el-col :span="6">
@@ -12,9 +12,12 @@
                 style="width: 130px; height: 175px"/>
             </div>
           </el-row>
-          <el-row>
+          <el-row style="margin-top: -20px">
             <el-button v-show="isEditMode" :disabled="readCard||canRead" type="primary" plain class="id-card-btn" @click="readIDCard">读取身份证</el-button>
           </el-row>
+          <el-row style="margin-top: -10px">
+            <el-button type="primary" plain class="id-card-btn" @click="readCamera">{{ btnCamera }}</el-button>
+          </el-row>
         </el-col>
 
         <el-col :span="16">
@@ -64,12 +67,14 @@
               </el-form-item>
             </el-col>
           </el-row>
+          <el-row class="dialog-footer">
+            <video v-show="showVideo" width="200px" height="150px" style="margin-right: 20px"></video>
+            <canvas v-show = "false" width="200px" height="150px"></canvas>
+            <el-button :loading="btnLoading" type="primary" @click="saveData" style="width: 150px">保 存</el-button>
+          </el-row>
         </el-col>
       </el-row>
     </el-form>
-    <div v-show="isEditMode" slot="footer" class="dialog-footer">
-      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
-    </div>
   </el-dialog>
 </template>
 
@@ -100,6 +105,9 @@
         address: '',
         plateNumber: '' // 来访车辆车牌号
       }, // 表单
+      btnCamera:'读取摄像头',
+      showVideo: false,
+      stream:'',
       photo: '', // 图片路径
       defaultPhoto: require('@/assets/global_images/photo.png'), // 默认图片路径
       textMap: {
@@ -129,12 +137,92 @@
     })
   },
   methods: {
+    closeDialog(){
+      var mediaStreamTrack =  this.stream.getTracks()[0];
+      mediaStreamTrack.stop();
+    },
+    readCamera() {
+      if(this.btnCamera === '读取摄像头'){
+        this.cameraImgFile()
+      }else{
+        this.getAPhoto()
+      }
+    },
+    getAPhoto() {
+      //绘制canvas图形
+      let video = document.getElementsByTagName("video")[0]
+      var canvas = document.getElementsByTagName('canvas')[0]
+      var context = canvas.getContext('2d')
+      context.clearRect(0, 0, context.width, context.height);
+      context.drawImage(video, 0, 0,200,150);
+      this.showVideo = false
+      //把canvas图像转为img图片
+      this.photo = canvas.toDataURL("image/png");
+      var mediaStreamTrack =  this.stream.getTracks()[0];
+      mediaStreamTrack.stop();
+      this.btnCamera = '读取摄像头'
+    },
+    // 拍照上传获取video
+    cameraImgFile() {
+      let _this = this;
+
+      // 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象
+      if (navigator.mediaDevices === undefined) {
+        navigator.mediaDevices = {};
+      }
+      // 一些浏览器部分支持 mediaDevices。我们不能直接给对象设置 getUserMedia
+      // 因为这样可能会覆盖已有的属性。这里我们只会在没有getUserMedia属性的时候添加它。
+      if (navigator.mediaDevices.getUserMedia === undefined) {
+        navigator.mediaDevices.getUserMedia = function(constraints) {
+          // 首先，如果有getUserMedia的话，就获得它
+          var getUserMedia =
+            navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
+
+          // 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
+          if (!getUserMedia) {
+            return Promise.reject(
+              new Error("getUserMedia is not implemented in this browser")
+            );
+          }
+          // 否则，为老的navigator.getUserMedia方法包裹一个Promise
+          return new Promise(function(resolve, reject) {
+            getUserMedia.call(navigator, constraints, resolve, reject);
+          });
+        };
+      }
+      navigator.mediaDevices
+        .getUserMedia({ video: true, audio: false })
+        .then(function(stream) {
+          _this.stream = stream;
+          _this.videoShow = true;
+          // 旧的浏览器可能没有srcObject
+          _this.$nextTick(() => {
+            let video = document.getElementsByTagName("video")[0]
+            if ("srcObject" in video) {
+              video.srcObject = stream;
+            } else {
+              // 防止在新的浏览器里使用它，应为它已经不再支持了
+              video.src = window.URL.createObjectURL(stream);
+            }
+            _this.showVideo = true
+            _this.btnCamera = '拍照'
+            video.onloadedmetadata = function(e) {
+              video.play();
+            };
+          });
+        })
+        .catch(function(err) {
+          _this.videoShow = false;
+          _this.$message.warning("未发现可拍照设备或出现其他错误！");
+        });
+    },
     // 初始化对话框
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.btnLoading = false
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
-
+      this.showVideo = false
+      this.btnCamera = '读取摄像头'
       this.resetForm()
 
       if (dialogStatus === 'createCar') { // 如果是新增，清除验证
@@ -243,7 +331,7 @@
     // 新增数据
     visitorCheckedIn: function() {
       this.$refs['dataForm'].validate((valid) => {
-        if (valid && this.readCard) {
+        if (valid) {
           // 车辆列表
           const carList = this.$parent.dataForm.visitCarDTOList
           let isCarChecked = false
@@ -259,8 +347,20 @@
                 isCarChecked = true
               }
             })
-
-            // 首先添加车辆
+            // carList.forEach(item => {
+            //   if (item.idCard === this.dataForm.idCard) {
+            //     isChecked = true
+            //   }
+            // })
+            //
+            // if (isChecked === true) {
+            //   this.$message.error('该身份证已经登记过，请检查')
+            //
+            //   this.$nextTick(() => {
+            //     this.btnLoading = false
+            //     this.readCard = false
+            //   })
+            // }else
             if (isCarChecked === true) {
               this.$message.error('该辆车已经登记过，请检查')
 
@@ -334,7 +434,6 @@
     width: 100%;
   }
   .dialog-footer {
-    margin-top: -20px;
     text-align: center;
   }
 </style>
diff --git a/src/views/visitor/visitorCheckIn.vue b/src/views/visitor/visitorCheckIn.vue
index 1aba7cc..9abeebd 100644
--- a/src/views/visitor/visitorCheckIn.vue
+++ b/src/views/visitor/visitorCheckIn.vue
@@ -1,10 +1,10 @@
 <!-- 访客刷证登记页面 -->
 <template>
-  <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
+  <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body  @close="closeDialog">
     <el-form ref="dataForm" :rules="rules" :model="dataForm" label-well-code="right" label-width="100px">
       <el-row>
         <el-col :span="6">
-          <el-row>
+          <el-row style="margin-top: -20px">
             <div class="avatar">
               <el-image
                 :src="photo!==''?photo:defaultPhoto"
@@ -12,9 +12,12 @@
                 style="width: 130px; height: 175px"/>
             </div>
           </el-row>
-          <el-row>
+          <el-row style="margin-top: -20px">
             <el-button v-show="isEditMode" :disabled="readCard||canRead" type="primary" plain class="id-card-btn" @click="readIDCard">读取身份证</el-button>
           </el-row>
+          <el-row style="margin-top: -10px">
+            <el-button type="primary" plain class="id-card-btn" @click="readCamera">{{ btnCamera }}</el-button>
+          </el-row>
         </el-col>
 
         <el-col :span="16">
@@ -53,37 +56,14 @@
               </el-form-item>
             </el-col>
           </el-row>
-
-          <!--          <el-row>-->
-          <!--            <el-col :span="24" >-->
-          <!--              <el-form-item label="出生日期" prop="birthday">-->
-          <!--                <el-date-picker-->
-          <!--                  v-model="dataForm.birthday"-->
-          <!--                  :editable="false"-->
-          <!--                  :readonly="readCard"-->
-          <!--                  :disabled="!isEditMode"-->
-          <!--                  type="date"-->
-          <!--                  style="width: 100%"-->
-          <!--                  value-format="yyyy-MM-dd"-->
-          <!--                  placeholder="选择出生日期"/>-->
-          <!--              </el-form-item>-->
-          <!--            </el-col>-->
-          <!--          </el-row>-->
-
-          <!--          <el-row :gutter="20">-->
-          <!--            <el-col :span="24">-->
-          <!--              <el-form-item label="住址" prop="address">-->
-          <!--                <el-input v-model.trim="dataForm.address" :readonly="readCard" :disabled="!isEditMode" type="text" placeholder="非必填"/>-->
-          <!--              </el-form-item>-->
-          <!--            </el-col>-->
-          <!--          </el-row>-->
+          <el-row class="dialog-footer">
+            <video v-show="showVideo" width="200px" height="150px" style="margin-right: 20px"></video>
+            <canvas v-show = "false" width="200px" height="150px"></canvas>
+            <el-button :loading="btnLoading" type="primary" @click="saveData" style="width: 150px">保 存</el-button>
+          </el-row>
         </el-col>
       </el-row>
     </el-form>
-    <div v-show="isEditMode" slot="footer" class="dialog-footer">
-      <!--<el-button :loading="btnLoading" :disabled="!readCard" type="primary" @click="saveData">保存</el-button>-->
-      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
-    </div>
   </el-dialog>
 </template>
 
@@ -97,6 +77,9 @@
   data() {
     return {
       canRead: false,
+      btnCamera:'读取摄像头',
+      showVideo: false,
+      stream:'',
       isEditMode: true, // 是否为编辑模式，非编辑模式都为只读
       readCard: false, // 是否从读卡器读卡，未从读卡器读卡不能提交，读卡之后不能编辑
       dialogFormVisible: false, // 对话框是否显示
@@ -142,12 +125,92 @@
     })
   },
   methods: {
+    readCamera() {
+      if(this.btnCamera === '读取摄像头'){
+        this.cameraImgFile()
+      }else{
+        this.getAPhoto()
+      }
+    },
+    closeDialog(){
+      var mediaStreamTrack =  this.stream.getTracks()[0];
+      mediaStreamTrack.stop();
+    },
+    getAPhoto() {
+      //绘制canvas图形
+      let video = document.getElementsByTagName("video")[0]
+      var canvas = document.getElementsByTagName('canvas')[0]
+      var context = canvas.getContext('2d')
+      context.clearRect(0, 0, context.width, context.height);
+      context.drawImage(video, 0, 0,200,150);
+      this.showVideo = false
+      //把canvas图像转为img图片
+      this.photo = canvas.toDataURL("image/png");
+      var mediaStreamTrack =  this.stream.getTracks()[0];
+      mediaStreamTrack.stop();
+      this.btnCamera = '读取摄像头'
+    },
+    // 拍照上传获取video
+    cameraImgFile() {
+      let _this = this;
+
+      // 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象
+      if (navigator.mediaDevices === undefined) {
+        navigator.mediaDevices = {};
+      }
+      // 一些浏览器部分支持 mediaDevices。我们不能直接给对象设置 getUserMedia
+      // 因为这样可能会覆盖已有的属性。这里我们只会在没有getUserMedia属性的时候添加它。
+      if (navigator.mediaDevices.getUserMedia === undefined) {
+        navigator.mediaDevices.getUserMedia = function(constraints) {
+          // 首先，如果有getUserMedia的话，就获得它
+          var getUserMedia =
+            navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
+
+          // 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
+          if (!getUserMedia) {
+            return Promise.reject(
+              new Error("getUserMedia is not implemented in this browser")
+            );
+          }
+          // 否则，为老的navigator.getUserMedia方法包裹一个Promise
+          return new Promise(function(resolve, reject) {
+            getUserMedia.call(navigator, constraints, resolve, reject);
+          });
+        };
+      }
+      navigator.mediaDevices
+        .getUserMedia({ video: true, audio: false })
+        .then(function(stream) {
+          _this.stream = stream;
+          _this.videoShow = true;
+          // 旧的浏览器可能没有srcObject
+          _this.$nextTick(() => {
+            let video = document.getElementsByTagName("video")[0]
+            if ("srcObject" in video) {
+              video.srcObject = stream;
+            } else {
+              // 防止在新的浏览器里使用它，应为它已经不再支持了
+              video.src = window.URL.createObjectURL(stream);
+            }
+            _this.showVideo = true
+            _this.btnCamera = '拍照'
+            video.onloadedmetadata = function(e) {
+              video.play();
+            };
+          });
+        })
+        .catch(function(err) {
+          _this.videoShow = false;
+          _this.$message.warning("未发现可拍照设备或出现其他错误！");
+        });
+    },
     // 初始化对话框
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.btnLoading = false
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
-
+      this.showVideo = false
+      this.btnCamera = '读取摄像头'
       this.resetForm()
 
       if (dialogStatus === 'create') { // 如果是新增，清除验证
@@ -261,6 +324,7 @@
               this.readCard = false
             })
           } else {
+            console.log(this.dataForm)
             // 发送信号让父组件添加
             this.$emit('checked', this.dataForm)
 
@@ -294,7 +358,7 @@
     width: 100%;
   }
   .dialog-footer {
-    margin-top: -20px;
+    margin-top: 10px;
     text-align: center;
   }
 </style>
diff --git a/src/views/visitor/visitorTrace.vue b/src/views/visitor/visitorTrace.vue
index 86d37c9..0ce5b60 100644
--- a/src/views/visitor/visitorTrace.vue
+++ b/src/views/visitor/visitorTrace.vue
@@ -24,21 +24,34 @@
     </div>
     <!-- 中间平面图区域 -->
     <div class="map-overview" style="top: 0px;position: relative" >
-      <img ref="bgImg" :src="bgImageSrc" height="100%" @load="backgroundImageReady">
+      <img ref="bgImg" :src="bgImageSrc" height="100%" @load="backgroundImageReady" @click="showVideo=false">
         <img
           v-for="item in list"
           :id="item.id"
           :key="item.id"
           :src="item.imgUrl"
+          :title="item.logtime"
           :style="{ position: 'absolute', top: item.y * imgSize.height / imgSizeOriginal.height-40 + 'px', left: (item.x * imgSize.width / imgSizeOriginal.width)-25 + 'px' }"
           class="point-img"
-          @click="detailDev(item, $event)" />
+          @click="showDetail(item, $event)" />
       </div>
+    <div id="tabDiv" ref="video-block" style="height: 0px" v-show="showVideo">
+      <el-image
+        :src="photo"
+        fit="cover"
+        :preview-src-list="picList"
+        style="width: 280px; height: 150px"/>
+      <!--<div style="width: 300px;height: 150px;background-color: red"></div>-->
+      <!--<iframe name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html?wmode=opaque"/>-->
+      <!--<iframe name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html?wmode=opaque" style="width: 400px;height: 300px"/>-->
+      <!--<iframe name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html" style="z-index: 100000;width: 400px;height: 300px" v-show="showVideo"/>-->
+    </div>
   </el-dialog>
 </template>
 
 <script>
-import { getVisitorCarTrace,getVisitorTrace } from '@/api/visitor'
+import { formatDateTime, formatToString, oneDayTime } from '@/utils/calendarUtil'
+import { getVisitorCarTrace,getVisitorTrace,getDetail } from '@/api/visitor'
 import { overviewDeviceList, overviewDeviceStatus, getDetailDevice } from '@/api/device'
 import tg_main from '../../assets/overview_images/tg/mapOverviewTg.png'
 export default {
@@ -47,14 +60,17 @@
     return {
       dialogFormVisible: false, // 对话框是否显示
       list:[],
+      showVideo:false,
       devListParams: {
         picture: '1',
         deviceTypes: '4,5,8,9,10,11,12,7'
       },
+      photo:require('@/assets/global_images/photo.png'),
       bgImageSrc: tg_main,
       timeRange: [],
       timer: null,
       step: 0,
+      picList: [],
       imgSize: {
         width: 2245,
         height: 1586
@@ -86,6 +102,32 @@
     }
   },
   methods: {
+    showDetail(dev, event) {
+        this.showVideo = false
+        const targetDev = event.currentTarget // 取到点击到的设备图标div
+        let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+        let left = parseInt(targetDev.style.left.substring(0, targetDev.style.left.length - 2))
+        this.$refs['video-block'].style.position = 'absolute'
+        this.$refs['video-block'].style.top = top + 'px'
+        this.$refs['video-block'].style.left = targetDev.style.left
+        this.photo = dev.bkgPicture
+        this.showVideo = true
+        // getDetail(dev.devcode).then(response => {
+        //   if (response.code === 200) {
+        //     this.photo = response.data
+        //     this.showVideo = true
+        //   }
+        // })
+        // var time = new Date(dev.logtime)
+        // var startTime = time.setSeconds(time.getSeconds() - 10)
+        // var endTime = time.setSeconds(time.getSeconds() + 20)
+        // startTime = formatDateTime(startTime)
+        // endTime = formatDateTime(endTime)
+        // window.frames['playHK'].initPlugin('trace',left,top)
+      // window.frames['playHK'].play(dev.monitorPoint)
+      // window.frames['playHK'].search(dev.monitorPoint, startTime, endTime)
+        // window.frames['playHK'].search(dev.monitorPoint, startTime, endTime)
+    },
     // 平面图就绪时执行函数
     backgroundImageReady() {
       this.imgSize = {
@@ -98,7 +140,11 @@
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.type = dialogStatus
       this.dialogFormVisible = dialogFormVisible
-
+      this.showVideo = false
+      this.picList = []
+      // setTimeout(() => {
+      //   window.frames['playHK'].initPlugin('real',document.getElementById("tabDiv").getBoundingClientRect().left)
+      // }, 1000)
       this.list = []
       this.listQuery.id = row.id
       this.listQuery.startTime = ''
@@ -131,18 +177,6 @@
       if(this.timer!==null){
         clearInterval(this.timer)
       }
-      // overviewDeviceList(this.devListParams).then(response => {
-      //   if (response.code === 200) {
-      //     that.list = response.data
-      //     that.list.forEach(dev => {
-      //       if (dev.x !== '' && dev.y !== '') {
-      //         dev.imgUrl = require("../../assets/overview_images/point-green.png")
-      //       }
-      //     })
-      //   }
-      // })
-
-
       this.list = []
       if(this.type === 'person'){
         getVisitorTrace(this.listQuery).then(response => {
@@ -152,6 +186,7 @@
               if (dev.x !== '' && dev.y !== '') {
                 dev.imgUrl = require("../../assets/overview_images/point-green.png")
               }
+              this.picList.push(dev.bkgPicture)
             })
           } else {
             this.$message.error(response.message)

diff --git a/config/dev.env.js b/config/dev.env.js
index 6b4622a..095ba33 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -8,4 +8,5 @@
   NODE_ENV: '"development"',
   // BASE_API: '"http://192.168.5.220:20311"'
   BASE_API: '"http://111.198.10.15:11631"'
+  // BASE_API: '"http://192.168.5.220:20311"'
 })
diff --git a/config/prod.env.js b/config/prod.env.js
index f2501d0..ccbc615 100644
--- a/config/prod.env.js
+++ b/config/prod.env.js
@@ -1,5 +1,6 @@
 'use strict'
 module.exports = {
   NODE_ENV: '"production"',
-  BASE_API: '"http://192.168.5.220:20311"'
+  // BASE_API: '"http://192.168.5.220:20311"'
+  BASE_API: '"http://111.198.10.15:11631"'
 }
diff --git a/favicon.ico b/favicon.ico
index 34b63ac..bc1bfc5 100644
--- a/favicon.ico
+++ b/favicon.ico
Binary files differ
diff --git a/src/api/visitor.js b/src/api/visitor.js
index 05ed6ea..01a6c26 100644
--- a/src/api/visitor.js
+++ b/src/api/visitor.js
@@ -74,3 +74,14 @@
   })
 }
 
+// 查询人员轨迹
+export function getDetail(devcode) {
+  return request({
+    url: '/device/capturePhoto',
+    method: 'post',
+    params:{
+      devcode: devcode
+    }
+  })
+}
+
diff --git a/src/assets/dashboard_images/icon-defence.png b/src/assets/dashboard_images/icon-defence.png
index 8069376..11b41cb 100644
--- a/src/assets/dashboard_images/icon-defence.png
+++ b/src/assets/dashboard_images/icon-defence.png
Binary files differ
diff --git a/src/utils/calendarUtil.js b/src/utils/calendarUtil.js
index da840c3..e599bdd 100644
--- a/src/utils/calendarUtil.js
+++ b/src/utils/calendarUtil.js
@@ -61,7 +61,32 @@
 
   return yearMonth + '-' + format(day)
 }
+export function formatDateTime(cellval) {
+  var dateVal = cellval + "";//把时间戳转成字符串格式
+  if (cellval != null) {
+    //取得时间戳部分 如：获取 /Date(1545299299910)/ 中的 1545299299910 部分
+    var date = new Date(parseInt(dateVal.replace("/Date(", "")
+      .replace(")/", ""), 10));
+    //获取年，不需要其他操作所以可以直接返回	date.getFullYear()
+    //月份为0-11，所以+1，月份小于10时补个0
+    var month = date.getMonth() + 1 < 10 ? "0"
+      + (date.getMonth() + 1) : date.getMonth() + 1;
+    //获取日
+    var currentDate = date.getDate() < 10 ? "0" + date.getDate()
+      : date.getDate();
+    //获取时间
+    var hours = date.getHours() < 10 ? "0" + date.getHours() : date
+      .getHours();
+    var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes()
+      : date.getMinutes();
+    var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds()
+      : date.getSeconds();
 
+    //返回日期结果，需要时间的话在加上时间
+    return date.getFullYear() + "-" + month + "-" + currentDate+" "+hours+":"+
+      minutes+":"+seconds;
+  }
+}
 // 格式化日期为字符串
 export function formatToString(value, level) {
   const date = new Date(value)
diff --git a/src/views/alarm/alarmDetail.vue b/src/views/alarm/alarmDetail.vue
index 2c94629..8c32ee5 100644
--- a/src/views/alarm/alarmDetail.vue
+++ b/src/views/alarm/alarmDetail.vue
@@ -1,7 +1,7 @@
 <!-- 报警详情 -->
 <template>
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
-    <el-form ref="dataForm" :model="dataForm" label-well-code="right" label-width="110px">
+    <el-form v-loading="loading" ref="dataForm" :model="dataForm" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="报警编号">
@@ -86,6 +86,7 @@
   name: 'AlarmDetail',
   data() {
     return {
+      loading: true,
       dialogFormVisible: false, // 对话框是否显示
       dialogStatus: '', // 对话框类型：create,update,detail
       dataForm: {
@@ -123,7 +124,7 @@
         this.dataForm = {
           id: row.id
         }
-
+        this.loading = true
         alarmDetail(this.dataForm.id).then(response => {
           if (response.code === 200) {
             this.dataForm = {
@@ -140,7 +141,7 @@
               reason: response.data.reason,
               remark: response.data.remark
             }
-
+            this.loading = false
             // 格式化报警状态
             if (response.data.valid === 1) {
               this.dataForm.validStr = '正在报警'
diff --git a/src/views/car/carAdd.vue b/src/views/car/carAdd.vue
index ddb215f..5f54c93 100644
--- a/src/views/car/carAdd.vue
+++ b/src/views/car/carAdd.vue
@@ -10,7 +10,7 @@
         </el-col>
         <el-col :span="12">
           <el-form-item label="车辆性质" prop="property">
-            <el-radio-group v-model="dataForm.property" :disabled="isDetailMode">
+            <el-radio-group v-model="dataForm.property" :disabled="isDetailMode" @change="resetOwner">
               <el-radio v-for="item in carProperties" :key="item.value" :label="item.value">{{ item.name }}</el-radio>
             </el-radio-group>
           </el-form-item>
@@ -106,6 +106,12 @@
     this.fetchStaffList()
   },
   methods: {
+    resetOwner(){
+      if(this.dataForm.property!=='2'){
+        this.dataForm.ownerId = ''
+        // this.dataForm.phone = ''
+      }
+    },
     // 初始化对话框
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.btnLoading = false
@@ -208,6 +214,7 @@
           }
         })
         this.dataForm.phone = selectedStaff[0].phone
+        this.dataForm.deptid = selectedStaff[0].deptid
       } else {
         this.dataForm.phone = ''
       }
diff --git a/src/views/car/carList.vue b/src/views/car/carList.vue
index 8d924ff..4ff07ab 100644
--- a/src/views/car/carList.vue
+++ b/src/views/car/carList.vue
@@ -105,11 +105,11 @@
           value: 'propertyStr',
           align: 'center'
         },
-        // {
-        //   text: '车主姓名',
-        //   value: 'ownerName',
-        //   align: 'center'
-        // },
+        {
+          text: '车主姓名',
+          value: 'ownerName',
+          align: 'center'
+        },
         {
           text: '车主联系电话',
           value: 'phone',
diff --git a/src/views/ctrl/index.vue b/src/views/ctrl/index.vue
index fd36f2b..29923af 100644
--- a/src/views/ctrl/index.vue
+++ b/src/views/ctrl/index.vue
@@ -50,12 +50,13 @@
         <in-out-today />
       </el-col>
 
-      <el-col :span="7" class="chart-block">
+      <el-col id="dev-count"  :span="10" class="chart-block">
         <div class="chart-title">各类型设备安装数量</div>
         <dev-count />
       </el-col>
 
-      <el-col id="pass-count" :span="10" class="chart-block">
+      <!--<el-col id="pass-count" class="chart-block">-->
+      <el-col :span="7" class="chart-block">
         <div class="chart-title">进出营数量统计</div>
         <in-out-count />
       </el-col>
@@ -121,7 +122,7 @@
 <style scoped>
   .app-wrapper {
     background-color: #e9e9e9;
-    padding-bottom: 20px;
+    padding-bottom: 10px;
   }
 
   .sub-data-block {
@@ -129,6 +130,7 @@
     border-radius: 16px;
     float: left;
     margin: 10px;
+    margin-bottom: 0px;
     box-shadow: 1px 1px 5px #999;
   }
   .sub-title {
@@ -136,36 +138,38 @@
     text-align: center;
     font-family: 'Microsoft YaHei';
     color: #fff;
-    font-size: 24px;
-    padding: 10px;
+    font-size: 20px;
+    padding-top: 10px;
+    padding-bottom: 0px;
   }
   .statis-block {
     text-align: center;
     margin: 0px 10px 0px 10px;
-    padding: 0px 10px 10px 10px;
+    padding: 0px 10px 5px 10px;
     color: #fff;
     font-weight: bold;
     letter-spacing: 1px;
-    font-size: 24px;
+    font-size: 20px;
   }
   .big-size {
-    font-size: 64px;
+    font-size: 35px;
   }
 
   .chart-title {
     font-family: 'Microsoft YaHei';
     color: #000000;
     font-weight: bold;
-    font-size: 20px;
+    font-size: 18px;
     text-align: center;
     padding: 10px;
   }
   .chart-block {
     margin-left: 20px;
-    margin-top: 20px;
+    margin-top: 10px;
     border-radius: 16px;
     background-color: #FFFFFF;
     box-shadow: 1px 1px 5px #999;
+    height: 37vh;
   }
 
   #today-visitor {
@@ -187,7 +191,7 @@
     background-image: linear-gradient(to right, #ffa800, #ce7e00);
   }
 
-  #pass-count, #dev-alarm-count {
+  #dev-count, #dev-alarm-count {
     width: calc(250vw / 6 - 70px);
   }
 </style>
diff --git a/src/views/ctrl/overview.vue b/src/views/ctrl/overview.vue
index 62e1105..49ed928 100644
--- a/src/views/ctrl/overview.vue
+++ b/src/views/ctrl/overview.vue
@@ -59,26 +59,52 @@
           <i v-else class="el-icon-arrow-down"/>
         </span>
       </div>
-      <transition name="el-collapse-transition">
-        <el-scrollbar
-          v-show="tableShow"
-          :style="{ visibility: tableShow ? 'visible' : 'hidden'}"
-          :class="{ moredatascollor: alarmList.length > 6 }"
-          :native="false">
-          <el-table
-            :data="alarmList"
-            class="alarm-list-table"
-            border
-            stripe
-            @row-click="alarmRowClick">
-            <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{ scope.row[column.value] }}
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-scrollbar>
-      </transition>
+      <div v-show="alarmList.length > 4 && tableShow">
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 32px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 231px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          height="200"
+          style="border-left: 1px solid #2470AC;"
+          v-if="tableShow"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-show="alarmList.length < 5 && tableShow">
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          v-if="tableShow"
+          style="border: 1px solid #2470AC"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
     </div>
 
     <!-- 中间平面图区域 -->
@@ -145,9 +171,13 @@
         class="point-camera"
         @click="detailDev(item, $event)" />
     </div>
-
     <!-- 平面图区域设备类型按钮 -->
-    <div v-show="showType" class="bottom-center" :style="{ width: cameraTypeNum*btnwidth + 'px'}">
+    <div class="bottom-center" :style="{ width: btnNum*btnwidth + 'px'}">
+        <el-col v-show="btnNum!==1" ref="all" class="dev-icon dev-type-selected" @click.native="selectDevByType('all', $event)">
+          <img v-if="checkDevType[0]" src="@/assets/overview_images/icons/icon-all-checked.png">
+          <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
+          <span>全部</span>
+        </el-col>
       <el-col class="dev-icon" @click.native="selectDevByType('4', $event)">
         <img id="4-1-img" v-if="checkDevType1[0]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="4-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
@@ -178,20 +208,6 @@
         <img id="11-2-img" v-else src="@/assets/overview_images/icons/half-camera-blue.png">
         <span>标准半球</span>
       </el-col>
-    </div>
-    <!-- 平面图区域设备类型按钮 -->
-    <div v-show="!showType"class="bottom-center" :style="{ width: btnNum*btnwidth + 'px'}">
-        <el-col ref="all" class="dev-icon dev-type-selected" @click.native="selectDevByType('all', $event)">
-          <img v-if="checkDevType[0]" src="@/assets/overview_images/icons/icon-all-checked.png">
-          <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
-          <span>全部</span>
-        </el-col>
-        <el-col ref="camera" :class="cameraClass" @click.native="showType=!showType;selectDevByType('camera', $event)">
-        <!--<el-col ref="camera" class="dev-icon" @click.native="selectDevByType('camera', $event)">-->
-          <img id="cam_img_red" v-if="checkDevType[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-          <img id="cam_img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-          <span>摄像头</span>
-        </el-col>
         <el-col v-show="showFence" class="dev-icon" @click.native="selectDevByType('fence', $event)">
           <img v-if="checkDevType[2]" src="@/assets/overview_images/icons/icon-fence-checked.png">
           <img v-else src="@/assets/overview_images/icons/icon-fence-unchecked.png">
@@ -372,7 +388,7 @@
           height: 789
         }, // 屏幕窗口尺寸
         imgUrl: require('../../assets/overview_images/icons/icon-camera-point.png'),
-        btnNum: 3,
+        btnNum: 8,
         cameraTypeNum: 6,
         btnwidth: 210,
         halfLeft: 0,
@@ -498,25 +514,25 @@
             }
           }
         }
-        //跟换菜单
-        var item = ['人脸识别','车牌轨迹','周界防护','标准数字','智能球形','标准半球']
-        for(var i=0;i<item.length;i++){
-          if(item[i]===val.target.innerText){
-            return
-          }
-        }
-        if(val.target.id.endsWith('-1-img')||val.target.id.endsWith('-2-img')|| val.target.id==='cam_img' || val.target.id==='cam_img_red'){
-          return
-        }
-        if( val.target.innerText!=='摄像头') {
-          this.showType = false
-          const devTypes = document.querySelectorAll('.dev-icon')
-            for(var i=0;i<this.checkDevType.length;i++) {
-              if (this.checkDevType[i]) {
-                devTypes[i+6].className += ' dev-type-selected'
-              }
-            }
-        }
+        // //跟换菜单
+        // var item = ['人脸识别','车牌轨迹','周界防护','标准数字','智能球形','标准半球']
+        // for(var i=0;i<item.length;i++){
+        //   if(item[i]===val.target.innerText){
+        //     return
+        //   }
+        // }
+        // if(val.target.id.endsWith('-1-img')||val.target.id.endsWith('-2-img')|| val.target.id==='cam_img' || val.target.id==='cam_img_red'){
+        //   return
+        // }
+        // if( val.target.innerText!=='摄像头') {
+        //   this.showType = false
+        //   const devTypes = document.querySelectorAll('.dev-icon')
+        //     for(var i=0;i<this.checkDevType.length;i++) {
+        //       if (this.checkDevType[i]) {
+        //         devTypes[i+6].className += ' dev-type-selected'
+        //       }
+        //     }
+        // }
       },
       webSocket() {
         const that = this
@@ -586,7 +602,7 @@
         }else if(pic==='3'){
           this.changeMap('tg_4_1')
         }else if(pic==='4'){
-          this.changeMap('tg_4_1')
+          this.changeMap('tg_4_5')
         }
         setTimeout(() => {
           var obj = document.getElementById(val.toString());
@@ -771,7 +787,11 @@
           this.checkDevType1 = [false, false, false, false, false, false]
           // 添加选中的样式
           if (typeof event === 'undefined') {
-            devTypes[6].className += ' dev-type-selected'
+            if(this.btnNum===1){
+              devTypes[1].className += ' dev-type-selected'
+            }else{
+              devTypes[0].className += ' dev-type-selected'
+            }
           } else {
             event.currentTarget.className += ' dev-type-selected'
           }
@@ -1017,7 +1037,7 @@
           this.isMain = true
           // this.devListParams.picture = '1'
           this.imgSizeOriginal = { width: 2245, height: 1586 }
-          this.btnNum  = 3
+          this.btnNum  = 8
           this.cameraTypeNum  = 6
           this.showFence = true // 显示电子围栏
           this.showTemp = false // 隐藏温湿度设备
@@ -1027,6 +1047,7 @@
           this.showSubTabGuider = false
           this.showFloorThree = false
           this.showFloorFour = false
+          this.selectDevByType('all')
         } else if (index === 'tg_3_1') {
           this.bgImageSrc = tg_3_1
           // this.devListParams.picture = '2'
@@ -1037,6 +1058,7 @@
           this.showTemp = true // 隐藏温湿度
           this.showSmoking = true // 隐藏烟感
           this.showSound = true // 隐藏声光报警器
+          this.selectDevByType('all')
         } else if (index === 'tg_4_1') {
           this.bgImageSrc = tg_4_1
           // this.devListParams.picture = '3'
@@ -1048,18 +1070,19 @@
           this.showTemp = true // 显示温湿度
           this.showSmoking = true // 显示烟感
           this.showSound = true // 显示声光报警器
+          this.selectDevByType('all')
         } else if (index === 'tg_4_5') {
           this.bgImageSrc = tg_4_5
           // this.devListParams.picture = '4'
           this.imgSizeOriginal = { width: 2245, height: 1586 }
-          this.btnNum  = 2
+          this.btnNum  = 1
           this.cameraTypeNum  = 1
           this.showFence = false // 隐藏电子围栏
           this.showTemp = false // 隐藏温湿度
           this.showSmoking = false // 隐藏烟感
           this.showSound = false // 隐藏声光报警器
+          this.selectDevByType('4')
         }
-        this.selectDevByType('all')
       },
       // 查询并显示设备详情
       detailDev(dev, event) {
@@ -1201,10 +1224,14 @@
     left: 50%; transform: translateX(-50%);
     bottom: 25px;
   }
+  .tableLine {
+    margin-top: 9px;
+    width: 463px;
+  }
   .main-page {
     background-size: cover;
     background-color: #023d83;
-    height: 100vh;
+    height: 98vh;
   }
 
   .main-header {
@@ -1362,16 +1389,24 @@
         margin-left: 20px;
       }
     }
-    .el-scrollbar {
-      /*height: 200px;*/
-      width: 100%;
+    // 滚动条的滑块
+    /deep/ .el-table__body-wrapper  {
+      background-color: #023D83;
+      border: 0px solid white;
     }
-    .moredatascollor {
-      height: 200px;
+    /deep/ .el-table--border th.gutter:last-of-type {
+      border: 1px solid #023D83;
+      border-bottom-width: 1px;
+      background-color: #023D83;
     }
-    .el-scrollbar__wrap {
-      overflow-y: auto;
-      overflow-x: hidden;
+    /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
+      background-color: #023D83;
+    }
+    /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+      display: none;
+    }
+    /deep/ .el-scrollbar__wrap {
+      overflow-x: hidden !important;
       margin-bottom: 0px !important;
     }
     .el-table {
@@ -1405,16 +1440,25 @@
     font-size: 15px;
     color: #FFFFFF;
     font-weight: normal;
+    border-color: #2470AC;
   }
-
+  .el-table--border::after, .el-table--group::after, .el-table::before{
+    background-color: #023d83;
+  }
+  .alarm-now-block /deep/ .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
+    border-color: #023d83;
+  }
   .alarm-now-block /deep/ .el-table__row td {
     background-color: #023D83;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ .el-table__body tr:hover > td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ tr.el-table__row--striped td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
 
   .map-tab {
@@ -1601,6 +1645,10 @@
   /*}*/
 
   @media(max-width: 1440px) {
+    .tableLine {
+      margin-top: 0px;
+      width: 343px;
+    }
     .main-title {
       height: 65px;
       padding-top: 16px;
diff --git a/src/views/ctrl/statCharts/devAlarmCount.vue b/src/views/ctrl/statCharts/devAlarmCount.vue
index 7bea059..6b6939e 100644
--- a/src/views/ctrl/statCharts/devAlarmCount.vue
+++ b/src/views/ctrl/statCharts/devAlarmCount.vue
@@ -1,5 +1,6 @@
+<!--suppress ALL -->
 <template>
-  <div>
+  <div style="height: 90%">
     <el-date-picker
       v-model="timeRange"
       :picker-options="pickerOptions"
@@ -7,15 +8,16 @@
       range-separator="至"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
-      style="margin-bottom: 10px;" />
-    <ve-histogram :data="chartData" :settings="settings" height="350px" />
+      style="margin-bottom: 10px;z-index: 10000"
+      size="small"/>
+    <ve-histogram :data="chartData" :settings="settings" :extend="chartExtend" style="margin-top: -50px" height="100%"/>
   </div>
 </template>
 
 <script>
-import { formatToString, getDate, oneDayTime } from '@/utils/calendarUtil'
-import { devAlarmCount } from '@/api/statistics'
 
+import { devAlarmCount } from '@/api/statistics'
+import { formatToString, parseToDate, getDate, oneDayTime } from '@/utils/calendarUtil'
 const now = new Date()
 
 export default {
@@ -30,12 +32,22 @@
         columns: ['name', 'count'],
         rows: []
       },
+      chartExtend: {
+        series: {
+          barMaxWidth: 50
+        },
+        grid: {
+          containLabel: true,
+          bottom: '10%'
+        }
+      },
       settings: {
         labelMap: {
           'name': '设备类型',
-          'count': '报警数量'
+          'count': ''
         },
-        max: [4]
+        max: [4],
+        area: false
       },
       timeRange: [],
       pickerOptions: {
@@ -99,6 +111,13 @@
       devAlarmCount(this.params).then(response => {
         if (response.code === 200) {
           this.chartData.rows = response.data
+          var max = 4
+          for(var i=0;i<response.data.length;i++){
+            if(Number(response.data[i].count)>max){
+              max = Number(response.data[i].count)
+            }
+          }
+          this.settings.max = [max]
         }
       })
     }
diff --git a/src/views/ctrl/statCharts/devCount.vue b/src/views/ctrl/statCharts/devCount.vue
index d3e2902..db55fbe 100644
--- a/src/views/ctrl/statCharts/devCount.vue
+++ b/src/views/ctrl/statCharts/devCount.vue
@@ -1,5 +1,6 @@
 <template>
-  <ve-ring :data="chartData" :settings="settings" />
+  <ve-histogram :data="chartData" :settings="settings" :extend="chartExtend" style="margin-top: -20px" height="100%"/>
+  <!--<ve-ring :data="chartData" :settings="settings" />-->
 </template>
 
 <script>
@@ -9,14 +10,55 @@
   name: 'DevCount',
   data() {
     return {
+      chartExtend: {
+        series: {
+          barMaxWidth: 50
+        },
+        xAxis: {
+          axisLabel: {
+            interval: 0,
+            //换行显示
+            formatter: function(value) {
+              let result = ""; //拼接加\n返回的类目项
+              let maxLength = 2; //每项显示文字个数
+              let valLength = value.length; //X轴类目项的文字个数
+              let rowNumber = Math.ceil(valLength / maxLength); //类目项需要换行的行数
+              if (rowNumber > 1) {
+                //如果文字大于3,
+                for (let i = 0; i < rowNumber; i++) {
+                  let temp = ""; //每次截取的字符串
+                  let start = i * maxLength; //开始截取的位置
+                  let end = start + maxLength; //结束截取的位置
+                  temp = value.substring(start, end) + "\n";
+                  result += temp; //拼接生成最终的字符串
+                }
+                return "{labelText|" + result + "}";
+              } else {
+                return "{labelText|" + value + "}";
+              }
+            },
+            rich: {
+              labelText: {
+                lineHeight: 18
+              }
+            }
+          }
+        }
+      },
       chartData: {
         columns: ['name', 'count'],
         rows: []
       },
       settings: {
-        // legendLimit: 4
-        radius: [60, 100]
-      }
+        labelMap: {
+          'name': '设备类型',
+          'count': ''
+        }
+      },
+      // settings: {
+      //   // legendLimit: 4
+      //   radius: [60, 100]
+      // }
     }
   },
   activated() {
@@ -26,6 +68,9 @@
     fetchData() {
       devCount().then(response => {
         if (response.code === 200) {
+          for(var i=0;i<response.data.length;i++){
+            response.data[i].name = response.data[i].name.replace('防护','')
+          }
           this.chartData.rows = response.data
         }
       })
diff --git a/src/views/ctrl/statCharts/inOutCount.vue b/src/views/ctrl/statCharts/inOutCount.vue
index 502157e..d65ec69 100644
--- a/src/views/ctrl/statCharts/inOutCount.vue
+++ b/src/views/ctrl/statCharts/inOutCount.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="height: 100%">
     <el-date-picker
       v-model="timeRange"
       :picker-options="pickerOptions"
@@ -7,8 +7,9 @@
       range-separator="至"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
-      style="margin-bottom: 10px"/>
-    <ve-line :data="chartData" :settings="settings" height="350px" />
+      size="small"
+      style="margin-bottom: 10px;z-index: 10000"/>
+    <ve-line :data="chartData" :settings="settings" :extend="barExtend" style="margin-top: -50px;" height="93%"/>
   </div>
 </template>
 
@@ -30,6 +31,17 @@
         columns: ['date', 'staff', 'visitor', 'car', 'visitorCar'],
         rows: []
       },
+
+      barExtend:{
+        legend:{  // 隐藏图例
+          x: 'center',
+          y: 'bottom'
+        },
+        grid: {
+          containLabel: true,
+          bottom: '10%'
+        },
+      },
       settings: {
         labelMap: {
           'staff': '内部人员',
@@ -37,11 +49,11 @@
           'car': '内部车辆',
           'visitorCar': '来访车辆'
         },
-        xAxisType: 'time',
+        // xAxisType: 'time',
         max: [4],
         area: false,
         metrics: ['staff', 'visitor', 'car', 'visitorCar'],
-        dimension: ['date']
+        dimension: ['date'],
       },
       timeRange: [],
       pickerOptions: {
@@ -106,7 +118,7 @@
         if (response.code === 200) {
           const data = this.parseStatisticsData(response.data)
           this.chartData.rows = data.rowDatas
-          this.chartData.max = [data.maxCount]
+          this.settings.max = [data.maxCount]
         }
       })
     },
@@ -164,7 +176,7 @@
 
         if (typeof visitorCar !== 'undefined') {
           if (visitorCar.date === date) {
-            visitorCarCount = car.count
+            visitorCarCount = visitorCar.count
             indexVc++
           }
         }
@@ -172,6 +184,18 @@
         if (staffCount + visitorCount + carCount + visitorCarCount > 0) {
           rowDatas.push({ date: date, staff: staffCount, visitor: visitorCount, car: carCount, visitorCar: visitorCarCount })
         }
+        if(maxCount<staffCount){
+          maxCount = staffCount
+        }
+        if(maxCount<visitorCount){
+          maxCount = visitorCount
+        }
+        if(maxCount<carCount){
+          maxCount = carCount
+        }
+        if(maxCount<visitorCarCount){
+          maxCount = visitorCarCount
+        }
         start += oneDayTime
       }
 
diff --git a/src/views/ctrl/statCharts/inOutDoorCount.vue b/src/views/ctrl/statCharts/inOutDoorCount.vue
index ab28cdd..93f3458 100644
--- a/src/views/ctrl/statCharts/inOutDoorCount.vue
+++ b/src/views/ctrl/statCharts/inOutDoorCount.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="height: 100%">
     <el-date-picker
       v-model="timeRange"
       :picker-options="pickerOptions"
@@ -7,8 +7,9 @@
       range-separator="至"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
-      style="margin-bottom: 10px;" />
-    <ve-histogram :data="chartData" :settings="settings" height="350px" />
+      style="margin-bottom: 10px;z-index: 10000"
+      size="small"/>
+    <ve-histogram :data="chartData" :settings="settings" :extend="chartExtend" style="margin-top: -50px"height="93%"/>
   </div>
 </template>
 
@@ -26,11 +27,26 @@
         beginDate: '',
         endDate: ''
       },
+      chartExtend: {
+        legend:{  // 隐藏图例
+          x: 'center',
+          y: 'bottom'
+        },
+        grid: {
+          containLabel: true,
+          bottom: '10%'
+        },
+        series: {
+          barMaxWidth: 50,
+          center: ['50%', '50%']
+        }
+      },
       chartData: {
         columns: ['name', 'person', 'car'],
         rows: []
       },
       settings: {
+        radius: [60, 100],
         labelMap: {
           'person': '人员',
           'car': '车辆'
@@ -102,7 +118,7 @@
         if (response.code === 200) {
           const data = this.parseStatisticsData(response.data)
           this.chartData.rows = data.rowDatas
-          this.chartData.max = [data.maxCount]
+          this.settings.max = [data.maxCount]
         }
       })
     },
diff --git a/src/views/ctrl/statCharts/inOutKeyCount.vue b/src/views/ctrl/statCharts/inOutKeyCount.vue
index fa9a0b7..10108d6 100644
--- a/src/views/ctrl/statCharts/inOutKeyCount.vue
+++ b/src/views/ctrl/statCharts/inOutKeyCount.vue
@@ -1,5 +1,7 @@
 <template>
-  <ve-ring :data="chartData" :settings="settings" />
+  <div style="height: 100%">
+    <ve-ring :data="chartData" :settings="settings" :extend="chartExtend"  height="90%"/>
+  </div>
 </template>
 
 <script>
@@ -9,6 +11,19 @@
   name: 'InOutKeyCount',
   data() {
     return {
+      chartExtend: {
+        legend:{  // 隐藏图例
+          x: 'center',
+          y: 'top'
+        },
+        grid: {
+          containLabel: true,
+          top: '10%'
+        },
+        series: {
+          center: ['50%', '50%']
+        }
+      },
       chartData: {
         columns: ['name', 'count'],
         rows: []
diff --git a/src/views/ctrl/statCharts/inOutToday.vue b/src/views/ctrl/statCharts/inOutToday.vue
index c37fa7b..ae67856 100644
--- a/src/views/ctrl/statCharts/inOutToday.vue
+++ b/src/views/ctrl/statCharts/inOutToday.vue
@@ -1,5 +1,7 @@
 <template>
-  <ve-ring :data="chartData" :settings="settings" />
+  <div style="height: 100%">
+    <ve-ring :data="chartData" :settings="settings" :extend="chartExtend"  height="90%"/>
+  </div>
 </template>
 
 <script>
@@ -18,6 +20,15 @@
           { count: 1, name: '来访车辆' }
         ]
       },
+      chartExtend: {
+        legend:{  // 隐藏图例
+          x: 'center',
+          y: 'top'
+        },
+        series: {
+          center: ['50%', '50%']
+        }
+      },
       settings: {
         radius: [60, 100]
       }
diff --git a/src/views/deviceManage/deviceDetail.vue b/src/views/deviceManage/deviceDetail.vue
index 701052d..8245327 100644
--- a/src/views/deviceManage/deviceDetail.vue
+++ b/src/views/deviceManage/deviceDetail.vue
@@ -9,7 +9,7 @@
         <!--</el-col>-->
         <el-col :span="12">
           <el-form-item label="设备编号">
-            <el-input v-model.trim="dataForm.name" disabled type="text"/>
+            <el-input v-model.trim="dataForm.devcode" disabled type="text"/>
             <!--<span>{{ dataForm.devcode }}</span>-->
           </el-form-item>
         </el-col>
diff --git a/src/views/layout/components/AppHeader.vue b/src/views/layout/components/AppHeader.vue
index c3235b4..2e45954 100644
--- a/src/views/layout/components/AppHeader.vue
+++ b/src/views/layout/components/AppHeader.vue
@@ -1,12 +1,12 @@
 <template>
   <!--<div :style="{backgroundImage:'url('+headerUrl+')'}" class="app-header">-->
   <div style="background-color: #0078ff;" class="app-header">
-    <h3>{{ title }}</h3>
+    <h3 @click="backToIndex">{{ title }}</h3>
     <!--子系统选项-->
     <el-dropdown class="systemSelect" @command="handleCommand">
       <span class="el-dropdown-link" style="color: white">{{ currentSystem.name }}<i class="el-icon-arrow-down el-icon--right"/>
       </span>
-      <el-dropdown-menu slot="dropdown" >
+      <el-dropdown-menu slot="dropdown" style="z-index: 10000" >
         <el-dropdown-item>
           <span style="display:block;" @click="backToIndex">回首页</span>
         </el-dropdown-item>
@@ -15,7 +15,7 @@
     </el-dropdown>
 
     <div v-show="currentSystem.code === 'ctrl'" class="back-to-overview">
-      <el-button type="info" round @click="backToOverview">运行总览</el-button>
+      <el-button type="info" round @click="backToOverview" style="background-color: rgba(255,255,255,0.31);border: 0px">运行总览</el-button>
     </div>
 
     <el-dropdown class="avatar-container">
diff --git a/src/views/overview/doorIndex.vue b/src/views/overview/doorIndex.vue
index 5d2dce2..7cd40ff 100644
--- a/src/views/overview/doorIndex.vue
+++ b/src/views/overview/doorIndex.vue
@@ -58,26 +58,51 @@
           <i v-else class="el-icon-arrow-down"/>
         </span>
       </div>
-      <transition name="el-collapse-transition">
-        <el-scrollbar
-          v-show="tableShow"
-          :style="{ visibility: tableShow ? 'visible' : 'hidden'}"
-          :class="{ moredatascollor: alarmList.length > 6 }"
-          :native="false">
-          <el-table
-            :data="alarmList"
-            class="alarm-list-table"
-            border
-            stripe
-            @row-click="alarmRowClick">
-            <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{ scope.row[column.value] }}
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-scrollbar>
-      </transition>
+      <div v-show="alarmList.length > 4 && tableShow">
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 32px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 231px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          height="200"
+          style="border-left: 1px solid #2470AC;"
+          v-if="tableShow"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-show="alarmList.length < 5 && tableShow">
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          v-if="tableShow"
+          style="border: 1px solid #2470AC"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
     </div>
 
     <!-- 中间平面图区域 -->
@@ -730,9 +755,12 @@
   .main-page {
     background-size: cover;
     background-color: #023d83;
-    height: 100vh;
+    height: 98vh;
   }
-
+  .tableLine {
+    margin-top: 9px;
+    width: 463px;
+  }
   .main-header {
     width: 100vw;
   }
@@ -863,16 +891,24 @@
         margin-left: 20px;
       }
     }
-    .el-scrollbar {
-      /*height: 200px;*/
-      width: 100%;
+    // 滚动条的滑块
+    /deep/ .el-table__body-wrapper  {
+      background-color: #023D83;
+      border: 0px solid white;
     }
-    .moredatascollor {
-      height: 200px;
+    /deep/ .el-table--border th.gutter:last-of-type {
+      border: 1px solid #023D83;
+      border-bottom-width: 1px;
+      background-color: #023D83;
     }
-    .el-scrollbar__wrap {
-      overflow-y: auto;
-      overflow-x: hidden;
+    /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
+      background-color: #023D83;
+    }
+    /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+      display: none;
+    }
+    /deep/ .el-scrollbar__wrap {
+      overflow-x: hidden !important;
       margin-bottom: 0px !important;
     }
     .el-table {
@@ -906,16 +942,25 @@
     font-size: 15px;
     color: #FFFFFF;
     font-weight: normal;
+    border-color: #2470AC;
   }
-
+  .el-table--border::after, .el-table--group::after, .el-table::before{
+    background-color: #023d83;
+  }
+  .alarm-now-block /deep/ .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
+    border-color: #023d83;
+  }
   .alarm-now-block /deep/ .el-table__row td {
     background-color: #023D83;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ .el-table__body tr:hover > td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ tr.el-table__row--striped td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
 
   .map-tab {
@@ -1091,6 +1136,10 @@
   /*}*/
 
   @media(max-width: 1440px) {
+    .tableLine {
+      margin-top: 0px;
+      width: 343px;
+    }
     .main-title {
       height: 65px;
       padding-top: 16px;
diff --git a/src/views/overview/fenceIndex.vue b/src/views/overview/fenceIndex.vue
index 9466288..62a35e8 100644
--- a/src/views/overview/fenceIndex.vue
+++ b/src/views/overview/fenceIndex.vue
@@ -58,26 +58,52 @@
           <i v-else class="el-icon-arrow-down"/>
         </span>
       </div>
-      <transition name="el-collapse-transition">
-        <el-scrollbar
-          v-show="tableShow"
-          :style="{ visibility: tableShow ? 'visible' : 'hidden'}"
-          :class="{ moredatascollor: alarmList.length > 6 }"
-          :native="false">
-          <el-table
-            :data="alarmList"
-            class="alarm-list-table"
-            border
-            stripe
-            @row-click="alarmRowClick">
-            <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{ scope.row[column.value] }}
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-scrollbar>
-      </transition>
+      <div v-show="alarmList.length > 4 && tableShow">
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 32px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 231px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          height="200"
+          style="border-left: 1px solid #2470AC;"
+          v-if="tableShow"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-show="alarmList.length < 5 && tableShow">
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          v-if="tableShow"
+          style="border: 1px solid #2470AC"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
     </div>
 
     <!-- 中间平面图区域 -->
@@ -725,10 +751,14 @@
       font-weight: normal;
     }
   }
+  .tableLine {
+    margin-top: 9px;
+    width: 463px;
+  }
   .main-page {
     background-size: cover;
     background-color: #023d83;
-    height: 100vh;
+    height: 98vh;
   }
 
   .main-header {
@@ -859,16 +889,24 @@
         margin-left: 20px;
       }
     }
-    .el-scrollbar {
-      /*height: 200px;*/
-      width: 100%;
+    // 滚动条的滑块
+    /deep/ .el-table__body-wrapper  {
+      background-color: #023D83;
+      border: 0px solid white;
     }
-    .moredatascollor {
-      height: 200px;
+    /deep/ .el-table--border th.gutter:last-of-type {
+      border: 1px solid #023D83;
+      border-bottom-width: 1px;
+      background-color: #023D83;
     }
-    .el-scrollbar__wrap {
-      overflow-y: auto;
-      overflow-x: hidden;
+    /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
+      background-color: #023D83;
+    }
+    /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+      display: none;
+    }
+    /deep/ .el-scrollbar__wrap {
+      overflow-x: hidden !important;
       margin-bottom: 0px !important;
     }
     .el-table {
@@ -902,16 +940,25 @@
     font-size: 15px;
     color: #FFFFFF;
     font-weight: normal;
+    border-color: #2470AC;
   }
-
+  .el-table--border::after, .el-table--group::after, .el-table::before{
+    background-color: #023d83;
+  }
+  .alarm-now-block /deep/ .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
+    border-color: #023d83;
+  }
   .alarm-now-block /deep/ .el-table__row td {
     background-color: #023D83;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ .el-table__body tr:hover > td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ tr.el-table__row--striped td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
 
   .map-tab {
@@ -1087,6 +1134,10 @@
   /*}*/
 
   @media(max-width: 1440px) {
+    .tableLine {
+      margin-top: 0px;
+      width: 343px;
+    }
     .main-title {
       height: 65px;
       padding-top: 16px;
diff --git a/src/views/overview/keyIndex.vue b/src/views/overview/keyIndex.vue
index 37405a8..a461c94 100644
--- a/src/views/overview/keyIndex.vue
+++ b/src/views/overview/keyIndex.vue
@@ -33,20 +33,6 @@
             <span v-text="dev.alarm"/>
           </div>
         </el-col>
-
-        <!--<el-col :span="6" class="sub-data-block dev-offline">-->
-          <!--<div class="statis-block">-->
-            <!--<span v-text="dev.offLine"/>-->
-          <!--</div>-->
-          <!--<div class="sub-title">离线</div>-->
-        <!--</el-col>-->
-
-        <!--<el-col :span="6" class="sub-data-block dev-closed">-->
-          <!--<div class="statis-block">-->
-            <!--<span v-text="dev.closed"/>-->
-          <!--</div>-->
-          <!--<div class="sub-title">关闭</div>-->
-        <!--</el-col>-->
       </el-row>
     </div>
 
@@ -58,26 +44,52 @@
           <i v-else class="el-icon-arrow-down"/>
         </span>
       </div>
-      <transition name="el-collapse-transition">
-        <el-scrollbar
-          v-show="tableShow"
-          :style="{ visibility: tableShow ? 'visible' : 'hidden'}"
-          :class="{ moredatascollor: alarmList.length > 6 }"
-          :native="false">
-          <el-table
-            :data="alarmList"
-            class="alarm-list-table"
-            border
-            stripe
-            @row-click="alarmRowClick">
-            <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{ scope.row[column.value] }}
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-scrollbar>
-      </transition>
+      <div v-show="alarmList.length > 4 && tableShow">
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 32px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 231px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          height="200"
+          style="border-left: 1px solid #2470AC;"
+          v-if="tableShow"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-show="alarmList.length < 5 && tableShow">
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          v-if="tableShow"
+          style="border: 1px solid #2470AC"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
     </div>
 
     <!-- 中间平面图区域 -->
@@ -95,49 +107,16 @@
     </div>
 
     <!-- 平面图区域设备类型按钮 -->
-    <div v-show="showType" class="bottom-center" :style="{ width: btnwidth + 'px'}">
-      <el-col class="dev-icon" @click.native="selectDevByType('4', $event)">
-        <img id="4-1-img" v-if="checkDevType1[0]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-        <img id="4-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-        <span>人脸识别</span>
-      </el-col>
-      <!--<el-col class="dev-icon" @click.native="selectDevByType('5', $event)">-->
-        <!--<img id="5-1-img" v-if="checkDevType1[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
-        <!--<img id="5-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
-        <!--<span>车牌轨迹</span>-->
-      <!--</el-col>-->
-      <!--<el-col class="dev-icon" @click.native="selectDevByType('8', $event)">-->
-        <!--<img id="8-1-img" v-if="checkDevType1[2]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
-        <!--<img id="8-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
-        <!--<span>周界防护</span>-->
-      <!--</el-col>-->
-      <!--<el-col class="dev-icon" @click.native="selectDevByType('9', $event)">-->
-        <!--<img id="9-1-img" v-if="checkDevType1[3]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
-        <!--<img id="9-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
-        <!--<span>标准数字</span>-->
-      <!--</el-col>-->
-      <!--<el-col class="dev-icon" @click.native="selectDevByType('10', $event)">-->
-        <!--<img id="10-1-img" v-if="checkDevType1[4]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
-        <!--<img id="10-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
-        <!--<span>智能球形</span>-->
-      <!--</el-col>-->
-      <!--<el-col class="dev-icon" @click.native="selectDevByType('11', $event)">-->
-        <!--<img id="11-1-img" v-if="checkDevType1[5]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
-        <!--<img id="11-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
-        <!--<span>标准半球</span>-->
-      <!--</el-col>-->
-    </div>
-    <!-- 平面图区域设备类型按钮 -->
     <div v-show="!showType"class="bottom-center" :style="{ width: cameraTypeNum*btnwidth + 'px'}">
       <el-col ref="all" class="dev-icon dev-type-selected" @click.native="selectDevByType('all', $event)">
         <img v-if="checkDevType[0]" src="@/assets/overview_images/icons/icon-all-checked.png">
         <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
         <span>全部</span>
       </el-col>
-      <el-col ref="camera" :class="cameraClass" @click.native="showType=!showType;selectDevByType('camera', $event)">
-        <img id="cam_img_red" v-if="checkDevType[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-        <img id="cam_img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-        <span>摄像头</span>
+      <el-col class="dev-icon" @click.native="selectDevByType('camera4', $event)">
+        <img id="4-1-img" v-if="checkDevType[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
+        <img id="4-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
+        <span>人脸识别</span>
       </el-col>
       <el-col v-show="showTemp" class="dev-icon" @click.native="selectDevByType('temperature', $event)">
         <img v-if="checkDevType[2]" src="@/assets/overview_images/icons/icon-temperature-checked.png">
@@ -364,7 +343,6 @@
       }, // 设备详情表单
       cameraClass:'dev-icon',
       showType : false,
-      checkDevType1: [false, false, false, false, false, false], // 摄像头类型
       checkDevType: [true, false, false, false, false] // 选中设备类型
     }
   },
@@ -462,7 +440,7 @@
       }else if(pic==='3'){
         this.changeMap('tg_4_1')
       }else if(pic==='4'){
-        this.changeMap('tg_4_1')
+        this.changeMap('tg_4_5')
       }
       setTimeout(() => {
         var obj = document.getElementById(val.toString());
@@ -477,24 +455,6 @@
     handleKeyup(val){ //单击收起摄像头分类
       this.showAlarmDetail  = false
       this.showDevDetail  = false
-      var item = ['人脸识别']
-      for(var i=0;i<item.length;i++){
-        if(item[i]===val.target.innerText){
-          return
-        }
-      }
-      if(val.target.id.endsWith('-1-img')||val.target.id.endsWith('-2-img')|| val.target.id==='cam_img' || val.target.id==='cam_img_red'){
-        return
-      }
-      if( val.target.innerText!=='摄像头') {
-        this.showType = false
-        const devTypes = document.querySelectorAll('.dev-icon')
-        for(var i=0;i<this.checkDevType.length;i++) {
-          if (this.checkDevType[i]) {
-            devTypes[i+1].className += ' dev-type-selected'
-          }
-        }
-      }
     },
     handleSelect(key, keyPath) {
       this.selectDevByType(key,undefined)
@@ -643,14 +603,13 @@
       if(type !== 'camera'){
         // 添加选中的样式
         if (typeof event === 'undefined') {
-          devTypes[1].className += ' dev-type-selected'
+          devTypes[0].className += ' dev-type-selected'
         } else {
           event.currentTarget.className += ' dev-type-selected'
         }
       }
       if(type!=='camera'){
         this.checkDevType = [false, false, false, false, false]
-        this.checkDevType1 = [false, false, false, false, false, false]
       }
       if (type === 'all') {
         if(this.bgImageSrc===tg_4_5){
@@ -660,14 +619,7 @@
         }
         // this.devListParams.deviceTypes = []
         this.checkDevType[0] = true
-      } else if(type==='camera'){
-        for(var i=0;i<this.checkDevType1.length;i++){
-          if(this.checkDevType1[i]) {
-            devTypes[i].className += ' dev-type-selected'
-          }
-        }
-        return
-      } else if (type === 'temperature') {
+      }  else if (type === 'temperature') {
         this.devListParams.deviceTypes = temperatureTypes.toString()
         this.checkDevType[2] = true
       } else if (type === 'smoking') {
@@ -676,30 +628,24 @@
       } else if (type === 'sound') {
         this.devListParams.deviceTypes = soundTypes.toString()
         this.checkDevType[4] = true
-      }else if(type === '4'){
+      }else if(type === 'camera4'){
         this.devListParams.deviceTypes = '4'
         this.checkDevType[1] = true
-        this.checkDevType1[0] = true
       }else if(type === '5'){
         this.devListParams.deviceTypes = '5'
         this.checkDevType[1] = true
-        this.checkDevType1[1] = true
       }else if(type === '8'){
         this.devListParams.deviceTypes = '8'
         this.checkDevType[1] = true
-        this.checkDevType1[2] = true
       }else if(type === '9'){
         this.devListParams.deviceTypes = '9'
         this.checkDevType[1] = true
-        this.checkDevType1[3] = true
       }else if(type === '10'){
         this.devListParams.deviceTypes = '10'
         this.checkDevType[1] = true
-        this.checkDevType1[4] = true
       }else if(type === '11'){
         this.devListParams.deviceTypes = '11'
         this.checkDevType[1] = true
-        this.checkDevType1[5] = true
       }
       this.fetchDeviceData()
       // if(this.checkDevType[1]){
@@ -866,18 +812,13 @@
       }else{
         this.devListParams.deviceTypes = '1,2,4,12'
       }
-      // this.devListParams.deviceTypes = []
       if (index === 'tg_main') {
-        // this.imgSizeOriginal = { width: 2245, height: 1586 }
         this.devListParams.picture = '1'
       }else if (index === 'tg_3_1') {
-        // this.imgSizeOriginal = { width: 2245, height: 1586 }
         this.devListParams.picture = '2'
       } else if (index === 'tg_4_1') {
-        // this.imgSizeOriginal = { width: 2218, height: 2169 }
         this.devListParams.picture = '3'
       }else if (index === 'tg_4_5') {
-        // this.imgSizeOriginal = { width: 2245, height: 1586 }
         this.devListParams.picture = '4'
       }
       overviewDeviceList(this.devListParams).then(response => {
@@ -1060,10 +1001,14 @@
   /deep/ .el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
     border-bottom-width: 0px;
   }
+  .tableLine {
+    margin-top: 9px;
+    width: 463px;
+  }
   .main-page {
     background-size: cover;
     background-color: #023d83;
-    height: 100vh;
+    height: 98vh;
   }
 
   .main-header {
@@ -1194,16 +1139,24 @@
         margin-left: 20px;
       }
     }
-    .el-scrollbar {
-      /*height: 200px;*/
-      width: 100%;
+    // 滚动条的滑块
+    /deep/ .el-table__body-wrapper  {
+      background-color: #023D83;
+      border: 0px solid white;
     }
-    .moredatascollor {
-      height: 200px;
+    /deep/ .el-table--border th.gutter:last-of-type {
+      border: 1px solid #023D83;
+      border-bottom-width: 1px;
+      background-color: #023D83;
     }
-    .el-scrollbar__wrap {
-      overflow-y: auto;
-      overflow-x: hidden;
+    /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
+      background-color: #023D83;
+    }
+    /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+      display: none;
+    }
+    /deep/ .el-scrollbar__wrap {
+      overflow-x: hidden !important;
       margin-bottom: 0px !important;
     }
     .el-table {
@@ -1237,16 +1190,25 @@
     font-size: 15px;
     color: #FFFFFF;
     font-weight: normal;
+    border-color: #2470AC;
   }
-
+  .el-table--border::after, .el-table--group::after, .el-table::before{
+    background-color: #023d83;
+  }
+  .alarm-now-block /deep/ .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
+    border-color: #023d83;
+  }
   .alarm-now-block /deep/ .el-table__row td {
     background-color: #023D83;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ .el-table__body tr:hover > td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ tr.el-table__row--striped td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
 
   .map-tab {
@@ -1431,6 +1393,10 @@
   /*}*/
 
   @media(max-width: 1440px) {
+    .tableLine {
+      margin-top: 0px;
+      width: 343px;
+    }
     .main-title {
       height: 65px;
       padding-top: 16px;
diff --git a/src/views/overview/regionIndex.vue b/src/views/overview/regionIndex.vue
index 69e7606..d4ea083 100644
--- a/src/views/overview/regionIndex.vue
+++ b/src/views/overview/regionIndex.vue
@@ -58,26 +58,52 @@
           <i v-else class="el-icon-arrow-down"/>
         </span>
       </div>
-      <transition name="el-collapse-transition">
-        <el-scrollbar
-          v-show="tableShow"
-          :style="{ visibility: tableShow ? 'visible' : 'hidden'}"
-          :class="{ moredatascollor: alarmList.length > 6 }"
-          :native="false">
-          <el-table
-            :data="alarmList"
-            class="alarm-list-table"
-            border
-            stripe
-            @row-click="alarmRowClick">
-            <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-              <template slot-scope="scope">
-                {{ scope.row[column.value] }}
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-scrollbar>
-      </transition>
+      <div v-show="alarmList.length > 4 && tableShow">
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 32px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <div class="tableLine" style="
+        background-color: #2470AC;
+        position: absolute;top: 231px;left:0px;
+        height: 1px;
+        z-index: 10000;
+        margin-right: 30px"/>
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          height="200"
+          style="border-left: 1px solid #2470AC;"
+          v-if="tableShow"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-show="alarmList.length < 5 && tableShow">
+        <el-table
+          :data="alarmList"
+          :header-cell-style="{ borderColor:'#2470AC' }"
+          border
+          stripe
+          v-if="tableShow"
+          style="border: 1px solid #2470AC"
+          @row-click="alarmRowClick">
+          <el-table-column v-for="column in alarmColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row[column.value] }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
     </div>
 
     <!-- 中间平面图区域 -->
@@ -293,7 +319,7 @@
       title: getProject().title,
       bgImageSrc: tg_main,
       devListParams: {
-        picture: '3',
+        picture: '1',
         areaTypeId: 3,
         deviceTypes: '4,9,10,11'
       },
@@ -718,10 +744,14 @@
       font-weight: normal;
     }
   }
+  .tableLine {
+    margin-top: 9px;
+    width: 463px;
+  }
   .main-page {
     background-size: cover;
     background-color: #023d83;
-    height: 100vh;
+    height: 98vh;
   }
 
   .main-header {
@@ -852,16 +882,24 @@
         margin-left: 20px;
       }
     }
-    .el-scrollbar {
-      /*height: 200px;*/
-      width: 100%;
+    // 滚动条的滑块
+    /deep/ .el-table__body-wrapper  {
+      background-color: #023D83;
+      border: 0px solid white;
     }
-    .moredatascollor {
-      height: 200px;
+    /deep/ .el-table--border th.gutter:last-of-type {
+      border: 1px solid #023D83;
+      border-bottom-width: 1px;
+      background-color: #023D83;
     }
-    .el-scrollbar__wrap {
-      overflow-y: auto;
-      overflow-x: hidden;
+    /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
+      background-color: #023D83;
+    }
+    /deep/.el-table--scrollable-y ::-webkit-scrollbar {
+      display: none;
+    }
+    /deep/ .el-scrollbar__wrap {
+      overflow-x: hidden !important;
       margin-bottom: 0px !important;
     }
     .el-table {
@@ -895,16 +933,25 @@
     font-size: 15px;
     color: #FFFFFF;
     font-weight: normal;
+    border-color: #2470AC;
   }
-
+  .el-table--border::after, .el-table--group::after, .el-table::before{
+    background-color: #023d83;
+  }
+  .alarm-now-block /deep/ .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
+    border-color: #023d83;
+  }
   .alarm-now-block /deep/ .el-table__row td {
     background-color: #023D83;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ .el-table__body tr:hover > td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
   .alarm-now-block /deep/ tr.el-table__row--striped td {
     background-color: #0757A0;
+    border-color: #2470AC;
   }
 
   .map-tab {
@@ -1080,6 +1127,10 @@
   /*}*/
 
   @media(max-width: 1440px) {
+    .tableLine {
+      margin-top: 0px;
+      width: 343px;
+    }
     .main-title {
       height: 65px;
       padding-top: 16px;
diff --git a/src/views/staff/staffAdd.vue b/src/views/staff/staffAdd.vue
index 769e6d6..698cf37 100644
--- a/src/views/staff/staffAdd.vue
+++ b/src/views/staff/staffAdd.vue
@@ -116,6 +116,9 @@
           <el-row>
             <el-button type="primary" plain class="id-card-btn" :disabled="canRead" @click="readIDCard">读取身份证</el-button>
           </el-row>
+          <el-row>
+            <el-button type="primary" plain class="id-card-btn" @click="readCamera">{{ btnCamera }}</el-button>
+          </el-row>
         </el-col>
       </el-row>
     </el-form>
@@ -126,8 +129,13 @@
           <el-button v-show="isKey" type="primary" style="margin-left: 20px;" @click="registerIris"> 注册虹膜 </el-button>
           <el-button type="primary" style="margin-left: 20px;" @click="saveData"> 保存 </el-button>
         </el-col>
+        <el-col :span="6" :offset="3">
+          <video v-show="showVideo" width="200px" height="150px" style="margin-left: -8px"></video>
+          <canvas v-show = "false" width="200px" height="150px"></canvas>
+        </el-col>
       </el-row>
     </div>
+
     <capture-iris ref="captureIris"/>
   </div>
 </template>
@@ -150,6 +158,9 @@
       deptList: [],
       isEditMode: false, // 是否为编辑模式，编辑模式部分字段不允许修改，且没有重置和虹膜注册功能
       isKey: false, // 是否重点区域授权人员
+      btnCamera:'读取摄像头',
+      showVideo: false,
+      stream:'',
       personForm: {
         id: '', // 人员id
         idCard: '', // 身份证号
@@ -284,6 +295,81 @@
         this.formLoading = false
       })
     },
+    readCamera() {
+      if(this.btnCamera === '读取摄像头'){
+        this.cameraImgFile()
+      }else{
+        this.getAPhoto()
+      }
+    },
+    getAPhoto() {
+      //绘制canvas图形
+      let video = document.getElementsByTagName("video")[0]
+      var canvas = document.getElementsByTagName('canvas')[0]
+      var context = canvas.getContext('2d')
+      context.clearRect(0, 0, context.width, context.height);
+      context.drawImage(video, 0, 0,200,150);
+      this.showVideo = false
+      //把canvas图像转为img图片
+      this.photo = canvas.toDataURL("image/png");
+      var mediaStreamTrack =  this.stream.getTracks()[0];
+      mediaStreamTrack.stop();
+      this.btnCamera = '读取摄像头'
+    },
+    // 拍照上传获取video
+    cameraImgFile() {
+      let _this = this;
+
+      // 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象
+      if (navigator.mediaDevices === undefined) {
+        navigator.mediaDevices = {};
+      }
+      // 一些浏览器部分支持 mediaDevices。我们不能直接给对象设置 getUserMedia
+      // 因为这样可能会覆盖已有的属性。这里我们只会在没有getUserMedia属性的时候添加它。
+      if (navigator.mediaDevices.getUserMedia === undefined) {
+        navigator.mediaDevices.getUserMedia = function(constraints) {
+          // 首先，如果有getUserMedia的话，就获得它
+          var getUserMedia =
+            navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
+
+          // 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
+          if (!getUserMedia) {
+            return Promise.reject(
+              new Error("getUserMedia is not implemented in this browser")
+            );
+          }
+          // 否则，为老的navigator.getUserMedia方法包裹一个Promise
+          return new Promise(function(resolve, reject) {
+            getUserMedia.call(navigator, constraints, resolve, reject);
+          });
+        };
+      }
+      navigator.mediaDevices
+        .getUserMedia({ video: true, audio: false })
+        .then(function(stream) {
+          _this.stream = stream;
+          _this.videoShow = true;
+          // 旧的浏览器可能没有srcObject
+          _this.$nextTick(() => {
+            let video = document.getElementsByTagName("video")[0]
+            if ("srcObject" in video) {
+              video.srcObject = stream;
+            } else {
+              // 防止在新的浏览器里使用它，应为它已经不再支持了
+              video.src = window.URL.createObjectURL(stream);
+            }
+            _this.showVideo = true
+            _this.btnCamera = '拍照'
+            video.onloadedmetadata = function(e) {
+              video.play();
+            };
+          });
+        })
+        .catch(function(err) {
+          _this.videoShow = false;
+          _this.$message.warning("未发现可拍照设备或出现其他错误！");
+        });
+    },
     readIDCard() {
       this.resetForm()
       this.canRead = true
diff --git a/src/views/staff/staffEdit.vue b/src/views/staff/staffEdit.vue
index 2f8d4ca..04291b3 100644
--- a/src/views/staff/staffEdit.vue
+++ b/src/views/staff/staffEdit.vue
@@ -117,6 +117,9 @@
           <el-row>
             <el-button type="primary" plain :disabled="canRead"  class="id-card-btn" @click="readIDCard">读取身份证</el-button>
           </el-row>
+          <el-row>
+            <el-button type="primary" plain class="id-card-btn" @click="readCamera">{{ btnCamera }}</el-button>
+          </el-row>
         </el-col>
       </el-row>
     </el-form>
@@ -126,6 +129,10 @@
           <el-button v-show="isKey" type="primary" style="margin-left: 20px;" @click="registerIris"> 注册虹膜 </el-button>
           <el-button type="primary" style="margin-left: 20px;" @click="saveData"> 保存 </el-button>
         </el-col>
+        <el-col :span="6" :offset="3">
+          <video v-show="showVideo" width="200px" height="150px" style="margin-left: -8px"></video>
+          <canvas v-show = "false" width="200px" height="150px"></canvas>
+        </el-col>
       </el-row>
     </div>
 
@@ -161,6 +168,9 @@
     return {
       canRead: false,
       deptList: [],
+      btnCamera:'读取摄像头',
+      showVideo: false,
+      stream:'',
       isEditMode: false, // 是否为编辑模式，编辑模式部分字段不允许修改，且没有重置和虹膜注册功能
       isKey: false, // 是否重点区域授权人员
       reCaptureIris: '0', // 是否重新采集了虹膜
@@ -253,6 +263,81 @@
         this.keyAreaList = response.data
       })
     },
+    readCamera() {
+      if(this.btnCamera === '读取摄像头'){
+        this.cameraImgFile()
+      }else{
+        this.getAPhoto()
+      }
+    },
+    getAPhoto() {
+      //绘制canvas图形
+      let video = document.getElementsByTagName("video")[0]
+      var canvas = document.getElementsByTagName('canvas')[0]
+      var context = canvas.getContext('2d')
+      context.clearRect(0, 0, context.width, context.height);
+      context.drawImage(video, 0, 0,200,150);
+      this.showVideo = false
+      //把canvas图像转为img图片
+      this.photo = canvas.toDataURL("image/png");
+      var mediaStreamTrack =  this.stream.getTracks()[0];
+      mediaStreamTrack.stop();
+      this.btnCamera = '读取摄像头'
+    },
+    // 拍照上传获取video
+    cameraImgFile() {
+      let _this = this;
+
+      // 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象
+      if (navigator.mediaDevices === undefined) {
+        navigator.mediaDevices = {};
+      }
+      // 一些浏览器部分支持 mediaDevices。我们不能直接给对象设置 getUserMedia
+      // 因为这样可能会覆盖已有的属性。这里我们只会在没有getUserMedia属性的时候添加它。
+      if (navigator.mediaDevices.getUserMedia === undefined) {
+        navigator.mediaDevices.getUserMedia = function(constraints) {
+          // 首先，如果有getUserMedia的话，就获得它
+          var getUserMedia =
+            navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
+
+          // 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
+          if (!getUserMedia) {
+            return Promise.reject(
+              new Error("getUserMedia is not implemented in this browser")
+            );
+          }
+          // 否则，为老的navigator.getUserMedia方法包裹一个Promise
+          return new Promise(function(resolve, reject) {
+            getUserMedia.call(navigator, constraints, resolve, reject);
+          });
+        };
+      }
+      navigator.mediaDevices
+        .getUserMedia({ video: true, audio: false })
+        .then(function(stream) {
+          _this.stream = stream;
+          _this.videoShow = true;
+          // 旧的浏览器可能没有srcObject
+          _this.$nextTick(() => {
+            let video = document.getElementsByTagName("video")[0]
+            if ("srcObject" in video) {
+              video.srcObject = stream;
+            } else {
+              // 防止在新的浏览器里使用它，应为它已经不再支持了
+              video.src = window.URL.createObjectURL(stream);
+            }
+            _this.showVideo = true
+            _this.btnCamera = '拍照'
+            video.onloadedmetadata = function(e) {
+              video.play();
+            };
+          });
+        })
+        .catch(function(err) {
+          _this.videoShow = false;
+          _this.$message.warning("未发现可拍照设备或出现其他错误！");
+        });
+    },
     fetchData(id) {
       this.formLoading = true
       detailStaff(id).then(response => {
diff --git a/src/views/video/history.vue b/src/views/video/history.vue
index ed18111..de698a1 100644
--- a/src/views/video/history.vue
+++ b/src/views/video/history.vue
@@ -18,6 +18,7 @@
                   value-format="yyyy-MM-dd HH:mm:ss"
                   start-placeholder="搜索起始时间"
                   end-placeholder="搜索截止时间"
+                  arrow-control="true"
                   @focus="dateClick"
                   @change="dateSelected"/>
               </el-form-item>
@@ -25,11 +26,11 @@
               <!--<el-button class="filter-item" type="primary" @click="live">实时预览</el-button>-->
             </el-form>
           </div>
-          <div>
+          <div id="tabDiv">
             <!--<el-tabs v-model="activeName" type="card" @tab-click.once="handleClick">-->
               <!--<el-tab-pane label="海康" name="hk" >-->
                 <!--<iframe v-if="activeName==='hk'" zIndex="-1" name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html?wmode=opaque"/>-->
-                <iframe zIndex="-1" name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html?wmode=opaque"/>
+                <iframe name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html?wmode=opaque"/>
               <!--</el-tab-pane>-->
               <!--<el-tab-pane label="NVR" name="nvr">-->
                 <!--<iframe v-if="activeName==='nvr'" zIndex="-1" name="playNVR" class="iframe-body" src="/static/webCtrl/nvr/demo-easy.html?wmode=opaque"/>-->
@@ -43,6 +44,7 @@
 </template>
 <script>
 import VideoTree from './videoTree'
+import { formatToString, getDate, oneDayTime } from '@/utils/calendarUtil'
 export default {
   name: 'VideoHistory',
   components: { VideoTree },
@@ -84,9 +86,14 @@
     }
   },
   mounted() {
+    this.listQuery.startTime = getDate(0, 'DATE') + ' 00:00:00'
+    this.listQuery.endTime = getDate(0, 'SECOND')
+
+    this.timeRange = [this.listQuery.startTime, this.listQuery.endTime]
+    console.log(this.timeRange)
     setTimeout(() => {
       // console.log('treewidth: ' + this.$refs.tree.$el.offsetWidth.toString())
-      window.frames['playHK'].initPlugin('back')
+      window.frames['playHK'].initPlugin('back',document.getElementById("tabDiv").getBoundingClientRect().left)
     }, 1500)
   },
   methods: {
@@ -94,7 +101,7 @@
       if (tab.name === 'hk') {
         this.activeName = 'hk'
         console.log('hk')
-        window.frames['playHK'].initPlugin('back')
+        window.frames['playHK'].initPlugin('back',document.getElementById("tabDiv").getBoundingClientRect().left)
       } else if (tab.name === 'nvr') {
         this.activeName = 'nvr'
         // window.frames['playNVR'].stopPlayReal(null)
@@ -112,6 +119,7 @@
           if (this.activeName === 'nvr') {
             window.frames['playNVR'].search(0, this.listQuery.startTime, this.listQuery.endTime)
           } else if (this.activeName === 'hk') {
+            console.log(this.listQuery.monitorPoint, this.listQuery.startTime, this.listQuery.endTime)
             window.frames['playHK'].search(this.listQuery.monitorPoint, this.listQuery.startTime, this.listQuery.endTime)
           }
         }
@@ -120,7 +128,6 @@
     handleCameraClicked(camera) {
       console.log(camera)
       if (typeof camera.monitorPoint === 'undefined' || camera.monitorPoint === '') {
-        console.log('ip is null')
         return false
       } else {
         this.listQuery.monitorPoint = camera.monitorPoint
diff --git a/src/views/video/monitor.vue b/src/views/video/monitor.vue
index fa42257..dd66087 100644
--- a/src/views/video/monitor.vue
+++ b/src/views/video/monitor.vue
@@ -5,7 +5,7 @@
         <video-tree @click="handleCameraClicked"/>
       </el-col>
       <el-col :span="18">
-        <div ref="tabDiv" style="margin-top: 14px">
+        <div id="tabDiv">
           <!--<el-tabs v-model="activeName" type="border-card" @tab-click.once ="handleClick">-->
             <!--<el-tab-pane label="海康" name="hk">-->
               <!--<iframe v-if="activeName === 'hk'" name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html"/>-->
@@ -37,15 +37,16 @@
     }
   },
   mounted() {
+    // console.log(document.getElementById("tabDiv").getBoundingClientRect().left)
     setTimeout(() => {
-      window.frames['playHK'].initPlugin('real')
+      window.frames['playHK'].initPlugin('real',document.getElementById("tabDiv").getBoundingClientRect().left)
     }, 1000)
   },
   methods: {
     handleClick(tab, event) {
       if (tab.name === 'hk') {
         this.activeName = 'hk'
-        window.frames['playHK'].initPlugin('real')
+        window.frames['playHK'].initPlugin('real',document.getElementById("tabDiv").getBoundingClientRect().left)
       } else if (tab.name === 'nvr') {
         this.activeName = 'nvr'
         window.frames['playNVR'].stopPlayReal(null)
diff --git a/src/views/visitor/visitorAdd.vue b/src/views/visitor/visitorAdd.vue
index 87ec546..eb868d6 100644
--- a/src/views/visitor/visitorAdd.vue
+++ b/src/views/visitor/visitorAdd.vue
@@ -260,6 +260,11 @@
     },
     // 一位访客登记完毕
     visitorCheckedIn(visitor) {
+      if(visitor.sex === '2'){
+        visitor.sexStr = '女'
+      }else if(visitor.sex === '1'){
+        visitor.sexStr = '男'
+      }
       this.dataForm.visitorBaseDTOList.push(visitor)
     },
     detail(row) {
diff --git a/src/views/visitor/visitorAddCar.vue b/src/views/visitor/visitorAddCar.vue
index 8513b4c..83608e6 100644
--- a/src/views/visitor/visitorAddCar.vue
+++ b/src/views/visitor/visitorAddCar.vue
@@ -304,6 +304,11 @@
       if (type === 'createCar') {
         this.dataForm.visitCarDTOList.push(visitor)
       } else if (type === 'createPerson') {
+        if(visitor.sex === '2'){
+          visitor.sexStr = '女'
+        }else if(visitor.sex === '1'){
+          visitor.sexStr = '男'
+        }
         this.dataForm.visitorBaseDTOList.push(visitor)
       }
     },
diff --git a/src/views/visitor/visitorCarCheckIn.vue b/src/views/visitor/visitorCarCheckIn.vue
index c09abbb..149b940 100644
--- a/src/views/visitor/visitorCarCheckIn.vue
+++ b/src/views/visitor/visitorCarCheckIn.vue
@@ -1,6 +1,6 @@
 <!-- 访客车辆刷证登记页面 -->
 <template>
-  <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
+  <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body @close="closeDialog">
     <el-form ref="dataForm" :rules="rules" :model="dataForm" label-well-code="right" label-width="100px">
       <el-row>
         <el-col :span="6">
@@ -12,9 +12,12 @@
                 style="width: 130px; height: 175px"/>
             </div>
           </el-row>
-          <el-row>
+          <el-row style="margin-top: -20px">
             <el-button v-show="isEditMode" :disabled="readCard||canRead" type="primary" plain class="id-card-btn" @click="readIDCard">读取身份证</el-button>
           </el-row>
+          <el-row style="margin-top: -10px">
+            <el-button type="primary" plain class="id-card-btn" @click="readCamera">{{ btnCamera }}</el-button>
+          </el-row>
         </el-col>
 
         <el-col :span="16">
@@ -64,12 +67,14 @@
               </el-form-item>
             </el-col>
           </el-row>
+          <el-row class="dialog-footer">
+            <video v-show="showVideo" width="200px" height="150px" style="margin-right: 20px"></video>
+            <canvas v-show = "false" width="200px" height="150px"></canvas>
+            <el-button :loading="btnLoading" type="primary" @click="saveData" style="width: 150px">保 存</el-button>
+          </el-row>
         </el-col>
       </el-row>
     </el-form>
-    <div v-show="isEditMode" slot="footer" class="dialog-footer">
-      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
-    </div>
   </el-dialog>
 </template>
 
@@ -100,6 +105,9 @@
         address: '',
         plateNumber: '' // 来访车辆车牌号
       }, // 表单
+      btnCamera:'读取摄像头',
+      showVideo: false,
+      stream:'',
       photo: '', // 图片路径
       defaultPhoto: require('@/assets/global_images/photo.png'), // 默认图片路径
       textMap: {
@@ -129,12 +137,92 @@
     })
   },
   methods: {
+    closeDialog(){
+      var mediaStreamTrack =  this.stream.getTracks()[0];
+      mediaStreamTrack.stop();
+    },
+    readCamera() {
+      if(this.btnCamera === '读取摄像头'){
+        this.cameraImgFile()
+      }else{
+        this.getAPhoto()
+      }
+    },
+    getAPhoto() {
+      //绘制canvas图形
+      let video = document.getElementsByTagName("video")[0]
+      var canvas = document.getElementsByTagName('canvas')[0]
+      var context = canvas.getContext('2d')
+      context.clearRect(0, 0, context.width, context.height);
+      context.drawImage(video, 0, 0,200,150);
+      this.showVideo = false
+      //把canvas图像转为img图片
+      this.photo = canvas.toDataURL("image/png");
+      var mediaStreamTrack =  this.stream.getTracks()[0];
+      mediaStreamTrack.stop();
+      this.btnCamera = '读取摄像头'
+    },
+    // 拍照上传获取video
+    cameraImgFile() {
+      let _this = this;
+
+      // 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象
+      if (navigator.mediaDevices === undefined) {
+        navigator.mediaDevices = {};
+      }
+      // 一些浏览器部分支持 mediaDevices。我们不能直接给对象设置 getUserMedia
+      // 因为这样可能会覆盖已有的属性。这里我们只会在没有getUserMedia属性的时候添加它。
+      if (navigator.mediaDevices.getUserMedia === undefined) {
+        navigator.mediaDevices.getUserMedia = function(constraints) {
+          // 首先，如果有getUserMedia的话，就获得它
+          var getUserMedia =
+            navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
+
+          // 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
+          if (!getUserMedia) {
+            return Promise.reject(
+              new Error("getUserMedia is not implemented in this browser")
+            );
+          }
+          // 否则，为老的navigator.getUserMedia方法包裹一个Promise
+          return new Promise(function(resolve, reject) {
+            getUserMedia.call(navigator, constraints, resolve, reject);
+          });
+        };
+      }
+      navigator.mediaDevices
+        .getUserMedia({ video: true, audio: false })
+        .then(function(stream) {
+          _this.stream = stream;
+          _this.videoShow = true;
+          // 旧的浏览器可能没有srcObject
+          _this.$nextTick(() => {
+            let video = document.getElementsByTagName("video")[0]
+            if ("srcObject" in video) {
+              video.srcObject = stream;
+            } else {
+              // 防止在新的浏览器里使用它，应为它已经不再支持了
+              video.src = window.URL.createObjectURL(stream);
+            }
+            _this.showVideo = true
+            _this.btnCamera = '拍照'
+            video.onloadedmetadata = function(e) {
+              video.play();
+            };
+          });
+        })
+        .catch(function(err) {
+          _this.videoShow = false;
+          _this.$message.warning("未发现可拍照设备或出现其他错误！");
+        });
+    },
     // 初始化对话框
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.btnLoading = false
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
-
+      this.showVideo = false
+      this.btnCamera = '读取摄像头'
       this.resetForm()
 
       if (dialogStatus === 'createCar') { // 如果是新增，清除验证
@@ -243,7 +331,7 @@
     // 新增数据
     visitorCheckedIn: function() {
       this.$refs['dataForm'].validate((valid) => {
-        if (valid && this.readCard) {
+        if (valid) {
           // 车辆列表
           const carList = this.$parent.dataForm.visitCarDTOList
           let isCarChecked = false
@@ -259,8 +347,20 @@
                 isCarChecked = true
               }
             })
-
-            // 首先添加车辆
+            // carList.forEach(item => {
+            //   if (item.idCard === this.dataForm.idCard) {
+            //     isChecked = true
+            //   }
+            // })
+            //
+            // if (isChecked === true) {
+            //   this.$message.error('该身份证已经登记过，请检查')
+            //
+            //   this.$nextTick(() => {
+            //     this.btnLoading = false
+            //     this.readCard = false
+            //   })
+            // }else
             if (isCarChecked === true) {
               this.$message.error('该辆车已经登记过，请检查')
 
@@ -334,7 +434,6 @@
     width: 100%;
   }
   .dialog-footer {
-    margin-top: -20px;
     text-align: center;
   }
 </style>
diff --git a/src/views/visitor/visitorCheckIn.vue b/src/views/visitor/visitorCheckIn.vue
index 1aba7cc..9abeebd 100644
--- a/src/views/visitor/visitorCheckIn.vue
+++ b/src/views/visitor/visitorCheckIn.vue
@@ -1,10 +1,10 @@
 <!-- 访客刷证登记页面 -->
 <template>
-  <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
+  <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body  @close="closeDialog">
     <el-form ref="dataForm" :rules="rules" :model="dataForm" label-well-code="right" label-width="100px">
       <el-row>
         <el-col :span="6">
-          <el-row>
+          <el-row style="margin-top: -20px">
             <div class="avatar">
               <el-image
                 :src="photo!==''?photo:defaultPhoto"
@@ -12,9 +12,12 @@
                 style="width: 130px; height: 175px"/>
             </div>
           </el-row>
-          <el-row>
+          <el-row style="margin-top: -20px">
             <el-button v-show="isEditMode" :disabled="readCard||canRead" type="primary" plain class="id-card-btn" @click="readIDCard">读取身份证</el-button>
           </el-row>
+          <el-row style="margin-top: -10px">
+            <el-button type="primary" plain class="id-card-btn" @click="readCamera">{{ btnCamera }}</el-button>
+          </el-row>
         </el-col>
 
         <el-col :span="16">
@@ -53,37 +56,14 @@
               </el-form-item>
             </el-col>
           </el-row>
-
-          <!--          <el-row>-->
-          <!--            <el-col :span="24" >-->
-          <!--              <el-form-item label="出生日期" prop="birthday">-->
-          <!--                <el-date-picker-->
-          <!--                  v-model="dataForm.birthday"-->
-          <!--                  :editable="false"-->
-          <!--                  :readonly="readCard"-->
-          <!--                  :disabled="!isEditMode"-->
-          <!--                  type="date"-->
-          <!--                  style="width: 100%"-->
-          <!--                  value-format="yyyy-MM-dd"-->
-          <!--                  placeholder="选择出生日期"/>-->
-          <!--              </el-form-item>-->
-          <!--            </el-col>-->
-          <!--          </el-row>-->
-
-          <!--          <el-row :gutter="20">-->
-          <!--            <el-col :span="24">-->
-          <!--              <el-form-item label="住址" prop="address">-->
-          <!--                <el-input v-model.trim="dataForm.address" :readonly="readCard" :disabled="!isEditMode" type="text" placeholder="非必填"/>-->
-          <!--              </el-form-item>-->
-          <!--            </el-col>-->
-          <!--          </el-row>-->
+          <el-row class="dialog-footer">
+            <video v-show="showVideo" width="200px" height="150px" style="margin-right: 20px"></video>
+            <canvas v-show = "false" width="200px" height="150px"></canvas>
+            <el-button :loading="btnLoading" type="primary" @click="saveData" style="width: 150px">保 存</el-button>
+          </el-row>
         </el-col>
       </el-row>
     </el-form>
-    <div v-show="isEditMode" slot="footer" class="dialog-footer">
-      <!--<el-button :loading="btnLoading" :disabled="!readCard" type="primary" @click="saveData">保存</el-button>-->
-      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
-    </div>
   </el-dialog>
 </template>
 
@@ -97,6 +77,9 @@
   data() {
     return {
       canRead: false,
+      btnCamera:'读取摄像头',
+      showVideo: false,
+      stream:'',
       isEditMode: true, // 是否为编辑模式，非编辑模式都为只读
       readCard: false, // 是否从读卡器读卡，未从读卡器读卡不能提交，读卡之后不能编辑
       dialogFormVisible: false, // 对话框是否显示
@@ -142,12 +125,92 @@
     })
   },
   methods: {
+    readCamera() {
+      if(this.btnCamera === '读取摄像头'){
+        this.cameraImgFile()
+      }else{
+        this.getAPhoto()
+      }
+    },
+    closeDialog(){
+      var mediaStreamTrack =  this.stream.getTracks()[0];
+      mediaStreamTrack.stop();
+    },
+    getAPhoto() {
+      //绘制canvas图形
+      let video = document.getElementsByTagName("video")[0]
+      var canvas = document.getElementsByTagName('canvas')[0]
+      var context = canvas.getContext('2d')
+      context.clearRect(0, 0, context.width, context.height);
+      context.drawImage(video, 0, 0,200,150);
+      this.showVideo = false
+      //把canvas图像转为img图片
+      this.photo = canvas.toDataURL("image/png");
+      var mediaStreamTrack =  this.stream.getTracks()[0];
+      mediaStreamTrack.stop();
+      this.btnCamera = '读取摄像头'
+    },
+    // 拍照上传获取video
+    cameraImgFile() {
+      let _this = this;
+
+      // 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象
+      if (navigator.mediaDevices === undefined) {
+        navigator.mediaDevices = {};
+      }
+      // 一些浏览器部分支持 mediaDevices。我们不能直接给对象设置 getUserMedia
+      // 因为这样可能会覆盖已有的属性。这里我们只会在没有getUserMedia属性的时候添加它。
+      if (navigator.mediaDevices.getUserMedia === undefined) {
+        navigator.mediaDevices.getUserMedia = function(constraints) {
+          // 首先，如果有getUserMedia的话，就获得它
+          var getUserMedia =
+            navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
+
+          // 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
+          if (!getUserMedia) {
+            return Promise.reject(
+              new Error("getUserMedia is not implemented in this browser")
+            );
+          }
+          // 否则，为老的navigator.getUserMedia方法包裹一个Promise
+          return new Promise(function(resolve, reject) {
+            getUserMedia.call(navigator, constraints, resolve, reject);
+          });
+        };
+      }
+      navigator.mediaDevices
+        .getUserMedia({ video: true, audio: false })
+        .then(function(stream) {
+          _this.stream = stream;
+          _this.videoShow = true;
+          // 旧的浏览器可能没有srcObject
+          _this.$nextTick(() => {
+            let video = document.getElementsByTagName("video")[0]
+            if ("srcObject" in video) {
+              video.srcObject = stream;
+            } else {
+              // 防止在新的浏览器里使用它，应为它已经不再支持了
+              video.src = window.URL.createObjectURL(stream);
+            }
+            _this.showVideo = true
+            _this.btnCamera = '拍照'
+            video.onloadedmetadata = function(e) {
+              video.play();
+            };
+          });
+        })
+        .catch(function(err) {
+          _this.videoShow = false;
+          _this.$message.warning("未发现可拍照设备或出现其他错误！");
+        });
+    },
     // 初始化对话框
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.btnLoading = false
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
-
+      this.showVideo = false
+      this.btnCamera = '读取摄像头'
       this.resetForm()
 
       if (dialogStatus === 'create') { // 如果是新增，清除验证
@@ -261,6 +324,7 @@
               this.readCard = false
             })
           } else {
+            console.log(this.dataForm)
             // 发送信号让父组件添加
             this.$emit('checked', this.dataForm)
 
@@ -294,7 +358,7 @@
     width: 100%;
   }
   .dialog-footer {
-    margin-top: -20px;
+    margin-top: 10px;
     text-align: center;
   }
 </style>
diff --git a/src/views/visitor/visitorTrace.vue b/src/views/visitor/visitorTrace.vue
index 86d37c9..0ce5b60 100644
--- a/src/views/visitor/visitorTrace.vue
+++ b/src/views/visitor/visitorTrace.vue
@@ -24,21 +24,34 @@
     </div>
     <!-- 中间平面图区域 -->
     <div class="map-overview" style="top: 0px;position: relative" >
-      <img ref="bgImg" :src="bgImageSrc" height="100%" @load="backgroundImageReady">
+      <img ref="bgImg" :src="bgImageSrc" height="100%" @load="backgroundImageReady" @click="showVideo=false">
         <img
           v-for="item in list"
           :id="item.id"
           :key="item.id"
           :src="item.imgUrl"
+          :title="item.logtime"
           :style="{ position: 'absolute', top: item.y * imgSize.height / imgSizeOriginal.height-40 + 'px', left: (item.x * imgSize.width / imgSizeOriginal.width)-25 + 'px' }"
           class="point-img"
-          @click="detailDev(item, $event)" />
+          @click="showDetail(item, $event)" />
       </div>
+    <div id="tabDiv" ref="video-block" style="height: 0px" v-show="showVideo">
+      <el-image
+        :src="photo"
+        fit="cover"
+        :preview-src-list="picList"
+        style="width: 280px; height: 150px"/>
+      <!--<div style="width: 300px;height: 150px;background-color: red"></div>-->
+      <!--<iframe name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html?wmode=opaque"/>-->
+      <!--<iframe name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html?wmode=opaque" style="width: 400px;height: 300px"/>-->
+      <!--<iframe name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html" style="z-index: 100000;width: 400px;height: 300px" v-show="showVideo"/>-->
+    </div>
   </el-dialog>
 </template>
 
 <script>
-import { getVisitorCarTrace,getVisitorTrace } from '@/api/visitor'
+import { formatDateTime, formatToString, oneDayTime } from '@/utils/calendarUtil'
+import { getVisitorCarTrace,getVisitorTrace,getDetail } from '@/api/visitor'
 import { overviewDeviceList, overviewDeviceStatus, getDetailDevice } from '@/api/device'
 import tg_main from '../../assets/overview_images/tg/mapOverviewTg.png'
 export default {
@@ -47,14 +60,17 @@
     return {
       dialogFormVisible: false, // 对话框是否显示
       list:[],
+      showVideo:false,
       devListParams: {
         picture: '1',
         deviceTypes: '4,5,8,9,10,11,12,7'
       },
+      photo:require('@/assets/global_images/photo.png'),
       bgImageSrc: tg_main,
       timeRange: [],
       timer: null,
       step: 0,
+      picList: [],
       imgSize: {
         width: 2245,
         height: 1586
@@ -86,6 +102,32 @@
     }
   },
   methods: {
+    showDetail(dev, event) {
+        this.showVideo = false
+        const targetDev = event.currentTarget // 取到点击到的设备图标div
+        let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+        let left = parseInt(targetDev.style.left.substring(0, targetDev.style.left.length - 2))
+        this.$refs['video-block'].style.position = 'absolute'
+        this.$refs['video-block'].style.top = top + 'px'
+        this.$refs['video-block'].style.left = targetDev.style.left
+        this.photo = dev.bkgPicture
+        this.showVideo = true
+        // getDetail(dev.devcode).then(response => {
+        //   if (response.code === 200) {
+        //     this.photo = response.data
+        //     this.showVideo = true
+        //   }
+        // })
+        // var time = new Date(dev.logtime)
+        // var startTime = time.setSeconds(time.getSeconds() - 10)
+        // var endTime = time.setSeconds(time.getSeconds() + 20)
+        // startTime = formatDateTime(startTime)
+        // endTime = formatDateTime(endTime)
+        // window.frames['playHK'].initPlugin('trace',left,top)
+      // window.frames['playHK'].play(dev.monitorPoint)
+      // window.frames['playHK'].search(dev.monitorPoint, startTime, endTime)
+        // window.frames['playHK'].search(dev.monitorPoint, startTime, endTime)
+    },
     // 平面图就绪时执行函数
     backgroundImageReady() {
       this.imgSize = {
@@ -98,7 +140,11 @@
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.type = dialogStatus
       this.dialogFormVisible = dialogFormVisible
-
+      this.showVideo = false
+      this.picList = []
+      // setTimeout(() => {
+      //   window.frames['playHK'].initPlugin('real',document.getElementById("tabDiv").getBoundingClientRect().left)
+      // }, 1000)
       this.list = []
       this.listQuery.id = row.id
       this.listQuery.startTime = ''
@@ -131,18 +177,6 @@
       if(this.timer!==null){
         clearInterval(this.timer)
       }
-      // overviewDeviceList(this.devListParams).then(response => {
-      //   if (response.code === 200) {
-      //     that.list = response.data
-      //     that.list.forEach(dev => {
-      //       if (dev.x !== '' && dev.y !== '') {
-      //         dev.imgUrl = require("../../assets/overview_images/point-green.png")
-      //       }
-      //     })
-      //   }
-      // })
-
-
       this.list = []
       if(this.type === 'person'){
         getVisitorTrace(this.listQuery).then(response => {
@@ -152,6 +186,7 @@
               if (dev.x !== '' && dev.y !== '') {
                 dev.imgUrl = require("../../assets/overview_images/point-green.png")
               }
+              this.picList.push(dev.bkgPicture)
             })
           } else {
             this.$message.error(response.message)
diff --git a/static/webCtrl/hk/demo_embedded_for_iframe.html b/static/webCtrl/hk/demo_embedded_for_iframe.html
index 8d9eb32..e53a144 100644
--- a/static/webCtrl/hk/demo_embedded_for_iframe.html
+++ b/static/webCtrl/hk/demo_embedded_for_iframe.html
@@ -13,7 +13,7 @@
     margin: 0;
 }
 .playWnd {
-    margin: 0px 0 0 100px;
+    margin: 0px 0 0 0px;
     width: 1px;
     height: 1px;
     border: 1px solid white;
@@ -237,46 +237,46 @@
         var divBottom = $("#playWnd").get(0).getBoundingClientRect().bottom;
         var divWidth = $("#playWnd").width();
         var divHeight = $("#playWnd").height();
-
         oWebControl.JS_RepairPartWindow(0, 0, parseInt(winWidth) + 1, parseInt(winHeight) + 1);  // 多1个像素点防止还原后边界缺失一个像素条
+        // if(iframeClientPos){
+          // 判断剪切矩形的上边距
+          if (iframeClientPos.top < 0 && Math.abs(iframeClientPos.top) > divTop){
+            var deltaTop = Math.abs(iframeClientPos.top) - divTop;
+            oWebControl.JS_CuttingPartWindow(0, 0, parseInt(winWidth) + 1, deltaTop + 1);
+            //console.log({deltaTop: deltaTop});
+          }
 
-        // 判断剪切矩形的上边距
-        if (iframeClientPos.top < 0 && Math.abs(iframeClientPos.top) > divTop){
-          var deltaTop = Math.abs(iframeClientPos.top) - divTop;
-          oWebControl.JS_CuttingPartWindow(0, 0, parseInt(winWidth) + 1, deltaTop + 1);
-          //console.log({deltaTop: deltaTop});
-        }
+          // 判断剪切矩形的左边距
+          if (iframeClientPos.left < 0 && Math.abs(iframeClientPos.left) > divLeft){
+            var deltaLeft = Math.abs(iframeClientPos.left) - divLeft;
+            //console.log({deltaLeft: deltaLeft});
+            oWebControl.JS_CuttingPartWindow(0, 0, deltaLeft, parseInt(winHeight) + 1);  // 多剪掉一个像素条，防止出现剪掉一部分窗口后出现一个像素条
+          }
 
-        // 判断剪切矩形的左边距
-        if (iframeClientPos.left < 0 && Math.abs(iframeClientPos.left) > divLeft){
-          var deltaLeft = Math.abs(iframeClientPos.left) - divLeft;
-          //console.log({deltaLeft: deltaLeft});
-          oWebControl.JS_CuttingPartWindow(0, 0, deltaLeft, parseInt(winHeight) + 1);  // 多剪掉一个像素条，防止出现剪掉一部分窗口后出现一个像素条
-        }
+          // 判断剪切矩形的右边距
+          var W1 = iframeWndWidth - divRight;
+          var W2 = iframeParentShowSize.width - iframeClientPos.left;
+          if (W2 < divWidth){
+            var deltaRight = iframeWndWidth - W2 - W1;
+            if (deltaRight > 0) {
+              oWebControl.JS_CuttingPartWindow(parseInt(winWidth) - deltaRight, 0, deltaRight + 1, parseInt(winHeight) + 1);
+            }
+          }
 
-        // 判断剪切矩形的右边距
-        var W1 = iframeWndWidth - divRight;
-        var W2 = iframeParentShowSize.width - iframeClientPos.left;
-        if (W2 < divWidth){
-          var deltaRight = iframeWndWidth - W2 - W1;
-          if (deltaRight > 0) {
-            oWebControl.JS_CuttingPartWindow(parseInt(winWidth) - deltaRight, 0, deltaRight + 1, parseInt(winHeight) + 1);
+          // 判断剪切矩形的下边距
+          var H1 = iframeClientPos.bottom - iframeParentShowSize.height;
+          var H2 = iframeWndHeight - divBottom;
+          var deltaBottom = H1 - H2;
+          //console.log({deltaBottom: deltaBottom});
+          if (deltaBottom > 0) {
+            oWebControl.JS_CuttingPartWindow(0, parseInt(winHeight) - deltaBottom, parseInt(winWidth) + 1, deltaBottom + 1);
           }
         }
-
-        // 判断剪切矩形的下边距
-        var H1 = iframeClientPos.bottom - iframeParentShowSize.height;
-        var H2 = iframeWndHeight - divBottom;
-        var deltaBottom = H1 - H2;
-        //console.log({deltaBottom: deltaBottom});
-        if (deltaBottom > 0) {
-          oWebControl.JS_CuttingPartWindow(0, parseInt(winHeight) - deltaBottom, parseInt(winWidth) + 1, deltaBottom + 1);
-        }
-      }
+      // }
       }
 
     // 创建插件实例，并启动本地服务建立websocket连接，创建插件窗口
-    function initPlugin (type) {
+    function initPlugin (type,num,top) {
       oWebControl = new WebControl({
         szPluginContainer: "playWnd",
         iServicePortStart: 15900,
@@ -346,9 +346,17 @@
         }
       });
       if(oWebControl!=null) {
+        var height
+        if(type==="real"){
+          height = 200
+        }else if(type === "back"){
+          height = 280
+        }else{
+          height = top
+        }
         oWebControl.JS_SetDocOffset({
-          left: 540,
-          top: type === "real"?200:280
+          left: num,
+          top: height
         });
         setWndCover();
       }
@@ -358,32 +366,23 @@
     function search(cameraIndexCode, startTimeStamp, endTimeStamp){
       var startTimeStamp = Date.parse(new Date(startTimeStamp));
       var endTimeStamp = Date.parse(new Date(endTimeStamp));
-      console.log("startTimeStamp：" + startTimeStamp);
-      console.log("endTimeStamp：" + endTimeStamp);
-      var param = '{"argument": ' +
-        '{"cameraIndexCode": "'+cameraIndexCode+'","recordLocation": 0,"transMode": 1,"gpuMode": 0,"wndId": -1,"startTimeStamp": "'+startTimeStamp+'","endTimeStamp": "'+endTimeStamp+'"},"funcName": "startPlayback"}';
-      console.log("非控件读取：" + param);
-      //删除字符串中的回车换行
-      param = param.replace(/(\s*)/g, "");
-      // 执行
-      requestInterface(param);
-      // var recordLocation = 0;                                     //录像存储位置：0-中心存储，1-设备存储
-      // var transMode = 1;                                          //传输协议：0-UDP，1-TCP
-      // var gpuMode = 0;                                            //是否启用GPU硬解，0-不启用，1-启用
-      // var wndId = -1;                                             //播放窗口序号（在2x2以上布局下可指定播放窗口）
-      //
-      // oWebControl.JS_RequestInterface({
-      //   funcName: "startPlayback",
-      //   argument: JSON.stringify({
-      //     cameraIndexCode: cameraIndexCode,                   //监控点编号
-      //     startTimeStamp: Math.floor(startTimeStamp / 1000).toString(),  //录像查询开始时间戳，单位：秒
-      //     endTimeStamp: Math.floor(endTimeStamp / 1000).toString(),      //录像结束开始时间戳，单位：秒
-      //     recordLocation: recordLocation,                     //录像存储类型：0-中心存储，1-设备存储
-      //     transMode: transMode,                               //传输协议：0-UDP，1-TCP
-      //     gpuMode: gpuMode,                                   //是否启用GPU硬解，0-不启用，1-启用
-      //     wndId:wndId                                         //可指定播放窗口
-      //   })
-      // })
+      console.log(startTimeStamp,endTimeStamp)
+      var recordLocation = 1;                                     //录像存储位置：0-中心存储，1-设备存储
+      var transMode = 1;                                          //传输协议：0-UDP，1-TCP
+      var gpuMode = 0;                                            //是否启用GPU硬解，0-不启用，1-启用
+      var wndId = -1;                                             //播放窗口序号（在2x2以上布局下可指定播放窗口）
+      oWebControl.JS_RequestInterface({
+        funcName: "startPlayback",
+        argument: JSON.stringify({
+          cameraIndexCode: cameraIndexCode,                   //监控点编号
+          startTimeStamp: Math.floor(startTimeStamp / 1000).toString(),  //录像查询开始时间戳，单位：秒
+          endTimeStamp: Math.floor(endTimeStamp / 1000).toString(),      //录像结束开始时间戳，单位：秒
+          recordLocation: recordLocation,                     //录像存储类型：0-中心存储，1-设备存储
+          transMode: transMode,                               //传输协议：0-UDP，1-TCP
+          gpuMode: gpuMode,                                   //是否启用GPU硬解，0-不启用，1-启用
+          wndId:wndId                                         //可指定播放窗口
+        })
+      })
     }
 
     function requestInterface(value) {