diff --git a/public/static/webCtrl/hk/demo_embedded_for_iframe.html b/public/static/webCtrl/hk/demo_embedded_for_iframe.html
index 3a0be10..5c18f74 100644
--- a/public/static/webCtrl/hk/demo_embedded_for_iframe.html
+++ b/public/static/webCtrl/hk/demo_embedded_for_iframe.html
@@ -107,6 +107,13 @@
         }
     });
 
+    function destoryPlugin() {
+      if (oWebControl != null){
+        oWebControl.JS_HideWnd();  // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
+        oWebControl.JS_Disconnect().then(function(){}, function() {});
+      }
+    }
+
     function hide(){
       oWebControl.JS_HideWnd();
     };

diff --git a/public/static/webCtrl/hk/demo_embedded_for_iframe.html b/public/static/webCtrl/hk/demo_embedded_for_iframe.html
index 3a0be10..5c18f74 100644
--- a/public/static/webCtrl/hk/demo_embedded_for_iframe.html
+++ b/public/static/webCtrl/hk/demo_embedded_for_iframe.html
@@ -107,6 +107,13 @@
         }
     });
 
+    function destoryPlugin() {
+      if (oWebControl != null){
+        oWebControl.JS_HideWnd();  // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
+        oWebControl.JS_Disconnect().then(function(){}, function() {});
+      }
+    }
+
     function hide(){
       oWebControl.JS_HideWnd();
     };
diff --git a/src/App.vue b/src/App.vue
index d9046c1..b8c5c1a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="app" v-resize="windowResize">
+  <div id="app" style="overflow-y: hidden" v-resize="windowResize">
     <router-view />
   </div>
 </template>

diff --git a/public/static/webCtrl/hk/demo_embedded_for_iframe.html b/public/static/webCtrl/hk/demo_embedded_for_iframe.html
index 3a0be10..5c18f74 100644
--- a/public/static/webCtrl/hk/demo_embedded_for_iframe.html
+++ b/public/static/webCtrl/hk/demo_embedded_for_iframe.html
@@ -107,6 +107,13 @@
         }
     });
 
+    function destoryPlugin() {
+      if (oWebControl != null){
+        oWebControl.JS_HideWnd();  // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
+        oWebControl.JS_Disconnect().then(function(){}, function() {});
+      }
+    }
+
     function hide(){
       oWebControl.JS_HideWnd();
     };
diff --git a/src/App.vue b/src/App.vue
index d9046c1..b8c5c1a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="app" v-resize="windowResize">
+  <div id="app" style="overflow-y: hidden" v-resize="windowResize">
     <router-view />
   </div>
 </template>
diff --git a/src/api/device.js b/src/api/device.js
index 0ba70ff..8d6c46b 100644
--- a/src/api/device.js
+++ b/src/api/device.js
@@ -159,3 +159,21 @@
     data
   })
 }
+
+export function getSwitchStatus(data) {
+  return request({
+    url: '/cockpit/gateLinkage/switchStatus',
+    method: 'get'
+  })
+}
+
+export function gateLinkageSwitch(controlSwitch) {
+  return request({
+    url: '/cockpit/gateLinkage/switch',
+    method: 'get',
+    params: {
+      controlSwitch
+    }
+  })
+}
+

diff --git a/public/static/webCtrl/hk/demo_embedded_for_iframe.html b/public/static/webCtrl/hk/demo_embedded_for_iframe.html
index 3a0be10..5c18f74 100644
--- a/public/static/webCtrl/hk/demo_embedded_for_iframe.html
+++ b/public/static/webCtrl/hk/demo_embedded_for_iframe.html
@@ -107,6 +107,13 @@
         }
     });
 
+    function destoryPlugin() {
+      if (oWebControl != null){
+        oWebControl.JS_HideWnd();  // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
+        oWebControl.JS_Disconnect().then(function(){}, function() {});
+      }
+    }
+
     function hide(){
       oWebControl.JS_HideWnd();
     };
diff --git a/src/App.vue b/src/App.vue
index d9046c1..b8c5c1a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="app" v-resize="windowResize">
+  <div id="app" style="overflow-y: hidden" v-resize="windowResize">
     <router-view />
   </div>
 </template>
diff --git a/src/api/device.js b/src/api/device.js
index 0ba70ff..8d6c46b 100644
--- a/src/api/device.js
+++ b/src/api/device.js
@@ -159,3 +159,21 @@
     data
   })
 }
+
+export function getSwitchStatus(data) {
+  return request({
+    url: '/cockpit/gateLinkage/switchStatus',
+    method: 'get'
+  })
+}
+
+export function gateLinkageSwitch(controlSwitch) {
+  return request({
+    url: '/cockpit/gateLinkage/switch',
+    method: 'get',
+    params: {
+      controlSwitch
+    }
+  })
+}
+
diff --git a/src/api/person.js b/src/api/person.js
index 8a79c27..0c2a0ff 100644
--- a/src/api/person.js
+++ b/src/api/person.js
@@ -21,6 +21,14 @@
   })
 }
 
+export function getStaffOnList(params) {
+  return request({
+    url: '/cockpit/securityStaff/onList',
+    method: 'GET',
+    params
+  })
+}
+
 export function addStaff(data) {
   return request({
     url: 'staffInfo/add',

diff --git a/public/static/webCtrl/hk/demo_embedded_for_iframe.html b/public/static/webCtrl/hk/demo_embedded_for_iframe.html
index 3a0be10..5c18f74 100644
--- a/public/static/webCtrl/hk/demo_embedded_for_iframe.html
+++ b/public/static/webCtrl/hk/demo_embedded_for_iframe.html
@@ -107,6 +107,13 @@
         }
     });
 
+    function destoryPlugin() {
+      if (oWebControl != null){
+        oWebControl.JS_HideWnd();  // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
+        oWebControl.JS_Disconnect().then(function(){}, function() {});
+      }
+    }
+
     function hide(){
       oWebControl.JS_HideWnd();
     };
diff --git a/src/App.vue b/src/App.vue
index d9046c1..b8c5c1a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="app" v-resize="windowResize">
+  <div id="app" style="overflow-y: hidden" v-resize="windowResize">
     <router-view />
   </div>
 </template>
diff --git a/src/api/device.js b/src/api/device.js
index 0ba70ff..8d6c46b 100644
--- a/src/api/device.js
+++ b/src/api/device.js
@@ -159,3 +159,21 @@
     data
   })
 }
+
+export function getSwitchStatus(data) {
+  return request({
+    url: '/cockpit/gateLinkage/switchStatus',
+    method: 'get'
+  })
+}
+
+export function gateLinkageSwitch(controlSwitch) {
+  return request({
+    url: '/cockpit/gateLinkage/switch',
+    method: 'get',
+    params: {
+      controlSwitch
+    }
+  })
+}
+
diff --git a/src/api/person.js b/src/api/person.js
index 8a79c27..0c2a0ff 100644
--- a/src/api/person.js
+++ b/src/api/person.js
@@ -21,6 +21,14 @@
   })
 }
 
+export function getStaffOnList(params) {
+  return request({
+    url: '/cockpit/securityStaff/onList',
+    method: 'GET',
+    params
+  })
+}
+
 export function addStaff(data) {
   return request({
     url: 'staffInfo/add',
diff --git a/src/api/pop.js b/src/api/pop.js
index 01ddde7..6fa7381 100644
--- a/src/api/pop.js
+++ b/src/api/pop.js
@@ -72,6 +72,39 @@
   })
 }
 
+export function baoanStatistics() {
+  return request({
+    url: '/cockpit/securityStaff/statistics',
+    method: 'get',
+    data: {}
+  })
+}
+
+export function visitorStatistics() {
+  return request({
+    url: 'cockpit/visitor/statistics',
+    method: 'get',
+    data: {}
+  })
+}
+
+export function caseTodayStatistics() {
+  return request({
+    url: 'cockpit/case/todayStatistics',
+    method: 'get',
+    data: {}
+  })
+}
+
+export function casePieStatistics(params) {
+  return request({
+    url: 'cockpit/caseType/statisticsByTime',
+    method: 'get',
+    data: params,
+    params
+  })
+}
+
 // 安防事件频次因数组件
 export function securityFrequency() {
   return request({
@@ -158,3 +191,27 @@
     method: 'get'
   })
 }
+
+export function cameraTypeStatistics() {
+  return request({
+    url: '/cockpit/camera/typeStatistics',
+    method: 'get'
+  })
+}
+
+export function deviceStatistics(devType) {
+  return request({
+    url: '/cockpit/device/statistics',
+    method: 'post',
+    data: {
+      devType
+    }
+  })
+}
+
+export function buildPeopleNumber() {
+  return request({
+    url: '/cockpit/build/peopleNumber',
+    method: 'get'
+  })
+}

diff --git a/public/static/webCtrl/hk/demo_embedded_for_iframe.html b/public/static/webCtrl/hk/demo_embedded_for_iframe.html
index 3a0be10..5c18f74 100644
--- a/public/static/webCtrl/hk/demo_embedded_for_iframe.html
+++ b/public/static/webCtrl/hk/demo_embedded_for_iframe.html
@@ -107,6 +107,13 @@
         }
     });
 
+    function destoryPlugin() {
+      if (oWebControl != null){
+        oWebControl.JS_HideWnd();  // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
+        oWebControl.JS_Disconnect().then(function(){}, function() {});
+      }
+    }
+
     function hide(){
       oWebControl.JS_HideWnd();
     };
diff --git a/src/App.vue b/src/App.vue
index d9046c1..b8c5c1a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="app" v-resize="windowResize">
+  <div id="app" style="overflow-y: hidden" v-resize="windowResize">
     <router-view />
   </div>
 </template>
diff --git a/src/api/device.js b/src/api/device.js
index 0ba70ff..8d6c46b 100644
--- a/src/api/device.js
+++ b/src/api/device.js
@@ -159,3 +159,21 @@
     data
   })
 }
+
+export function getSwitchStatus(data) {
+  return request({
+    url: '/cockpit/gateLinkage/switchStatus',
+    method: 'get'
+  })
+}
+
+export function gateLinkageSwitch(controlSwitch) {
+  return request({
+    url: '/cockpit/gateLinkage/switch',
+    method: 'get',
+    params: {
+      controlSwitch
+    }
+  })
+}
+
diff --git a/src/api/person.js b/src/api/person.js
index 8a79c27..0c2a0ff 100644
--- a/src/api/person.js
+++ b/src/api/person.js
@@ -21,6 +21,14 @@
   })
 }
 
+export function getStaffOnList(params) {
+  return request({
+    url: '/cockpit/securityStaff/onList',
+    method: 'GET',
+    params
+  })
+}
+
 export function addStaff(data) {
   return request({
     url: 'staffInfo/add',
diff --git a/src/api/pop.js b/src/api/pop.js
index 01ddde7..6fa7381 100644
--- a/src/api/pop.js
+++ b/src/api/pop.js
@@ -72,6 +72,39 @@
   })
 }
 
+export function baoanStatistics() {
+  return request({
+    url: '/cockpit/securityStaff/statistics',
+    method: 'get',
+    data: {}
+  })
+}
+
+export function visitorStatistics() {
+  return request({
+    url: 'cockpit/visitor/statistics',
+    method: 'get',
+    data: {}
+  })
+}
+
+export function caseTodayStatistics() {
+  return request({
+    url: 'cockpit/case/todayStatistics',
+    method: 'get',
+    data: {}
+  })
+}
+
+export function casePieStatistics(params) {
+  return request({
+    url: 'cockpit/caseType/statisticsByTime',
+    method: 'get',
+    data: params,
+    params
+  })
+}
+
 // 安防事件频次因数组件
 export function securityFrequency() {
   return request({
@@ -158,3 +191,27 @@
     method: 'get'
   })
 }
+
+export function cameraTypeStatistics() {
+  return request({
+    url: '/cockpit/camera/typeStatistics',
+    method: 'get'
+  })
+}
+
+export function deviceStatistics(devType) {
+  return request({
+    url: '/cockpit/device/statistics',
+    method: 'post',
+    data: {
+      devType
+    }
+  })
+}
+
+export function buildPeopleNumber() {
+  return request({
+    url: '/cockpit/build/peopleNumber',
+    method: 'get'
+  })
+}
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index df71207..33d701a 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -280,37 +280,37 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  .table{
-    margin-bottom: 20px;
-  }
-  .pagination-container{
-    padding-bottom: 50px;
-  }
-  .table-title{
-    /*background-color:rgba(243, 243, 243, 1);*/
-    background-color:#fff;
-    .title-header{
-      font-size: 15px;
-      i{
-        margin-left: 10px;
-        margin-right: 5px;
-      }
-      i:focus{
-        outline: none;
-      }
+.table{
+  margin-bottom: 20px;
+}
+.pagination-container{
+  padding-bottom: 50px;
+}
+.table-title{
+  /*background-color:rgba(243, 243, 243, 1);*/
+  background-color:#fff;
+  .title-header{
+    font-size: 15px;
+    i{
+      margin-left: 10px;
+      margin-right: 5px;
+    }
+    i:focus{
+      outline: none;
     }
   }
-  .edit_btns{
-    padding-top:7px;
-    padding-right:3px;
-    text-align: right;
+}
+.edit_btns{
+  padding-top:7px;
+  padding-right:3px;
+  text-align: right;
+}
+.popper-div{
+  line-height: 1.5;
+  .popper-btns{
+    margin-top:10px;
   }
-  .popper-div{
-    line-height: 1.5;
-    .popper-btns{
-      margin-top:10px;
-    }
-  }
+}
 </style>
 
 <style>

diff --git a/public/static/webCtrl/hk/demo_embedded_for_iframe.html b/public/static/webCtrl/hk/demo_embedded_for_iframe.html
index 3a0be10..5c18f74 100644
--- a/public/static/webCtrl/hk/demo_embedded_for_iframe.html
+++ b/public/static/webCtrl/hk/demo_embedded_for_iframe.html
@@ -107,6 +107,13 @@
         }
     });
 
+    function destoryPlugin() {
+      if (oWebControl != null){
+        oWebControl.JS_HideWnd();  // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
+        oWebControl.JS_Disconnect().then(function(){}, function() {});
+      }
+    }
+
     function hide(){
       oWebControl.JS_HideWnd();
     };
diff --git a/src/App.vue b/src/App.vue
index d9046c1..b8c5c1a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="app" v-resize="windowResize">
+  <div id="app" style="overflow-y: hidden" v-resize="windowResize">
     <router-view />
   </div>
 </template>
diff --git a/src/api/device.js b/src/api/device.js
index 0ba70ff..8d6c46b 100644
--- a/src/api/device.js
+++ b/src/api/device.js
@@ -159,3 +159,21 @@
     data
   })
 }
+
+export function getSwitchStatus(data) {
+  return request({
+    url: '/cockpit/gateLinkage/switchStatus',
+    method: 'get'
+  })
+}
+
+export function gateLinkageSwitch(controlSwitch) {
+  return request({
+    url: '/cockpit/gateLinkage/switch',
+    method: 'get',
+    params: {
+      controlSwitch
+    }
+  })
+}
+
diff --git a/src/api/person.js b/src/api/person.js
index 8a79c27..0c2a0ff 100644
--- a/src/api/person.js
+++ b/src/api/person.js
@@ -21,6 +21,14 @@
   })
 }
 
+export function getStaffOnList(params) {
+  return request({
+    url: '/cockpit/securityStaff/onList',
+    method: 'GET',
+    params
+  })
+}
+
 export function addStaff(data) {
   return request({
     url: 'staffInfo/add',
diff --git a/src/api/pop.js b/src/api/pop.js
index 01ddde7..6fa7381 100644
--- a/src/api/pop.js
+++ b/src/api/pop.js
@@ -72,6 +72,39 @@
   })
 }
 
+export function baoanStatistics() {
+  return request({
+    url: '/cockpit/securityStaff/statistics',
+    method: 'get',
+    data: {}
+  })
+}
+
+export function visitorStatistics() {
+  return request({
+    url: 'cockpit/visitor/statistics',
+    method: 'get',
+    data: {}
+  })
+}
+
+export function caseTodayStatistics() {
+  return request({
+    url: 'cockpit/case/todayStatistics',
+    method: 'get',
+    data: {}
+  })
+}
+
+export function casePieStatistics(params) {
+  return request({
+    url: 'cockpit/caseType/statisticsByTime',
+    method: 'get',
+    data: params,
+    params
+  })
+}
+
 // 安防事件频次因数组件
 export function securityFrequency() {
   return request({
@@ -158,3 +191,27 @@
     method: 'get'
   })
 }
+
+export function cameraTypeStatistics() {
+  return request({
+    url: '/cockpit/camera/typeStatistics',
+    method: 'get'
+  })
+}
+
+export function deviceStatistics(devType) {
+  return request({
+    url: '/cockpit/device/statistics',
+    method: 'post',
+    data: {
+      devType
+    }
+  })
+}
+
+export function buildPeopleNumber() {
+  return request({
+    url: '/cockpit/build/peopleNumber',
+    method: 'get'
+  })
+}
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index df71207..33d701a 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -280,37 +280,37 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  .table{
-    margin-bottom: 20px;
-  }
-  .pagination-container{
-    padding-bottom: 50px;
-  }
-  .table-title{
-    /*background-color:rgba(243, 243, 243, 1);*/
-    background-color:#fff;
-    .title-header{
-      font-size: 15px;
-      i{
-        margin-left: 10px;
-        margin-right: 5px;
-      }
-      i:focus{
-        outline: none;
-      }
+.table{
+  margin-bottom: 20px;
+}
+.pagination-container{
+  padding-bottom: 50px;
+}
+.table-title{
+  /*background-color:rgba(243, 243, 243, 1);*/
+  background-color:#fff;
+  .title-header{
+    font-size: 15px;
+    i{
+      margin-left: 10px;
+      margin-right: 5px;
+    }
+    i:focus{
+      outline: none;
     }
   }
-  .edit_btns{
-    padding-top:7px;
-    padding-right:3px;
-    text-align: right;
+}
+.edit_btns{
+  padding-top:7px;
+  padding-right:3px;
+  text-align: right;
+}
+.popper-div{
+  line-height: 1.5;
+  .popper-btns{
+    margin-top:10px;
   }
-  .popper-div{
-    line-height: 1.5;
-    .popper-btns{
-      margin-top:10px;
-    }
-  }
+}
 </style>
 
 <style>
diff --git a/src/router/modules/menu.js b/src/router/modules/menu.js
index 28ecc52..447517e 100644
--- a/src/router/modules/menu.js
+++ b/src/router/modules/menu.js
@@ -8,7 +8,7 @@
     redirect: '/loginBoard',
     meta: {
       title: '主页',
-      permission: ['/loginBoard'],
+      // permission: ['/loginBoard'],
       icon: '' // 图标
     },
     children: [
@@ -16,7 +16,7 @@
         path: '/loginBoard',
         name: 'LoginBoard',
         component: () => import('@/views/backstage/loginBoard'),
-        meta: { title: '主页', icon: '', permission: ['/loginBoard'] }
+        meta: { title: '主页', icon: '' }
       }
     ]
   },

diff --git a/public/static/webCtrl/hk/demo_embedded_for_iframe.html b/public/static/webCtrl/hk/demo_embedded_for_iframe.html
index 3a0be10..5c18f74 100644
--- a/public/static/webCtrl/hk/demo_embedded_for_iframe.html
+++ b/public/static/webCtrl/hk/demo_embedded_for_iframe.html
@@ -107,6 +107,13 @@
         }
     });
 
+    function destoryPlugin() {
+      if (oWebControl != null){
+        oWebControl.JS_HideWnd();  // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
+        oWebControl.JS_Disconnect().then(function(){}, function() {});
+      }
+    }
+
     function hide(){
       oWebControl.JS_HideWnd();
     };
diff --git a/src/App.vue b/src/App.vue
index d9046c1..b8c5c1a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="app" v-resize="windowResize">
+  <div id="app" style="overflow-y: hidden" v-resize="windowResize">
     <router-view />
   </div>
 </template>
diff --git a/src/api/device.js b/src/api/device.js
index 0ba70ff..8d6c46b 100644
--- a/src/api/device.js
+++ b/src/api/device.js
@@ -159,3 +159,21 @@
     data
   })
 }
+
+export function getSwitchStatus(data) {
+  return request({
+    url: '/cockpit/gateLinkage/switchStatus',
+    method: 'get'
+  })
+}
+
+export function gateLinkageSwitch(controlSwitch) {
+  return request({
+    url: '/cockpit/gateLinkage/switch',
+    method: 'get',
+    params: {
+      controlSwitch
+    }
+  })
+}
+
diff --git a/src/api/person.js b/src/api/person.js
index 8a79c27..0c2a0ff 100644
--- a/src/api/person.js
+++ b/src/api/person.js
@@ -21,6 +21,14 @@
   })
 }
 
+export function getStaffOnList(params) {
+  return request({
+    url: '/cockpit/securityStaff/onList',
+    method: 'GET',
+    params
+  })
+}
+
 export function addStaff(data) {
   return request({
     url: 'staffInfo/add',
diff --git a/src/api/pop.js b/src/api/pop.js
index 01ddde7..6fa7381 100644
--- a/src/api/pop.js
+++ b/src/api/pop.js
@@ -72,6 +72,39 @@
   })
 }
 
+export function baoanStatistics() {
+  return request({
+    url: '/cockpit/securityStaff/statistics',
+    method: 'get',
+    data: {}
+  })
+}
+
+export function visitorStatistics() {
+  return request({
+    url: 'cockpit/visitor/statistics',
+    method: 'get',
+    data: {}
+  })
+}
+
+export function caseTodayStatistics() {
+  return request({
+    url: 'cockpit/case/todayStatistics',
+    method: 'get',
+    data: {}
+  })
+}
+
+export function casePieStatistics(params) {
+  return request({
+    url: 'cockpit/caseType/statisticsByTime',
+    method: 'get',
+    data: params,
+    params
+  })
+}
+
 // 安防事件频次因数组件
 export function securityFrequency() {
   return request({
@@ -158,3 +191,27 @@
     method: 'get'
   })
 }
+
+export function cameraTypeStatistics() {
+  return request({
+    url: '/cockpit/camera/typeStatistics',
+    method: 'get'
+  })
+}
+
+export function deviceStatistics(devType) {
+  return request({
+    url: '/cockpit/device/statistics',
+    method: 'post',
+    data: {
+      devType
+    }
+  })
+}
+
+export function buildPeopleNumber() {
+  return request({
+    url: '/cockpit/build/peopleNumber',
+    method: 'get'
+  })
+}
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index df71207..33d701a 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -280,37 +280,37 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  .table{
-    margin-bottom: 20px;
-  }
-  .pagination-container{
-    padding-bottom: 50px;
-  }
-  .table-title{
-    /*background-color:rgba(243, 243, 243, 1);*/
-    background-color:#fff;
-    .title-header{
-      font-size: 15px;
-      i{
-        margin-left: 10px;
-        margin-right: 5px;
-      }
-      i:focus{
-        outline: none;
-      }
+.table{
+  margin-bottom: 20px;
+}
+.pagination-container{
+  padding-bottom: 50px;
+}
+.table-title{
+  /*background-color:rgba(243, 243, 243, 1);*/
+  background-color:#fff;
+  .title-header{
+    font-size: 15px;
+    i{
+      margin-left: 10px;
+      margin-right: 5px;
+    }
+    i:focus{
+      outline: none;
     }
   }
-  .edit_btns{
-    padding-top:7px;
-    padding-right:3px;
-    text-align: right;
+}
+.edit_btns{
+  padding-top:7px;
+  padding-right:3px;
+  text-align: right;
+}
+.popper-div{
+  line-height: 1.5;
+  .popper-btns{
+    margin-top:10px;
   }
-  .popper-div{
-    line-height: 1.5;
-    .popper-btns{
-      margin-top:10px;
-    }
-  }
+}
 </style>
 
 <style>
diff --git a/src/router/modules/menu.js b/src/router/modules/menu.js
index 28ecc52..447517e 100644
--- a/src/router/modules/menu.js
+++ b/src/router/modules/menu.js
@@ -8,7 +8,7 @@
     redirect: '/loginBoard',
     meta: {
       title: '主页',
-      permission: ['/loginBoard'],
+      // permission: ['/loginBoard'],
       icon: '' // 图标
     },
     children: [
@@ -16,7 +16,7 @@
         path: '/loginBoard',
         name: 'LoginBoard',
         component: () => import('@/views/backstage/loginBoard'),
-        meta: { title: '主页', icon: '', permission: ['/loginBoard'] }
+        meta: { title: '主页', icon: '' }
       }
     ]
   },
diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss
index 0d1614b..f39542e 100644
--- a/src/styles/element-ui.scss
+++ b/src/styles/element-ui.scss
@@ -74,3 +74,6 @@
   height:48px;
   line-height:48px;
 }
+.el-time-panel {
+  margin-left: -20px !important;
+}

diff --git a/public/static/webCtrl/hk/demo_embedded_for_iframe.html b/public/static/webCtrl/hk/demo_embedded_for_iframe.html
index 3a0be10..5c18f74 100644
--- a/public/static/webCtrl/hk/demo_embedded_for_iframe.html
+++ b/public/static/webCtrl/hk/demo_embedded_for_iframe.html
@@ -107,6 +107,13 @@
         }
     });
 
+    function destoryPlugin() {
+      if (oWebControl != null){
+        oWebControl.JS_HideWnd();  // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
+        oWebControl.JS_Disconnect().then(function(){}, function() {});
+      }
+    }
+
     function hide(){
       oWebControl.JS_HideWnd();
     };
diff --git a/src/App.vue b/src/App.vue
index d9046c1..b8c5c1a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="app" v-resize="windowResize">
+  <div id="app" style="overflow-y: hidden" v-resize="windowResize">
     <router-view />
   </div>
 </template>
diff --git a/src/api/device.js b/src/api/device.js
index 0ba70ff..8d6c46b 100644
--- a/src/api/device.js
+++ b/src/api/device.js
@@ -159,3 +159,21 @@
     data
   })
 }
+
+export function getSwitchStatus(data) {
+  return request({
+    url: '/cockpit/gateLinkage/switchStatus',
+    method: 'get'
+  })
+}
+
+export function gateLinkageSwitch(controlSwitch) {
+  return request({
+    url: '/cockpit/gateLinkage/switch',
+    method: 'get',
+    params: {
+      controlSwitch
+    }
+  })
+}
+
diff --git a/src/api/person.js b/src/api/person.js
index 8a79c27..0c2a0ff 100644
--- a/src/api/person.js
+++ b/src/api/person.js
@@ -21,6 +21,14 @@
   })
 }
 
+export function getStaffOnList(params) {
+  return request({
+    url: '/cockpit/securityStaff/onList',
+    method: 'GET',
+    params
+  })
+}
+
 export function addStaff(data) {
   return request({
     url: 'staffInfo/add',
diff --git a/src/api/pop.js b/src/api/pop.js
index 01ddde7..6fa7381 100644
--- a/src/api/pop.js
+++ b/src/api/pop.js
@@ -72,6 +72,39 @@
   })
 }
 
+export function baoanStatistics() {
+  return request({
+    url: '/cockpit/securityStaff/statistics',
+    method: 'get',
+    data: {}
+  })
+}
+
+export function visitorStatistics() {
+  return request({
+    url: 'cockpit/visitor/statistics',
+    method: 'get',
+    data: {}
+  })
+}
+
+export function caseTodayStatistics() {
+  return request({
+    url: 'cockpit/case/todayStatistics',
+    method: 'get',
+    data: {}
+  })
+}
+
+export function casePieStatistics(params) {
+  return request({
+    url: 'cockpit/caseType/statisticsByTime',
+    method: 'get',
+    data: params,
+    params
+  })
+}
+
 // 安防事件频次因数组件
 export function securityFrequency() {
   return request({
@@ -158,3 +191,27 @@
     method: 'get'
   })
 }
+
+export function cameraTypeStatistics() {
+  return request({
+    url: '/cockpit/camera/typeStatistics',
+    method: 'get'
+  })
+}
+
+export function deviceStatistics(devType) {
+  return request({
+    url: '/cockpit/device/statistics',
+    method: 'post',
+    data: {
+      devType
+    }
+  })
+}
+
+export function buildPeopleNumber() {
+  return request({
+    url: '/cockpit/build/peopleNumber',
+    method: 'get'
+  })
+}
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index df71207..33d701a 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -280,37 +280,37 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  .table{
-    margin-bottom: 20px;
-  }
-  .pagination-container{
-    padding-bottom: 50px;
-  }
-  .table-title{
-    /*background-color:rgba(243, 243, 243, 1);*/
-    background-color:#fff;
-    .title-header{
-      font-size: 15px;
-      i{
-        margin-left: 10px;
-        margin-right: 5px;
-      }
-      i:focus{
-        outline: none;
-      }
+.table{
+  margin-bottom: 20px;
+}
+.pagination-container{
+  padding-bottom: 50px;
+}
+.table-title{
+  /*background-color:rgba(243, 243, 243, 1);*/
+  background-color:#fff;
+  .title-header{
+    font-size: 15px;
+    i{
+      margin-left: 10px;
+      margin-right: 5px;
+    }
+    i:focus{
+      outline: none;
     }
   }
-  .edit_btns{
-    padding-top:7px;
-    padding-right:3px;
-    text-align: right;
+}
+.edit_btns{
+  padding-top:7px;
+  padding-right:3px;
+  text-align: right;
+}
+.popper-div{
+  line-height: 1.5;
+  .popper-btns{
+    margin-top:10px;
   }
-  .popper-div{
-    line-height: 1.5;
-    .popper-btns{
-      margin-top:10px;
-    }
-  }
+}
 </style>
 
 <style>
diff --git a/src/router/modules/menu.js b/src/router/modules/menu.js
index 28ecc52..447517e 100644
--- a/src/router/modules/menu.js
+++ b/src/router/modules/menu.js
@@ -8,7 +8,7 @@
     redirect: '/loginBoard',
     meta: {
       title: '主页',
-      permission: ['/loginBoard'],
+      // permission: ['/loginBoard'],
       icon: '' // 图标
     },
     children: [
@@ -16,7 +16,7 @@
         path: '/loginBoard',
         name: 'LoginBoard',
         component: () => import('@/views/backstage/loginBoard'),
-        meta: { title: '主页', icon: '', permission: ['/loginBoard'] }
+        meta: { title: '主页', icon: '' }
       }
     ]
   },
diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss
index 0d1614b..f39542e 100644
--- a/src/styles/element-ui.scss
+++ b/src/styles/element-ui.scss
@@ -74,3 +74,6 @@
   height:48px;
   line-height:48px;
 }
+.el-time-panel {
+  margin-left: -20px !important;
+}
diff --git a/src/utils/request.js b/src/utils/request.js
index 02dcee1..a81c17f 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -39,19 +39,21 @@
     } else if (res.code !== 200) {
       // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
       if (res.code === 401 || res.code === 50012 || res.code === 50014) {
-        MessageBox.confirm(
-          '你已被登出，可以取消继续留在该页面，或者重新登录',
-          '确定登出',
-          {
-            confirmButtonText: '重新登录',
-            cancelButtonText: '取消',
-            type: 'warning'
-          }
-        ).then(() => {
-          store.dispatch('FedLogOut').then(() => {
-            location.reload() // 为了重新实例化vue-router对象 避免bug
+        if (!window.location.href.endsWith('right') && !window.location.href.endsWith('left') && !window.location.href.endsWith('bottom')) {
+          MessageBox.confirm(
+            '你已被登出，可以取消继续留在该页面，或者重新登录',
+            '确定登出',
+            {
+              confirmButtonText: '重新登录',
+              cancelButtonText: '取消',
+              type: 'warning'
+            }
+          ).then(() => {
+            store.dispatch('FedLogOut').then(() => {
+              location.reload() // 为了重新实例化vue-router对象 避免bug
+            })
           })
-        })
+        }
       } else {
         Message({
           showClose: true,

diff --git a/public/static/webCtrl/hk/demo_embedded_for_iframe.html b/public/static/webCtrl/hk/demo_embedded_for_iframe.html
index 3a0be10..5c18f74 100644
--- a/public/static/webCtrl/hk/demo_embedded_for_iframe.html
+++ b/public/static/webCtrl/hk/demo_embedded_for_iframe.html
@@ -107,6 +107,13 @@
         }
     });
 
+    function destoryPlugin() {
+      if (oWebControl != null){
+        oWebControl.JS_HideWnd();  // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
+        oWebControl.JS_Disconnect().then(function(){}, function() {});
+      }
+    }
+
     function hide(){
       oWebControl.JS_HideWnd();
     };
diff --git a/src/App.vue b/src/App.vue
index d9046c1..b8c5c1a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="app" v-resize="windowResize">
+  <div id="app" style="overflow-y: hidden" v-resize="windowResize">
     <router-view />
   </div>
 </template>
diff --git a/src/api/device.js b/src/api/device.js
index 0ba70ff..8d6c46b 100644
--- a/src/api/device.js
+++ b/src/api/device.js
@@ -159,3 +159,21 @@
     data
   })
 }
+
+export function getSwitchStatus(data) {
+  return request({
+    url: '/cockpit/gateLinkage/switchStatus',
+    method: 'get'
+  })
+}
+
+export function gateLinkageSwitch(controlSwitch) {
+  return request({
+    url: '/cockpit/gateLinkage/switch',
+    method: 'get',
+    params: {
+      controlSwitch
+    }
+  })
+}
+
diff --git a/src/api/person.js b/src/api/person.js
index 8a79c27..0c2a0ff 100644
--- a/src/api/person.js
+++ b/src/api/person.js
@@ -21,6 +21,14 @@
   })
 }
 
+export function getStaffOnList(params) {
+  return request({
+    url: '/cockpit/securityStaff/onList',
+    method: 'GET',
+    params
+  })
+}
+
 export function addStaff(data) {
   return request({
     url: 'staffInfo/add',
diff --git a/src/api/pop.js b/src/api/pop.js
index 01ddde7..6fa7381 100644
--- a/src/api/pop.js
+++ b/src/api/pop.js
@@ -72,6 +72,39 @@
   })
 }
 
+export function baoanStatistics() {
+  return request({
+    url: '/cockpit/securityStaff/statistics',
+    method: 'get',
+    data: {}
+  })
+}
+
+export function visitorStatistics() {
+  return request({
+    url: 'cockpit/visitor/statistics',
+    method: 'get',
+    data: {}
+  })
+}
+
+export function caseTodayStatistics() {
+  return request({
+    url: 'cockpit/case/todayStatistics',
+    method: 'get',
+    data: {}
+  })
+}
+
+export function casePieStatistics(params) {
+  return request({
+    url: 'cockpit/caseType/statisticsByTime',
+    method: 'get',
+    data: params,
+    params
+  })
+}
+
 // 安防事件频次因数组件
 export function securityFrequency() {
   return request({
@@ -158,3 +191,27 @@
     method: 'get'
   })
 }
+
+export function cameraTypeStatistics() {
+  return request({
+    url: '/cockpit/camera/typeStatistics',
+    method: 'get'
+  })
+}
+
+export function deviceStatistics(devType) {
+  return request({
+    url: '/cockpit/device/statistics',
+    method: 'post',
+    data: {
+      devType
+    }
+  })
+}
+
+export function buildPeopleNumber() {
+  return request({
+    url: '/cockpit/build/peopleNumber',
+    method: 'get'
+  })
+}
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index df71207..33d701a 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -280,37 +280,37 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  .table{
-    margin-bottom: 20px;
-  }
-  .pagination-container{
-    padding-bottom: 50px;
-  }
-  .table-title{
-    /*background-color:rgba(243, 243, 243, 1);*/
-    background-color:#fff;
-    .title-header{
-      font-size: 15px;
-      i{
-        margin-left: 10px;
-        margin-right: 5px;
-      }
-      i:focus{
-        outline: none;
-      }
+.table{
+  margin-bottom: 20px;
+}
+.pagination-container{
+  padding-bottom: 50px;
+}
+.table-title{
+  /*background-color:rgba(243, 243, 243, 1);*/
+  background-color:#fff;
+  .title-header{
+    font-size: 15px;
+    i{
+      margin-left: 10px;
+      margin-right: 5px;
+    }
+    i:focus{
+      outline: none;
     }
   }
-  .edit_btns{
-    padding-top:7px;
-    padding-right:3px;
-    text-align: right;
+}
+.edit_btns{
+  padding-top:7px;
+  padding-right:3px;
+  text-align: right;
+}
+.popper-div{
+  line-height: 1.5;
+  .popper-btns{
+    margin-top:10px;
   }
-  .popper-div{
-    line-height: 1.5;
-    .popper-btns{
-      margin-top:10px;
-    }
-  }
+}
 </style>
 
 <style>
diff --git a/src/router/modules/menu.js b/src/router/modules/menu.js
index 28ecc52..447517e 100644
--- a/src/router/modules/menu.js
+++ b/src/router/modules/menu.js
@@ -8,7 +8,7 @@
     redirect: '/loginBoard',
     meta: {
       title: '主页',
-      permission: ['/loginBoard'],
+      // permission: ['/loginBoard'],
       icon: '' // 图标
     },
     children: [
@@ -16,7 +16,7 @@
         path: '/loginBoard',
         name: 'LoginBoard',
         component: () => import('@/views/backstage/loginBoard'),
-        meta: { title: '主页', icon: '', permission: ['/loginBoard'] }
+        meta: { title: '主页', icon: '' }
       }
     ]
   },
diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss
index 0d1614b..f39542e 100644
--- a/src/styles/element-ui.scss
+++ b/src/styles/element-ui.scss
@@ -74,3 +74,6 @@
   height:48px;
   line-height:48px;
 }
+.el-time-panel {
+  margin-left: -20px !important;
+}
diff --git a/src/utils/request.js b/src/utils/request.js
index 02dcee1..a81c17f 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -39,19 +39,21 @@
     } else if (res.code !== 200) {
       // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
       if (res.code === 401 || res.code === 50012 || res.code === 50014) {
-        MessageBox.confirm(
-          '你已被登出，可以取消继续留在该页面，或者重新登录',
-          '确定登出',
-          {
-            confirmButtonText: '重新登录',
-            cancelButtonText: '取消',
-            type: 'warning'
-          }
-        ).then(() => {
-          store.dispatch('FedLogOut').then(() => {
-            location.reload() // 为了重新实例化vue-router对象 避免bug
+        if (!window.location.href.endsWith('right') && !window.location.href.endsWith('left') && !window.location.href.endsWith('bottom')) {
+          MessageBox.confirm(
+            '你已被登出，可以取消继续留在该页面，或者重新登录',
+            '确定登出',
+            {
+              confirmButtonText: '重新登录',
+              cancelButtonText: '取消',
+              type: 'warning'
+            }
+          ).then(() => {
+            store.dispatch('FedLogOut').then(() => {
+              location.reload() // 为了重新实例化vue-router对象 避免bug
+            })
           })
-        })
+        }
       } else {
         Message({
           showClose: true,
diff --git a/src/views/common/trailDialog.vue b/src/views/common/trailDialog.vue
index 04a83eb..fd90c34 100644
--- a/src/views/common/trailDialog.vue
+++ b/src/views/common/trailDialog.vue
@@ -52,6 +52,8 @@
         75: '75%'
       },
       listQuery: {
+        staffCode: '',
+        personName: '',
         facePicUrl: '',
         startTime: '',
         endTime: '',
@@ -81,11 +83,14 @@
   },
   methods: {
     // 初始化对话框
-    initDialog: function(picture = null, name) {
-      this.textMap = '轨迹追踪 — ' + name
+    initDialog: function(row) {
+      this.textMap = '轨迹追踪 — ' + row.staffName
+      this.list = []
       this.clearInput()
       this.dialogFormVisible = true
-      this.listQuery.facePicUrl = picture
+      this.listQuery.facePicUrl = row.picture
+      this.listQuery.staffCode = row.staffCode
+      this.listQuery.personName = row.staffName
       this.fetchData()
     },
     fetchData() {

diff --git a/public/static/webCtrl/hk/demo_embedded_for_iframe.html b/public/static/webCtrl/hk/demo_embedded_for_iframe.html
index 3a0be10..5c18f74 100644
--- a/public/static/webCtrl/hk/demo_embedded_for_iframe.html
+++ b/public/static/webCtrl/hk/demo_embedded_for_iframe.html
@@ -107,6 +107,13 @@
         }
     });
 
+    function destoryPlugin() {
+      if (oWebControl != null){
+        oWebControl.JS_HideWnd();  // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
+        oWebControl.JS_Disconnect().then(function(){}, function() {});
+      }
+    }
+
     function hide(){
       oWebControl.JS_HideWnd();
     };
diff --git a/src/App.vue b/src/App.vue
index d9046c1..b8c5c1a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="app" v-resize="windowResize">
+  <div id="app" style="overflow-y: hidden" v-resize="windowResize">
     <router-view />
   </div>
 </template>
diff --git a/src/api/device.js b/src/api/device.js
index 0ba70ff..8d6c46b 100644
--- a/src/api/device.js
+++ b/src/api/device.js
@@ -159,3 +159,21 @@
     data
   })
 }
+
+export function getSwitchStatus(data) {
+  return request({
+    url: '/cockpit/gateLinkage/switchStatus',
+    method: 'get'
+  })
+}
+
+export function gateLinkageSwitch(controlSwitch) {
+  return request({
+    url: '/cockpit/gateLinkage/switch',
+    method: 'get',
+    params: {
+      controlSwitch
+    }
+  })
+}
+
diff --git a/src/api/person.js b/src/api/person.js
index 8a79c27..0c2a0ff 100644
--- a/src/api/person.js
+++ b/src/api/person.js
@@ -21,6 +21,14 @@
   })
 }
 
+export function getStaffOnList(params) {
+  return request({
+    url: '/cockpit/securityStaff/onList',
+    method: 'GET',
+    params
+  })
+}
+
 export function addStaff(data) {
   return request({
     url: 'staffInfo/add',
diff --git a/src/api/pop.js b/src/api/pop.js
index 01ddde7..6fa7381 100644
--- a/src/api/pop.js
+++ b/src/api/pop.js
@@ -72,6 +72,39 @@
   })
 }
 
+export function baoanStatistics() {
+  return request({
+    url: '/cockpit/securityStaff/statistics',
+    method: 'get',
+    data: {}
+  })
+}
+
+export function visitorStatistics() {
+  return request({
+    url: 'cockpit/visitor/statistics',
+    method: 'get',
+    data: {}
+  })
+}
+
+export function caseTodayStatistics() {
+  return request({
+    url: 'cockpit/case/todayStatistics',
+    method: 'get',
+    data: {}
+  })
+}
+
+export function casePieStatistics(params) {
+  return request({
+    url: 'cockpit/caseType/statisticsByTime',
+    method: 'get',
+    data: params,
+    params
+  })
+}
+
 // 安防事件频次因数组件
 export function securityFrequency() {
   return request({
@@ -158,3 +191,27 @@
     method: 'get'
   })
 }
+
+export function cameraTypeStatistics() {
+  return request({
+    url: '/cockpit/camera/typeStatistics',
+    method: 'get'
+  })
+}
+
+export function deviceStatistics(devType) {
+  return request({
+    url: '/cockpit/device/statistics',
+    method: 'post',
+    data: {
+      devType
+    }
+  })
+}
+
+export function buildPeopleNumber() {
+  return request({
+    url: '/cockpit/build/peopleNumber',
+    method: 'get'
+  })
+}
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index df71207..33d701a 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -280,37 +280,37 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  .table{
-    margin-bottom: 20px;
-  }
-  .pagination-container{
-    padding-bottom: 50px;
-  }
-  .table-title{
-    /*background-color:rgba(243, 243, 243, 1);*/
-    background-color:#fff;
-    .title-header{
-      font-size: 15px;
-      i{
-        margin-left: 10px;
-        margin-right: 5px;
-      }
-      i:focus{
-        outline: none;
-      }
+.table{
+  margin-bottom: 20px;
+}
+.pagination-container{
+  padding-bottom: 50px;
+}
+.table-title{
+  /*background-color:rgba(243, 243, 243, 1);*/
+  background-color:#fff;
+  .title-header{
+    font-size: 15px;
+    i{
+      margin-left: 10px;
+      margin-right: 5px;
+    }
+    i:focus{
+      outline: none;
     }
   }
-  .edit_btns{
-    padding-top:7px;
-    padding-right:3px;
-    text-align: right;
+}
+.edit_btns{
+  padding-top:7px;
+  padding-right:3px;
+  text-align: right;
+}
+.popper-div{
+  line-height: 1.5;
+  .popper-btns{
+    margin-top:10px;
   }
-  .popper-div{
-    line-height: 1.5;
-    .popper-btns{
-      margin-top:10px;
-    }
-  }
+}
 </style>
 
 <style>
diff --git a/src/router/modules/menu.js b/src/router/modules/menu.js
index 28ecc52..447517e 100644
--- a/src/router/modules/menu.js
+++ b/src/router/modules/menu.js
@@ -8,7 +8,7 @@
     redirect: '/loginBoard',
     meta: {
       title: '主页',
-      permission: ['/loginBoard'],
+      // permission: ['/loginBoard'],
       icon: '' // 图标
     },
     children: [
@@ -16,7 +16,7 @@
         path: '/loginBoard',
         name: 'LoginBoard',
         component: () => import('@/views/backstage/loginBoard'),
-        meta: { title: '主页', icon: '', permission: ['/loginBoard'] }
+        meta: { title: '主页', icon: '' }
       }
     ]
   },
diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss
index 0d1614b..f39542e 100644
--- a/src/styles/element-ui.scss
+++ b/src/styles/element-ui.scss
@@ -74,3 +74,6 @@
   height:48px;
   line-height:48px;
 }
+.el-time-panel {
+  margin-left: -20px !important;
+}
diff --git a/src/utils/request.js b/src/utils/request.js
index 02dcee1..a81c17f 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -39,19 +39,21 @@
     } else if (res.code !== 200) {
       // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
       if (res.code === 401 || res.code === 50012 || res.code === 50014) {
-        MessageBox.confirm(
-          '你已被登出，可以取消继续留在该页面，或者重新登录',
-          '确定登出',
-          {
-            confirmButtonText: '重新登录',
-            cancelButtonText: '取消',
-            type: 'warning'
-          }
-        ).then(() => {
-          store.dispatch('FedLogOut').then(() => {
-            location.reload() // 为了重新实例化vue-router对象 避免bug
+        if (!window.location.href.endsWith('right') && !window.location.href.endsWith('left') && !window.location.href.endsWith('bottom')) {
+          MessageBox.confirm(
+            '你已被登出，可以取消继续留在该页面，或者重新登录',
+            '确定登出',
+            {
+              confirmButtonText: '重新登录',
+              cancelButtonText: '取消',
+              type: 'warning'
+            }
+          ).then(() => {
+            store.dispatch('FedLogOut').then(() => {
+              location.reload() // 为了重新实例化vue-router对象 避免bug
+            })
           })
-        })
+        }
       } else {
         Message({
           showClose: true,
diff --git a/src/views/common/trailDialog.vue b/src/views/common/trailDialog.vue
index 04a83eb..fd90c34 100644
--- a/src/views/common/trailDialog.vue
+++ b/src/views/common/trailDialog.vue
@@ -52,6 +52,8 @@
         75: '75%'
       },
       listQuery: {
+        staffCode: '',
+        personName: '',
         facePicUrl: '',
         startTime: '',
         endTime: '',
@@ -81,11 +83,14 @@
   },
   methods: {
     // 初始化对话框
-    initDialog: function(picture = null, name) {
-      this.textMap = '轨迹追踪 — ' + name
+    initDialog: function(row) {
+      this.textMap = '轨迹追踪 — ' + row.staffName
+      this.list = []
       this.clearInput()
       this.dialogFormVisible = true
-      this.listQuery.facePicUrl = picture
+      this.listQuery.facePicUrl = row.picture
+      this.listQuery.staffCode = row.staffCode
+      this.listQuery.personName = row.staffName
       this.fetchData()
     },
     fetchData() {
diff --git a/src/views/person/staffList.vue b/src/views/person/staffList.vue
index ce8643e..95acc5c 100644
--- a/src/views/person/staffList.vue
+++ b/src/views/person/staffList.vue
@@ -332,7 +332,7 @@
     },
     trail(row) {
       this.dialogFormVisible1 = true
-      this.$refs.trailDialog.initDialog(row.picture, row.staffName)
+      this.$refs.trailDialog.initDialog(row)
     },
     // 打开详情对话框
     detail(row) {

diff --git a/public/static/webCtrl/hk/demo_embedded_for_iframe.html b/public/static/webCtrl/hk/demo_embedded_for_iframe.html
index 3a0be10..5c18f74 100644
--- a/public/static/webCtrl/hk/demo_embedded_for_iframe.html
+++ b/public/static/webCtrl/hk/demo_embedded_for_iframe.html
@@ -107,6 +107,13 @@
         }
     });
 
+    function destoryPlugin() {
+      if (oWebControl != null){
+        oWebControl.JS_HideWnd();  // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
+        oWebControl.JS_Disconnect().then(function(){}, function() {});
+      }
+    }
+
     function hide(){
       oWebControl.JS_HideWnd();
     };
diff --git a/src/App.vue b/src/App.vue
index d9046c1..b8c5c1a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="app" v-resize="windowResize">
+  <div id="app" style="overflow-y: hidden" v-resize="windowResize">
     <router-view />
   </div>
 </template>
diff --git a/src/api/device.js b/src/api/device.js
index 0ba70ff..8d6c46b 100644
--- a/src/api/device.js
+++ b/src/api/device.js
@@ -159,3 +159,21 @@
     data
   })
 }
+
+export function getSwitchStatus(data) {
+  return request({
+    url: '/cockpit/gateLinkage/switchStatus',
+    method: 'get'
+  })
+}
+
+export function gateLinkageSwitch(controlSwitch) {
+  return request({
+    url: '/cockpit/gateLinkage/switch',
+    method: 'get',
+    params: {
+      controlSwitch
+    }
+  })
+}
+
diff --git a/src/api/person.js b/src/api/person.js
index 8a79c27..0c2a0ff 100644
--- a/src/api/person.js
+++ b/src/api/person.js
@@ -21,6 +21,14 @@
   })
 }
 
+export function getStaffOnList(params) {
+  return request({
+    url: '/cockpit/securityStaff/onList',
+    method: 'GET',
+    params
+  })
+}
+
 export function addStaff(data) {
   return request({
     url: 'staffInfo/add',
diff --git a/src/api/pop.js b/src/api/pop.js
index 01ddde7..6fa7381 100644
--- a/src/api/pop.js
+++ b/src/api/pop.js
@@ -72,6 +72,39 @@
   })
 }
 
+export function baoanStatistics() {
+  return request({
+    url: '/cockpit/securityStaff/statistics',
+    method: 'get',
+    data: {}
+  })
+}
+
+export function visitorStatistics() {
+  return request({
+    url: 'cockpit/visitor/statistics',
+    method: 'get',
+    data: {}
+  })
+}
+
+export function caseTodayStatistics() {
+  return request({
+    url: 'cockpit/case/todayStatistics',
+    method: 'get',
+    data: {}
+  })
+}
+
+export function casePieStatistics(params) {
+  return request({
+    url: 'cockpit/caseType/statisticsByTime',
+    method: 'get',
+    data: params,
+    params
+  })
+}
+
 // 安防事件频次因数组件
 export function securityFrequency() {
   return request({
@@ -158,3 +191,27 @@
     method: 'get'
   })
 }
+
+export function cameraTypeStatistics() {
+  return request({
+    url: '/cockpit/camera/typeStatistics',
+    method: 'get'
+  })
+}
+
+export function deviceStatistics(devType) {
+  return request({
+    url: '/cockpit/device/statistics',
+    method: 'post',
+    data: {
+      devType
+    }
+  })
+}
+
+export function buildPeopleNumber() {
+  return request({
+    url: '/cockpit/build/peopleNumber',
+    method: 'get'
+  })
+}
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index df71207..33d701a 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -280,37 +280,37 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  .table{
-    margin-bottom: 20px;
-  }
-  .pagination-container{
-    padding-bottom: 50px;
-  }
-  .table-title{
-    /*background-color:rgba(243, 243, 243, 1);*/
-    background-color:#fff;
-    .title-header{
-      font-size: 15px;
-      i{
-        margin-left: 10px;
-        margin-right: 5px;
-      }
-      i:focus{
-        outline: none;
-      }
+.table{
+  margin-bottom: 20px;
+}
+.pagination-container{
+  padding-bottom: 50px;
+}
+.table-title{
+  /*background-color:rgba(243, 243, 243, 1);*/
+  background-color:#fff;
+  .title-header{
+    font-size: 15px;
+    i{
+      margin-left: 10px;
+      margin-right: 5px;
+    }
+    i:focus{
+      outline: none;
     }
   }
-  .edit_btns{
-    padding-top:7px;
-    padding-right:3px;
-    text-align: right;
+}
+.edit_btns{
+  padding-top:7px;
+  padding-right:3px;
+  text-align: right;
+}
+.popper-div{
+  line-height: 1.5;
+  .popper-btns{
+    margin-top:10px;
   }
-  .popper-div{
-    line-height: 1.5;
-    .popper-btns{
-      margin-top:10px;
-    }
-  }
+}
 </style>
 
 <style>
diff --git a/src/router/modules/menu.js b/src/router/modules/menu.js
index 28ecc52..447517e 100644
--- a/src/router/modules/menu.js
+++ b/src/router/modules/menu.js
@@ -8,7 +8,7 @@
     redirect: '/loginBoard',
     meta: {
       title: '主页',
-      permission: ['/loginBoard'],
+      // permission: ['/loginBoard'],
       icon: '' // 图标
     },
     children: [
@@ -16,7 +16,7 @@
         path: '/loginBoard',
         name: 'LoginBoard',
         component: () => import('@/views/backstage/loginBoard'),
-        meta: { title: '主页', icon: '', permission: ['/loginBoard'] }
+        meta: { title: '主页', icon: '' }
       }
     ]
   },
diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss
index 0d1614b..f39542e 100644
--- a/src/styles/element-ui.scss
+++ b/src/styles/element-ui.scss
@@ -74,3 +74,6 @@
   height:48px;
   line-height:48px;
 }
+.el-time-panel {
+  margin-left: -20px !important;
+}
diff --git a/src/utils/request.js b/src/utils/request.js
index 02dcee1..a81c17f 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -39,19 +39,21 @@
     } else if (res.code !== 200) {
       // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
       if (res.code === 401 || res.code === 50012 || res.code === 50014) {
-        MessageBox.confirm(
-          '你已被登出，可以取消继续留在该页面，或者重新登录',
-          '确定登出',
-          {
-            confirmButtonText: '重新登录',
-            cancelButtonText: '取消',
-            type: 'warning'
-          }
-        ).then(() => {
-          store.dispatch('FedLogOut').then(() => {
-            location.reload() // 为了重新实例化vue-router对象 避免bug
+        if (!window.location.href.endsWith('right') && !window.location.href.endsWith('left') && !window.location.href.endsWith('bottom')) {
+          MessageBox.confirm(
+            '你已被登出，可以取消继续留在该页面，或者重新登录',
+            '确定登出',
+            {
+              confirmButtonText: '重新登录',
+              cancelButtonText: '取消',
+              type: 'warning'
+            }
+          ).then(() => {
+            store.dispatch('FedLogOut').then(() => {
+              location.reload() // 为了重新实例化vue-router对象 避免bug
+            })
           })
-        })
+        }
       } else {
         Message({
           showClose: true,
diff --git a/src/views/common/trailDialog.vue b/src/views/common/trailDialog.vue
index 04a83eb..fd90c34 100644
--- a/src/views/common/trailDialog.vue
+++ b/src/views/common/trailDialog.vue
@@ -52,6 +52,8 @@
         75: '75%'
       },
       listQuery: {
+        staffCode: '',
+        personName: '',
         facePicUrl: '',
         startTime: '',
         endTime: '',
@@ -81,11 +83,14 @@
   },
   methods: {
     // 初始化对话框
-    initDialog: function(picture = null, name) {
-      this.textMap = '轨迹追踪 — ' + name
+    initDialog: function(row) {
+      this.textMap = '轨迹追踪 — ' + row.staffName
+      this.list = []
       this.clearInput()
       this.dialogFormVisible = true
-      this.listQuery.facePicUrl = picture
+      this.listQuery.facePicUrl = row.picture
+      this.listQuery.staffCode = row.staffCode
+      this.listQuery.personName = row.staffName
       this.fetchData()
     },
     fetchData() {
diff --git a/src/views/person/staffList.vue b/src/views/person/staffList.vue
index ce8643e..95acc5c 100644
--- a/src/views/person/staffList.vue
+++ b/src/views/person/staffList.vue
@@ -332,7 +332,7 @@
     },
     trail(row) {
       this.dialogFormVisible1 = true
-      this.$refs.trailDialog.initDialog(row.picture, row.staffName)
+      this.$refs.trailDialog.initDialog(row)
     },
     // 打开详情对话框
     detail(row) {
diff --git a/src/views/popup/board.vue b/src/views/popup/board.vue
index eb229cc..0f47c22 100644
--- a/src/views/popup/board.vue
+++ b/src/views/popup/board.vue
@@ -4,7 +4,7 @@
       人员轨迹追踪
       <svg-icon v-if="list.length > 0" icon-class="pop-cross" class="close-icon" @click="close" />
     </div>
-    <el-form ref="ruleForm" :model="listQuery" :rules="rules" label-width="100px">
+    <el-form ref="ruleForm" :model="listQuery" :rules="rules" label-width="80px">
       <el-row :gutter="20">
         <el-col :span="12" class="form-item-person-info">
           <el-form-item label="人员信息" prop="personName" style="position:relative">
@@ -20,7 +20,8 @@
               size="small"
               placeholder="请输入人员姓名"
               :popper-append-to-body="false"
-              @change="handlePerson">
+              @change="handlePerson"
+            >
               <el-option
                 v-for="item in personNameList"
                 :key="item.staffCode"
@@ -41,7 +42,7 @@
               end-placeholder="终止时间"
               size="small"
               :clearable="false"
-              style="width:98%"
+              style="width:98%;"
             />
           </el-form-item>
         </el-col>
@@ -53,7 +54,7 @@
           </el-form-item>
         </el-col>
         <el-col :span="6">
-          <el-form-item label="最小相似度" prop="minSimilarity">
+          <el-form-item label="最小相似度" prop="minSimilarity" label-width="100px">
             <el-input v-model="listQuery.minSimilarity" size="small" placeholder="区间50-100" />
           </el-form-item>
         </el-col>
@@ -81,7 +82,7 @@
             <div class="title text-over">
               {{ child.positionName ? child.positionName : '' }}
             </div>
-            <div class="desc text-over" :title="child.devName">
+            <div class="desc text-over" :title="child.devName" style="white-space: normal;word-wrap: break-word;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2; ">
               {{ child.devName ? child.devName : '' }}
             </div>
             <div class="date" style="width:145px">
@@ -110,6 +111,7 @@
     return {
       selectLoading: false,
       personName: '',
+      staffCode: '',
       point: [],
       listQuery: {
         facePicUrl: '', // 图片url
@@ -260,6 +262,7 @@
       this.personNameList.map(item => {
         if (item.staffCode === person) {
           this.personName = item.personName
+          this.staffCode = item.staffCode
           // this.listQuery.personName = item.personName
           this.listQuery.facePicUrl = item.personPicture
           this.listQuery.gender = item.gender
@@ -299,7 +302,11 @@
         spinner: 'el-icon-loading',
         background: 'rgba(0, 0, 0, 0.7)'
       })
-      const postData = Object.assign(this.listQuery, { 'personName': this.personName })
+      const postData = Object.assign(this.listQuery,
+        {
+          'personName': this.personName,
+          'staffCode': this.staffCode
+        })
       console.log(postData)
       hikPic(postData).then(response => {
         loading.close()
@@ -325,6 +332,7 @@
       this.listQuery.minSimilarity = '50'
       this.listQuery.timeRange = ['', '']
       this.personName = ''
+      this.staffCode = ''
       this.list = []
     },
     // 轨迹上墙
@@ -359,299 +367,299 @@
   }
 }
 </script>
-
 <style rel="stylesheet/scss" lang="scss" scoped>
-  ::v-deep(.el-input__inner){
-    border:1px solid #40C3F1 !important;
-    background: transparent !important;
-    color:#fff !important;
+::v-deep(.el-input__inner){
+  border:1px solid #40C3F1 !important;
+  background: transparent !important;
+  color:#fff !important;
+}
+::v-deep(.el-range-input){
+  background: transparent !important;
+  color:#fff !important;
+}
+::v-deep(.el-form-item__label){
+  color:#f1f1f1 !important;
+  font-weight: 400 !important;
+}
+::v-deep(.el-range-separator){
+  color:#f1f1f1 !important;
+  font-weight: 400 !important;
+  color:#fff !important;
+}
+::v-deep(.el-select .el-select-dropdown__wrap) {
+  max-height: 350px !important;
+  overflow-y: auto !important;
+}
+
+.form-item-person-info:hover{
+  cursor: text !important;
+}
+.el-form-item__content:hover{
+  cursor: text !important;
+}
+::v-deep(.form-item-person-info .el-input__inner):hover{
+  cursor: text !important;
+}
+::-webkit-scrollbar {
+  z-index: 11;
+  width: 6px;
+}
+::-webkit-scrollbar-track,
+::-webkit-scrollbar-corner {
+  border-radius: 5px;
+  background: #fff;
+}
+::-webkit-scrollbar-thumb {
+  border-radius: 5px; // 滚动条
+  width: 6px;
+  background-color: #ccc;
+  :hover {
+    background-color: #ccc;
   }
-  ::v-deep(.el-range-input){
-    background: transparent !important;
-    color:#fff !important;
-  }
-  ::v-deep(.el-form-item__label){
-    color:#f1f1f1 !important;
-    font-weight: 400 !important;
-  }
-  ::v-deep(.el-range-separator){
-    color:#f1f1f1 !important;
-    font-weight: 400 !important;
-    color:#fff !important;
-  }
-  ::v-deep(.el-select .el-select-dropdown__wrap) {
-    max-height: 350px !important;
-    overflow-y: auto !important;
-  }
-  .form-item-person-info:hover{
-    cursor: text !important;
-  }
-  .el-form-item__content:hover{
-    cursor: text !important;
-  }
-  ::v-deep(.form-item-person-info .el-input__inner):hover{
-    cursor: text !important;
-  }
-  ::-webkit-scrollbar {
-      z-index: 11;
-      width: 6px;
-    }
-    ::-webkit-scrollbar-track,
-    ::-webkit-scrollbar-corner {
-      border-radius: 5px;
-      background: #fff;
-    }
-    ::-webkit-scrollbar-thumb {
-      border-radius: 5px; // 滚动条
-      width: 6px;
-      background-color: #ccc;
-      :hover {
-        background-color: #ccc;
-      }
-    }
-    ::-webkit-scrollbar-track-piece {
-      border-radius: 5px; // 轨道
-      background: #fff;
-      width: 6px;
-    }
-  .text-over{
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-  .wrap{
-    width:100%;
-    height: 100%;
-    background: #5F8EB9;
+}
+::-webkit-scrollbar-track-piece {
+  border-radius: 5px; // 轨道
+  background: #fff;
+  width: 6px;
+}
+.text-over{
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.wrap{
+  width:100%;
+  height: 100%;
+  background: #5F8EB9;
+  position: relative;
+  overflow: hidden;
+  .header{
     position: relative;
-    overflow: hidden;
-    .header{
+    width: 98%;
+    margin-left:20px;
+    border-top: 10px solid #5F8EB9;
+    border-bottom: 10px solid #5F8EB9;
+    padding:5px 0 5px 20px;
+    color:#f1f1f1;
+    background: #30486C;
+    font-size: 16px;
+  }
+}
+.el-select{
+  width: 100%;
+}
+.header::after{
+  content:"";
+  display: inline-block;
+  position: absolute;
+  top:0;
+  left: -8px;
+  width:4px;
+  height:100%;
+  background: #40C3F1;
+}
+.list-wrap{
+  width:100%;
+  // width:900px;
+  height: calc(100% - 175px); // 去除头部区域
+  overflow-y: auto;
+  .main{
+    width:99%;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    .row {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 40px;
+    }
+    .row:nth-child(2n) {
+      flex-direction: row-reverse;
+    }
+    .row:nth-child(2n):last-child .item {
+      margin-right: auto;
+    }
+    .list-item{
       position: relative;
-      width: 98%;
-      margin-left:20px;
-      border-top: 10px solid #5F8EB9;
-      border-bottom: 10px solid #5F8EB9;
-      padding:5px 0 5px 20px;
-      color:#f1f1f1;
-      background: #30486C;
-      font-size: 16px;
-    }
-  }
-  .el-select{
-    width: 100%;
-  }
-  .header::after{
-      content:"";
-      display: inline-block;
-      position: absolute;
-      top:0;
-      left: -8px;
-      width:4px;
-      height:100%;
-      background: #40C3F1;
-    }
-    .list-wrap{
-      width:100%;
-      // width:900px;
-      height: calc(100% - 175px); // 去除头部区域
-      overflow-y: auto;
-      .main{
-        width:99%;
-        margin: 0 auto;
-        display: flex;
-        flex-direction: column;
-        .row {
-          display: flex;
-          justify-content: space-between;
-          margin-bottom: 40px;
-        }
-        .row:nth-child(2n) {
-          flex-direction: row-reverse;
-        }
-        .row:nth-child(2n):last-child .item {
-          margin-right: auto;
-        }
-        .list-item{
-          position: relative;
-          width: 48%;
-          height: 240px;
-          background-image: url("../../assets/global_images/monitor.png");
-          background-repeat: no-repeat;
-          background-size: cover;
-          // background-size: 100% 100%;
-          // margin-left: 20px;
-          z-index: 10;
-          .img-wrap{
-            position: absolute;
-            left:35px;
-            top:40px;
-            width:238px;
-            height:138px;
-            overflow: hidden;
-            z-index: -1;
-          }
-          .title{
-            width:150px;
-            position: absolute;
-            left:42%;
-            top: 40px;
-            font-size: 20px;
-            color:#40C3F1;
-          }
-          .desc{
-            width:150px;
-            position: absolute;
-            left:42%;
-            top: 75px;
-            font-size: 16px;
-            color:#f1f1f1;
-          }
-          .date{
-            position: absolute;
-            left:50%;
-            transform: translateX(-50%);
-            bottom:70px;
-            font-size: 14px;
-            color:#c1c1c1;
-            margin-left:25px;
-          }
-          .date::after{
-            position: absolute;
-            top:0;
-            left:-20px;
-            content:"";
-            display: inline-block;
-            width: 15px;
-            height: 15px;
-            background-image: url("../../assets/global_images/date.png");
-            background-repeat: no-repeat;
-            background-size: cover;
-          }
-          .ratio{
-            // width:100px;
-            position: absolute;
-            left:50%;
-            transform: translateX(-50%);
-            bottom:40px;
-            font-size: 14px;
-            color:#c1c1c1;
-            // margin-left:18px;
-            margin-left: 25px;
-          }
-          .ratio::after{
-            position: absolute;
-            top:0;
-            left:-20px;
-            content:"";
-            display: inline-block;
-            width: 15px;
-            height: 15px;
-            background-image: url("../../assets/global_images/search.png");
-            background-repeat: no-repeat;
-            background-size: cover;
-          }
-        }
-      }
-    }
-    .main .row:nth-child(odd){
-      .list-item:nth-child(odd)::after{
-        content:"";
-        display: inline-block;
-        width:30px;
-        height: 30px;
+      width: 48%;
+      height: 240px;
+      background-image: url("../../assets/global_images/monitor.png");
+      background-repeat: no-repeat;
+      background-size: cover;
+      // background-size: 100% 100%;
+      // margin-left: 20px;
+      z-index: 10;
+      .img-wrap{
         position: absolute;
-        top:50%;
-        transform: translate(-50%);
-        right:-52px;
-        background-image: url("../../assets/global_images/right.png");
-        background-repeat: no-repeat;
-        background-size: cover;
+        left:35px;
+        top:40px;
+        width:238px;
+        height:138px;
+        overflow: hidden;
+        z-index: -1;
       }
-    }
-    .main .row:nth-child(odd){
-      .list-item:nth-child(even)::after{
-        content:"";
-        display: inline-block;
-        width:30px;
-        height: 30px;
+      .title{
+        width:150px;
         position: absolute;
-        right:50%;
-        transform: translate(-50%);
-        bottom:-35px;
-        background-image: url("../../assets/global_images/right.png");
-        background-repeat: no-repeat;
-        background-size: cover;
-        transform: rotate(90deg);
+        left:42%;
+        top: 40px;
+        font-size: 20px;
+        color:#40C3F1;
       }
-    }
-    .main .row:nth-child(even){
-      .list-item:nth-child(odd)::after{
-        content:"";
-        display: inline-block;
-        width:30px;
-        height: 30px;
+      .desc{
+        width:150px;
         position: absolute;
-        top:50%;
-        transform: translate(-50%);
-        left:-35px;
-        background-image: url("../../assets/global_images/right.png");
-        background-repeat: no-repeat;
-        background-size: cover;
-        transform: rotate(180deg);
+        left:42%;
+        top: 75px;
+        font-size: 16px;
+        color:#f1f1f1;
       }
-    }
-    .main .row:nth-child(even){
-      .list-item:nth-child(even)::after{
-        content:"";
-        display: inline-block;
-        width:30px;
-        height: 30px;
+      .date{
         position: absolute;
         left:50%;
-        transform: translate(-50%);
-        bottom:-35px;
-        background-image: url("../../assets/global_images/right.png");
+        transform: translateX(-50%);
+        bottom:70px;
+        font-size: 14px;
+        color:#c1c1c1;
+        margin-left:25px;
+      }
+      .date::after{
+        position: absolute;
+        top:0;
+        left:-20px;
+        content:"";
+        display: inline-block;
+        width: 15px;
+        height: 15px;
+        background-image: url("../../assets/global_images/date.png");
         background-repeat: no-repeat;
         background-size: cover;
-        transform: rotate(-270deg);
+      }
+      .ratio{
+        // width:100px;
+        position: absolute;
+        left:50%;
+        transform: translateX(-50%);
+        bottom:40px;
+        font-size: 14px;
+        color:#c1c1c1;
+        // margin-left:18px;
+        margin-left: 25px;
+      }
+      .ratio::after{
+        position: absolute;
+        top:0;
+        left:-20px;
+        content:"";
+        display: inline-block;
+        width: 15px;
+        height: 15px;
+        background-image: url("../../assets/global_images/search.png");
+        background-repeat: no-repeat;
+        background-size: cover;
       }
     }
-    // 如果是最后一个元素不显示箭头
-    .main .row:last-child{
-      .list-item:last-child::after{
-        display: none;
-      }
-    }
-    .list-wrap .main .list-item .img-wrap{
-      position: absolute;
-      left: 32px;
-      top: 40px;
-      // width: 190px;
-      width: 212px;
-      height: 138px;
-      overflow: hidden;
-      z-index: -1;
-    }
-    .list-wrap .main .list-item .date{
-      left:75% !important;
-      margin-bottom: 20px;
-    }
-    .list-wrap .main .list-item .ratio{
-      left:75% !important;
-    }
-    .list-wrap .main .list-item .title,.list-wrap .main .list-item .desc{
-      left:62% !important;
-    }
-    .close-icon{
-      z-index: 100;
-      position: absolute;
-      top:2px;
-      right:2px;
-      color:white;
-      background: #fc2323cc;
-      width:25px;
-      height:25px;
-      border-radius: 5px;
-      padding:3px;
-    }
+  }
+}
+.main .row:nth-child(odd){
+  .list-item:nth-child(odd)::after{
+    content:"";
+    display: inline-block;
+    width:30px;
+    height: 30px;
+    position: absolute;
+    top:50%;
+    transform: translate(-50%);
+    right:-52px;
+    background-image: url("../../assets/global_images/right.png");
+    background-repeat: no-repeat;
+    background-size: cover;
+  }
+}
+.main .row:nth-child(odd){
+  .list-item:nth-child(even)::after{
+    content:"";
+    display: inline-block;
+    width:30px;
+    height: 30px;
+    position: absolute;
+    right:50%;
+    transform: translate(-50%);
+    bottom:-35px;
+    background-image: url("../../assets/global_images/right.png");
+    background-repeat: no-repeat;
+    background-size: cover;
+    transform: rotate(90deg);
+  }
+}
+.main .row:nth-child(even){
+  .list-item:nth-child(odd)::after{
+    content:"";
+    display: inline-block;
+    width:30px;
+    height: 30px;
+    position: absolute;
+    top:50%;
+    transform: translate(-50%);
+    left:-35px;
+    background-image: url("../../assets/global_images/right.png");
+    background-repeat: no-repeat;
+    background-size: cover;
+    transform: rotate(180deg);
+  }
+}
+.main .row:nth-child(even){
+  .list-item:nth-child(even)::after{
+    content:"";
+    display: inline-block;
+    width:30px;
+    height: 30px;
+    position: absolute;
+    left:50%;
+    transform: translate(-50%);
+    bottom:-35px;
+    background-image: url("../../assets/global_images/right.png");
+    background-repeat: no-repeat;
+    background-size: cover;
+    transform: rotate(-270deg);
+  }
+}
+// 如果是最后一个元素不显示箭头
+.main .row:last-child{
+  .list-item:last-child::after{
+    display: none;
+  }
+}
+.list-wrap .main .list-item .img-wrap{
+  position: absolute;
+  left: 32px;
+  top: 40px;
+  // width: 190px;
+  width: 212px;
+  height: 138px;
+  overflow: hidden;
+  z-index: -1;
+}
+.list-wrap .main .list-item .date{
+  left:75% !important;
+  margin-bottom: 20px;
+}
+.list-wrap .main .list-item .ratio{
+  left:75% !important;
+}
+.list-wrap .main .list-item .title,.list-wrap .main .list-item .desc{
+  left:62% !important;
+}
+.close-icon{
+  z-index: 100;
+  position: absolute;
+  top:2px;
+  right:2px;
+  color:white;
+  background: #fc2323cc;
+  width:25px;
+  height:25px;
+  border-radius: 5px;
+  padding:3px;
+}
 </style>

diff --git a/public/static/webCtrl/hk/demo_embedded_for_iframe.html b/public/static/webCtrl/hk/demo_embedded_for_iframe.html
index 3a0be10..5c18f74 100644
--- a/public/static/webCtrl/hk/demo_embedded_for_iframe.html
+++ b/public/static/webCtrl/hk/demo_embedded_for_iframe.html
@@ -107,6 +107,13 @@
         }
     });
 
+    function destoryPlugin() {
+      if (oWebControl != null){
+        oWebControl.JS_HideWnd();  // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
+        oWebControl.JS_Disconnect().then(function(){}, function() {});
+      }
+    }
+
     function hide(){
       oWebControl.JS_HideWnd();
     };
diff --git a/src/App.vue b/src/App.vue
index d9046c1..b8c5c1a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="app" v-resize="windowResize">
+  <div id="app" style="overflow-y: hidden" v-resize="windowResize">
     <router-view />
   </div>
 </template>
diff --git a/src/api/device.js b/src/api/device.js
index 0ba70ff..8d6c46b 100644
--- a/src/api/device.js
+++ b/src/api/device.js
@@ -159,3 +159,21 @@
     data
   })
 }
+
+export function getSwitchStatus(data) {
+  return request({
+    url: '/cockpit/gateLinkage/switchStatus',
+    method: 'get'
+  })
+}
+
+export function gateLinkageSwitch(controlSwitch) {
+  return request({
+    url: '/cockpit/gateLinkage/switch',
+    method: 'get',
+    params: {
+      controlSwitch
+    }
+  })
+}
+
diff --git a/src/api/person.js b/src/api/person.js
index 8a79c27..0c2a0ff 100644
--- a/src/api/person.js
+++ b/src/api/person.js
@@ -21,6 +21,14 @@
   })
 }
 
+export function getStaffOnList(params) {
+  return request({
+    url: '/cockpit/securityStaff/onList',
+    method: 'GET',
+    params
+  })
+}
+
 export function addStaff(data) {
   return request({
     url: 'staffInfo/add',
diff --git a/src/api/pop.js b/src/api/pop.js
index 01ddde7..6fa7381 100644
--- a/src/api/pop.js
+++ b/src/api/pop.js
@@ -72,6 +72,39 @@
   })
 }
 
+export function baoanStatistics() {
+  return request({
+    url: '/cockpit/securityStaff/statistics',
+    method: 'get',
+    data: {}
+  })
+}
+
+export function visitorStatistics() {
+  return request({
+    url: 'cockpit/visitor/statistics',
+    method: 'get',
+    data: {}
+  })
+}
+
+export function caseTodayStatistics() {
+  return request({
+    url: 'cockpit/case/todayStatistics',
+    method: 'get',
+    data: {}
+  })
+}
+
+export function casePieStatistics(params) {
+  return request({
+    url: 'cockpit/caseType/statisticsByTime',
+    method: 'get',
+    data: params,
+    params
+  })
+}
+
 // 安防事件频次因数组件
 export function securityFrequency() {
   return request({
@@ -158,3 +191,27 @@
     method: 'get'
   })
 }
+
+export function cameraTypeStatistics() {
+  return request({
+    url: '/cockpit/camera/typeStatistics',
+    method: 'get'
+  })
+}
+
+export function deviceStatistics(devType) {
+  return request({
+    url: '/cockpit/device/statistics',
+    method: 'post',
+    data: {
+      devType
+    }
+  })
+}
+
+export function buildPeopleNumber() {
+  return request({
+    url: '/cockpit/build/peopleNumber',
+    method: 'get'
+  })
+}
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index df71207..33d701a 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -280,37 +280,37 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  .table{
-    margin-bottom: 20px;
-  }
-  .pagination-container{
-    padding-bottom: 50px;
-  }
-  .table-title{
-    /*background-color:rgba(243, 243, 243, 1);*/
-    background-color:#fff;
-    .title-header{
-      font-size: 15px;
-      i{
-        margin-left: 10px;
-        margin-right: 5px;
-      }
-      i:focus{
-        outline: none;
-      }
+.table{
+  margin-bottom: 20px;
+}
+.pagination-container{
+  padding-bottom: 50px;
+}
+.table-title{
+  /*background-color:rgba(243, 243, 243, 1);*/
+  background-color:#fff;
+  .title-header{
+    font-size: 15px;
+    i{
+      margin-left: 10px;
+      margin-right: 5px;
+    }
+    i:focus{
+      outline: none;
     }
   }
-  .edit_btns{
-    padding-top:7px;
-    padding-right:3px;
-    text-align: right;
+}
+.edit_btns{
+  padding-top:7px;
+  padding-right:3px;
+  text-align: right;
+}
+.popper-div{
+  line-height: 1.5;
+  .popper-btns{
+    margin-top:10px;
   }
-  .popper-div{
-    line-height: 1.5;
-    .popper-btns{
-      margin-top:10px;
-    }
-  }
+}
 </style>
 
 <style>
diff --git a/src/router/modules/menu.js b/src/router/modules/menu.js
index 28ecc52..447517e 100644
--- a/src/router/modules/menu.js
+++ b/src/router/modules/menu.js
@@ -8,7 +8,7 @@
     redirect: '/loginBoard',
     meta: {
       title: '主页',
-      permission: ['/loginBoard'],
+      // permission: ['/loginBoard'],
       icon: '' // 图标
     },
     children: [
@@ -16,7 +16,7 @@
         path: '/loginBoard',
         name: 'LoginBoard',
         component: () => import('@/views/backstage/loginBoard'),
-        meta: { title: '主页', icon: '', permission: ['/loginBoard'] }
+        meta: { title: '主页', icon: '' }
       }
     ]
   },
diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss
index 0d1614b..f39542e 100644
--- a/src/styles/element-ui.scss
+++ b/src/styles/element-ui.scss
@@ -74,3 +74,6 @@
   height:48px;
   line-height:48px;
 }
+.el-time-panel {
+  margin-left: -20px !important;
+}
diff --git a/src/utils/request.js b/src/utils/request.js
index 02dcee1..a81c17f 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -39,19 +39,21 @@
     } else if (res.code !== 200) {
       // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
       if (res.code === 401 || res.code === 50012 || res.code === 50014) {
-        MessageBox.confirm(
-          '你已被登出，可以取消继续留在该页面，或者重新登录',
-          '确定登出',
-          {
-            confirmButtonText: '重新登录',
-            cancelButtonText: '取消',
-            type: 'warning'
-          }
-        ).then(() => {
-          store.dispatch('FedLogOut').then(() => {
-            location.reload() // 为了重新实例化vue-router对象 避免bug
+        if (!window.location.href.endsWith('right') && !window.location.href.endsWith('left') && !window.location.href.endsWith('bottom')) {
+          MessageBox.confirm(
+            '你已被登出，可以取消继续留在该页面，或者重新登录',
+            '确定登出',
+            {
+              confirmButtonText: '重新登录',
+              cancelButtonText: '取消',
+              type: 'warning'
+            }
+          ).then(() => {
+            store.dispatch('FedLogOut').then(() => {
+              location.reload() // 为了重新实例化vue-router对象 避免bug
+            })
           })
-        })
+        }
       } else {
         Message({
           showClose: true,
diff --git a/src/views/common/trailDialog.vue b/src/views/common/trailDialog.vue
index 04a83eb..fd90c34 100644
--- a/src/views/common/trailDialog.vue
+++ b/src/views/common/trailDialog.vue
@@ -52,6 +52,8 @@
         75: '75%'
       },
       listQuery: {
+        staffCode: '',
+        personName: '',
         facePicUrl: '',
         startTime: '',
         endTime: '',
@@ -81,11 +83,14 @@
   },
   methods: {
     // 初始化对话框
-    initDialog: function(picture = null, name) {
-      this.textMap = '轨迹追踪 — ' + name
+    initDialog: function(row) {
+      this.textMap = '轨迹追踪 — ' + row.staffName
+      this.list = []
       this.clearInput()
       this.dialogFormVisible = true
-      this.listQuery.facePicUrl = picture
+      this.listQuery.facePicUrl = row.picture
+      this.listQuery.staffCode = row.staffCode
+      this.listQuery.personName = row.staffName
       this.fetchData()
     },
     fetchData() {
diff --git a/src/views/person/staffList.vue b/src/views/person/staffList.vue
index ce8643e..95acc5c 100644
--- a/src/views/person/staffList.vue
+++ b/src/views/person/staffList.vue
@@ -332,7 +332,7 @@
     },
     trail(row) {
       this.dialogFormVisible1 = true
-      this.$refs.trailDialog.initDialog(row.picture, row.staffName)
+      this.$refs.trailDialog.initDialog(row)
     },
     // 打开详情对话框
     detail(row) {
diff --git a/src/views/popup/board.vue b/src/views/popup/board.vue
index eb229cc..0f47c22 100644
--- a/src/views/popup/board.vue
+++ b/src/views/popup/board.vue
@@ -4,7 +4,7 @@
       人员轨迹追踪
       <svg-icon v-if="list.length > 0" icon-class="pop-cross" class="close-icon" @click="close" />
     </div>
-    <el-form ref="ruleForm" :model="listQuery" :rules="rules" label-width="100px">
+    <el-form ref="ruleForm" :model="listQuery" :rules="rules" label-width="80px">
       <el-row :gutter="20">
         <el-col :span="12" class="form-item-person-info">
           <el-form-item label="人员信息" prop="personName" style="position:relative">
@@ -20,7 +20,8 @@
               size="small"
               placeholder="请输入人员姓名"
               :popper-append-to-body="false"
-              @change="handlePerson">
+              @change="handlePerson"
+            >
               <el-option
                 v-for="item in personNameList"
                 :key="item.staffCode"
@@ -41,7 +42,7 @@
               end-placeholder="终止时间"
               size="small"
               :clearable="false"
-              style="width:98%"
+              style="width:98%;"
             />
           </el-form-item>
         </el-col>
@@ -53,7 +54,7 @@
           </el-form-item>
         </el-col>
         <el-col :span="6">
-          <el-form-item label="最小相似度" prop="minSimilarity">
+          <el-form-item label="最小相似度" prop="minSimilarity" label-width="100px">
             <el-input v-model="listQuery.minSimilarity" size="small" placeholder="区间50-100" />
           </el-form-item>
         </el-col>
@@ -81,7 +82,7 @@
             <div class="title text-over">
               {{ child.positionName ? child.positionName : '' }}
             </div>
-            <div class="desc text-over" :title="child.devName">
+            <div class="desc text-over" :title="child.devName" style="white-space: normal;word-wrap: break-word;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2; ">
               {{ child.devName ? child.devName : '' }}
             </div>
             <div class="date" style="width:145px">
@@ -110,6 +111,7 @@
     return {
       selectLoading: false,
       personName: '',
+      staffCode: '',
       point: [],
       listQuery: {
         facePicUrl: '', // 图片url
@@ -260,6 +262,7 @@
       this.personNameList.map(item => {
         if (item.staffCode === person) {
           this.personName = item.personName
+          this.staffCode = item.staffCode
           // this.listQuery.personName = item.personName
           this.listQuery.facePicUrl = item.personPicture
           this.listQuery.gender = item.gender
@@ -299,7 +302,11 @@
         spinner: 'el-icon-loading',
         background: 'rgba(0, 0, 0, 0.7)'
       })
-      const postData = Object.assign(this.listQuery, { 'personName': this.personName })
+      const postData = Object.assign(this.listQuery,
+        {
+          'personName': this.personName,
+          'staffCode': this.staffCode
+        })
       console.log(postData)
       hikPic(postData).then(response => {
         loading.close()
@@ -325,6 +332,7 @@
       this.listQuery.minSimilarity = '50'
       this.listQuery.timeRange = ['', '']
       this.personName = ''
+      this.staffCode = ''
       this.list = []
     },
     // 轨迹上墙
@@ -359,299 +367,299 @@
   }
 }
 </script>
-
 <style rel="stylesheet/scss" lang="scss" scoped>
-  ::v-deep(.el-input__inner){
-    border:1px solid #40C3F1 !important;
-    background: transparent !important;
-    color:#fff !important;
+::v-deep(.el-input__inner){
+  border:1px solid #40C3F1 !important;
+  background: transparent !important;
+  color:#fff !important;
+}
+::v-deep(.el-range-input){
+  background: transparent !important;
+  color:#fff !important;
+}
+::v-deep(.el-form-item__label){
+  color:#f1f1f1 !important;
+  font-weight: 400 !important;
+}
+::v-deep(.el-range-separator){
+  color:#f1f1f1 !important;
+  font-weight: 400 !important;
+  color:#fff !important;
+}
+::v-deep(.el-select .el-select-dropdown__wrap) {
+  max-height: 350px !important;
+  overflow-y: auto !important;
+}
+
+.form-item-person-info:hover{
+  cursor: text !important;
+}
+.el-form-item__content:hover{
+  cursor: text !important;
+}
+::v-deep(.form-item-person-info .el-input__inner):hover{
+  cursor: text !important;
+}
+::-webkit-scrollbar {
+  z-index: 11;
+  width: 6px;
+}
+::-webkit-scrollbar-track,
+::-webkit-scrollbar-corner {
+  border-radius: 5px;
+  background: #fff;
+}
+::-webkit-scrollbar-thumb {
+  border-radius: 5px; // 滚动条
+  width: 6px;
+  background-color: #ccc;
+  :hover {
+    background-color: #ccc;
   }
-  ::v-deep(.el-range-input){
-    background: transparent !important;
-    color:#fff !important;
-  }
-  ::v-deep(.el-form-item__label){
-    color:#f1f1f1 !important;
-    font-weight: 400 !important;
-  }
-  ::v-deep(.el-range-separator){
-    color:#f1f1f1 !important;
-    font-weight: 400 !important;
-    color:#fff !important;
-  }
-  ::v-deep(.el-select .el-select-dropdown__wrap) {
-    max-height: 350px !important;
-    overflow-y: auto !important;
-  }
-  .form-item-person-info:hover{
-    cursor: text !important;
-  }
-  .el-form-item__content:hover{
-    cursor: text !important;
-  }
-  ::v-deep(.form-item-person-info .el-input__inner):hover{
-    cursor: text !important;
-  }
-  ::-webkit-scrollbar {
-      z-index: 11;
-      width: 6px;
-    }
-    ::-webkit-scrollbar-track,
-    ::-webkit-scrollbar-corner {
-      border-radius: 5px;
-      background: #fff;
-    }
-    ::-webkit-scrollbar-thumb {
-      border-radius: 5px; // 滚动条
-      width: 6px;
-      background-color: #ccc;
-      :hover {
-        background-color: #ccc;
-      }
-    }
-    ::-webkit-scrollbar-track-piece {
-      border-radius: 5px; // 轨道
-      background: #fff;
-      width: 6px;
-    }
-  .text-over{
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-  .wrap{
-    width:100%;
-    height: 100%;
-    background: #5F8EB9;
+}
+::-webkit-scrollbar-track-piece {
+  border-radius: 5px; // 轨道
+  background: #fff;
+  width: 6px;
+}
+.text-over{
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.wrap{
+  width:100%;
+  height: 100%;
+  background: #5F8EB9;
+  position: relative;
+  overflow: hidden;
+  .header{
     position: relative;
-    overflow: hidden;
-    .header{
+    width: 98%;
+    margin-left:20px;
+    border-top: 10px solid #5F8EB9;
+    border-bottom: 10px solid #5F8EB9;
+    padding:5px 0 5px 20px;
+    color:#f1f1f1;
+    background: #30486C;
+    font-size: 16px;
+  }
+}
+.el-select{
+  width: 100%;
+}
+.header::after{
+  content:"";
+  display: inline-block;
+  position: absolute;
+  top:0;
+  left: -8px;
+  width:4px;
+  height:100%;
+  background: #40C3F1;
+}
+.list-wrap{
+  width:100%;
+  // width:900px;
+  height: calc(100% - 175px); // 去除头部区域
+  overflow-y: auto;
+  .main{
+    width:99%;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    .row {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 40px;
+    }
+    .row:nth-child(2n) {
+      flex-direction: row-reverse;
+    }
+    .row:nth-child(2n):last-child .item {
+      margin-right: auto;
+    }
+    .list-item{
       position: relative;
-      width: 98%;
-      margin-left:20px;
-      border-top: 10px solid #5F8EB9;
-      border-bottom: 10px solid #5F8EB9;
-      padding:5px 0 5px 20px;
-      color:#f1f1f1;
-      background: #30486C;
-      font-size: 16px;
-    }
-  }
-  .el-select{
-    width: 100%;
-  }
-  .header::after{
-      content:"";
-      display: inline-block;
-      position: absolute;
-      top:0;
-      left: -8px;
-      width:4px;
-      height:100%;
-      background: #40C3F1;
-    }
-    .list-wrap{
-      width:100%;
-      // width:900px;
-      height: calc(100% - 175px); // 去除头部区域
-      overflow-y: auto;
-      .main{
-        width:99%;
-        margin: 0 auto;
-        display: flex;
-        flex-direction: column;
-        .row {
-          display: flex;
-          justify-content: space-between;
-          margin-bottom: 40px;
-        }
-        .row:nth-child(2n) {
-          flex-direction: row-reverse;
-        }
-        .row:nth-child(2n):last-child .item {
-          margin-right: auto;
-        }
-        .list-item{
-          position: relative;
-          width: 48%;
-          height: 240px;
-          background-image: url("../../assets/global_images/monitor.png");
-          background-repeat: no-repeat;
-          background-size: cover;
-          // background-size: 100% 100%;
-          // margin-left: 20px;
-          z-index: 10;
-          .img-wrap{
-            position: absolute;
-            left:35px;
-            top:40px;
-            width:238px;
-            height:138px;
-            overflow: hidden;
-            z-index: -1;
-          }
-          .title{
-            width:150px;
-            position: absolute;
-            left:42%;
-            top: 40px;
-            font-size: 20px;
-            color:#40C3F1;
-          }
-          .desc{
-            width:150px;
-            position: absolute;
-            left:42%;
-            top: 75px;
-            font-size: 16px;
-            color:#f1f1f1;
-          }
-          .date{
-            position: absolute;
-            left:50%;
-            transform: translateX(-50%);
-            bottom:70px;
-            font-size: 14px;
-            color:#c1c1c1;
-            margin-left:25px;
-          }
-          .date::after{
-            position: absolute;
-            top:0;
-            left:-20px;
-            content:"";
-            display: inline-block;
-            width: 15px;
-            height: 15px;
-            background-image: url("../../assets/global_images/date.png");
-            background-repeat: no-repeat;
-            background-size: cover;
-          }
-          .ratio{
-            // width:100px;
-            position: absolute;
-            left:50%;
-            transform: translateX(-50%);
-            bottom:40px;
-            font-size: 14px;
-            color:#c1c1c1;
-            // margin-left:18px;
-            margin-left: 25px;
-          }
-          .ratio::after{
-            position: absolute;
-            top:0;
-            left:-20px;
-            content:"";
-            display: inline-block;
-            width: 15px;
-            height: 15px;
-            background-image: url("../../assets/global_images/search.png");
-            background-repeat: no-repeat;
-            background-size: cover;
-          }
-        }
-      }
-    }
-    .main .row:nth-child(odd){
-      .list-item:nth-child(odd)::after{
-        content:"";
-        display: inline-block;
-        width:30px;
-        height: 30px;
+      width: 48%;
+      height: 240px;
+      background-image: url("../../assets/global_images/monitor.png");
+      background-repeat: no-repeat;
+      background-size: cover;
+      // background-size: 100% 100%;
+      // margin-left: 20px;
+      z-index: 10;
+      .img-wrap{
         position: absolute;
-        top:50%;
-        transform: translate(-50%);
-        right:-52px;
-        background-image: url("../../assets/global_images/right.png");
-        background-repeat: no-repeat;
-        background-size: cover;
+        left:35px;
+        top:40px;
+        width:238px;
+        height:138px;
+        overflow: hidden;
+        z-index: -1;
       }
-    }
-    .main .row:nth-child(odd){
-      .list-item:nth-child(even)::after{
-        content:"";
-        display: inline-block;
-        width:30px;
-        height: 30px;
+      .title{
+        width:150px;
         position: absolute;
-        right:50%;
-        transform: translate(-50%);
-        bottom:-35px;
-        background-image: url("../../assets/global_images/right.png");
-        background-repeat: no-repeat;
-        background-size: cover;
-        transform: rotate(90deg);
+        left:42%;
+        top: 40px;
+        font-size: 20px;
+        color:#40C3F1;
       }
-    }
-    .main .row:nth-child(even){
-      .list-item:nth-child(odd)::after{
-        content:"";
-        display: inline-block;
-        width:30px;
-        height: 30px;
+      .desc{
+        width:150px;
         position: absolute;
-        top:50%;
-        transform: translate(-50%);
-        left:-35px;
-        background-image: url("../../assets/global_images/right.png");
-        background-repeat: no-repeat;
-        background-size: cover;
-        transform: rotate(180deg);
+        left:42%;
+        top: 75px;
+        font-size: 16px;
+        color:#f1f1f1;
       }
-    }
-    .main .row:nth-child(even){
-      .list-item:nth-child(even)::after{
-        content:"";
-        display: inline-block;
-        width:30px;
-        height: 30px;
+      .date{
         position: absolute;
         left:50%;
-        transform: translate(-50%);
-        bottom:-35px;
-        background-image: url("../../assets/global_images/right.png");
+        transform: translateX(-50%);
+        bottom:70px;
+        font-size: 14px;
+        color:#c1c1c1;
+        margin-left:25px;
+      }
+      .date::after{
+        position: absolute;
+        top:0;
+        left:-20px;
+        content:"";
+        display: inline-block;
+        width: 15px;
+        height: 15px;
+        background-image: url("../../assets/global_images/date.png");
         background-repeat: no-repeat;
         background-size: cover;
-        transform: rotate(-270deg);
+      }
+      .ratio{
+        // width:100px;
+        position: absolute;
+        left:50%;
+        transform: translateX(-50%);
+        bottom:40px;
+        font-size: 14px;
+        color:#c1c1c1;
+        // margin-left:18px;
+        margin-left: 25px;
+      }
+      .ratio::after{
+        position: absolute;
+        top:0;
+        left:-20px;
+        content:"";
+        display: inline-block;
+        width: 15px;
+        height: 15px;
+        background-image: url("../../assets/global_images/search.png");
+        background-repeat: no-repeat;
+        background-size: cover;
       }
     }
-    // 如果是最后一个元素不显示箭头
-    .main .row:last-child{
-      .list-item:last-child::after{
-        display: none;
-      }
-    }
-    .list-wrap .main .list-item .img-wrap{
-      position: absolute;
-      left: 32px;
-      top: 40px;
-      // width: 190px;
-      width: 212px;
-      height: 138px;
-      overflow: hidden;
-      z-index: -1;
-    }
-    .list-wrap .main .list-item .date{
-      left:75% !important;
-      margin-bottom: 20px;
-    }
-    .list-wrap .main .list-item .ratio{
-      left:75% !important;
-    }
-    .list-wrap .main .list-item .title,.list-wrap .main .list-item .desc{
-      left:62% !important;
-    }
-    .close-icon{
-      z-index: 100;
-      position: absolute;
-      top:2px;
-      right:2px;
-      color:white;
-      background: #fc2323cc;
-      width:25px;
-      height:25px;
-      border-radius: 5px;
-      padding:3px;
-    }
+  }
+}
+.main .row:nth-child(odd){
+  .list-item:nth-child(odd)::after{
+    content:"";
+    display: inline-block;
+    width:30px;
+    height: 30px;
+    position: absolute;
+    top:50%;
+    transform: translate(-50%);
+    right:-52px;
+    background-image: url("../../assets/global_images/right.png");
+    background-repeat: no-repeat;
+    background-size: cover;
+  }
+}
+.main .row:nth-child(odd){
+  .list-item:nth-child(even)::after{
+    content:"";
+    display: inline-block;
+    width:30px;
+    height: 30px;
+    position: absolute;
+    right:50%;
+    transform: translate(-50%);
+    bottom:-35px;
+    background-image: url("../../assets/global_images/right.png");
+    background-repeat: no-repeat;
+    background-size: cover;
+    transform: rotate(90deg);
+  }
+}
+.main .row:nth-child(even){
+  .list-item:nth-child(odd)::after{
+    content:"";
+    display: inline-block;
+    width:30px;
+    height: 30px;
+    position: absolute;
+    top:50%;
+    transform: translate(-50%);
+    left:-35px;
+    background-image: url("../../assets/global_images/right.png");
+    background-repeat: no-repeat;
+    background-size: cover;
+    transform: rotate(180deg);
+  }
+}
+.main .row:nth-child(even){
+  .list-item:nth-child(even)::after{
+    content:"";
+    display: inline-block;
+    width:30px;
+    height: 30px;
+    position: absolute;
+    left:50%;
+    transform: translate(-50%);
+    bottom:-35px;
+    background-image: url("../../assets/global_images/right.png");
+    background-repeat: no-repeat;
+    background-size: cover;
+    transform: rotate(-270deg);
+  }
+}
+// 如果是最后一个元素不显示箭头
+.main .row:last-child{
+  .list-item:last-child::after{
+    display: none;
+  }
+}
+.list-wrap .main .list-item .img-wrap{
+  position: absolute;
+  left: 32px;
+  top: 40px;
+  // width: 190px;
+  width: 212px;
+  height: 138px;
+  overflow: hidden;
+  z-index: -1;
+}
+.list-wrap .main .list-item .date{
+  left:75% !important;
+  margin-bottom: 20px;
+}
+.list-wrap .main .list-item .ratio{
+  left:75% !important;
+}
+.list-wrap .main .list-item .title,.list-wrap .main .list-item .desc{
+  left:62% !important;
+}
+.close-icon{
+  z-index: 100;
+  position: absolute;
+  top:2px;
+  right:2px;
+  color:white;
+  background: #fc2323cc;
+  width:25px;
+  height:25px;
+  border-radius: 5px;
+  padding:3px;
+}
 </style>
diff --git a/src/views/popup/bottom.vue b/src/views/popup/bottom.vue
index e3fe7e2..c95b2a1 100644
--- a/src/views/popup/bottom.vue
+++ b/src/views/popup/bottom.vue
@@ -1,47 +1,84 @@
 <template>
   <div class="bottom">
-    <div class="block1">
-      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">访客控制安全系数组件</div>
-      <visit-bar style="flex:1;"/>
-    </div>
+<!--    <div class="block1" style="border-top-left-radius: 0px;margin-left: 5px">-->
+<!--      <inout-list style="flex:1;"/>-->
+<!--    </div>-->
     <div class="block">
       <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安防事件列表</div>
       <case-table style="flex:1;"/>
     </div>
-    <div class="block">
-      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">其他相关安全系数指标组件</div>
-      <other-line style="flex:1;"/>
+    <div class="block1" style="flex-direction: row;width: 700px">
+      <div style="width: 200px">
+        <div class="item0" style="margin: 36px 0">
+          <el-image :src="require('@/assets/popup/事件.png')" class="base-map-image" mode="fill" />
+          <div class="item-text">
+            <div class="num">{{caseNum.all}}<span class="unit"> 件</span></div>
+            <div style="color: #B3F3F6;">今日总事件</div>
+          </div>
+        </div>
+        <div class="item0">
+          <el-image :src="require('@/assets/popup/事件1.png')" class="base-map-image" mode="fill" />
+          <div class="item-text">
+            <div class="num"><span style="color: #08f102;text-shadow: 0 0 5px #08f102;">{{caseNum.solve}}</span><span class="unit"> 件</span></div>
+            <div style="color: #B3F3F6;">今日已解决</div>
+          </div>
+        </div>
+      </div>
+      <case-pie style="width: calc(100% - 200px);height: 100%"/>
     </div>
-    <div class="block1">
-      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安保人员到岗系数组件</div>
-      <staff-bar1 style="flex:1;"/>
+    <div class="block">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安防事件频率统计</div>
+      <case-bar style="flex:1;"/>
     </div>
   </div>
 </template>
 
 <script>
-// import VisitorPie from "@/views/popup/components/visitorPie";
-import VisitBar from '@/views/popup/components/visitBar';
-import StaffBar1 from '@/views/popup/components/staffBar1';
-import CaseTable from '@/views/popup/components/caseTable';
-// import ReqairTable from "@/views/popup/components/reqairTable";
-import OtherLine from '@/views/popup/components/otherLine';
+
+import CaseTable from '@/views/popup/components/caseTable'
+import CasePie from '@/views/popup/components/casePie'
+import { caseTodayStatistics } from '@/api/pop'
+import CaseBar from '@/views/popup/components/caseBar'
+import InoutList from '@/views/popup/components/inoutList'
 
 export default {
   name: 'Bottom',
-  components: { OtherLine, CaseTable, StaffBar1, VisitBar },
+  components: { InoutList, CaseBar, CasePie, CaseTable },
   data() {
     return {
+      timer: null,
       titleImg: require('@/assets/popup/title.png'), // 背景图片
-      titleAll: require('@/assets/popup/title-all.png'),// 背景图片
-      list: [2156, 2144, 455, 314, 98]
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      list: [2156, 2144, 455, 314, 98],
+      caseNum: {
+        all: 0,
+        solve: 0
+      }
     }
   },
+  mounted() {
+    clearInterval(this.timer)
+    this.search()
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+    this.timer = null
+  },
+  methods: {
+    search() {
+      this.timer = setInterval(() => {
+        caseTodayStatistics().then(response => {
+          if (response.code === 200) {
+            this.caseNum = response.data
+          }
+        })
+      }, 10000)
+    }
+  }
 }
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-
 .bottom{
   width: 100%;
   height: 220px;
@@ -57,11 +94,11 @@
     border-radius: 5px;
     box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
     border-color: rgba(0, 0, 0, .05);
-    margin: 0px 10px;
+    margin: 0px 5px;
     flex-direction: column;
   }
   .block1{
-    width: 500px;
+    width: 750px;
     height: 100%;
     display: flex;
     flex-wrap: wrap;
@@ -69,7 +106,7 @@
     border-radius: 5px;
     box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
     border-color: rgba(0, 0, 0, .05);
-    margin: 0px 10px;
+    margin: 0px 5px;
     flex-direction: column;
   }
   .title{
@@ -93,5 +130,31 @@
     font-size: 15px;
 
   }
+  .item0{
+    width: 100%;
+    height: 50px;
+    display: flex;
+    justify-content: left;
+    align-items: center;
+    padding: 0 8%;
+  }
+  .item-text{
+    text-shadow: 0 0 2px #d1ffff;
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 18px;
+  }
+  .num{
+    text-shadow: 0 0 5px #ffb441;
+    color: #ffb441;
+    font-size: 20px;
+    padding-top: 2px;
+  }
+  .unit{
+    color: #B3F3F6;
+    font-size: 14px;
+    margin-left: 1px;
+  }
 }
 </style>

diff --git a/public/static/webCtrl/hk/demo_embedded_for_iframe.html b/public/static/webCtrl/hk/demo_embedded_for_iframe.html
index 3a0be10..5c18f74 100644
--- a/public/static/webCtrl/hk/demo_embedded_for_iframe.html
+++ b/public/static/webCtrl/hk/demo_embedded_for_iframe.html
@@ -107,6 +107,13 @@
         }
     });
 
+    function destoryPlugin() {
+      if (oWebControl != null){
+        oWebControl.JS_HideWnd();  // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
+        oWebControl.JS_Disconnect().then(function(){}, function() {});
+      }
+    }
+
     function hide(){
       oWebControl.JS_HideWnd();
     };
diff --git a/src/App.vue b/src/App.vue
index d9046c1..b8c5c1a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="app" v-resize="windowResize">
+  <div id="app" style="overflow-y: hidden" v-resize="windowResize">
     <router-view />
   </div>
 </template>
diff --git a/src/api/device.js b/src/api/device.js
index 0ba70ff..8d6c46b 100644
--- a/src/api/device.js
+++ b/src/api/device.js
@@ -159,3 +159,21 @@
     data
   })
 }
+
+export function getSwitchStatus(data) {
+  return request({
+    url: '/cockpit/gateLinkage/switchStatus',
+    method: 'get'
+  })
+}
+
+export function gateLinkageSwitch(controlSwitch) {
+  return request({
+    url: '/cockpit/gateLinkage/switch',
+    method: 'get',
+    params: {
+      controlSwitch
+    }
+  })
+}
+
diff --git a/src/api/person.js b/src/api/person.js
index 8a79c27..0c2a0ff 100644
--- a/src/api/person.js
+++ b/src/api/person.js
@@ -21,6 +21,14 @@
   })
 }
 
+export function getStaffOnList(params) {
+  return request({
+    url: '/cockpit/securityStaff/onList',
+    method: 'GET',
+    params
+  })
+}
+
 export function addStaff(data) {
   return request({
     url: 'staffInfo/add',
diff --git a/src/api/pop.js b/src/api/pop.js
index 01ddde7..6fa7381 100644
--- a/src/api/pop.js
+++ b/src/api/pop.js
@@ -72,6 +72,39 @@
   })
 }
 
+export function baoanStatistics() {
+  return request({
+    url: '/cockpit/securityStaff/statistics',
+    method: 'get',
+    data: {}
+  })
+}
+
+export function visitorStatistics() {
+  return request({
+    url: 'cockpit/visitor/statistics',
+    method: 'get',
+    data: {}
+  })
+}
+
+export function caseTodayStatistics() {
+  return request({
+    url: 'cockpit/case/todayStatistics',
+    method: 'get',
+    data: {}
+  })
+}
+
+export function casePieStatistics(params) {
+  return request({
+    url: 'cockpit/caseType/statisticsByTime',
+    method: 'get',
+    data: params,
+    params
+  })
+}
+
 // 安防事件频次因数组件
 export function securityFrequency() {
   return request({
@@ -158,3 +191,27 @@
     method: 'get'
   })
 }
+
+export function cameraTypeStatistics() {
+  return request({
+    url: '/cockpit/camera/typeStatistics',
+    method: 'get'
+  })
+}
+
+export function deviceStatistics(devType) {
+  return request({
+    url: '/cockpit/device/statistics',
+    method: 'post',
+    data: {
+      devType
+    }
+  })
+}
+
+export function buildPeopleNumber() {
+  return request({
+    url: '/cockpit/build/peopleNumber',
+    method: 'get'
+  })
+}
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index df71207..33d701a 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -280,37 +280,37 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  .table{
-    margin-bottom: 20px;
-  }
-  .pagination-container{
-    padding-bottom: 50px;
-  }
-  .table-title{
-    /*background-color:rgba(243, 243, 243, 1);*/
-    background-color:#fff;
-    .title-header{
-      font-size: 15px;
-      i{
-        margin-left: 10px;
-        margin-right: 5px;
-      }
-      i:focus{
-        outline: none;
-      }
+.table{
+  margin-bottom: 20px;
+}
+.pagination-container{
+  padding-bottom: 50px;
+}
+.table-title{
+  /*background-color:rgba(243, 243, 243, 1);*/
+  background-color:#fff;
+  .title-header{
+    font-size: 15px;
+    i{
+      margin-left: 10px;
+      margin-right: 5px;
+    }
+    i:focus{
+      outline: none;
     }
   }
-  .edit_btns{
-    padding-top:7px;
-    padding-right:3px;
-    text-align: right;
+}
+.edit_btns{
+  padding-top:7px;
+  padding-right:3px;
+  text-align: right;
+}
+.popper-div{
+  line-height: 1.5;
+  .popper-btns{
+    margin-top:10px;
   }
-  .popper-div{
-    line-height: 1.5;
-    .popper-btns{
-      margin-top:10px;
-    }
-  }
+}
 </style>
 
 <style>
diff --git a/src/router/modules/menu.js b/src/router/modules/menu.js
index 28ecc52..447517e 100644
--- a/src/router/modules/menu.js
+++ b/src/router/modules/menu.js
@@ -8,7 +8,7 @@
     redirect: '/loginBoard',
     meta: {
       title: '主页',
-      permission: ['/loginBoard'],
+      // permission: ['/loginBoard'],
       icon: '' // 图标
     },
     children: [
@@ -16,7 +16,7 @@
         path: '/loginBoard',
         name: 'LoginBoard',
         component: () => import('@/views/backstage/loginBoard'),
-        meta: { title: '主页', icon: '', permission: ['/loginBoard'] }
+        meta: { title: '主页', icon: '' }
       }
     ]
   },
diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss
index 0d1614b..f39542e 100644
--- a/src/styles/element-ui.scss
+++ b/src/styles/element-ui.scss
@@ -74,3 +74,6 @@
   height:48px;
   line-height:48px;
 }
+.el-time-panel {
+  margin-left: -20px !important;
+}
diff --git a/src/utils/request.js b/src/utils/request.js
index 02dcee1..a81c17f 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -39,19 +39,21 @@
     } else if (res.code !== 200) {
       // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
       if (res.code === 401 || res.code === 50012 || res.code === 50014) {
-        MessageBox.confirm(
-          '你已被登出，可以取消继续留在该页面，或者重新登录',
-          '确定登出',
-          {
-            confirmButtonText: '重新登录',
-            cancelButtonText: '取消',
-            type: 'warning'
-          }
-        ).then(() => {
-          store.dispatch('FedLogOut').then(() => {
-            location.reload() // 为了重新实例化vue-router对象 避免bug
+        if (!window.location.href.endsWith('right') && !window.location.href.endsWith('left') && !window.location.href.endsWith('bottom')) {
+          MessageBox.confirm(
+            '你已被登出，可以取消继续留在该页面，或者重新登录',
+            '确定登出',
+            {
+              confirmButtonText: '重新登录',
+              cancelButtonText: '取消',
+              type: 'warning'
+            }
+          ).then(() => {
+            store.dispatch('FedLogOut').then(() => {
+              location.reload() // 为了重新实例化vue-router对象 避免bug
+            })
           })
-        })
+        }
       } else {
         Message({
           showClose: true,
diff --git a/src/views/common/trailDialog.vue b/src/views/common/trailDialog.vue
index 04a83eb..fd90c34 100644
--- a/src/views/common/trailDialog.vue
+++ b/src/views/common/trailDialog.vue
@@ -52,6 +52,8 @@
         75: '75%'
       },
       listQuery: {
+        staffCode: '',
+        personName: '',
         facePicUrl: '',
         startTime: '',
         endTime: '',
@@ -81,11 +83,14 @@
   },
   methods: {
     // 初始化对话框
-    initDialog: function(picture = null, name) {
-      this.textMap = '轨迹追踪 — ' + name
+    initDialog: function(row) {
+      this.textMap = '轨迹追踪 — ' + row.staffName
+      this.list = []
       this.clearInput()
       this.dialogFormVisible = true
-      this.listQuery.facePicUrl = picture
+      this.listQuery.facePicUrl = row.picture
+      this.listQuery.staffCode = row.staffCode
+      this.listQuery.personName = row.staffName
       this.fetchData()
     },
     fetchData() {
diff --git a/src/views/person/staffList.vue b/src/views/person/staffList.vue
index ce8643e..95acc5c 100644
--- a/src/views/person/staffList.vue
+++ b/src/views/person/staffList.vue
@@ -332,7 +332,7 @@
     },
     trail(row) {
       this.dialogFormVisible1 = true
-      this.$refs.trailDialog.initDialog(row.picture, row.staffName)
+      this.$refs.trailDialog.initDialog(row)
     },
     // 打开详情对话框
     detail(row) {
diff --git a/src/views/popup/board.vue b/src/views/popup/board.vue
index eb229cc..0f47c22 100644
--- a/src/views/popup/board.vue
+++ b/src/views/popup/board.vue
@@ -4,7 +4,7 @@
       人员轨迹追踪
       <svg-icon v-if="list.length > 0" icon-class="pop-cross" class="close-icon" @click="close" />
     </div>
-    <el-form ref="ruleForm" :model="listQuery" :rules="rules" label-width="100px">
+    <el-form ref="ruleForm" :model="listQuery" :rules="rules" label-width="80px">
       <el-row :gutter="20">
         <el-col :span="12" class="form-item-person-info">
           <el-form-item label="人员信息" prop="personName" style="position:relative">
@@ -20,7 +20,8 @@
               size="small"
               placeholder="请输入人员姓名"
               :popper-append-to-body="false"
-              @change="handlePerson">
+              @change="handlePerson"
+            >
               <el-option
                 v-for="item in personNameList"
                 :key="item.staffCode"
@@ -41,7 +42,7 @@
               end-placeholder="终止时间"
               size="small"
               :clearable="false"
-              style="width:98%"
+              style="width:98%;"
             />
           </el-form-item>
         </el-col>
@@ -53,7 +54,7 @@
           </el-form-item>
         </el-col>
         <el-col :span="6">
-          <el-form-item label="最小相似度" prop="minSimilarity">
+          <el-form-item label="最小相似度" prop="minSimilarity" label-width="100px">
             <el-input v-model="listQuery.minSimilarity" size="small" placeholder="区间50-100" />
           </el-form-item>
         </el-col>
@@ -81,7 +82,7 @@
             <div class="title text-over">
               {{ child.positionName ? child.positionName : '' }}
             </div>
-            <div class="desc text-over" :title="child.devName">
+            <div class="desc text-over" :title="child.devName" style="white-space: normal;word-wrap: break-word;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2; ">
               {{ child.devName ? child.devName : '' }}
             </div>
             <div class="date" style="width:145px">
@@ -110,6 +111,7 @@
     return {
       selectLoading: false,
       personName: '',
+      staffCode: '',
       point: [],
       listQuery: {
         facePicUrl: '', // 图片url
@@ -260,6 +262,7 @@
       this.personNameList.map(item => {
         if (item.staffCode === person) {
           this.personName = item.personName
+          this.staffCode = item.staffCode
           // this.listQuery.personName = item.personName
           this.listQuery.facePicUrl = item.personPicture
           this.listQuery.gender = item.gender
@@ -299,7 +302,11 @@
         spinner: 'el-icon-loading',
         background: 'rgba(0, 0, 0, 0.7)'
       })
-      const postData = Object.assign(this.listQuery, { 'personName': this.personName })
+      const postData = Object.assign(this.listQuery,
+        {
+          'personName': this.personName,
+          'staffCode': this.staffCode
+        })
       console.log(postData)
       hikPic(postData).then(response => {
         loading.close()
@@ -325,6 +332,7 @@
       this.listQuery.minSimilarity = '50'
       this.listQuery.timeRange = ['', '']
       this.personName = ''
+      this.staffCode = ''
       this.list = []
     },
     // 轨迹上墙
@@ -359,299 +367,299 @@
   }
 }
 </script>
-
 <style rel="stylesheet/scss" lang="scss" scoped>
-  ::v-deep(.el-input__inner){
-    border:1px solid #40C3F1 !important;
-    background: transparent !important;
-    color:#fff !important;
+::v-deep(.el-input__inner){
+  border:1px solid #40C3F1 !important;
+  background: transparent !important;
+  color:#fff !important;
+}
+::v-deep(.el-range-input){
+  background: transparent !important;
+  color:#fff !important;
+}
+::v-deep(.el-form-item__label){
+  color:#f1f1f1 !important;
+  font-weight: 400 !important;
+}
+::v-deep(.el-range-separator){
+  color:#f1f1f1 !important;
+  font-weight: 400 !important;
+  color:#fff !important;
+}
+::v-deep(.el-select .el-select-dropdown__wrap) {
+  max-height: 350px !important;
+  overflow-y: auto !important;
+}
+
+.form-item-person-info:hover{
+  cursor: text !important;
+}
+.el-form-item__content:hover{
+  cursor: text !important;
+}
+::v-deep(.form-item-person-info .el-input__inner):hover{
+  cursor: text !important;
+}
+::-webkit-scrollbar {
+  z-index: 11;
+  width: 6px;
+}
+::-webkit-scrollbar-track,
+::-webkit-scrollbar-corner {
+  border-radius: 5px;
+  background: #fff;
+}
+::-webkit-scrollbar-thumb {
+  border-radius: 5px; // 滚动条
+  width: 6px;
+  background-color: #ccc;
+  :hover {
+    background-color: #ccc;
   }
-  ::v-deep(.el-range-input){
-    background: transparent !important;
-    color:#fff !important;
-  }
-  ::v-deep(.el-form-item__label){
-    color:#f1f1f1 !important;
-    font-weight: 400 !important;
-  }
-  ::v-deep(.el-range-separator){
-    color:#f1f1f1 !important;
-    font-weight: 400 !important;
-    color:#fff !important;
-  }
-  ::v-deep(.el-select .el-select-dropdown__wrap) {
-    max-height: 350px !important;
-    overflow-y: auto !important;
-  }
-  .form-item-person-info:hover{
-    cursor: text !important;
-  }
-  .el-form-item__content:hover{
-    cursor: text !important;
-  }
-  ::v-deep(.form-item-person-info .el-input__inner):hover{
-    cursor: text !important;
-  }
-  ::-webkit-scrollbar {
-      z-index: 11;
-      width: 6px;
-    }
-    ::-webkit-scrollbar-track,
-    ::-webkit-scrollbar-corner {
-      border-radius: 5px;
-      background: #fff;
-    }
-    ::-webkit-scrollbar-thumb {
-      border-radius: 5px; // 滚动条
-      width: 6px;
-      background-color: #ccc;
-      :hover {
-        background-color: #ccc;
-      }
-    }
-    ::-webkit-scrollbar-track-piece {
-      border-radius: 5px; // 轨道
-      background: #fff;
-      width: 6px;
-    }
-  .text-over{
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-  .wrap{
-    width:100%;
-    height: 100%;
-    background: #5F8EB9;
+}
+::-webkit-scrollbar-track-piece {
+  border-radius: 5px; // 轨道
+  background: #fff;
+  width: 6px;
+}
+.text-over{
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.wrap{
+  width:100%;
+  height: 100%;
+  background: #5F8EB9;
+  position: relative;
+  overflow: hidden;
+  .header{
     position: relative;
-    overflow: hidden;
-    .header{
+    width: 98%;
+    margin-left:20px;
+    border-top: 10px solid #5F8EB9;
+    border-bottom: 10px solid #5F8EB9;
+    padding:5px 0 5px 20px;
+    color:#f1f1f1;
+    background: #30486C;
+    font-size: 16px;
+  }
+}
+.el-select{
+  width: 100%;
+}
+.header::after{
+  content:"";
+  display: inline-block;
+  position: absolute;
+  top:0;
+  left: -8px;
+  width:4px;
+  height:100%;
+  background: #40C3F1;
+}
+.list-wrap{
+  width:100%;
+  // width:900px;
+  height: calc(100% - 175px); // 去除头部区域
+  overflow-y: auto;
+  .main{
+    width:99%;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    .row {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 40px;
+    }
+    .row:nth-child(2n) {
+      flex-direction: row-reverse;
+    }
+    .row:nth-child(2n):last-child .item {
+      margin-right: auto;
+    }
+    .list-item{
       position: relative;
-      width: 98%;
-      margin-left:20px;
-      border-top: 10px solid #5F8EB9;
-      border-bottom: 10px solid #5F8EB9;
-      padding:5px 0 5px 20px;
-      color:#f1f1f1;
-      background: #30486C;
-      font-size: 16px;
-    }
-  }
-  .el-select{
-    width: 100%;
-  }
-  .header::after{
-      content:"";
-      display: inline-block;
-      position: absolute;
-      top:0;
-      left: -8px;
-      width:4px;
-      height:100%;
-      background: #40C3F1;
-    }
-    .list-wrap{
-      width:100%;
-      // width:900px;
-      height: calc(100% - 175px); // 去除头部区域
-      overflow-y: auto;
-      .main{
-        width:99%;
-        margin: 0 auto;
-        display: flex;
-        flex-direction: column;
-        .row {
-          display: flex;
-          justify-content: space-between;
-          margin-bottom: 40px;
-        }
-        .row:nth-child(2n) {
-          flex-direction: row-reverse;
-        }
-        .row:nth-child(2n):last-child .item {
-          margin-right: auto;
-        }
-        .list-item{
-          position: relative;
-          width: 48%;
-          height: 240px;
-          background-image: url("../../assets/global_images/monitor.png");
-          background-repeat: no-repeat;
-          background-size: cover;
-          // background-size: 100% 100%;
-          // margin-left: 20px;
-          z-index: 10;
-          .img-wrap{
-            position: absolute;
-            left:35px;
-            top:40px;
-            width:238px;
-            height:138px;
-            overflow: hidden;
-            z-index: -1;
-          }
-          .title{
-            width:150px;
-            position: absolute;
-            left:42%;
-            top: 40px;
-            font-size: 20px;
-            color:#40C3F1;
-          }
-          .desc{
-            width:150px;
-            position: absolute;
-            left:42%;
-            top: 75px;
-            font-size: 16px;
-            color:#f1f1f1;
-          }
-          .date{
-            position: absolute;
-            left:50%;
-            transform: translateX(-50%);
-            bottom:70px;
-            font-size: 14px;
-            color:#c1c1c1;
-            margin-left:25px;
-          }
-          .date::after{
-            position: absolute;
-            top:0;
-            left:-20px;
-            content:"";
-            display: inline-block;
-            width: 15px;
-            height: 15px;
-            background-image: url("../../assets/global_images/date.png");
-            background-repeat: no-repeat;
-            background-size: cover;
-          }
-          .ratio{
-            // width:100px;
-            position: absolute;
-            left:50%;
-            transform: translateX(-50%);
-            bottom:40px;
-            font-size: 14px;
-            color:#c1c1c1;
-            // margin-left:18px;
-            margin-left: 25px;
-          }
-          .ratio::after{
-            position: absolute;
-            top:0;
-            left:-20px;
-            content:"";
-            display: inline-block;
-            width: 15px;
-            height: 15px;
-            background-image: url("../../assets/global_images/search.png");
-            background-repeat: no-repeat;
-            background-size: cover;
-          }
-        }
-      }
-    }
-    .main .row:nth-child(odd){
-      .list-item:nth-child(odd)::after{
-        content:"";
-        display: inline-block;
-        width:30px;
-        height: 30px;
+      width: 48%;
+      height: 240px;
+      background-image: url("../../assets/global_images/monitor.png");
+      background-repeat: no-repeat;
+      background-size: cover;
+      // background-size: 100% 100%;
+      // margin-left: 20px;
+      z-index: 10;
+      .img-wrap{
         position: absolute;
-        top:50%;
-        transform: translate(-50%);
-        right:-52px;
-        background-image: url("../../assets/global_images/right.png");
-        background-repeat: no-repeat;
-        background-size: cover;
+        left:35px;
+        top:40px;
+        width:238px;
+        height:138px;
+        overflow: hidden;
+        z-index: -1;
       }
-    }
-    .main .row:nth-child(odd){
-      .list-item:nth-child(even)::after{
-        content:"";
-        display: inline-block;
-        width:30px;
-        height: 30px;
+      .title{
+        width:150px;
         position: absolute;
-        right:50%;
-        transform: translate(-50%);
-        bottom:-35px;
-        background-image: url("../../assets/global_images/right.png");
-        background-repeat: no-repeat;
-        background-size: cover;
-        transform: rotate(90deg);
+        left:42%;
+        top: 40px;
+        font-size: 20px;
+        color:#40C3F1;
       }
-    }
-    .main .row:nth-child(even){
-      .list-item:nth-child(odd)::after{
-        content:"";
-        display: inline-block;
-        width:30px;
-        height: 30px;
+      .desc{
+        width:150px;
         position: absolute;
-        top:50%;
-        transform: translate(-50%);
-        left:-35px;
-        background-image: url("../../assets/global_images/right.png");
-        background-repeat: no-repeat;
-        background-size: cover;
-        transform: rotate(180deg);
+        left:42%;
+        top: 75px;
+        font-size: 16px;
+        color:#f1f1f1;
       }
-    }
-    .main .row:nth-child(even){
-      .list-item:nth-child(even)::after{
-        content:"";
-        display: inline-block;
-        width:30px;
-        height: 30px;
+      .date{
         position: absolute;
         left:50%;
-        transform: translate(-50%);
-        bottom:-35px;
-        background-image: url("../../assets/global_images/right.png");
+        transform: translateX(-50%);
+        bottom:70px;
+        font-size: 14px;
+        color:#c1c1c1;
+        margin-left:25px;
+      }
+      .date::after{
+        position: absolute;
+        top:0;
+        left:-20px;
+        content:"";
+        display: inline-block;
+        width: 15px;
+        height: 15px;
+        background-image: url("../../assets/global_images/date.png");
         background-repeat: no-repeat;
         background-size: cover;
-        transform: rotate(-270deg);
+      }
+      .ratio{
+        // width:100px;
+        position: absolute;
+        left:50%;
+        transform: translateX(-50%);
+        bottom:40px;
+        font-size: 14px;
+        color:#c1c1c1;
+        // margin-left:18px;
+        margin-left: 25px;
+      }
+      .ratio::after{
+        position: absolute;
+        top:0;
+        left:-20px;
+        content:"";
+        display: inline-block;
+        width: 15px;
+        height: 15px;
+        background-image: url("../../assets/global_images/search.png");
+        background-repeat: no-repeat;
+        background-size: cover;
       }
     }
-    // 如果是最后一个元素不显示箭头
-    .main .row:last-child{
-      .list-item:last-child::after{
-        display: none;
-      }
-    }
-    .list-wrap .main .list-item .img-wrap{
-      position: absolute;
-      left: 32px;
-      top: 40px;
-      // width: 190px;
-      width: 212px;
-      height: 138px;
-      overflow: hidden;
-      z-index: -1;
-    }
-    .list-wrap .main .list-item .date{
-      left:75% !important;
-      margin-bottom: 20px;
-    }
-    .list-wrap .main .list-item .ratio{
-      left:75% !important;
-    }
-    .list-wrap .main .list-item .title,.list-wrap .main .list-item .desc{
-      left:62% !important;
-    }
-    .close-icon{
-      z-index: 100;
-      position: absolute;
-      top:2px;
-      right:2px;
-      color:white;
-      background: #fc2323cc;
-      width:25px;
-      height:25px;
-      border-radius: 5px;
-      padding:3px;
-    }
+  }
+}
+.main .row:nth-child(odd){
+  .list-item:nth-child(odd)::after{
+    content:"";
+    display: inline-block;
+    width:30px;
+    height: 30px;
+    position: absolute;
+    top:50%;
+    transform: translate(-50%);
+    right:-52px;
+    background-image: url("../../assets/global_images/right.png");
+    background-repeat: no-repeat;
+    background-size: cover;
+  }
+}
+.main .row:nth-child(odd){
+  .list-item:nth-child(even)::after{
+    content:"";
+    display: inline-block;
+    width:30px;
+    height: 30px;
+    position: absolute;
+    right:50%;
+    transform: translate(-50%);
+    bottom:-35px;
+    background-image: url("../../assets/global_images/right.png");
+    background-repeat: no-repeat;
+    background-size: cover;
+    transform: rotate(90deg);
+  }
+}
+.main .row:nth-child(even){
+  .list-item:nth-child(odd)::after{
+    content:"";
+    display: inline-block;
+    width:30px;
+    height: 30px;
+    position: absolute;
+    top:50%;
+    transform: translate(-50%);
+    left:-35px;
+    background-image: url("../../assets/global_images/right.png");
+    background-repeat: no-repeat;
+    background-size: cover;
+    transform: rotate(180deg);
+  }
+}
+.main .row:nth-child(even){
+  .list-item:nth-child(even)::after{
+    content:"";
+    display: inline-block;
+    width:30px;
+    height: 30px;
+    position: absolute;
+    left:50%;
+    transform: translate(-50%);
+    bottom:-35px;
+    background-image: url("../../assets/global_images/right.png");
+    background-repeat: no-repeat;
+    background-size: cover;
+    transform: rotate(-270deg);
+  }
+}
+// 如果是最后一个元素不显示箭头
+.main .row:last-child{
+  .list-item:last-child::after{
+    display: none;
+  }
+}
+.list-wrap .main .list-item .img-wrap{
+  position: absolute;
+  left: 32px;
+  top: 40px;
+  // width: 190px;
+  width: 212px;
+  height: 138px;
+  overflow: hidden;
+  z-index: -1;
+}
+.list-wrap .main .list-item .date{
+  left:75% !important;
+  margin-bottom: 20px;
+}
+.list-wrap .main .list-item .ratio{
+  left:75% !important;
+}
+.list-wrap .main .list-item .title,.list-wrap .main .list-item .desc{
+  left:62% !important;
+}
+.close-icon{
+  z-index: 100;
+  position: absolute;
+  top:2px;
+  right:2px;
+  color:white;
+  background: #fc2323cc;
+  width:25px;
+  height:25px;
+  border-radius: 5px;
+  padding:3px;
+}
 </style>
diff --git a/src/views/popup/bottom.vue b/src/views/popup/bottom.vue
index e3fe7e2..c95b2a1 100644
--- a/src/views/popup/bottom.vue
+++ b/src/views/popup/bottom.vue
@@ -1,47 +1,84 @@
 <template>
   <div class="bottom">
-    <div class="block1">
-      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">访客控制安全系数组件</div>
-      <visit-bar style="flex:1;"/>
-    </div>
+<!--    <div class="block1" style="border-top-left-radius: 0px;margin-left: 5px">-->
+<!--      <inout-list style="flex:1;"/>-->
+<!--    </div>-->
     <div class="block">
       <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安防事件列表</div>
       <case-table style="flex:1;"/>
     </div>
-    <div class="block">
-      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">其他相关安全系数指标组件</div>
-      <other-line style="flex:1;"/>
+    <div class="block1" style="flex-direction: row;width: 700px">
+      <div style="width: 200px">
+        <div class="item0" style="margin: 36px 0">
+          <el-image :src="require('@/assets/popup/事件.png')" class="base-map-image" mode="fill" />
+          <div class="item-text">
+            <div class="num">{{caseNum.all}}<span class="unit"> 件</span></div>
+            <div style="color: #B3F3F6;">今日总事件</div>
+          </div>
+        </div>
+        <div class="item0">
+          <el-image :src="require('@/assets/popup/事件1.png')" class="base-map-image" mode="fill" />
+          <div class="item-text">
+            <div class="num"><span style="color: #08f102;text-shadow: 0 0 5px #08f102;">{{caseNum.solve}}</span><span class="unit"> 件</span></div>
+            <div style="color: #B3F3F6;">今日已解决</div>
+          </div>
+        </div>
+      </div>
+      <case-pie style="width: calc(100% - 200px);height: 100%"/>
     </div>
-    <div class="block1">
-      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安保人员到岗系数组件</div>
-      <staff-bar1 style="flex:1;"/>
+    <div class="block">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安防事件频率统计</div>
+      <case-bar style="flex:1;"/>
     </div>
   </div>
 </template>
 
 <script>
-// import VisitorPie from "@/views/popup/components/visitorPie";
-import VisitBar from '@/views/popup/components/visitBar';
-import StaffBar1 from '@/views/popup/components/staffBar1';
-import CaseTable from '@/views/popup/components/caseTable';
-// import ReqairTable from "@/views/popup/components/reqairTable";
-import OtherLine from '@/views/popup/components/otherLine';
+
+import CaseTable from '@/views/popup/components/caseTable'
+import CasePie from '@/views/popup/components/casePie'
+import { caseTodayStatistics } from '@/api/pop'
+import CaseBar from '@/views/popup/components/caseBar'
+import InoutList from '@/views/popup/components/inoutList'
 
 export default {
   name: 'Bottom',
-  components: { OtherLine, CaseTable, StaffBar1, VisitBar },
+  components: { InoutList, CaseBar, CasePie, CaseTable },
   data() {
     return {
+      timer: null,
       titleImg: require('@/assets/popup/title.png'), // 背景图片
-      titleAll: require('@/assets/popup/title-all.png'),// 背景图片
-      list: [2156, 2144, 455, 314, 98]
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      list: [2156, 2144, 455, 314, 98],
+      caseNum: {
+        all: 0,
+        solve: 0
+      }
     }
   },
+  mounted() {
+    clearInterval(this.timer)
+    this.search()
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+    this.timer = null
+  },
+  methods: {
+    search() {
+      this.timer = setInterval(() => {
+        caseTodayStatistics().then(response => {
+          if (response.code === 200) {
+            this.caseNum = response.data
+          }
+        })
+      }, 10000)
+    }
+  }
 }
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-
 .bottom{
   width: 100%;
   height: 220px;
@@ -57,11 +94,11 @@
     border-radius: 5px;
     box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
     border-color: rgba(0, 0, 0, .05);
-    margin: 0px 10px;
+    margin: 0px 5px;
     flex-direction: column;
   }
   .block1{
-    width: 500px;
+    width: 750px;
     height: 100%;
     display: flex;
     flex-wrap: wrap;
@@ -69,7 +106,7 @@
     border-radius: 5px;
     box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
     border-color: rgba(0, 0, 0, .05);
-    margin: 0px 10px;
+    margin: 0px 5px;
     flex-direction: column;
   }
   .title{
@@ -93,5 +130,31 @@
     font-size: 15px;
 
   }
+  .item0{
+    width: 100%;
+    height: 50px;
+    display: flex;
+    justify-content: left;
+    align-items: center;
+    padding: 0 8%;
+  }
+  .item-text{
+    text-shadow: 0 0 2px #d1ffff;
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 18px;
+  }
+  .num{
+    text-shadow: 0 0 5px #ffb441;
+    color: #ffb441;
+    font-size: 20px;
+    padding-top: 2px;
+  }
+  .unit{
+    color: #B3F3F6;
+    font-size: 14px;
+    margin-left: 1px;
+  }
 }
 </style>
diff --git a/src/views/popup/components/caseTable.vue b/src/views/popup/components/caseTable.vue
index 95aa677..c9708d7 100644
--- a/src/views/popup/components/caseTable.vue
+++ b/src/views/popup/components/caseTable.vue
@@ -1,5 +1,9 @@
 <template>
   <div class="flowTable">
+<!--    <el-tabs v-model="activeName" @tab-click="changeTime" style="display: flex;position:absolute;right: 30px;top:5px">-->
+<!--      <el-tab-pane label="已解决" name="week"/>-->
+<!--      <el-tab-pane label="未解决" name="month"/>-->
+<!--    </el-tabs>-->
     <div class="success_info_body" v-show="showFlag">
       <!-- 参数名称、列数根据实际情况调整 -->
       <div class="table_body">
@@ -14,7 +18,7 @@
         <div class="table_main_body">
           <div class="table_inner_body" :style="{top: tableTop + 'px'}">
             <div v-for="(item,index) in tableList" class="table_tr" :class="checkCell(item,index)" :key="index" @click="JumpDevice(item)">
-              <div class="tr1 tr">{{item.levelName}}</div>
+              <div class="tr1 tr" :style="{color: item.levelName ==='重大' ? 'red' : item.levelName ==='较大' ? 'orange' : '#b8dffd'}">{{item.levelName}}</div>
               <div class="tr2 tr">{{item.description}}</div>
               <div class="tr1 tr">{{item.statusName}}</div>
               <div class="tr2 tr">{{item.typeName}}</div>
@@ -41,7 +45,7 @@
   data() {
     return {
       picurl: '',
-      defaultPhoto: require('@/assets/global_images/photo_error.png'),
+      defaultPhoto: require('@/assets/global_images/photo_offline.png'),
       errorImg: require('@/assets/global_images/photo_error.png'),
       showFlag: true,
       tableTimer: null,
@@ -104,8 +108,9 @@
       this.picurl = ''
       this.isbig = false
       getCaseListPage({
+        status: '',
         offset: 1,
-        limit: 15
+        limit: 20
       }).then(response => {
         if (response.code === 200) {
           this.tableList = response.data.rows
@@ -190,13 +195,18 @@
   line-height: 15px;
 }
 .tr {
-  overflow: hidden;
   text-overflow: ellipsis;
-  white-space: nowrap;
   box-sizing: border-box;
   padding: 0 5px;
   text-align: center;
   font-size: 13px;
+  word-wrap: break-word; /* 允许在单词内换行 */
+  overflow-wrap: break-word; /* 同上，现代浏览器推荐使用 */
+  white-space: normal; /* 允许自动换行 */
+  line-height: 15px;
+  display: flex;
+  align-items: center; /* 垂直居中 */
+  justify-content: center; /* 水平居中，如需要 */
 }
 .tr1 {
   width: 13%;
@@ -253,7 +263,7 @@
   }
 }
 .hard-state{
-  background:red;
+  background: #ff8585;
 }
 .medium-state{
   background: #ea9700;

diff --git a/public/static/webCtrl/hk/demo_embedded_for_iframe.html b/public/static/webCtrl/hk/demo_embedded_for_iframe.html
index 3a0be10..5c18f74 100644
--- a/public/static/webCtrl/hk/demo_embedded_for_iframe.html
+++ b/public/static/webCtrl/hk/demo_embedded_for_iframe.html
@@ -107,6 +107,13 @@
         }
     });
 
+    function destoryPlugin() {
+      if (oWebControl != null){
+        oWebControl.JS_HideWnd();  // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
+        oWebControl.JS_Disconnect().then(function(){}, function() {});
+      }
+    }
+
     function hide(){
       oWebControl.JS_HideWnd();
     };
diff --git a/src/App.vue b/src/App.vue
index d9046c1..b8c5c1a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="app" v-resize="windowResize">
+  <div id="app" style="overflow-y: hidden" v-resize="windowResize">
     <router-view />
   </div>
 </template>
diff --git a/src/api/device.js b/src/api/device.js
index 0ba70ff..8d6c46b 100644
--- a/src/api/device.js
+++ b/src/api/device.js
@@ -159,3 +159,21 @@
     data
   })
 }
+
+export function getSwitchStatus(data) {
+  return request({
+    url: '/cockpit/gateLinkage/switchStatus',
+    method: 'get'
+  })
+}
+
+export function gateLinkageSwitch(controlSwitch) {
+  return request({
+    url: '/cockpit/gateLinkage/switch',
+    method: 'get',
+    params: {
+      controlSwitch
+    }
+  })
+}
+
diff --git a/src/api/person.js b/src/api/person.js
index 8a79c27..0c2a0ff 100644
--- a/src/api/person.js
+++ b/src/api/person.js
@@ -21,6 +21,14 @@
   })
 }
 
+export function getStaffOnList(params) {
+  return request({
+    url: '/cockpit/securityStaff/onList',
+    method: 'GET',
+    params
+  })
+}
+
 export function addStaff(data) {
   return request({
     url: 'staffInfo/add',
diff --git a/src/api/pop.js b/src/api/pop.js
index 01ddde7..6fa7381 100644
--- a/src/api/pop.js
+++ b/src/api/pop.js
@@ -72,6 +72,39 @@
   })
 }
 
+export function baoanStatistics() {
+  return request({
+    url: '/cockpit/securityStaff/statistics',
+    method: 'get',
+    data: {}
+  })
+}
+
+export function visitorStatistics() {
+  return request({
+    url: 'cockpit/visitor/statistics',
+    method: 'get',
+    data: {}
+  })
+}
+
+export function caseTodayStatistics() {
+  return request({
+    url: 'cockpit/case/todayStatistics',
+    method: 'get',
+    data: {}
+  })
+}
+
+export function casePieStatistics(params) {
+  return request({
+    url: 'cockpit/caseType/statisticsByTime',
+    method: 'get',
+    data: params,
+    params
+  })
+}
+
 // 安防事件频次因数组件
 export function securityFrequency() {
   return request({
@@ -158,3 +191,27 @@
     method: 'get'
   })
 }
+
+export function cameraTypeStatistics() {
+  return request({
+    url: '/cockpit/camera/typeStatistics',
+    method: 'get'
+  })
+}
+
+export function deviceStatistics(devType) {
+  return request({
+    url: '/cockpit/device/statistics',
+    method: 'post',
+    data: {
+      devType
+    }
+  })
+}
+
+export function buildPeopleNumber() {
+  return request({
+    url: '/cockpit/build/peopleNumber',
+    method: 'get'
+  })
+}
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index df71207..33d701a 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -280,37 +280,37 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  .table{
-    margin-bottom: 20px;
-  }
-  .pagination-container{
-    padding-bottom: 50px;
-  }
-  .table-title{
-    /*background-color:rgba(243, 243, 243, 1);*/
-    background-color:#fff;
-    .title-header{
-      font-size: 15px;
-      i{
-        margin-left: 10px;
-        margin-right: 5px;
-      }
-      i:focus{
-        outline: none;
-      }
+.table{
+  margin-bottom: 20px;
+}
+.pagination-container{
+  padding-bottom: 50px;
+}
+.table-title{
+  /*background-color:rgba(243, 243, 243, 1);*/
+  background-color:#fff;
+  .title-header{
+    font-size: 15px;
+    i{
+      margin-left: 10px;
+      margin-right: 5px;
+    }
+    i:focus{
+      outline: none;
     }
   }
-  .edit_btns{
-    padding-top:7px;
-    padding-right:3px;
-    text-align: right;
+}
+.edit_btns{
+  padding-top:7px;
+  padding-right:3px;
+  text-align: right;
+}
+.popper-div{
+  line-height: 1.5;
+  .popper-btns{
+    margin-top:10px;
   }
-  .popper-div{
-    line-height: 1.5;
-    .popper-btns{
-      margin-top:10px;
-    }
-  }
+}
 </style>
 
 <style>
diff --git a/src/router/modules/menu.js b/src/router/modules/menu.js
index 28ecc52..447517e 100644
--- a/src/router/modules/menu.js
+++ b/src/router/modules/menu.js
@@ -8,7 +8,7 @@
     redirect: '/loginBoard',
     meta: {
       title: '主页',
-      permission: ['/loginBoard'],
+      // permission: ['/loginBoard'],
       icon: '' // 图标
     },
     children: [
@@ -16,7 +16,7 @@
         path: '/loginBoard',
         name: 'LoginBoard',
         component: () => import('@/views/backstage/loginBoard'),
-        meta: { title: '主页', icon: '', permission: ['/loginBoard'] }
+        meta: { title: '主页', icon: '' }
       }
     ]
   },
diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss
index 0d1614b..f39542e 100644
--- a/src/styles/element-ui.scss
+++ b/src/styles/element-ui.scss
@@ -74,3 +74,6 @@
   height:48px;
   line-height:48px;
 }
+.el-time-panel {
+  margin-left: -20px !important;
+}
diff --git a/src/utils/request.js b/src/utils/request.js
index 02dcee1..a81c17f 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -39,19 +39,21 @@
     } else if (res.code !== 200) {
       // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
       if (res.code === 401 || res.code === 50012 || res.code === 50014) {
-        MessageBox.confirm(
-          '你已被登出，可以取消继续留在该页面，或者重新登录',
-          '确定登出',
-          {
-            confirmButtonText: '重新登录',
-            cancelButtonText: '取消',
-            type: 'warning'
-          }
-        ).then(() => {
-          store.dispatch('FedLogOut').then(() => {
-            location.reload() // 为了重新实例化vue-router对象 避免bug
+        if (!window.location.href.endsWith('right') && !window.location.href.endsWith('left') && !window.location.href.endsWith('bottom')) {
+          MessageBox.confirm(
+            '你已被登出，可以取消继续留在该页面，或者重新登录',
+            '确定登出',
+            {
+              confirmButtonText: '重新登录',
+              cancelButtonText: '取消',
+              type: 'warning'
+            }
+          ).then(() => {
+            store.dispatch('FedLogOut').then(() => {
+              location.reload() // 为了重新实例化vue-router对象 避免bug
+            })
           })
-        })
+        }
       } else {
         Message({
           showClose: true,
diff --git a/src/views/common/trailDialog.vue b/src/views/common/trailDialog.vue
index 04a83eb..fd90c34 100644
--- a/src/views/common/trailDialog.vue
+++ b/src/views/common/trailDialog.vue
@@ -52,6 +52,8 @@
         75: '75%'
       },
       listQuery: {
+        staffCode: '',
+        personName: '',
         facePicUrl: '',
         startTime: '',
         endTime: '',
@@ -81,11 +83,14 @@
   },
   methods: {
     // 初始化对话框
-    initDialog: function(picture = null, name) {
-      this.textMap = '轨迹追踪 — ' + name
+    initDialog: function(row) {
+      this.textMap = '轨迹追踪 — ' + row.staffName
+      this.list = []
       this.clearInput()
       this.dialogFormVisible = true
-      this.listQuery.facePicUrl = picture
+      this.listQuery.facePicUrl = row.picture
+      this.listQuery.staffCode = row.staffCode
+      this.listQuery.personName = row.staffName
       this.fetchData()
     },
     fetchData() {
diff --git a/src/views/person/staffList.vue b/src/views/person/staffList.vue
index ce8643e..95acc5c 100644
--- a/src/views/person/staffList.vue
+++ b/src/views/person/staffList.vue
@@ -332,7 +332,7 @@
     },
     trail(row) {
       this.dialogFormVisible1 = true
-      this.$refs.trailDialog.initDialog(row.picture, row.staffName)
+      this.$refs.trailDialog.initDialog(row)
     },
     // 打开详情对话框
     detail(row) {
diff --git a/src/views/popup/board.vue b/src/views/popup/board.vue
index eb229cc..0f47c22 100644
--- a/src/views/popup/board.vue
+++ b/src/views/popup/board.vue
@@ -4,7 +4,7 @@
       人员轨迹追踪
       <svg-icon v-if="list.length > 0" icon-class="pop-cross" class="close-icon" @click="close" />
     </div>
-    <el-form ref="ruleForm" :model="listQuery" :rules="rules" label-width="100px">
+    <el-form ref="ruleForm" :model="listQuery" :rules="rules" label-width="80px">
       <el-row :gutter="20">
         <el-col :span="12" class="form-item-person-info">
           <el-form-item label="人员信息" prop="personName" style="position:relative">
@@ -20,7 +20,8 @@
               size="small"
               placeholder="请输入人员姓名"
               :popper-append-to-body="false"
-              @change="handlePerson">
+              @change="handlePerson"
+            >
               <el-option
                 v-for="item in personNameList"
                 :key="item.staffCode"
@@ -41,7 +42,7 @@
               end-placeholder="终止时间"
               size="small"
               :clearable="false"
-              style="width:98%"
+              style="width:98%;"
             />
           </el-form-item>
         </el-col>
@@ -53,7 +54,7 @@
           </el-form-item>
         </el-col>
         <el-col :span="6">
-          <el-form-item label="最小相似度" prop="minSimilarity">
+          <el-form-item label="最小相似度" prop="minSimilarity" label-width="100px">
             <el-input v-model="listQuery.minSimilarity" size="small" placeholder="区间50-100" />
           </el-form-item>
         </el-col>
@@ -81,7 +82,7 @@
             <div class="title text-over">
               {{ child.positionName ? child.positionName : '' }}
             </div>
-            <div class="desc text-over" :title="child.devName">
+            <div class="desc text-over" :title="child.devName" style="white-space: normal;word-wrap: break-word;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2; ">
               {{ child.devName ? child.devName : '' }}
             </div>
             <div class="date" style="width:145px">
@@ -110,6 +111,7 @@
     return {
       selectLoading: false,
       personName: '',
+      staffCode: '',
       point: [],
       listQuery: {
         facePicUrl: '', // 图片url
@@ -260,6 +262,7 @@
       this.personNameList.map(item => {
         if (item.staffCode === person) {
           this.personName = item.personName
+          this.staffCode = item.staffCode
           // this.listQuery.personName = item.personName
           this.listQuery.facePicUrl = item.personPicture
           this.listQuery.gender = item.gender
@@ -299,7 +302,11 @@
         spinner: 'el-icon-loading',
         background: 'rgba(0, 0, 0, 0.7)'
       })
-      const postData = Object.assign(this.listQuery, { 'personName': this.personName })
+      const postData = Object.assign(this.listQuery,
+        {
+          'personName': this.personName,
+          'staffCode': this.staffCode
+        })
       console.log(postData)
       hikPic(postData).then(response => {
         loading.close()
@@ -325,6 +332,7 @@
       this.listQuery.minSimilarity = '50'
       this.listQuery.timeRange = ['', '']
       this.personName = ''
+      this.staffCode = ''
       this.list = []
     },
     // 轨迹上墙
@@ -359,299 +367,299 @@
   }
 }
 </script>
-
 <style rel="stylesheet/scss" lang="scss" scoped>
-  ::v-deep(.el-input__inner){
-    border:1px solid #40C3F1 !important;
-    background: transparent !important;
-    color:#fff !important;
+::v-deep(.el-input__inner){
+  border:1px solid #40C3F1 !important;
+  background: transparent !important;
+  color:#fff !important;
+}
+::v-deep(.el-range-input){
+  background: transparent !important;
+  color:#fff !important;
+}
+::v-deep(.el-form-item__label){
+  color:#f1f1f1 !important;
+  font-weight: 400 !important;
+}
+::v-deep(.el-range-separator){
+  color:#f1f1f1 !important;
+  font-weight: 400 !important;
+  color:#fff !important;
+}
+::v-deep(.el-select .el-select-dropdown__wrap) {
+  max-height: 350px !important;
+  overflow-y: auto !important;
+}
+
+.form-item-person-info:hover{
+  cursor: text !important;
+}
+.el-form-item__content:hover{
+  cursor: text !important;
+}
+::v-deep(.form-item-person-info .el-input__inner):hover{
+  cursor: text !important;
+}
+::-webkit-scrollbar {
+  z-index: 11;
+  width: 6px;
+}
+::-webkit-scrollbar-track,
+::-webkit-scrollbar-corner {
+  border-radius: 5px;
+  background: #fff;
+}
+::-webkit-scrollbar-thumb {
+  border-radius: 5px; // 滚动条
+  width: 6px;
+  background-color: #ccc;
+  :hover {
+    background-color: #ccc;
   }
-  ::v-deep(.el-range-input){
-    background: transparent !important;
-    color:#fff !important;
-  }
-  ::v-deep(.el-form-item__label){
-    color:#f1f1f1 !important;
-    font-weight: 400 !important;
-  }
-  ::v-deep(.el-range-separator){
-    color:#f1f1f1 !important;
-    font-weight: 400 !important;
-    color:#fff !important;
-  }
-  ::v-deep(.el-select .el-select-dropdown__wrap) {
-    max-height: 350px !important;
-    overflow-y: auto !important;
-  }
-  .form-item-person-info:hover{
-    cursor: text !important;
-  }
-  .el-form-item__content:hover{
-    cursor: text !important;
-  }
-  ::v-deep(.form-item-person-info .el-input__inner):hover{
-    cursor: text !important;
-  }
-  ::-webkit-scrollbar {
-      z-index: 11;
-      width: 6px;
-    }
-    ::-webkit-scrollbar-track,
-    ::-webkit-scrollbar-corner {
-      border-radius: 5px;
-      background: #fff;
-    }
-    ::-webkit-scrollbar-thumb {
-      border-radius: 5px; // 滚动条
-      width: 6px;
-      background-color: #ccc;
-      :hover {
-        background-color: #ccc;
-      }
-    }
-    ::-webkit-scrollbar-track-piece {
-      border-radius: 5px; // 轨道
-      background: #fff;
-      width: 6px;
-    }
-  .text-over{
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-  .wrap{
-    width:100%;
-    height: 100%;
-    background: #5F8EB9;
+}
+::-webkit-scrollbar-track-piece {
+  border-radius: 5px; // 轨道
+  background: #fff;
+  width: 6px;
+}
+.text-over{
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.wrap{
+  width:100%;
+  height: 100%;
+  background: #5F8EB9;
+  position: relative;
+  overflow: hidden;
+  .header{
     position: relative;
-    overflow: hidden;
-    .header{
+    width: 98%;
+    margin-left:20px;
+    border-top: 10px solid #5F8EB9;
+    border-bottom: 10px solid #5F8EB9;
+    padding:5px 0 5px 20px;
+    color:#f1f1f1;
+    background: #30486C;
+    font-size: 16px;
+  }
+}
+.el-select{
+  width: 100%;
+}
+.header::after{
+  content:"";
+  display: inline-block;
+  position: absolute;
+  top:0;
+  left: -8px;
+  width:4px;
+  height:100%;
+  background: #40C3F1;
+}
+.list-wrap{
+  width:100%;
+  // width:900px;
+  height: calc(100% - 175px); // 去除头部区域
+  overflow-y: auto;
+  .main{
+    width:99%;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    .row {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 40px;
+    }
+    .row:nth-child(2n) {
+      flex-direction: row-reverse;
+    }
+    .row:nth-child(2n):last-child .item {
+      margin-right: auto;
+    }
+    .list-item{
       position: relative;
-      width: 98%;
-      margin-left:20px;
-      border-top: 10px solid #5F8EB9;
-      border-bottom: 10px solid #5F8EB9;
-      padding:5px 0 5px 20px;
-      color:#f1f1f1;
-      background: #30486C;
-      font-size: 16px;
-    }
-  }
-  .el-select{
-    width: 100%;
-  }
-  .header::after{
-      content:"";
-      display: inline-block;
-      position: absolute;
-      top:0;
-      left: -8px;
-      width:4px;
-      height:100%;
-      background: #40C3F1;
-    }
-    .list-wrap{
-      width:100%;
-      // width:900px;
-      height: calc(100% - 175px); // 去除头部区域
-      overflow-y: auto;
-      .main{
-        width:99%;
-        margin: 0 auto;
-        display: flex;
-        flex-direction: column;
-        .row {
-          display: flex;
-          justify-content: space-between;
-          margin-bottom: 40px;
-        }
-        .row:nth-child(2n) {
-          flex-direction: row-reverse;
-        }
-        .row:nth-child(2n):last-child .item {
-          margin-right: auto;
-        }
-        .list-item{
-          position: relative;
-          width: 48%;
-          height: 240px;
-          background-image: url("../../assets/global_images/monitor.png");
-          background-repeat: no-repeat;
-          background-size: cover;
-          // background-size: 100% 100%;
-          // margin-left: 20px;
-          z-index: 10;
-          .img-wrap{
-            position: absolute;
-            left:35px;
-            top:40px;
-            width:238px;
-            height:138px;
-            overflow: hidden;
-            z-index: -1;
-          }
-          .title{
-            width:150px;
-            position: absolute;
-            left:42%;
-            top: 40px;
-            font-size: 20px;
-            color:#40C3F1;
-          }
-          .desc{
-            width:150px;
-            position: absolute;
-            left:42%;
-            top: 75px;
-            font-size: 16px;
-            color:#f1f1f1;
-          }
-          .date{
-            position: absolute;
-            left:50%;
-            transform: translateX(-50%);
-            bottom:70px;
-            font-size: 14px;
-            color:#c1c1c1;
-            margin-left:25px;
-          }
-          .date::after{
-            position: absolute;
-            top:0;
-            left:-20px;
-            content:"";
-            display: inline-block;
-            width: 15px;
-            height: 15px;
-            background-image: url("../../assets/global_images/date.png");
-            background-repeat: no-repeat;
-            background-size: cover;
-          }
-          .ratio{
-            // width:100px;
-            position: absolute;
-            left:50%;
-            transform: translateX(-50%);
-            bottom:40px;
-            font-size: 14px;
-            color:#c1c1c1;
-            // margin-left:18px;
-            margin-left: 25px;
-          }
-          .ratio::after{
-            position: absolute;
-            top:0;
-            left:-20px;
-            content:"";
-            display: inline-block;
-            width: 15px;
-            height: 15px;
-            background-image: url("../../assets/global_images/search.png");
-            background-repeat: no-repeat;
-            background-size: cover;
-          }
-        }
-      }
-    }
-    .main .row:nth-child(odd){
-      .list-item:nth-child(odd)::after{
-        content:"";
-        display: inline-block;
-        width:30px;
-        height: 30px;
+      width: 48%;
+      height: 240px;
+      background-image: url("../../assets/global_images/monitor.png");
+      background-repeat: no-repeat;
+      background-size: cover;
+      // background-size: 100% 100%;
+      // margin-left: 20px;
+      z-index: 10;
+      .img-wrap{
         position: absolute;
-        top:50%;
-        transform: translate(-50%);
-        right:-52px;
-        background-image: url("../../assets/global_images/right.png");
-        background-repeat: no-repeat;
-        background-size: cover;
+        left:35px;
+        top:40px;
+        width:238px;
+        height:138px;
+        overflow: hidden;
+        z-index: -1;
       }
-    }
-    .main .row:nth-child(odd){
-      .list-item:nth-child(even)::after{
-        content:"";
-        display: inline-block;
-        width:30px;
-        height: 30px;
+      .title{
+        width:150px;
         position: absolute;
-        right:50%;
-        transform: translate(-50%);
-        bottom:-35px;
-        background-image: url("../../assets/global_images/right.png");
-        background-repeat: no-repeat;
-        background-size: cover;
-        transform: rotate(90deg);
+        left:42%;
+        top: 40px;
+        font-size: 20px;
+        color:#40C3F1;
       }
-    }
-    .main .row:nth-child(even){
-      .list-item:nth-child(odd)::after{
-        content:"";
-        display: inline-block;
-        width:30px;
-        height: 30px;
+      .desc{
+        width:150px;
         position: absolute;
-        top:50%;
-        transform: translate(-50%);
-        left:-35px;
-        background-image: url("../../assets/global_images/right.png");
-        background-repeat: no-repeat;
-        background-size: cover;
-        transform: rotate(180deg);
+        left:42%;
+        top: 75px;
+        font-size: 16px;
+        color:#f1f1f1;
       }
-    }
-    .main .row:nth-child(even){
-      .list-item:nth-child(even)::after{
-        content:"";
-        display: inline-block;
-        width:30px;
-        height: 30px;
+      .date{
         position: absolute;
         left:50%;
-        transform: translate(-50%);
-        bottom:-35px;
-        background-image: url("../../assets/global_images/right.png");
+        transform: translateX(-50%);
+        bottom:70px;
+        font-size: 14px;
+        color:#c1c1c1;
+        margin-left:25px;
+      }
+      .date::after{
+        position: absolute;
+        top:0;
+        left:-20px;
+        content:"";
+        display: inline-block;
+        width: 15px;
+        height: 15px;
+        background-image: url("../../assets/global_images/date.png");
         background-repeat: no-repeat;
         background-size: cover;
-        transform: rotate(-270deg);
+      }
+      .ratio{
+        // width:100px;
+        position: absolute;
+        left:50%;
+        transform: translateX(-50%);
+        bottom:40px;
+        font-size: 14px;
+        color:#c1c1c1;
+        // margin-left:18px;
+        margin-left: 25px;
+      }
+      .ratio::after{
+        position: absolute;
+        top:0;
+        left:-20px;
+        content:"";
+        display: inline-block;
+        width: 15px;
+        height: 15px;
+        background-image: url("../../assets/global_images/search.png");
+        background-repeat: no-repeat;
+        background-size: cover;
       }
     }
-    // 如果是最后一个元素不显示箭头
-    .main .row:last-child{
-      .list-item:last-child::after{
-        display: none;
-      }
-    }
-    .list-wrap .main .list-item .img-wrap{
-      position: absolute;
-      left: 32px;
-      top: 40px;
-      // width: 190px;
-      width: 212px;
-      height: 138px;
-      overflow: hidden;
-      z-index: -1;
-    }
-    .list-wrap .main .list-item .date{
-      left:75% !important;
-      margin-bottom: 20px;
-    }
-    .list-wrap .main .list-item .ratio{
-      left:75% !important;
-    }
-    .list-wrap .main .list-item .title,.list-wrap .main .list-item .desc{
-      left:62% !important;
-    }
-    .close-icon{
-      z-index: 100;
-      position: absolute;
-      top:2px;
-      right:2px;
-      color:white;
-      background: #fc2323cc;
-      width:25px;
-      height:25px;
-      border-radius: 5px;
-      padding:3px;
-    }
+  }
+}
+.main .row:nth-child(odd){
+  .list-item:nth-child(odd)::after{
+    content:"";
+    display: inline-block;
+    width:30px;
+    height: 30px;
+    position: absolute;
+    top:50%;
+    transform: translate(-50%);
+    right:-52px;
+    background-image: url("../../assets/global_images/right.png");
+    background-repeat: no-repeat;
+    background-size: cover;
+  }
+}
+.main .row:nth-child(odd){
+  .list-item:nth-child(even)::after{
+    content:"";
+    display: inline-block;
+    width:30px;
+    height: 30px;
+    position: absolute;
+    right:50%;
+    transform: translate(-50%);
+    bottom:-35px;
+    background-image: url("../../assets/global_images/right.png");
+    background-repeat: no-repeat;
+    background-size: cover;
+    transform: rotate(90deg);
+  }
+}
+.main .row:nth-child(even){
+  .list-item:nth-child(odd)::after{
+    content:"";
+    display: inline-block;
+    width:30px;
+    height: 30px;
+    position: absolute;
+    top:50%;
+    transform: translate(-50%);
+    left:-35px;
+    background-image: url("../../assets/global_images/right.png");
+    background-repeat: no-repeat;
+    background-size: cover;
+    transform: rotate(180deg);
+  }
+}
+.main .row:nth-child(even){
+  .list-item:nth-child(even)::after{
+    content:"";
+    display: inline-block;
+    width:30px;
+    height: 30px;
+    position: absolute;
+    left:50%;
+    transform: translate(-50%);
+    bottom:-35px;
+    background-image: url("../../assets/global_images/right.png");
+    background-repeat: no-repeat;
+    background-size: cover;
+    transform: rotate(-270deg);
+  }
+}
+// 如果是最后一个元素不显示箭头
+.main .row:last-child{
+  .list-item:last-child::after{
+    display: none;
+  }
+}
+.list-wrap .main .list-item .img-wrap{
+  position: absolute;
+  left: 32px;
+  top: 40px;
+  // width: 190px;
+  width: 212px;
+  height: 138px;
+  overflow: hidden;
+  z-index: -1;
+}
+.list-wrap .main .list-item .date{
+  left:75% !important;
+  margin-bottom: 20px;
+}
+.list-wrap .main .list-item .ratio{
+  left:75% !important;
+}
+.list-wrap .main .list-item .title,.list-wrap .main .list-item .desc{
+  left:62% !important;
+}
+.close-icon{
+  z-index: 100;
+  position: absolute;
+  top:2px;
+  right:2px;
+  color:white;
+  background: #fc2323cc;
+  width:25px;
+  height:25px;
+  border-radius: 5px;
+  padding:3px;
+}
 </style>
diff --git a/src/views/popup/bottom.vue b/src/views/popup/bottom.vue
index e3fe7e2..c95b2a1 100644
--- a/src/views/popup/bottom.vue
+++ b/src/views/popup/bottom.vue
@@ -1,47 +1,84 @@
 <template>
   <div class="bottom">
-    <div class="block1">
-      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">访客控制安全系数组件</div>
-      <visit-bar style="flex:1;"/>
-    </div>
+<!--    <div class="block1" style="border-top-left-radius: 0px;margin-left: 5px">-->
+<!--      <inout-list style="flex:1;"/>-->
+<!--    </div>-->
     <div class="block">
       <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安防事件列表</div>
       <case-table style="flex:1;"/>
     </div>
-    <div class="block">
-      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">其他相关安全系数指标组件</div>
-      <other-line style="flex:1;"/>
+    <div class="block1" style="flex-direction: row;width: 700px">
+      <div style="width: 200px">
+        <div class="item0" style="margin: 36px 0">
+          <el-image :src="require('@/assets/popup/事件.png')" class="base-map-image" mode="fill" />
+          <div class="item-text">
+            <div class="num">{{caseNum.all}}<span class="unit"> 件</span></div>
+            <div style="color: #B3F3F6;">今日总事件</div>
+          </div>
+        </div>
+        <div class="item0">
+          <el-image :src="require('@/assets/popup/事件1.png')" class="base-map-image" mode="fill" />
+          <div class="item-text">
+            <div class="num"><span style="color: #08f102;text-shadow: 0 0 5px #08f102;">{{caseNum.solve}}</span><span class="unit"> 件</span></div>
+            <div style="color: #B3F3F6;">今日已解决</div>
+          </div>
+        </div>
+      </div>
+      <case-pie style="width: calc(100% - 200px);height: 100%"/>
     </div>
-    <div class="block1">
-      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安保人员到岗系数组件</div>
-      <staff-bar1 style="flex:1;"/>
+    <div class="block">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安防事件频率统计</div>
+      <case-bar style="flex:1;"/>
     </div>
   </div>
 </template>
 
 <script>
-// import VisitorPie from "@/views/popup/components/visitorPie";
-import VisitBar from '@/views/popup/components/visitBar';
-import StaffBar1 from '@/views/popup/components/staffBar1';
-import CaseTable from '@/views/popup/components/caseTable';
-// import ReqairTable from "@/views/popup/components/reqairTable";
-import OtherLine from '@/views/popup/components/otherLine';
+
+import CaseTable from '@/views/popup/components/caseTable'
+import CasePie from '@/views/popup/components/casePie'
+import { caseTodayStatistics } from '@/api/pop'
+import CaseBar from '@/views/popup/components/caseBar'
+import InoutList from '@/views/popup/components/inoutList'
 
 export default {
   name: 'Bottom',
-  components: { OtherLine, CaseTable, StaffBar1, VisitBar },
+  components: { InoutList, CaseBar, CasePie, CaseTable },
   data() {
     return {
+      timer: null,
       titleImg: require('@/assets/popup/title.png'), // 背景图片
-      titleAll: require('@/assets/popup/title-all.png'),// 背景图片
-      list: [2156, 2144, 455, 314, 98]
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      list: [2156, 2144, 455, 314, 98],
+      caseNum: {
+        all: 0,
+        solve: 0
+      }
     }
   },
+  mounted() {
+    clearInterval(this.timer)
+    this.search()
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+    this.timer = null
+  },
+  methods: {
+    search() {
+      this.timer = setInterval(() => {
+        caseTodayStatistics().then(response => {
+          if (response.code === 200) {
+            this.caseNum = response.data
+          }
+        })
+      }, 10000)
+    }
+  }
 }
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-
 .bottom{
   width: 100%;
   height: 220px;
@@ -57,11 +94,11 @@
     border-radius: 5px;
     box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
     border-color: rgba(0, 0, 0, .05);
-    margin: 0px 10px;
+    margin: 0px 5px;
     flex-direction: column;
   }
   .block1{
-    width: 500px;
+    width: 750px;
     height: 100%;
     display: flex;
     flex-wrap: wrap;
@@ -69,7 +106,7 @@
     border-radius: 5px;
     box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
     border-color: rgba(0, 0, 0, .05);
-    margin: 0px 10px;
+    margin: 0px 5px;
     flex-direction: column;
   }
   .title{
@@ -93,5 +130,31 @@
     font-size: 15px;
 
   }
+  .item0{
+    width: 100%;
+    height: 50px;
+    display: flex;
+    justify-content: left;
+    align-items: center;
+    padding: 0 8%;
+  }
+  .item-text{
+    text-shadow: 0 0 2px #d1ffff;
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 18px;
+  }
+  .num{
+    text-shadow: 0 0 5px #ffb441;
+    color: #ffb441;
+    font-size: 20px;
+    padding-top: 2px;
+  }
+  .unit{
+    color: #B3F3F6;
+    font-size: 14px;
+    margin-left: 1px;
+  }
 }
 </style>
diff --git a/src/views/popup/components/caseTable.vue b/src/views/popup/components/caseTable.vue
index 95aa677..c9708d7 100644
--- a/src/views/popup/components/caseTable.vue
+++ b/src/views/popup/components/caseTable.vue
@@ -1,5 +1,9 @@
 <template>
   <div class="flowTable">
+<!--    <el-tabs v-model="activeName" @tab-click="changeTime" style="display: flex;position:absolute;right: 30px;top:5px">-->
+<!--      <el-tab-pane label="已解决" name="week"/>-->
+<!--      <el-tab-pane label="未解决" name="month"/>-->
+<!--    </el-tabs>-->
     <div class="success_info_body" v-show="showFlag">
       <!-- 参数名称、列数根据实际情况调整 -->
       <div class="table_body">
@@ -14,7 +18,7 @@
         <div class="table_main_body">
           <div class="table_inner_body" :style="{top: tableTop + 'px'}">
             <div v-for="(item,index) in tableList" class="table_tr" :class="checkCell(item,index)" :key="index" @click="JumpDevice(item)">
-              <div class="tr1 tr">{{item.levelName}}</div>
+              <div class="tr1 tr" :style="{color: item.levelName ==='重大' ? 'red' : item.levelName ==='较大' ? 'orange' : '#b8dffd'}">{{item.levelName}}</div>
               <div class="tr2 tr">{{item.description}}</div>
               <div class="tr1 tr">{{item.statusName}}</div>
               <div class="tr2 tr">{{item.typeName}}</div>
@@ -41,7 +45,7 @@
   data() {
     return {
       picurl: '',
-      defaultPhoto: require('@/assets/global_images/photo_error.png'),
+      defaultPhoto: require('@/assets/global_images/photo_offline.png'),
       errorImg: require('@/assets/global_images/photo_error.png'),
       showFlag: true,
       tableTimer: null,
@@ -104,8 +108,9 @@
       this.picurl = ''
       this.isbig = false
       getCaseListPage({
+        status: '',
         offset: 1,
-        limit: 15
+        limit: 20
       }).then(response => {
         if (response.code === 200) {
           this.tableList = response.data.rows
@@ -190,13 +195,18 @@
   line-height: 15px;
 }
 .tr {
-  overflow: hidden;
   text-overflow: ellipsis;
-  white-space: nowrap;
   box-sizing: border-box;
   padding: 0 5px;
   text-align: center;
   font-size: 13px;
+  word-wrap: break-word; /* 允许在单词内换行 */
+  overflow-wrap: break-word; /* 同上，现代浏览器推荐使用 */
+  white-space: normal; /* 允许自动换行 */
+  line-height: 15px;
+  display: flex;
+  align-items: center; /* 垂直居中 */
+  justify-content: center; /* 水平居中，如需要 */
 }
 .tr1 {
   width: 13%;
@@ -253,7 +263,7 @@
   }
 }
 .hard-state{
-  background:red;
+  background: #ff8585;
 }
 .medium-state{
   background: #ea9700;
diff --git a/src/views/popup/components/doorList.vue b/src/views/popup/components/doorList.vue
new file mode 100644
index 0000000..7bc178a
--- /dev/null
+++ b/src/views/popup/components/doorList.vue
@@ -0,0 +1,257 @@
+<template>
+  <div style="width: 100%;height: 100%;">
+    <div style="text-align: right;margin-right: 5px;">
+      <el-button class="doorbar-btn" type="primary" plain @click="isOn1 = !isOn1" style="margin-left: 3px">{{isOn1 ? '隐藏操作按钮': '开启操作按钮'}}</el-button>
+      <el-button class="doorbar-btn" type="primary" plain @click="controlDool()">{{!isOn2 ? '开启黑名单与闸机联动': '关闭黑名单与闸机联动'}}</el-button>
+    </div>
+    <div class="success_info_body" style="margin: 0 10px;flex: 1">
+      <div class="table_body">
+        <div class="table_th">
+          <div class="tr4 th_style">门禁分组</div>
+          <div class="tr1 th_style" v-show="isOn1">操作</div>
+        </div>
+        <div class="table_main_body">
+          <div class="table_inner_body" :style="{top: tableTop + 'px'}">
+            <div v-for="(item,index) in tableList" class="table_tr" :key="index">
+              <div class="tr4 tr">{{item.groupName}}</div>
+              <div class="tr1 tr" v-show="isOn1">
+                <el-button type="text" v-for="item in statusList" :key="item.value" size="small" @click.stop="editStatus(scope.row, item.value)" style="height: 20px;margin-top: -10px">
+                  {{ item.name }}
+                </el-button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+<!--    <el-pagination layout="prev, pager, next" :total="tableListSize" style="width: 100%;text-align: center" @current-change="handleCurrentChange"/>-->
+  </div>
+</template>
+
+<script>
+import {controlGroup, gateLinkageSwitch, getGroupListPage, getSwitchStatus} from '@/api/device'
+export default {
+  name: 'DoorList',
+  data() {
+    return {
+      defaultPhoto: require('@/assets/global_images/photo.png'),
+      errorImg: require('@/assets/global_images/photo_error.png'),
+      isOn1: false,
+      isOn2: false,
+      tableTimer: null,
+      tableTop: 0,
+      tableList: [],
+      statusList: [
+        { name: '常开', id: '1557975745699823618', value: '0' },
+        { name: '常闭', id: '1557975746215723010', value: '3' },
+        { name: '门开', id: '1557975746723233793', value: '2' },
+        { name: '门闭', id: '1557975747402711041', value: '1' }
+      ],
+      tableListSize: 0,
+      componentTimer: null,
+      visibleSize: 8, // 容器内可视最大完整行数
+      lineHeight: 20, // 每行的实际高度（包含margin-top/bottom,border等）
+      componentTimerInterval: 3600000, //  刷新数据的时间间隔
+      tableTimerInterval: 50, //  向上滚动 1px 所需要的时间，越小越快，推荐值 100
+      listQuery: {
+        groupName: '',
+        gateCode: '',
+        status: '',
+        offset: 1,
+        limit: 8
+      }, // 筛选条件
+      dialogFormVisible: false, // 是否显示编辑框
+      timeRange: [], // 时间范围
+      multipleSelection: [], // 多选选中项
+      list: [], // 列表数据
+      colorRow: {
+        isColor: false,
+        isPop: true
+      },
+      inoutTypeList: [],
+      passWayList: [],
+      total: 0, // 数据总数
+      listLoading: true // 列表加载动画
+    }
+  },
+  created() {
+    getSwitchStatus().then(response => {
+      if (response.code === 200) {
+        this.isOn2 = response.data === 1
+      }
+    })
+    this.fetchData()
+  },
+  methods: {
+    controlDool() {
+      this.isOn2 = !this.isOn2
+      gateLinkageSwitch(this.isOn2 ? 1 : 0).then(response => {
+        if (response.code === 200) {
+          this.$message.success((this.isOn2 ? '开启' : '关闭') + '黑名单与闸机联动成功')
+        }
+      })
+    },
+    fetchData(isNowPage = true) {
+      if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+        this.listQuery.offset = 1
+      }
+      getGroupListPage(this.listQuery).then(response => {
+        if (response.code === 200) {
+          this.tableList = response.data.rows
+          this.tableListSize = parseInt(response.data.total)
+        }
+      })
+    },
+    editStatus(row, status) {
+      controlGroup(row.id, status).then(response => {
+        if (response.code === 200) {
+          this.$message.success('通道控制成功')
+          this.fetchData()
+        }
+      }).catch(_ => { // 异常情况，loading置为false
+      })
+    },
+    handleCurrentChange(val) {
+      this.listQuery.offset = val
+      this.fetchData()
+    },
+    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.doorbar-btn {
+  height: 22px;
+  padding-top: 4px;
+  padding-right: 6px;
+  padding-left: 6px;
+  margin-right: 4px;
+}
+.table_body {
+  width: 100%;
+  margin-top: 0px;
+}
+.table_th {
+  width: 100%;
+  display: flex;
+  height: 15px;
+  line-height: 20px;
+}
+.tr {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 0 5px;
+  text-align: center;
+  font-size: 13px;
+  height: 20px !important;
+}
+.tr1 {
+  width: 35%;
+}
+.tr2 {
+  width: 18%;
+}
+.tr3 {
+  width: 15%;
+  font-size: 13px;
+}
+
+.tr4 {
+  flex: 1;
+}
+.tr5 {
+  width: 100px;
+}
+
+.th_style {
+  color: #b8dffd;
+  font-size: 13px;
+  font-weight: bold;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  box-sizing: border-box;
+  text-align: center;
+}
+.table_main_body {
+  width: 100%;
+  height: 175px;
+  overflow: hidden;
+  position: relative;
+  margin-top: 5px;
+}
+.table_inner_body {
+  width: 100%;
+  position: absolute;
+  left: 0;
+  color: #cce9ff;
+}
+
+.table_tr {
+  display: flex;
+  font-size: 13px;
+  border: 1px solid rgb(71, 160, 199);
+  margin-top: 2px;
+  height: 20px;
+  line-height: 20px;
+  cursor: pointer;
+:hover{
+  background: rgba(255, 153, 51, 0.6);
+}
+}
+.table_tr0 {
+  background: rgba(3, 145, 167, 0.1);
+}
+.table_tr1 {
+  background: rgb(64, 87, 120);
+}
+
+::v-deep .el-pagination {
+  .el-pagination__total {
+    color: white !important;
+  }
+  .el-pagination__jump {
+    color: white !important;
+  }
+  // 两个输入框
+  .el-input__inner {
+    background-color: #092546;
+    border: 1px solid rgba(192, 192, 192, 0.479);
+    color: white !important;
+  }
+  // 左右按键和里面的图标
+  button {
+    background-color: #092546;
+    .el-icon::before {
+      color: white;
+    }
+  }
+  // 分页数字
+  ul {
+    color: white;
+    .el-icon::before {
+      color: white !important;
+    }
+  }
+  // 分页数字的背景色
+  ul > li {
+    background-color: #092546;
+  }
+}
+::v-deep .el-loading-mask {
+  background-color: rgba(0, 0, 0, 0.479);
+}
+
+</style>

diff --git a/public/static/webCtrl/hk/demo_embedded_for_iframe.html b/public/static/webCtrl/hk/demo_embedded_for_iframe.html
index 3a0be10..5c18f74 100644
--- a/public/static/webCtrl/hk/demo_embedded_for_iframe.html
+++ b/public/static/webCtrl/hk/demo_embedded_for_iframe.html
@@ -107,6 +107,13 @@
         }
     });
 
+    function destoryPlugin() {
+      if (oWebControl != null){
+        oWebControl.JS_HideWnd();  // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
+        oWebControl.JS_Disconnect().then(function(){}, function() {});
+      }
+    }
+
     function hide(){
       oWebControl.JS_HideWnd();
     };
diff --git a/src/App.vue b/src/App.vue
index d9046c1..b8c5c1a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="app" v-resize="windowResize">
+  <div id="app" style="overflow-y: hidden" v-resize="windowResize">
     <router-view />
   </div>
 </template>
diff --git a/src/api/device.js b/src/api/device.js
index 0ba70ff..8d6c46b 100644
--- a/src/api/device.js
+++ b/src/api/device.js
@@ -159,3 +159,21 @@
     data
   })
 }
+
+export function getSwitchStatus(data) {
+  return request({
+    url: '/cockpit/gateLinkage/switchStatus',
+    method: 'get'
+  })
+}
+
+export function gateLinkageSwitch(controlSwitch) {
+  return request({
+    url: '/cockpit/gateLinkage/switch',
+    method: 'get',
+    params: {
+      controlSwitch
+    }
+  })
+}
+
diff --git a/src/api/person.js b/src/api/person.js
index 8a79c27..0c2a0ff 100644
--- a/src/api/person.js
+++ b/src/api/person.js
@@ -21,6 +21,14 @@
   })
 }
 
+export function getStaffOnList(params) {
+  return request({
+    url: '/cockpit/securityStaff/onList',
+    method: 'GET',
+    params
+  })
+}
+
 export function addStaff(data) {
   return request({
     url: 'staffInfo/add',
diff --git a/src/api/pop.js b/src/api/pop.js
index 01ddde7..6fa7381 100644
--- a/src/api/pop.js
+++ b/src/api/pop.js
@@ -72,6 +72,39 @@
   })
 }
 
+export function baoanStatistics() {
+  return request({
+    url: '/cockpit/securityStaff/statistics',
+    method: 'get',
+    data: {}
+  })
+}
+
+export function visitorStatistics() {
+  return request({
+    url: 'cockpit/visitor/statistics',
+    method: 'get',
+    data: {}
+  })
+}
+
+export function caseTodayStatistics() {
+  return request({
+    url: 'cockpit/case/todayStatistics',
+    method: 'get',
+    data: {}
+  })
+}
+
+export function casePieStatistics(params) {
+  return request({
+    url: 'cockpit/caseType/statisticsByTime',
+    method: 'get',
+    data: params,
+    params
+  })
+}
+
 // 安防事件频次因数组件
 export function securityFrequency() {
   return request({
@@ -158,3 +191,27 @@
     method: 'get'
   })
 }
+
+export function cameraTypeStatistics() {
+  return request({
+    url: '/cockpit/camera/typeStatistics',
+    method: 'get'
+  })
+}
+
+export function deviceStatistics(devType) {
+  return request({
+    url: '/cockpit/device/statistics',
+    method: 'post',
+    data: {
+      devType
+    }
+  })
+}
+
+export function buildPeopleNumber() {
+  return request({
+    url: '/cockpit/build/peopleNumber',
+    method: 'get'
+  })
+}
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index df71207..33d701a 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -280,37 +280,37 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  .table{
-    margin-bottom: 20px;
-  }
-  .pagination-container{
-    padding-bottom: 50px;
-  }
-  .table-title{
-    /*background-color:rgba(243, 243, 243, 1);*/
-    background-color:#fff;
-    .title-header{
-      font-size: 15px;
-      i{
-        margin-left: 10px;
-        margin-right: 5px;
-      }
-      i:focus{
-        outline: none;
-      }
+.table{
+  margin-bottom: 20px;
+}
+.pagination-container{
+  padding-bottom: 50px;
+}
+.table-title{
+  /*background-color:rgba(243, 243, 243, 1);*/
+  background-color:#fff;
+  .title-header{
+    font-size: 15px;
+    i{
+      margin-left: 10px;
+      margin-right: 5px;
+    }
+    i:focus{
+      outline: none;
     }
   }
-  .edit_btns{
-    padding-top:7px;
-    padding-right:3px;
-    text-align: right;
+}
+.edit_btns{
+  padding-top:7px;
+  padding-right:3px;
+  text-align: right;
+}
+.popper-div{
+  line-height: 1.5;
+  .popper-btns{
+    margin-top:10px;
   }
-  .popper-div{
-    line-height: 1.5;
-    .popper-btns{
-      margin-top:10px;
-    }
-  }
+}
 </style>
 
 <style>
diff --git a/src/router/modules/menu.js b/src/router/modules/menu.js
index 28ecc52..447517e 100644
--- a/src/router/modules/menu.js
+++ b/src/router/modules/menu.js
@@ -8,7 +8,7 @@
     redirect: '/loginBoard',
     meta: {
       title: '主页',
-      permission: ['/loginBoard'],
+      // permission: ['/loginBoard'],
       icon: '' // 图标
     },
     children: [
@@ -16,7 +16,7 @@
         path: '/loginBoard',
         name: 'LoginBoard',
         component: () => import('@/views/backstage/loginBoard'),
-        meta: { title: '主页', icon: '', permission: ['/loginBoard'] }
+        meta: { title: '主页', icon: '' }
       }
     ]
   },
diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss
index 0d1614b..f39542e 100644
--- a/src/styles/element-ui.scss
+++ b/src/styles/element-ui.scss
@@ -74,3 +74,6 @@
   height:48px;
   line-height:48px;
 }
+.el-time-panel {
+  margin-left: -20px !important;
+}
diff --git a/src/utils/request.js b/src/utils/request.js
index 02dcee1..a81c17f 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -39,19 +39,21 @@
     } else if (res.code !== 200) {
       // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
       if (res.code === 401 || res.code === 50012 || res.code === 50014) {
-        MessageBox.confirm(
-          '你已被登出，可以取消继续留在该页面，或者重新登录',
-          '确定登出',
-          {
-            confirmButtonText: '重新登录',
-            cancelButtonText: '取消',
-            type: 'warning'
-          }
-        ).then(() => {
-          store.dispatch('FedLogOut').then(() => {
-            location.reload() // 为了重新实例化vue-router对象 避免bug
+        if (!window.location.href.endsWith('right') && !window.location.href.endsWith('left') && !window.location.href.endsWith('bottom')) {
+          MessageBox.confirm(
+            '你已被登出，可以取消继续留在该页面，或者重新登录',
+            '确定登出',
+            {
+              confirmButtonText: '重新登录',
+              cancelButtonText: '取消',
+              type: 'warning'
+            }
+          ).then(() => {
+            store.dispatch('FedLogOut').then(() => {
+              location.reload() // 为了重新实例化vue-router对象 避免bug
+            })
           })
-        })
+        }
       } else {
         Message({
           showClose: true,
diff --git a/src/views/common/trailDialog.vue b/src/views/common/trailDialog.vue
index 04a83eb..fd90c34 100644
--- a/src/views/common/trailDialog.vue
+++ b/src/views/common/trailDialog.vue
@@ -52,6 +52,8 @@
         75: '75%'
       },
       listQuery: {
+        staffCode: '',
+        personName: '',
         facePicUrl: '',
         startTime: '',
         endTime: '',
@@ -81,11 +83,14 @@
   },
   methods: {
     // 初始化对话框
-    initDialog: function(picture = null, name) {
-      this.textMap = '轨迹追踪 — ' + name
+    initDialog: function(row) {
+      this.textMap = '轨迹追踪 — ' + row.staffName
+      this.list = []
       this.clearInput()
       this.dialogFormVisible = true
-      this.listQuery.facePicUrl = picture
+      this.listQuery.facePicUrl = row.picture
+      this.listQuery.staffCode = row.staffCode
+      this.listQuery.personName = row.staffName
       this.fetchData()
     },
     fetchData() {
diff --git a/src/views/person/staffList.vue b/src/views/person/staffList.vue
index ce8643e..95acc5c 100644
--- a/src/views/person/staffList.vue
+++ b/src/views/person/staffList.vue
@@ -332,7 +332,7 @@
     },
     trail(row) {
       this.dialogFormVisible1 = true
-      this.$refs.trailDialog.initDialog(row.picture, row.staffName)
+      this.$refs.trailDialog.initDialog(row)
     },
     // 打开详情对话框
     detail(row) {
diff --git a/src/views/popup/board.vue b/src/views/popup/board.vue
index eb229cc..0f47c22 100644
--- a/src/views/popup/board.vue
+++ b/src/views/popup/board.vue
@@ -4,7 +4,7 @@
       人员轨迹追踪
       <svg-icon v-if="list.length > 0" icon-class="pop-cross" class="close-icon" @click="close" />
     </div>
-    <el-form ref="ruleForm" :model="listQuery" :rules="rules" label-width="100px">
+    <el-form ref="ruleForm" :model="listQuery" :rules="rules" label-width="80px">
       <el-row :gutter="20">
         <el-col :span="12" class="form-item-person-info">
           <el-form-item label="人员信息" prop="personName" style="position:relative">
@@ -20,7 +20,8 @@
               size="small"
               placeholder="请输入人员姓名"
               :popper-append-to-body="false"
-              @change="handlePerson">
+              @change="handlePerson"
+            >
               <el-option
                 v-for="item in personNameList"
                 :key="item.staffCode"
@@ -41,7 +42,7 @@
               end-placeholder="终止时间"
               size="small"
               :clearable="false"
-              style="width:98%"
+              style="width:98%;"
             />
           </el-form-item>
         </el-col>
@@ -53,7 +54,7 @@
           </el-form-item>
         </el-col>
         <el-col :span="6">
-          <el-form-item label="最小相似度" prop="minSimilarity">
+          <el-form-item label="最小相似度" prop="minSimilarity" label-width="100px">
             <el-input v-model="listQuery.minSimilarity" size="small" placeholder="区间50-100" />
           </el-form-item>
         </el-col>
@@ -81,7 +82,7 @@
             <div class="title text-over">
               {{ child.positionName ? child.positionName : '' }}
             </div>
-            <div class="desc text-over" :title="child.devName">
+            <div class="desc text-over" :title="child.devName" style="white-space: normal;word-wrap: break-word;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2; ">
               {{ child.devName ? child.devName : '' }}
             </div>
             <div class="date" style="width:145px">
@@ -110,6 +111,7 @@
     return {
       selectLoading: false,
       personName: '',
+      staffCode: '',
       point: [],
       listQuery: {
         facePicUrl: '', // 图片url
@@ -260,6 +262,7 @@
       this.personNameList.map(item => {
         if (item.staffCode === person) {
           this.personName = item.personName
+          this.staffCode = item.staffCode
           // this.listQuery.personName = item.personName
           this.listQuery.facePicUrl = item.personPicture
           this.listQuery.gender = item.gender
@@ -299,7 +302,11 @@
         spinner: 'el-icon-loading',
         background: 'rgba(0, 0, 0, 0.7)'
       })
-      const postData = Object.assign(this.listQuery, { 'personName': this.personName })
+      const postData = Object.assign(this.listQuery,
+        {
+          'personName': this.personName,
+          'staffCode': this.staffCode
+        })
       console.log(postData)
       hikPic(postData).then(response => {
         loading.close()
@@ -325,6 +332,7 @@
       this.listQuery.minSimilarity = '50'
       this.listQuery.timeRange = ['', '']
       this.personName = ''
+      this.staffCode = ''
       this.list = []
     },
     // 轨迹上墙
@@ -359,299 +367,299 @@
   }
 }
 </script>
-
 <style rel="stylesheet/scss" lang="scss" scoped>
-  ::v-deep(.el-input__inner){
-    border:1px solid #40C3F1 !important;
-    background: transparent !important;
-    color:#fff !important;
+::v-deep(.el-input__inner){
+  border:1px solid #40C3F1 !important;
+  background: transparent !important;
+  color:#fff !important;
+}
+::v-deep(.el-range-input){
+  background: transparent !important;
+  color:#fff !important;
+}
+::v-deep(.el-form-item__label){
+  color:#f1f1f1 !important;
+  font-weight: 400 !important;
+}
+::v-deep(.el-range-separator){
+  color:#f1f1f1 !important;
+  font-weight: 400 !important;
+  color:#fff !important;
+}
+::v-deep(.el-select .el-select-dropdown__wrap) {
+  max-height: 350px !important;
+  overflow-y: auto !important;
+}
+
+.form-item-person-info:hover{
+  cursor: text !important;
+}
+.el-form-item__content:hover{
+  cursor: text !important;
+}
+::v-deep(.form-item-person-info .el-input__inner):hover{
+  cursor: text !important;
+}
+::-webkit-scrollbar {
+  z-index: 11;
+  width: 6px;
+}
+::-webkit-scrollbar-track,
+::-webkit-scrollbar-corner {
+  border-radius: 5px;
+  background: #fff;
+}
+::-webkit-scrollbar-thumb {
+  border-radius: 5px; // 滚动条
+  width: 6px;
+  background-color: #ccc;
+  :hover {
+    background-color: #ccc;
   }
-  ::v-deep(.el-range-input){
-    background: transparent !important;
-    color:#fff !important;
-  }
-  ::v-deep(.el-form-item__label){
-    color:#f1f1f1 !important;
-    font-weight: 400 !important;
-  }
-  ::v-deep(.el-range-separator){
-    color:#f1f1f1 !important;
-    font-weight: 400 !important;
-    color:#fff !important;
-  }
-  ::v-deep(.el-select .el-select-dropdown__wrap) {
-    max-height: 350px !important;
-    overflow-y: auto !important;
-  }
-  .form-item-person-info:hover{
-    cursor: text !important;
-  }
-  .el-form-item__content:hover{
-    cursor: text !important;
-  }
-  ::v-deep(.form-item-person-info .el-input__inner):hover{
-    cursor: text !important;
-  }
-  ::-webkit-scrollbar {
-      z-index: 11;
-      width: 6px;
-    }
-    ::-webkit-scrollbar-track,
-    ::-webkit-scrollbar-corner {
-      border-radius: 5px;
-      background: #fff;
-    }
-    ::-webkit-scrollbar-thumb {
-      border-radius: 5px; // 滚动条
-      width: 6px;
-      background-color: #ccc;
-      :hover {
-        background-color: #ccc;
-      }
-    }
-    ::-webkit-scrollbar-track-piece {
-      border-radius: 5px; // 轨道
-      background: #fff;
-      width: 6px;
-    }
-  .text-over{
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-  .wrap{
-    width:100%;
-    height: 100%;
-    background: #5F8EB9;
+}
+::-webkit-scrollbar-track-piece {
+  border-radius: 5px; // 轨道
+  background: #fff;
+  width: 6px;
+}
+.text-over{
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.wrap{
+  width:100%;
+  height: 100%;
+  background: #5F8EB9;
+  position: relative;
+  overflow: hidden;
+  .header{
     position: relative;
-    overflow: hidden;
-    .header{
+    width: 98%;
+    margin-left:20px;
+    border-top: 10px solid #5F8EB9;
+    border-bottom: 10px solid #5F8EB9;
+    padding:5px 0 5px 20px;
+    color:#f1f1f1;
+    background: #30486C;
+    font-size: 16px;
+  }
+}
+.el-select{
+  width: 100%;
+}
+.header::after{
+  content:"";
+  display: inline-block;
+  position: absolute;
+  top:0;
+  left: -8px;
+  width:4px;
+  height:100%;
+  background: #40C3F1;
+}
+.list-wrap{
+  width:100%;
+  // width:900px;
+  height: calc(100% - 175px); // 去除头部区域
+  overflow-y: auto;
+  .main{
+    width:99%;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    .row {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 40px;
+    }
+    .row:nth-child(2n) {
+      flex-direction: row-reverse;
+    }
+    .row:nth-child(2n):last-child .item {
+      margin-right: auto;
+    }
+    .list-item{
       position: relative;
-      width: 98%;
-      margin-left:20px;
-      border-top: 10px solid #5F8EB9;
-      border-bottom: 10px solid #5F8EB9;
-      padding:5px 0 5px 20px;
-      color:#f1f1f1;
-      background: #30486C;
-      font-size: 16px;
-    }
-  }
-  .el-select{
-    width: 100%;
-  }
-  .header::after{
-      content:"";
-      display: inline-block;
-      position: absolute;
-      top:0;
-      left: -8px;
-      width:4px;
-      height:100%;
-      background: #40C3F1;
-    }
-    .list-wrap{
-      width:100%;
-      // width:900px;
-      height: calc(100% - 175px); // 去除头部区域
-      overflow-y: auto;
-      .main{
-        width:99%;
-        margin: 0 auto;
-        display: flex;
-        flex-direction: column;
-        .row {
-          display: flex;
-          justify-content: space-between;
-          margin-bottom: 40px;
-        }
-        .row:nth-child(2n) {
-          flex-direction: row-reverse;
-        }
-        .row:nth-child(2n):last-child .item {
-          margin-right: auto;
-        }
-        .list-item{
-          position: relative;
-          width: 48%;
-          height: 240px;
-          background-image: url("../../assets/global_images/monitor.png");
-          background-repeat: no-repeat;
-          background-size: cover;
-          // background-size: 100% 100%;
-          // margin-left: 20px;
-          z-index: 10;
-          .img-wrap{
-            position: absolute;
-            left:35px;
-            top:40px;
-            width:238px;
-            height:138px;
-            overflow: hidden;
-            z-index: -1;
-          }
-          .title{
-            width:150px;
-            position: absolute;
-            left:42%;
-            top: 40px;
-            font-size: 20px;
-            color:#40C3F1;
-          }
-          .desc{
-            width:150px;
-            position: absolute;
-            left:42%;
-            top: 75px;
-            font-size: 16px;
-            color:#f1f1f1;
-          }
-          .date{
-            position: absolute;
-            left:50%;
-            transform: translateX(-50%);
-            bottom:70px;
-            font-size: 14px;
-            color:#c1c1c1;
-            margin-left:25px;
-          }
-          .date::after{
-            position: absolute;
-            top:0;
-            left:-20px;
-            content:"";
-            display: inline-block;
-            width: 15px;
-            height: 15px;
-            background-image: url("../../assets/global_images/date.png");
-            background-repeat: no-repeat;
-            background-size: cover;
-          }
-          .ratio{
-            // width:100px;
-            position: absolute;
-            left:50%;
-            transform: translateX(-50%);
-            bottom:40px;
-            font-size: 14px;
-            color:#c1c1c1;
-            // margin-left:18px;
-            margin-left: 25px;
-          }
-          .ratio::after{
-            position: absolute;
-            top:0;
-            left:-20px;
-            content:"";
-            display: inline-block;
-            width: 15px;
-            height: 15px;
-            background-image: url("../../assets/global_images/search.png");
-            background-repeat: no-repeat;
-            background-size: cover;
-          }
-        }
-      }
-    }
-    .main .row:nth-child(odd){
-      .list-item:nth-child(odd)::after{
-        content:"";
-        display: inline-block;
-        width:30px;
-        height: 30px;
+      width: 48%;
+      height: 240px;
+      background-image: url("../../assets/global_images/monitor.png");
+      background-repeat: no-repeat;
+      background-size: cover;
+      // background-size: 100% 100%;
+      // margin-left: 20px;
+      z-index: 10;
+      .img-wrap{
         position: absolute;
-        top:50%;
-        transform: translate(-50%);
-        right:-52px;
-        background-image: url("../../assets/global_images/right.png");
-        background-repeat: no-repeat;
-        background-size: cover;
+        left:35px;
+        top:40px;
+        width:238px;
+        height:138px;
+        overflow: hidden;
+        z-index: -1;
       }
-    }
-    .main .row:nth-child(odd){
-      .list-item:nth-child(even)::after{
-        content:"";
-        display: inline-block;
-        width:30px;
-        height: 30px;
+      .title{
+        width:150px;
         position: absolute;
-        right:50%;
-        transform: translate(-50%);
-        bottom:-35px;
-        background-image: url("../../assets/global_images/right.png");
-        background-repeat: no-repeat;
-        background-size: cover;
-        transform: rotate(90deg);
+        left:42%;
+        top: 40px;
+        font-size: 20px;
+        color:#40C3F1;
       }
-    }
-    .main .row:nth-child(even){
-      .list-item:nth-child(odd)::after{
-        content:"";
-        display: inline-block;
-        width:30px;
-        height: 30px;
+      .desc{
+        width:150px;
         position: absolute;
-        top:50%;
-        transform: translate(-50%);
-        left:-35px;
-        background-image: url("../../assets/global_images/right.png");
-        background-repeat: no-repeat;
-        background-size: cover;
-        transform: rotate(180deg);
+        left:42%;
+        top: 75px;
+        font-size: 16px;
+        color:#f1f1f1;
       }
-    }
-    .main .row:nth-child(even){
-      .list-item:nth-child(even)::after{
-        content:"";
-        display: inline-block;
-        width:30px;
-        height: 30px;
+      .date{
         position: absolute;
         left:50%;
-        transform: translate(-50%);
-        bottom:-35px;
-        background-image: url("../../assets/global_images/right.png");
+        transform: translateX(-50%);
+        bottom:70px;
+        font-size: 14px;
+        color:#c1c1c1;
+        margin-left:25px;
+      }
+      .date::after{
+        position: absolute;
+        top:0;
+        left:-20px;
+        content:"";
+        display: inline-block;
+        width: 15px;
+        height: 15px;
+        background-image: url("../../assets/global_images/date.png");
         background-repeat: no-repeat;
         background-size: cover;
-        transform: rotate(-270deg);
+      }
+      .ratio{
+        // width:100px;
+        position: absolute;
+        left:50%;
+        transform: translateX(-50%);
+        bottom:40px;
+        font-size: 14px;
+        color:#c1c1c1;
+        // margin-left:18px;
+        margin-left: 25px;
+      }
+      .ratio::after{
+        position: absolute;
+        top:0;
+        left:-20px;
+        content:"";
+        display: inline-block;
+        width: 15px;
+        height: 15px;
+        background-image: url("../../assets/global_images/search.png");
+        background-repeat: no-repeat;
+        background-size: cover;
       }
     }
-    // 如果是最后一个元素不显示箭头
-    .main .row:last-child{
-      .list-item:last-child::after{
-        display: none;
-      }
-    }
-    .list-wrap .main .list-item .img-wrap{
-      position: absolute;
-      left: 32px;
-      top: 40px;
-      // width: 190px;
-      width: 212px;
-      height: 138px;
-      overflow: hidden;
-      z-index: -1;
-    }
-    .list-wrap .main .list-item .date{
-      left:75% !important;
-      margin-bottom: 20px;
-    }
-    .list-wrap .main .list-item .ratio{
-      left:75% !important;
-    }
-    .list-wrap .main .list-item .title,.list-wrap .main .list-item .desc{
-      left:62% !important;
-    }
-    .close-icon{
-      z-index: 100;
-      position: absolute;
-      top:2px;
-      right:2px;
-      color:white;
-      background: #fc2323cc;
-      width:25px;
-      height:25px;
-      border-radius: 5px;
-      padding:3px;
-    }
+  }
+}
+.main .row:nth-child(odd){
+  .list-item:nth-child(odd)::after{
+    content:"";
+    display: inline-block;
+    width:30px;
+    height: 30px;
+    position: absolute;
+    top:50%;
+    transform: translate(-50%);
+    right:-52px;
+    background-image: url("../../assets/global_images/right.png");
+    background-repeat: no-repeat;
+    background-size: cover;
+  }
+}
+.main .row:nth-child(odd){
+  .list-item:nth-child(even)::after{
+    content:"";
+    display: inline-block;
+    width:30px;
+    height: 30px;
+    position: absolute;
+    right:50%;
+    transform: translate(-50%);
+    bottom:-35px;
+    background-image: url("../../assets/global_images/right.png");
+    background-repeat: no-repeat;
+    background-size: cover;
+    transform: rotate(90deg);
+  }
+}
+.main .row:nth-child(even){
+  .list-item:nth-child(odd)::after{
+    content:"";
+    display: inline-block;
+    width:30px;
+    height: 30px;
+    position: absolute;
+    top:50%;
+    transform: translate(-50%);
+    left:-35px;
+    background-image: url("../../assets/global_images/right.png");
+    background-repeat: no-repeat;
+    background-size: cover;
+    transform: rotate(180deg);
+  }
+}
+.main .row:nth-child(even){
+  .list-item:nth-child(even)::after{
+    content:"";
+    display: inline-block;
+    width:30px;
+    height: 30px;
+    position: absolute;
+    left:50%;
+    transform: translate(-50%);
+    bottom:-35px;
+    background-image: url("../../assets/global_images/right.png");
+    background-repeat: no-repeat;
+    background-size: cover;
+    transform: rotate(-270deg);
+  }
+}
+// 如果是最后一个元素不显示箭头
+.main .row:last-child{
+  .list-item:last-child::after{
+    display: none;
+  }
+}
+.list-wrap .main .list-item .img-wrap{
+  position: absolute;
+  left: 32px;
+  top: 40px;
+  // width: 190px;
+  width: 212px;
+  height: 138px;
+  overflow: hidden;
+  z-index: -1;
+}
+.list-wrap .main .list-item .date{
+  left:75% !important;
+  margin-bottom: 20px;
+}
+.list-wrap .main .list-item .ratio{
+  left:75% !important;
+}
+.list-wrap .main .list-item .title,.list-wrap .main .list-item .desc{
+  left:62% !important;
+}
+.close-icon{
+  z-index: 100;
+  position: absolute;
+  top:2px;
+  right:2px;
+  color:white;
+  background: #fc2323cc;
+  width:25px;
+  height:25px;
+  border-radius: 5px;
+  padding:3px;
+}
 </style>
diff --git a/src/views/popup/bottom.vue b/src/views/popup/bottom.vue
index e3fe7e2..c95b2a1 100644
--- a/src/views/popup/bottom.vue
+++ b/src/views/popup/bottom.vue
@@ -1,47 +1,84 @@
 <template>
   <div class="bottom">
-    <div class="block1">
-      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">访客控制安全系数组件</div>
-      <visit-bar style="flex:1;"/>
-    </div>
+<!--    <div class="block1" style="border-top-left-radius: 0px;margin-left: 5px">-->
+<!--      <inout-list style="flex:1;"/>-->
+<!--    </div>-->
     <div class="block">
       <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安防事件列表</div>
       <case-table style="flex:1;"/>
     </div>
-    <div class="block">
-      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">其他相关安全系数指标组件</div>
-      <other-line style="flex:1;"/>
+    <div class="block1" style="flex-direction: row;width: 700px">
+      <div style="width: 200px">
+        <div class="item0" style="margin: 36px 0">
+          <el-image :src="require('@/assets/popup/事件.png')" class="base-map-image" mode="fill" />
+          <div class="item-text">
+            <div class="num">{{caseNum.all}}<span class="unit"> 件</span></div>
+            <div style="color: #B3F3F6;">今日总事件</div>
+          </div>
+        </div>
+        <div class="item0">
+          <el-image :src="require('@/assets/popup/事件1.png')" class="base-map-image" mode="fill" />
+          <div class="item-text">
+            <div class="num"><span style="color: #08f102;text-shadow: 0 0 5px #08f102;">{{caseNum.solve}}</span><span class="unit"> 件</span></div>
+            <div style="color: #B3F3F6;">今日已解决</div>
+          </div>
+        </div>
+      </div>
+      <case-pie style="width: calc(100% - 200px);height: 100%"/>
     </div>
-    <div class="block1">
-      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安保人员到岗系数组件</div>
-      <staff-bar1 style="flex:1;"/>
+    <div class="block">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安防事件频率统计</div>
+      <case-bar style="flex:1;"/>
     </div>
   </div>
 </template>
 
 <script>
-// import VisitorPie from "@/views/popup/components/visitorPie";
-import VisitBar from '@/views/popup/components/visitBar';
-import StaffBar1 from '@/views/popup/components/staffBar1';
-import CaseTable from '@/views/popup/components/caseTable';
-// import ReqairTable from "@/views/popup/components/reqairTable";
-import OtherLine from '@/views/popup/components/otherLine';
+
+import CaseTable from '@/views/popup/components/caseTable'
+import CasePie from '@/views/popup/components/casePie'
+import { caseTodayStatistics } from '@/api/pop'
+import CaseBar from '@/views/popup/components/caseBar'
+import InoutList from '@/views/popup/components/inoutList'
 
 export default {
   name: 'Bottom',
-  components: { OtherLine, CaseTable, StaffBar1, VisitBar },
+  components: { InoutList, CaseBar, CasePie, CaseTable },
   data() {
     return {
+      timer: null,
       titleImg: require('@/assets/popup/title.png'), // 背景图片
-      titleAll: require('@/assets/popup/title-all.png'),// 背景图片
-      list: [2156, 2144, 455, 314, 98]
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      list: [2156, 2144, 455, 314, 98],
+      caseNum: {
+        all: 0,
+        solve: 0
+      }
     }
   },
+  mounted() {
+    clearInterval(this.timer)
+    this.search()
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+    this.timer = null
+  },
+  methods: {
+    search() {
+      this.timer = setInterval(() => {
+        caseTodayStatistics().then(response => {
+          if (response.code === 200) {
+            this.caseNum = response.data
+          }
+        })
+      }, 10000)
+    }
+  }
 }
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-
 .bottom{
   width: 100%;
   height: 220px;
@@ -57,11 +94,11 @@
     border-radius: 5px;
     box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
     border-color: rgba(0, 0, 0, .05);
-    margin: 0px 10px;
+    margin: 0px 5px;
     flex-direction: column;
   }
   .block1{
-    width: 500px;
+    width: 750px;
     height: 100%;
     display: flex;
     flex-wrap: wrap;
@@ -69,7 +106,7 @@
     border-radius: 5px;
     box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
     border-color: rgba(0, 0, 0, .05);
-    margin: 0px 10px;
+    margin: 0px 5px;
     flex-direction: column;
   }
   .title{
@@ -93,5 +130,31 @@
     font-size: 15px;
 
   }
+  .item0{
+    width: 100%;
+    height: 50px;
+    display: flex;
+    justify-content: left;
+    align-items: center;
+    padding: 0 8%;
+  }
+  .item-text{
+    text-shadow: 0 0 2px #d1ffff;
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 18px;
+  }
+  .num{
+    text-shadow: 0 0 5px #ffb441;
+    color: #ffb441;
+    font-size: 20px;
+    padding-top: 2px;
+  }
+  .unit{
+    color: #B3F3F6;
+    font-size: 14px;
+    margin-left: 1px;
+  }
 }
 </style>
diff --git a/src/views/popup/components/caseTable.vue b/src/views/popup/components/caseTable.vue
index 95aa677..c9708d7 100644
--- a/src/views/popup/components/caseTable.vue
+++ b/src/views/popup/components/caseTable.vue
@@ -1,5 +1,9 @@
 <template>
   <div class="flowTable">
+<!--    <el-tabs v-model="activeName" @tab-click="changeTime" style="display: flex;position:absolute;right: 30px;top:5px">-->
+<!--      <el-tab-pane label="已解决" name="week"/>-->
+<!--      <el-tab-pane label="未解决" name="month"/>-->
+<!--    </el-tabs>-->
     <div class="success_info_body" v-show="showFlag">
       <!-- 参数名称、列数根据实际情况调整 -->
       <div class="table_body">
@@ -14,7 +18,7 @@
         <div class="table_main_body">
           <div class="table_inner_body" :style="{top: tableTop + 'px'}">
             <div v-for="(item,index) in tableList" class="table_tr" :class="checkCell(item,index)" :key="index" @click="JumpDevice(item)">
-              <div class="tr1 tr">{{item.levelName}}</div>
+              <div class="tr1 tr" :style="{color: item.levelName ==='重大' ? 'red' : item.levelName ==='较大' ? 'orange' : '#b8dffd'}">{{item.levelName}}</div>
               <div class="tr2 tr">{{item.description}}</div>
               <div class="tr1 tr">{{item.statusName}}</div>
               <div class="tr2 tr">{{item.typeName}}</div>
@@ -41,7 +45,7 @@
   data() {
     return {
       picurl: '',
-      defaultPhoto: require('@/assets/global_images/photo_error.png'),
+      defaultPhoto: require('@/assets/global_images/photo_offline.png'),
       errorImg: require('@/assets/global_images/photo_error.png'),
       showFlag: true,
       tableTimer: null,
@@ -104,8 +108,9 @@
       this.picurl = ''
       this.isbig = false
       getCaseListPage({
+        status: '',
         offset: 1,
-        limit: 15
+        limit: 20
       }).then(response => {
         if (response.code === 200) {
           this.tableList = response.data.rows
@@ -190,13 +195,18 @@
   line-height: 15px;
 }
 .tr {
-  overflow: hidden;
   text-overflow: ellipsis;
-  white-space: nowrap;
   box-sizing: border-box;
   padding: 0 5px;
   text-align: center;
   font-size: 13px;
+  word-wrap: break-word; /* 允许在单词内换行 */
+  overflow-wrap: break-word; /* 同上，现代浏览器推荐使用 */
+  white-space: normal; /* 允许自动换行 */
+  line-height: 15px;
+  display: flex;
+  align-items: center; /* 垂直居中 */
+  justify-content: center; /* 水平居中，如需要 */
 }
 .tr1 {
   width: 13%;
@@ -253,7 +263,7 @@
   }
 }
 .hard-state{
-  background:red;
+  background: #ff8585;
 }
 .medium-state{
   background: #ea9700;
diff --git a/src/views/popup/components/doorList.vue b/src/views/popup/components/doorList.vue
new file mode 100644
index 0000000..7bc178a
--- /dev/null
+++ b/src/views/popup/components/doorList.vue
@@ -0,0 +1,257 @@
+<template>
+  <div style="width: 100%;height: 100%;">
+    <div style="text-align: right;margin-right: 5px;">
+      <el-button class="doorbar-btn" type="primary" plain @click="isOn1 = !isOn1" style="margin-left: 3px">{{isOn1 ? '隐藏操作按钮': '开启操作按钮'}}</el-button>
+      <el-button class="doorbar-btn" type="primary" plain @click="controlDool()">{{!isOn2 ? '开启黑名单与闸机联动': '关闭黑名单与闸机联动'}}</el-button>
+    </div>
+    <div class="success_info_body" style="margin: 0 10px;flex: 1">
+      <div class="table_body">
+        <div class="table_th">
+          <div class="tr4 th_style">门禁分组</div>
+          <div class="tr1 th_style" v-show="isOn1">操作</div>
+        </div>
+        <div class="table_main_body">
+          <div class="table_inner_body" :style="{top: tableTop + 'px'}">
+            <div v-for="(item,index) in tableList" class="table_tr" :key="index">
+              <div class="tr4 tr">{{item.groupName}}</div>
+              <div class="tr1 tr" v-show="isOn1">
+                <el-button type="text" v-for="item in statusList" :key="item.value" size="small" @click.stop="editStatus(scope.row, item.value)" style="height: 20px;margin-top: -10px">
+                  {{ item.name }}
+                </el-button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+<!--    <el-pagination layout="prev, pager, next" :total="tableListSize" style="width: 100%;text-align: center" @current-change="handleCurrentChange"/>-->
+  </div>
+</template>
+
+<script>
+import {controlGroup, gateLinkageSwitch, getGroupListPage, getSwitchStatus} from '@/api/device'
+export default {
+  name: 'DoorList',
+  data() {
+    return {
+      defaultPhoto: require('@/assets/global_images/photo.png'),
+      errorImg: require('@/assets/global_images/photo_error.png'),
+      isOn1: false,
+      isOn2: false,
+      tableTimer: null,
+      tableTop: 0,
+      tableList: [],
+      statusList: [
+        { name: '常开', id: '1557975745699823618', value: '0' },
+        { name: '常闭', id: '1557975746215723010', value: '3' },
+        { name: '门开', id: '1557975746723233793', value: '2' },
+        { name: '门闭', id: '1557975747402711041', value: '1' }
+      ],
+      tableListSize: 0,
+      componentTimer: null,
+      visibleSize: 8, // 容器内可视最大完整行数
+      lineHeight: 20, // 每行的实际高度（包含margin-top/bottom,border等）
+      componentTimerInterval: 3600000, //  刷新数据的时间间隔
+      tableTimerInterval: 50, //  向上滚动 1px 所需要的时间，越小越快，推荐值 100
+      listQuery: {
+        groupName: '',
+        gateCode: '',
+        status: '',
+        offset: 1,
+        limit: 8
+      }, // 筛选条件
+      dialogFormVisible: false, // 是否显示编辑框
+      timeRange: [], // 时间范围
+      multipleSelection: [], // 多选选中项
+      list: [], // 列表数据
+      colorRow: {
+        isColor: false,
+        isPop: true
+      },
+      inoutTypeList: [],
+      passWayList: [],
+      total: 0, // 数据总数
+      listLoading: true // 列表加载动画
+    }
+  },
+  created() {
+    getSwitchStatus().then(response => {
+      if (response.code === 200) {
+        this.isOn2 = response.data === 1
+      }
+    })
+    this.fetchData()
+  },
+  methods: {
+    controlDool() {
+      this.isOn2 = !this.isOn2
+      gateLinkageSwitch(this.isOn2 ? 1 : 0).then(response => {
+        if (response.code === 200) {
+          this.$message.success((this.isOn2 ? '开启' : '关闭') + '黑名单与闸机联动成功')
+        }
+      })
+    },
+    fetchData(isNowPage = true) {
+      if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+        this.listQuery.offset = 1
+      }
+      getGroupListPage(this.listQuery).then(response => {
+        if (response.code === 200) {
+          this.tableList = response.data.rows
+          this.tableListSize = parseInt(response.data.total)
+        }
+      })
+    },
+    editStatus(row, status) {
+      controlGroup(row.id, status).then(response => {
+        if (response.code === 200) {
+          this.$message.success('通道控制成功')
+          this.fetchData()
+        }
+      }).catch(_ => { // 异常情况，loading置为false
+      })
+    },
+    handleCurrentChange(val) {
+      this.listQuery.offset = val
+      this.fetchData()
+    },
+    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.doorbar-btn {
+  height: 22px;
+  padding-top: 4px;
+  padding-right: 6px;
+  padding-left: 6px;
+  margin-right: 4px;
+}
+.table_body {
+  width: 100%;
+  margin-top: 0px;
+}
+.table_th {
+  width: 100%;
+  display: flex;
+  height: 15px;
+  line-height: 20px;
+}
+.tr {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 0 5px;
+  text-align: center;
+  font-size: 13px;
+  height: 20px !important;
+}
+.tr1 {
+  width: 35%;
+}
+.tr2 {
+  width: 18%;
+}
+.tr3 {
+  width: 15%;
+  font-size: 13px;
+}
+
+.tr4 {
+  flex: 1;
+}
+.tr5 {
+  width: 100px;
+}
+
+.th_style {
+  color: #b8dffd;
+  font-size: 13px;
+  font-weight: bold;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  box-sizing: border-box;
+  text-align: center;
+}
+.table_main_body {
+  width: 100%;
+  height: 175px;
+  overflow: hidden;
+  position: relative;
+  margin-top: 5px;
+}
+.table_inner_body {
+  width: 100%;
+  position: absolute;
+  left: 0;
+  color: #cce9ff;
+}
+
+.table_tr {
+  display: flex;
+  font-size: 13px;
+  border: 1px solid rgb(71, 160, 199);
+  margin-top: 2px;
+  height: 20px;
+  line-height: 20px;
+  cursor: pointer;
+:hover{
+  background: rgba(255, 153, 51, 0.6);
+}
+}
+.table_tr0 {
+  background: rgba(3, 145, 167, 0.1);
+}
+.table_tr1 {
+  background: rgb(64, 87, 120);
+}
+
+::v-deep .el-pagination {
+  .el-pagination__total {
+    color: white !important;
+  }
+  .el-pagination__jump {
+    color: white !important;
+  }
+  // 两个输入框
+  .el-input__inner {
+    background-color: #092546;
+    border: 1px solid rgba(192, 192, 192, 0.479);
+    color: white !important;
+  }
+  // 左右按键和里面的图标
+  button {
+    background-color: #092546;
+    .el-icon::before {
+      color: white;
+    }
+  }
+  // 分页数字
+  ul {
+    color: white;
+    .el-icon::before {
+      color: white !important;
+    }
+  }
+  // 分页数字的背景色
+  ul > li {
+    background-color: #092546;
+  }
+}
+::v-deep .el-loading-mask {
+  background-color: rgba(0, 0, 0, 0.479);
+}
+
+</style>
diff --git a/src/views/popup/components/personTable.vue b/src/views/popup/components/personTable.vue
index e2e4c1e..ca73933 100644
--- a/src/views/popup/components/personTable.vue
+++ b/src/views/popup/components/personTable.vue
@@ -7,15 +7,17 @@
           <div class="tr4 th_style">安保人员姓名</div>
           <div class="tr4 th_style">性别</div>
           <div class="tr4 th_style">照片</div>
+          <div class="tr4 th_style">状态</div>
         </div>
         <div class="table_main_body">
           <div class="table_inner_body" :style="{top: tableTop + 'px'}">
-            <div v-for="(item,index) in tableList" :class="index%2==1?'table_tr':'table_tr1'" :key="index" @click="JumpDevice(item)">
+            <div v-for="(item,index) in tableList" :class="index % 2==1?'table_tr':'table_tr1'" :key="index" @click="JumpDevice(item)">
               <div class="tr4 tr">{{item.staffName}}</div>
               <div class="tr4 tr">{{item.staffGenderName}}</div>
               <div class="tr4 tr">
                 <img :src="item.picture ? `${item.picture}`: defaultPhoto" width="40px" height="40px" style="margin-left: 5px" @error="errorImg">
               </div>
+              <div class="tr4 tr">{{item.statusName}}</div>
             </div>
           </div>
         </div>
@@ -25,7 +27,7 @@
 </template>
 <script>
 
-import { getStaffListPage, hikPic } from '@/api/person'
+import {getStaffListPage, getStaffOnList, hikPic} from '@/api/person'
 import { repostSocket } from '@/api/common';
 import { getDate } from '@/utils/calendarUtil'
 
@@ -43,7 +45,7 @@
       tableList: [],
       tableListSize: 0,
       componentTimer: null,
-      visibleSize: 5, // 容器内可视最大完整行数
+      visibleSize: 8, // 容器内可视最大完整行数
       lineHeight: 45, // 每行的实际高度（包含margin-top/bottom,border等）
       componentTimerInterval: 3600000, //  刷新数据的时间间隔
       tableTimerInterval: 50 //  向上滚动 1px 所需要的时间，越小越快，推荐值 100
@@ -51,7 +53,7 @@
   },
 
   // 如果没有父元素传值，将watch内的内容搬至mounted中即可
-  props: ["activeFactoryId"],
+  props: ['activeFactoryId'],
   watch: {
     activeFactoryId(val, oldVal) {
       clearInterval(this.componentTimer)
@@ -70,6 +72,8 @@
   methods: {
     JumpDevice(item) {
       const params = {
+        personName: item.staffName,
+        staffCode: item.staffCode,
         facePicUrl: item.picture, // 图片url
         startTime: getDate(-31, 'SECOND'), // 开始时间
         endTime: getDate(0, 'SECOND'), // 结束时间
@@ -94,51 +98,32 @@
         message: this.wallList
       }
       repostSocket(params).then(response => {
-        if (response.code === 200) {
-        }
+        if (response.code === 200) {}
       })
     },
     fetchData() {
       const params = {
-        staffType: '2',
+        // staffType: '2',
         offset: 1,
-        limit: 50,
-        keywords: '',
-        cardNum: '',
-        phone: ''
+        limit: 200
       }
-      getStaffListPage(params).then(response => {
+      getStaffOnList(params).then(response => {
         if (response.code === 200) {
           this.tableList = response.data.rows
+          // this.tableListSize = response.data.total
           this.tableActionFun()
         }
       })
-      // this.tableList = [
-      //   {
-      //     id: '',
-      //     drawNo: 'YQ-001',
-      //     levelName: '一般',
-      //     description: '保安脱岗',
-      //     status: '0',
-      //     statusName: '未解决',
-      //     typeName: '临时事件',
-      //     devName: '视频监控摄像机5',
-      //     positionName: '一期主楼',
-      //     areaName: '3F',
-      //     isKeyAreaName: '否',
-      //     detailLocation: '详细位置',
-      //     happenTime: '2022-05-06 21:55:00'
-      //   }
-      // ]
     },
     tableActionFun() {
       this.tableListSize = this.tableList.length
       if (this.tableListSize > this.visibleSize) {
         this.tableList = this.tableList.concat(this.tableList)
         this.tableTimerFun()
-      } else {
-        this.fillTableList()
       }
+      // else {
+      //   this.fillTableList()
+      // }
     },
     //  当数据过少时，不触发自动轮播事件，并填充没有数据的行，参数根据实际情况修改即可
     fillTableList() {
@@ -230,7 +215,7 @@
 }
 .table_main_body {
   width: 100%;
-  height: 200px;
+  height: calc(40vh - 140px);
   overflow: hidden;
   position: relative;
   margin-top: 5px;

diff --git a/public/static/webCtrl/hk/demo_embedded_for_iframe.html b/public/static/webCtrl/hk/demo_embedded_for_iframe.html
index 3a0be10..5c18f74 100644
--- a/public/static/webCtrl/hk/demo_embedded_for_iframe.html
+++ b/public/static/webCtrl/hk/demo_embedded_for_iframe.html
@@ -107,6 +107,13 @@
         }
     });
 
+    function destoryPlugin() {
+      if (oWebControl != null){
+        oWebControl.JS_HideWnd();  // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
+        oWebControl.JS_Disconnect().then(function(){}, function() {});
+      }
+    }
+
     function hide(){
       oWebControl.JS_HideWnd();
     };
diff --git a/src/App.vue b/src/App.vue
index d9046c1..b8c5c1a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="app" v-resize="windowResize">
+  <div id="app" style="overflow-y: hidden" v-resize="windowResize">
     <router-view />
   </div>
 </template>
diff --git a/src/api/device.js b/src/api/device.js
index 0ba70ff..8d6c46b 100644
--- a/src/api/device.js
+++ b/src/api/device.js
@@ -159,3 +159,21 @@
     data
   })
 }
+
+export function getSwitchStatus(data) {
+  return request({
+    url: '/cockpit/gateLinkage/switchStatus',
+    method: 'get'
+  })
+}
+
+export function gateLinkageSwitch(controlSwitch) {
+  return request({
+    url: '/cockpit/gateLinkage/switch',
+    method: 'get',
+    params: {
+      controlSwitch
+    }
+  })
+}
+
diff --git a/src/api/person.js b/src/api/person.js
index 8a79c27..0c2a0ff 100644
--- a/src/api/person.js
+++ b/src/api/person.js
@@ -21,6 +21,14 @@
   })
 }
 
+export function getStaffOnList(params) {
+  return request({
+    url: '/cockpit/securityStaff/onList',
+    method: 'GET',
+    params
+  })
+}
+
 export function addStaff(data) {
   return request({
     url: 'staffInfo/add',
diff --git a/src/api/pop.js b/src/api/pop.js
index 01ddde7..6fa7381 100644
--- a/src/api/pop.js
+++ b/src/api/pop.js
@@ -72,6 +72,39 @@
   })
 }
 
+export function baoanStatistics() {
+  return request({
+    url: '/cockpit/securityStaff/statistics',
+    method: 'get',
+    data: {}
+  })
+}
+
+export function visitorStatistics() {
+  return request({
+    url: 'cockpit/visitor/statistics',
+    method: 'get',
+    data: {}
+  })
+}
+
+export function caseTodayStatistics() {
+  return request({
+    url: 'cockpit/case/todayStatistics',
+    method: 'get',
+    data: {}
+  })
+}
+
+export function casePieStatistics(params) {
+  return request({
+    url: 'cockpit/caseType/statisticsByTime',
+    method: 'get',
+    data: params,
+    params
+  })
+}
+
 // 安防事件频次因数组件
 export function securityFrequency() {
   return request({
@@ -158,3 +191,27 @@
     method: 'get'
   })
 }
+
+export function cameraTypeStatistics() {
+  return request({
+    url: '/cockpit/camera/typeStatistics',
+    method: 'get'
+  })
+}
+
+export function deviceStatistics(devType) {
+  return request({
+    url: '/cockpit/device/statistics',
+    method: 'post',
+    data: {
+      devType
+    }
+  })
+}
+
+export function buildPeopleNumber() {
+  return request({
+    url: '/cockpit/build/peopleNumber',
+    method: 'get'
+  })
+}
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index df71207..33d701a 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -280,37 +280,37 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  .table{
-    margin-bottom: 20px;
-  }
-  .pagination-container{
-    padding-bottom: 50px;
-  }
-  .table-title{
-    /*background-color:rgba(243, 243, 243, 1);*/
-    background-color:#fff;
-    .title-header{
-      font-size: 15px;
-      i{
-        margin-left: 10px;
-        margin-right: 5px;
-      }
-      i:focus{
-        outline: none;
-      }
+.table{
+  margin-bottom: 20px;
+}
+.pagination-container{
+  padding-bottom: 50px;
+}
+.table-title{
+  /*background-color:rgba(243, 243, 243, 1);*/
+  background-color:#fff;
+  .title-header{
+    font-size: 15px;
+    i{
+      margin-left: 10px;
+      margin-right: 5px;
+    }
+    i:focus{
+      outline: none;
     }
   }
-  .edit_btns{
-    padding-top:7px;
-    padding-right:3px;
-    text-align: right;
+}
+.edit_btns{
+  padding-top:7px;
+  padding-right:3px;
+  text-align: right;
+}
+.popper-div{
+  line-height: 1.5;
+  .popper-btns{
+    margin-top:10px;
   }
-  .popper-div{
-    line-height: 1.5;
-    .popper-btns{
-      margin-top:10px;
-    }
-  }
+}
 </style>
 
 <style>
diff --git a/src/router/modules/menu.js b/src/router/modules/menu.js
index 28ecc52..447517e 100644
--- a/src/router/modules/menu.js
+++ b/src/router/modules/menu.js
@@ -8,7 +8,7 @@
     redirect: '/loginBoard',
     meta: {
       title: '主页',
-      permission: ['/loginBoard'],
+      // permission: ['/loginBoard'],
       icon: '' // 图标
     },
     children: [
@@ -16,7 +16,7 @@
         path: '/loginBoard',
         name: 'LoginBoard',
         component: () => import('@/views/backstage/loginBoard'),
-        meta: { title: '主页', icon: '', permission: ['/loginBoard'] }
+        meta: { title: '主页', icon: '' }
       }
     ]
   },
diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss
index 0d1614b..f39542e 100644
--- a/src/styles/element-ui.scss
+++ b/src/styles/element-ui.scss
@@ -74,3 +74,6 @@
   height:48px;
   line-height:48px;
 }
+.el-time-panel {
+  margin-left: -20px !important;
+}
diff --git a/src/utils/request.js b/src/utils/request.js
index 02dcee1..a81c17f 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -39,19 +39,21 @@
     } else if (res.code !== 200) {
       // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
       if (res.code === 401 || res.code === 50012 || res.code === 50014) {
-        MessageBox.confirm(
-          '你已被登出，可以取消继续留在该页面，或者重新登录',
-          '确定登出',
-          {
-            confirmButtonText: '重新登录',
-            cancelButtonText: '取消',
-            type: 'warning'
-          }
-        ).then(() => {
-          store.dispatch('FedLogOut').then(() => {
-            location.reload() // 为了重新实例化vue-router对象 避免bug
+        if (!window.location.href.endsWith('right') && !window.location.href.endsWith('left') && !window.location.href.endsWith('bottom')) {
+          MessageBox.confirm(
+            '你已被登出，可以取消继续留在该页面，或者重新登录',
+            '确定登出',
+            {
+              confirmButtonText: '重新登录',
+              cancelButtonText: '取消',
+              type: 'warning'
+            }
+          ).then(() => {
+            store.dispatch('FedLogOut').then(() => {
+              location.reload() // 为了重新实例化vue-router对象 避免bug
+            })
           })
-        })
+        }
       } else {
         Message({
           showClose: true,
diff --git a/src/views/common/trailDialog.vue b/src/views/common/trailDialog.vue
index 04a83eb..fd90c34 100644
--- a/src/views/common/trailDialog.vue
+++ b/src/views/common/trailDialog.vue
@@ -52,6 +52,8 @@
         75: '75%'
       },
       listQuery: {
+        staffCode: '',
+        personName: '',
         facePicUrl: '',
         startTime: '',
         endTime: '',
@@ -81,11 +83,14 @@
   },
   methods: {
     // 初始化对话框
-    initDialog: function(picture = null, name) {
-      this.textMap = '轨迹追踪 — ' + name
+    initDialog: function(row) {
+      this.textMap = '轨迹追踪 — ' + row.staffName
+      this.list = []
       this.clearInput()
       this.dialogFormVisible = true
-      this.listQuery.facePicUrl = picture
+      this.listQuery.facePicUrl = row.picture
+      this.listQuery.staffCode = row.staffCode
+      this.listQuery.personName = row.staffName
       this.fetchData()
     },
     fetchData() {
diff --git a/src/views/person/staffList.vue b/src/views/person/staffList.vue
index ce8643e..95acc5c 100644
--- a/src/views/person/staffList.vue
+++ b/src/views/person/staffList.vue
@@ -332,7 +332,7 @@
     },
     trail(row) {
       this.dialogFormVisible1 = true
-      this.$refs.trailDialog.initDialog(row.picture, row.staffName)
+      this.$refs.trailDialog.initDialog(row)
     },
     // 打开详情对话框
     detail(row) {
diff --git a/src/views/popup/board.vue b/src/views/popup/board.vue
index eb229cc..0f47c22 100644
--- a/src/views/popup/board.vue
+++ b/src/views/popup/board.vue
@@ -4,7 +4,7 @@
       人员轨迹追踪
       <svg-icon v-if="list.length > 0" icon-class="pop-cross" class="close-icon" @click="close" />
     </div>
-    <el-form ref="ruleForm" :model="listQuery" :rules="rules" label-width="100px">
+    <el-form ref="ruleForm" :model="listQuery" :rules="rules" label-width="80px">
       <el-row :gutter="20">
         <el-col :span="12" class="form-item-person-info">
           <el-form-item label="人员信息" prop="personName" style="position:relative">
@@ -20,7 +20,8 @@
               size="small"
               placeholder="请输入人员姓名"
               :popper-append-to-body="false"
-              @change="handlePerson">
+              @change="handlePerson"
+            >
               <el-option
                 v-for="item in personNameList"
                 :key="item.staffCode"
@@ -41,7 +42,7 @@
               end-placeholder="终止时间"
               size="small"
               :clearable="false"
-              style="width:98%"
+              style="width:98%;"
             />
           </el-form-item>
         </el-col>
@@ -53,7 +54,7 @@
           </el-form-item>
         </el-col>
         <el-col :span="6">
-          <el-form-item label="最小相似度" prop="minSimilarity">
+          <el-form-item label="最小相似度" prop="minSimilarity" label-width="100px">
             <el-input v-model="listQuery.minSimilarity" size="small" placeholder="区间50-100" />
           </el-form-item>
         </el-col>
@@ -81,7 +82,7 @@
             <div class="title text-over">
               {{ child.positionName ? child.positionName : '' }}
             </div>
-            <div class="desc text-over" :title="child.devName">
+            <div class="desc text-over" :title="child.devName" style="white-space: normal;word-wrap: break-word;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2; ">
               {{ child.devName ? child.devName : '' }}
             </div>
             <div class="date" style="width:145px">
@@ -110,6 +111,7 @@
     return {
       selectLoading: false,
       personName: '',
+      staffCode: '',
       point: [],
       listQuery: {
         facePicUrl: '', // 图片url
@@ -260,6 +262,7 @@
       this.personNameList.map(item => {
         if (item.staffCode === person) {
           this.personName = item.personName
+          this.staffCode = item.staffCode
           // this.listQuery.personName = item.personName
           this.listQuery.facePicUrl = item.personPicture
           this.listQuery.gender = item.gender
@@ -299,7 +302,11 @@
         spinner: 'el-icon-loading',
         background: 'rgba(0, 0, 0, 0.7)'
       })
-      const postData = Object.assign(this.listQuery, { 'personName': this.personName })
+      const postData = Object.assign(this.listQuery,
+        {
+          'personName': this.personName,
+          'staffCode': this.staffCode
+        })
       console.log(postData)
       hikPic(postData).then(response => {
         loading.close()
@@ -325,6 +332,7 @@
       this.listQuery.minSimilarity = '50'
       this.listQuery.timeRange = ['', '']
       this.personName = ''
+      this.staffCode = ''
       this.list = []
     },
     // 轨迹上墙
@@ -359,299 +367,299 @@
   }
 }
 </script>
-
 <style rel="stylesheet/scss" lang="scss" scoped>
-  ::v-deep(.el-input__inner){
-    border:1px solid #40C3F1 !important;
-    background: transparent !important;
-    color:#fff !important;
+::v-deep(.el-input__inner){
+  border:1px solid #40C3F1 !important;
+  background: transparent !important;
+  color:#fff !important;
+}
+::v-deep(.el-range-input){
+  background: transparent !important;
+  color:#fff !important;
+}
+::v-deep(.el-form-item__label){
+  color:#f1f1f1 !important;
+  font-weight: 400 !important;
+}
+::v-deep(.el-range-separator){
+  color:#f1f1f1 !important;
+  font-weight: 400 !important;
+  color:#fff !important;
+}
+::v-deep(.el-select .el-select-dropdown__wrap) {
+  max-height: 350px !important;
+  overflow-y: auto !important;
+}
+
+.form-item-person-info:hover{
+  cursor: text !important;
+}
+.el-form-item__content:hover{
+  cursor: text !important;
+}
+::v-deep(.form-item-person-info .el-input__inner):hover{
+  cursor: text !important;
+}
+::-webkit-scrollbar {
+  z-index: 11;
+  width: 6px;
+}
+::-webkit-scrollbar-track,
+::-webkit-scrollbar-corner {
+  border-radius: 5px;
+  background: #fff;
+}
+::-webkit-scrollbar-thumb {
+  border-radius: 5px; // 滚动条
+  width: 6px;
+  background-color: #ccc;
+  :hover {
+    background-color: #ccc;
   }
-  ::v-deep(.el-range-input){
-    background: transparent !important;
-    color:#fff !important;
-  }
-  ::v-deep(.el-form-item__label){
-    color:#f1f1f1 !important;
-    font-weight: 400 !important;
-  }
-  ::v-deep(.el-range-separator){
-    color:#f1f1f1 !important;
-    font-weight: 400 !important;
-    color:#fff !important;
-  }
-  ::v-deep(.el-select .el-select-dropdown__wrap) {
-    max-height: 350px !important;
-    overflow-y: auto !important;
-  }
-  .form-item-person-info:hover{
-    cursor: text !important;
-  }
-  .el-form-item__content:hover{
-    cursor: text !important;
-  }
-  ::v-deep(.form-item-person-info .el-input__inner):hover{
-    cursor: text !important;
-  }
-  ::-webkit-scrollbar {
-      z-index: 11;
-      width: 6px;
-    }
-    ::-webkit-scrollbar-track,
-    ::-webkit-scrollbar-corner {
-      border-radius: 5px;
-      background: #fff;
-    }
-    ::-webkit-scrollbar-thumb {
-      border-radius: 5px; // 滚动条
-      width: 6px;
-      background-color: #ccc;
-      :hover {
-        background-color: #ccc;
-      }
-    }
-    ::-webkit-scrollbar-track-piece {
-      border-radius: 5px; // 轨道
-      background: #fff;
-      width: 6px;
-    }
-  .text-over{
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-  .wrap{
-    width:100%;
-    height: 100%;
-    background: #5F8EB9;
+}
+::-webkit-scrollbar-track-piece {
+  border-radius: 5px; // 轨道
+  background: #fff;
+  width: 6px;
+}
+.text-over{
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.wrap{
+  width:100%;
+  height: 100%;
+  background: #5F8EB9;
+  position: relative;
+  overflow: hidden;
+  .header{
     position: relative;
-    overflow: hidden;
-    .header{
+    width: 98%;
+    margin-left:20px;
+    border-top: 10px solid #5F8EB9;
+    border-bottom: 10px solid #5F8EB9;
+    padding:5px 0 5px 20px;
+    color:#f1f1f1;
+    background: #30486C;
+    font-size: 16px;
+  }
+}
+.el-select{
+  width: 100%;
+}
+.header::after{
+  content:"";
+  display: inline-block;
+  position: absolute;
+  top:0;
+  left: -8px;
+  width:4px;
+  height:100%;
+  background: #40C3F1;
+}
+.list-wrap{
+  width:100%;
+  // width:900px;
+  height: calc(100% - 175px); // 去除头部区域
+  overflow-y: auto;
+  .main{
+    width:99%;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    .row {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 40px;
+    }
+    .row:nth-child(2n) {
+      flex-direction: row-reverse;
+    }
+    .row:nth-child(2n):last-child .item {
+      margin-right: auto;
+    }
+    .list-item{
       position: relative;
-      width: 98%;
-      margin-left:20px;
-      border-top: 10px solid #5F8EB9;
-      border-bottom: 10px solid #5F8EB9;
-      padding:5px 0 5px 20px;
-      color:#f1f1f1;
-      background: #30486C;
-      font-size: 16px;
-    }
-  }
-  .el-select{
-    width: 100%;
-  }
-  .header::after{
-      content:"";
-      display: inline-block;
-      position: absolute;
-      top:0;
-      left: -8px;
-      width:4px;
-      height:100%;
-      background: #40C3F1;
-    }
-    .list-wrap{
-      width:100%;
-      // width:900px;
-      height: calc(100% - 175px); // 去除头部区域
-      overflow-y: auto;
-      .main{
-        width:99%;
-        margin: 0 auto;
-        display: flex;
-        flex-direction: column;
-        .row {
-          display: flex;
-          justify-content: space-between;
-          margin-bottom: 40px;
-        }
-        .row:nth-child(2n) {
-          flex-direction: row-reverse;
-        }
-        .row:nth-child(2n):last-child .item {
-          margin-right: auto;
-        }
-        .list-item{
-          position: relative;
-          width: 48%;
-          height: 240px;
-          background-image: url("../../assets/global_images/monitor.png");
-          background-repeat: no-repeat;
-          background-size: cover;
-          // background-size: 100% 100%;
-          // margin-left: 20px;
-          z-index: 10;
-          .img-wrap{
-            position: absolute;
-            left:35px;
-            top:40px;
-            width:238px;
-            height:138px;
-            overflow: hidden;
-            z-index: -1;
-          }
-          .title{
-            width:150px;
-            position: absolute;
-            left:42%;
-            top: 40px;
-            font-size: 20px;
-            color:#40C3F1;
-          }
-          .desc{
-            width:150px;
-            position: absolute;
-            left:42%;
-            top: 75px;
-            font-size: 16px;
-            color:#f1f1f1;
-          }
-          .date{
-            position: absolute;
-            left:50%;
-            transform: translateX(-50%);
-            bottom:70px;
-            font-size: 14px;
-            color:#c1c1c1;
-            margin-left:25px;
-          }
-          .date::after{
-            position: absolute;
-            top:0;
-            left:-20px;
-            content:"";
-            display: inline-block;
-            width: 15px;
-            height: 15px;
-            background-image: url("../../assets/global_images/date.png");
-            background-repeat: no-repeat;
-            background-size: cover;
-          }
-          .ratio{
-            // width:100px;
-            position: absolute;
-            left:50%;
-            transform: translateX(-50%);
-            bottom:40px;
-            font-size: 14px;
-            color:#c1c1c1;
-            // margin-left:18px;
-            margin-left: 25px;
-          }
-          .ratio::after{
-            position: absolute;
-            top:0;
-            left:-20px;
-            content:"";
-            display: inline-block;
-            width: 15px;
-            height: 15px;
-            background-image: url("../../assets/global_images/search.png");
-            background-repeat: no-repeat;
-            background-size: cover;
-          }
-        }
-      }
-    }
-    .main .row:nth-child(odd){
-      .list-item:nth-child(odd)::after{
-        content:"";
-        display: inline-block;
-        width:30px;
-        height: 30px;
+      width: 48%;
+      height: 240px;
+      background-image: url("../../assets/global_images/monitor.png");
+      background-repeat: no-repeat;
+      background-size: cover;
+      // background-size: 100% 100%;
+      // margin-left: 20px;
+      z-index: 10;
+      .img-wrap{
         position: absolute;
-        top:50%;
-        transform: translate(-50%);
-        right:-52px;
-        background-image: url("../../assets/global_images/right.png");
-        background-repeat: no-repeat;
-        background-size: cover;
+        left:35px;
+        top:40px;
+        width:238px;
+        height:138px;
+        overflow: hidden;
+        z-index: -1;
       }
-    }
-    .main .row:nth-child(odd){
-      .list-item:nth-child(even)::after{
-        content:"";
-        display: inline-block;
-        width:30px;
-        height: 30px;
+      .title{
+        width:150px;
         position: absolute;
-        right:50%;
-        transform: translate(-50%);
-        bottom:-35px;
-        background-image: url("../../assets/global_images/right.png");
-        background-repeat: no-repeat;
-        background-size: cover;
-        transform: rotate(90deg);
+        left:42%;
+        top: 40px;
+        font-size: 20px;
+        color:#40C3F1;
       }
-    }
-    .main .row:nth-child(even){
-      .list-item:nth-child(odd)::after{
-        content:"";
-        display: inline-block;
-        width:30px;
-        height: 30px;
+      .desc{
+        width:150px;
         position: absolute;
-        top:50%;
-        transform: translate(-50%);
-        left:-35px;
-        background-image: url("../../assets/global_images/right.png");
-        background-repeat: no-repeat;
-        background-size: cover;
-        transform: rotate(180deg);
+        left:42%;
+        top: 75px;
+        font-size: 16px;
+        color:#f1f1f1;
       }
-    }
-    .main .row:nth-child(even){
-      .list-item:nth-child(even)::after{
-        content:"";
-        display: inline-block;
-        width:30px;
-        height: 30px;
+      .date{
         position: absolute;
         left:50%;
-        transform: translate(-50%);
-        bottom:-35px;
-        background-image: url("../../assets/global_images/right.png");
+        transform: translateX(-50%);
+        bottom:70px;
+        font-size: 14px;
+        color:#c1c1c1;
+        margin-left:25px;
+      }
+      .date::after{
+        position: absolute;
+        top:0;
+        left:-20px;
+        content:"";
+        display: inline-block;
+        width: 15px;
+        height: 15px;
+        background-image: url("../../assets/global_images/date.png");
         background-repeat: no-repeat;
         background-size: cover;
-        transform: rotate(-270deg);
+      }
+      .ratio{
+        // width:100px;
+        position: absolute;
+        left:50%;
+        transform: translateX(-50%);
+        bottom:40px;
+        font-size: 14px;
+        color:#c1c1c1;
+        // margin-left:18px;
+        margin-left: 25px;
+      }
+      .ratio::after{
+        position: absolute;
+        top:0;
+        left:-20px;
+        content:"";
+        display: inline-block;
+        width: 15px;
+        height: 15px;
+        background-image: url("../../assets/global_images/search.png");
+        background-repeat: no-repeat;
+        background-size: cover;
       }
     }
-    // 如果是最后一个元素不显示箭头
-    .main .row:last-child{
-      .list-item:last-child::after{
-        display: none;
-      }
-    }
-    .list-wrap .main .list-item .img-wrap{
-      position: absolute;
-      left: 32px;
-      top: 40px;
-      // width: 190px;
-      width: 212px;
-      height: 138px;
-      overflow: hidden;
-      z-index: -1;
-    }
-    .list-wrap .main .list-item .date{
-      left:75% !important;
-      margin-bottom: 20px;
-    }
-    .list-wrap .main .list-item .ratio{
-      left:75% !important;
-    }
-    .list-wrap .main .list-item .title,.list-wrap .main .list-item .desc{
-      left:62% !important;
-    }
-    .close-icon{
-      z-index: 100;
-      position: absolute;
-      top:2px;
-      right:2px;
-      color:white;
-      background: #fc2323cc;
-      width:25px;
-      height:25px;
-      border-radius: 5px;
-      padding:3px;
-    }
+  }
+}
+.main .row:nth-child(odd){
+  .list-item:nth-child(odd)::after{
+    content:"";
+    display: inline-block;
+    width:30px;
+    height: 30px;
+    position: absolute;
+    top:50%;
+    transform: translate(-50%);
+    right:-52px;
+    background-image: url("../../assets/global_images/right.png");
+    background-repeat: no-repeat;
+    background-size: cover;
+  }
+}
+.main .row:nth-child(odd){
+  .list-item:nth-child(even)::after{
+    content:"";
+    display: inline-block;
+    width:30px;
+    height: 30px;
+    position: absolute;
+    right:50%;
+    transform: translate(-50%);
+    bottom:-35px;
+    background-image: url("../../assets/global_images/right.png");
+    background-repeat: no-repeat;
+    background-size: cover;
+    transform: rotate(90deg);
+  }
+}
+.main .row:nth-child(even){
+  .list-item:nth-child(odd)::after{
+    content:"";
+    display: inline-block;
+    width:30px;
+    height: 30px;
+    position: absolute;
+    top:50%;
+    transform: translate(-50%);
+    left:-35px;
+    background-image: url("../../assets/global_images/right.png");
+    background-repeat: no-repeat;
+    background-size: cover;
+    transform: rotate(180deg);
+  }
+}
+.main .row:nth-child(even){
+  .list-item:nth-child(even)::after{
+    content:"";
+    display: inline-block;
+    width:30px;
+    height: 30px;
+    position: absolute;
+    left:50%;
+    transform: translate(-50%);
+    bottom:-35px;
+    background-image: url("../../assets/global_images/right.png");
+    background-repeat: no-repeat;
+    background-size: cover;
+    transform: rotate(-270deg);
+  }
+}
+// 如果是最后一个元素不显示箭头
+.main .row:last-child{
+  .list-item:last-child::after{
+    display: none;
+  }
+}
+.list-wrap .main .list-item .img-wrap{
+  position: absolute;
+  left: 32px;
+  top: 40px;
+  // width: 190px;
+  width: 212px;
+  height: 138px;
+  overflow: hidden;
+  z-index: -1;
+}
+.list-wrap .main .list-item .date{
+  left:75% !important;
+  margin-bottom: 20px;
+}
+.list-wrap .main .list-item .ratio{
+  left:75% !important;
+}
+.list-wrap .main .list-item .title,.list-wrap .main .list-item .desc{
+  left:62% !important;
+}
+.close-icon{
+  z-index: 100;
+  position: absolute;
+  top:2px;
+  right:2px;
+  color:white;
+  background: #fc2323cc;
+  width:25px;
+  height:25px;
+  border-radius: 5px;
+  padding:3px;
+}
 </style>
diff --git a/src/views/popup/bottom.vue b/src/views/popup/bottom.vue
index e3fe7e2..c95b2a1 100644
--- a/src/views/popup/bottom.vue
+++ b/src/views/popup/bottom.vue
@@ -1,47 +1,84 @@
 <template>
   <div class="bottom">
-    <div class="block1">
-      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">访客控制安全系数组件</div>
-      <visit-bar style="flex:1;"/>
-    </div>
+<!--    <div class="block1" style="border-top-left-radius: 0px;margin-left: 5px">-->
+<!--      <inout-list style="flex:1;"/>-->
+<!--    </div>-->
     <div class="block">
       <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安防事件列表</div>
       <case-table style="flex:1;"/>
     </div>
-    <div class="block">
-      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">其他相关安全系数指标组件</div>
-      <other-line style="flex:1;"/>
+    <div class="block1" style="flex-direction: row;width: 700px">
+      <div style="width: 200px">
+        <div class="item0" style="margin: 36px 0">
+          <el-image :src="require('@/assets/popup/事件.png')" class="base-map-image" mode="fill" />
+          <div class="item-text">
+            <div class="num">{{caseNum.all}}<span class="unit"> 件</span></div>
+            <div style="color: #B3F3F6;">今日总事件</div>
+          </div>
+        </div>
+        <div class="item0">
+          <el-image :src="require('@/assets/popup/事件1.png')" class="base-map-image" mode="fill" />
+          <div class="item-text">
+            <div class="num"><span style="color: #08f102;text-shadow: 0 0 5px #08f102;">{{caseNum.solve}}</span><span class="unit"> 件</span></div>
+            <div style="color: #B3F3F6;">今日已解决</div>
+          </div>
+        </div>
+      </div>
+      <case-pie style="width: calc(100% - 200px);height: 100%"/>
     </div>
-    <div class="block1">
-      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安保人员到岗系数组件</div>
-      <staff-bar1 style="flex:1;"/>
+    <div class="block">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安防事件频率统计</div>
+      <case-bar style="flex:1;"/>
     </div>
   </div>
 </template>
 
 <script>
-// import VisitorPie from "@/views/popup/components/visitorPie";
-import VisitBar from '@/views/popup/components/visitBar';
-import StaffBar1 from '@/views/popup/components/staffBar1';
-import CaseTable from '@/views/popup/components/caseTable';
-// import ReqairTable from "@/views/popup/components/reqairTable";
-import OtherLine from '@/views/popup/components/otherLine';
+
+import CaseTable from '@/views/popup/components/caseTable'
+import CasePie from '@/views/popup/components/casePie'
+import { caseTodayStatistics } from '@/api/pop'
+import CaseBar from '@/views/popup/components/caseBar'
+import InoutList from '@/views/popup/components/inoutList'
 
 export default {
   name: 'Bottom',
-  components: { OtherLine, CaseTable, StaffBar1, VisitBar },
+  components: { InoutList, CaseBar, CasePie, CaseTable },
   data() {
     return {
+      timer: null,
       titleImg: require('@/assets/popup/title.png'), // 背景图片
-      titleAll: require('@/assets/popup/title-all.png'),// 背景图片
-      list: [2156, 2144, 455, 314, 98]
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      list: [2156, 2144, 455, 314, 98],
+      caseNum: {
+        all: 0,
+        solve: 0
+      }
     }
   },
+  mounted() {
+    clearInterval(this.timer)
+    this.search()
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+    this.timer = null
+  },
+  methods: {
+    search() {
+      this.timer = setInterval(() => {
+        caseTodayStatistics().then(response => {
+          if (response.code === 200) {
+            this.caseNum = response.data
+          }
+        })
+      }, 10000)
+    }
+  }
 }
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-
 .bottom{
   width: 100%;
   height: 220px;
@@ -57,11 +94,11 @@
     border-radius: 5px;
     box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
     border-color: rgba(0, 0, 0, .05);
-    margin: 0px 10px;
+    margin: 0px 5px;
     flex-direction: column;
   }
   .block1{
-    width: 500px;
+    width: 750px;
     height: 100%;
     display: flex;
     flex-wrap: wrap;
@@ -69,7 +106,7 @@
     border-radius: 5px;
     box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
     border-color: rgba(0, 0, 0, .05);
-    margin: 0px 10px;
+    margin: 0px 5px;
     flex-direction: column;
   }
   .title{
@@ -93,5 +130,31 @@
     font-size: 15px;
 
   }
+  .item0{
+    width: 100%;
+    height: 50px;
+    display: flex;
+    justify-content: left;
+    align-items: center;
+    padding: 0 8%;
+  }
+  .item-text{
+    text-shadow: 0 0 2px #d1ffff;
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 18px;
+  }
+  .num{
+    text-shadow: 0 0 5px #ffb441;
+    color: #ffb441;
+    font-size: 20px;
+    padding-top: 2px;
+  }
+  .unit{
+    color: #B3F3F6;
+    font-size: 14px;
+    margin-left: 1px;
+  }
 }
 </style>
diff --git a/src/views/popup/components/caseTable.vue b/src/views/popup/components/caseTable.vue
index 95aa677..c9708d7 100644
--- a/src/views/popup/components/caseTable.vue
+++ b/src/views/popup/components/caseTable.vue
@@ -1,5 +1,9 @@
 <template>
   <div class="flowTable">
+<!--    <el-tabs v-model="activeName" @tab-click="changeTime" style="display: flex;position:absolute;right: 30px;top:5px">-->
+<!--      <el-tab-pane label="已解决" name="week"/>-->
+<!--      <el-tab-pane label="未解决" name="month"/>-->
+<!--    </el-tabs>-->
     <div class="success_info_body" v-show="showFlag">
       <!-- 参数名称、列数根据实际情况调整 -->
       <div class="table_body">
@@ -14,7 +18,7 @@
         <div class="table_main_body">
           <div class="table_inner_body" :style="{top: tableTop + 'px'}">
             <div v-for="(item,index) in tableList" class="table_tr" :class="checkCell(item,index)" :key="index" @click="JumpDevice(item)">
-              <div class="tr1 tr">{{item.levelName}}</div>
+              <div class="tr1 tr" :style="{color: item.levelName ==='重大' ? 'red' : item.levelName ==='较大' ? 'orange' : '#b8dffd'}">{{item.levelName}}</div>
               <div class="tr2 tr">{{item.description}}</div>
               <div class="tr1 tr">{{item.statusName}}</div>
               <div class="tr2 tr">{{item.typeName}}</div>
@@ -41,7 +45,7 @@
   data() {
     return {
       picurl: '',
-      defaultPhoto: require('@/assets/global_images/photo_error.png'),
+      defaultPhoto: require('@/assets/global_images/photo_offline.png'),
       errorImg: require('@/assets/global_images/photo_error.png'),
       showFlag: true,
       tableTimer: null,
@@ -104,8 +108,9 @@
       this.picurl = ''
       this.isbig = false
       getCaseListPage({
+        status: '',
         offset: 1,
-        limit: 15
+        limit: 20
       }).then(response => {
         if (response.code === 200) {
           this.tableList = response.data.rows
@@ -190,13 +195,18 @@
   line-height: 15px;
 }
 .tr {
-  overflow: hidden;
   text-overflow: ellipsis;
-  white-space: nowrap;
   box-sizing: border-box;
   padding: 0 5px;
   text-align: center;
   font-size: 13px;
+  word-wrap: break-word; /* 允许在单词内换行 */
+  overflow-wrap: break-word; /* 同上，现代浏览器推荐使用 */
+  white-space: normal; /* 允许自动换行 */
+  line-height: 15px;
+  display: flex;
+  align-items: center; /* 垂直居中 */
+  justify-content: center; /* 水平居中，如需要 */
 }
 .tr1 {
   width: 13%;
@@ -253,7 +263,7 @@
   }
 }
 .hard-state{
-  background:red;
+  background: #ff8585;
 }
 .medium-state{
   background: #ea9700;
diff --git a/src/views/popup/components/doorList.vue b/src/views/popup/components/doorList.vue
new file mode 100644
index 0000000..7bc178a
--- /dev/null
+++ b/src/views/popup/components/doorList.vue
@@ -0,0 +1,257 @@
+<template>
+  <div style="width: 100%;height: 100%;">
+    <div style="text-align: right;margin-right: 5px;">
+      <el-button class="doorbar-btn" type="primary" plain @click="isOn1 = !isOn1" style="margin-left: 3px">{{isOn1 ? '隐藏操作按钮': '开启操作按钮'}}</el-button>
+      <el-button class="doorbar-btn" type="primary" plain @click="controlDool()">{{!isOn2 ? '开启黑名单与闸机联动': '关闭黑名单与闸机联动'}}</el-button>
+    </div>
+    <div class="success_info_body" style="margin: 0 10px;flex: 1">
+      <div class="table_body">
+        <div class="table_th">
+          <div class="tr4 th_style">门禁分组</div>
+          <div class="tr1 th_style" v-show="isOn1">操作</div>
+        </div>
+        <div class="table_main_body">
+          <div class="table_inner_body" :style="{top: tableTop + 'px'}">
+            <div v-for="(item,index) in tableList" class="table_tr" :key="index">
+              <div class="tr4 tr">{{item.groupName}}</div>
+              <div class="tr1 tr" v-show="isOn1">
+                <el-button type="text" v-for="item in statusList" :key="item.value" size="small" @click.stop="editStatus(scope.row, item.value)" style="height: 20px;margin-top: -10px">
+                  {{ item.name }}
+                </el-button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+<!--    <el-pagination layout="prev, pager, next" :total="tableListSize" style="width: 100%;text-align: center" @current-change="handleCurrentChange"/>-->
+  </div>
+</template>
+
+<script>
+import {controlGroup, gateLinkageSwitch, getGroupListPage, getSwitchStatus} from '@/api/device'
+export default {
+  name: 'DoorList',
+  data() {
+    return {
+      defaultPhoto: require('@/assets/global_images/photo.png'),
+      errorImg: require('@/assets/global_images/photo_error.png'),
+      isOn1: false,
+      isOn2: false,
+      tableTimer: null,
+      tableTop: 0,
+      tableList: [],
+      statusList: [
+        { name: '常开', id: '1557975745699823618', value: '0' },
+        { name: '常闭', id: '1557975746215723010', value: '3' },
+        { name: '门开', id: '1557975746723233793', value: '2' },
+        { name: '门闭', id: '1557975747402711041', value: '1' }
+      ],
+      tableListSize: 0,
+      componentTimer: null,
+      visibleSize: 8, // 容器内可视最大完整行数
+      lineHeight: 20, // 每行的实际高度（包含margin-top/bottom,border等）
+      componentTimerInterval: 3600000, //  刷新数据的时间间隔
+      tableTimerInterval: 50, //  向上滚动 1px 所需要的时间，越小越快，推荐值 100
+      listQuery: {
+        groupName: '',
+        gateCode: '',
+        status: '',
+        offset: 1,
+        limit: 8
+      }, // 筛选条件
+      dialogFormVisible: false, // 是否显示编辑框
+      timeRange: [], // 时间范围
+      multipleSelection: [], // 多选选中项
+      list: [], // 列表数据
+      colorRow: {
+        isColor: false,
+        isPop: true
+      },
+      inoutTypeList: [],
+      passWayList: [],
+      total: 0, // 数据总数
+      listLoading: true // 列表加载动画
+    }
+  },
+  created() {
+    getSwitchStatus().then(response => {
+      if (response.code === 200) {
+        this.isOn2 = response.data === 1
+      }
+    })
+    this.fetchData()
+  },
+  methods: {
+    controlDool() {
+      this.isOn2 = !this.isOn2
+      gateLinkageSwitch(this.isOn2 ? 1 : 0).then(response => {
+        if (response.code === 200) {
+          this.$message.success((this.isOn2 ? '开启' : '关闭') + '黑名单与闸机联动成功')
+        }
+      })
+    },
+    fetchData(isNowPage = true) {
+      if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+        this.listQuery.offset = 1
+      }
+      getGroupListPage(this.listQuery).then(response => {
+        if (response.code === 200) {
+          this.tableList = response.data.rows
+          this.tableListSize = parseInt(response.data.total)
+        }
+      })
+    },
+    editStatus(row, status) {
+      controlGroup(row.id, status).then(response => {
+        if (response.code === 200) {
+          this.$message.success('通道控制成功')
+          this.fetchData()
+        }
+      }).catch(_ => { // 异常情况，loading置为false
+      })
+    },
+    handleCurrentChange(val) {
+      this.listQuery.offset = val
+      this.fetchData()
+    },
+    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.doorbar-btn {
+  height: 22px;
+  padding-top: 4px;
+  padding-right: 6px;
+  padding-left: 6px;
+  margin-right: 4px;
+}
+.table_body {
+  width: 100%;
+  margin-top: 0px;
+}
+.table_th {
+  width: 100%;
+  display: flex;
+  height: 15px;
+  line-height: 20px;
+}
+.tr {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 0 5px;
+  text-align: center;
+  font-size: 13px;
+  height: 20px !important;
+}
+.tr1 {
+  width: 35%;
+}
+.tr2 {
+  width: 18%;
+}
+.tr3 {
+  width: 15%;
+  font-size: 13px;
+}
+
+.tr4 {
+  flex: 1;
+}
+.tr5 {
+  width: 100px;
+}
+
+.th_style {
+  color: #b8dffd;
+  font-size: 13px;
+  font-weight: bold;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  box-sizing: border-box;
+  text-align: center;
+}
+.table_main_body {
+  width: 100%;
+  height: 175px;
+  overflow: hidden;
+  position: relative;
+  margin-top: 5px;
+}
+.table_inner_body {
+  width: 100%;
+  position: absolute;
+  left: 0;
+  color: #cce9ff;
+}
+
+.table_tr {
+  display: flex;
+  font-size: 13px;
+  border: 1px solid rgb(71, 160, 199);
+  margin-top: 2px;
+  height: 20px;
+  line-height: 20px;
+  cursor: pointer;
+:hover{
+  background: rgba(255, 153, 51, 0.6);
+}
+}
+.table_tr0 {
+  background: rgba(3, 145, 167, 0.1);
+}
+.table_tr1 {
+  background: rgb(64, 87, 120);
+}
+
+::v-deep .el-pagination {
+  .el-pagination__total {
+    color: white !important;
+  }
+  .el-pagination__jump {
+    color: white !important;
+  }
+  // 两个输入框
+  .el-input__inner {
+    background-color: #092546;
+    border: 1px solid rgba(192, 192, 192, 0.479);
+    color: white !important;
+  }
+  // 左右按键和里面的图标
+  button {
+    background-color: #092546;
+    .el-icon::before {
+      color: white;
+    }
+  }
+  // 分页数字
+  ul {
+    color: white;
+    .el-icon::before {
+      color: white !important;
+    }
+  }
+  // 分页数字的背景色
+  ul > li {
+    background-color: #092546;
+  }
+}
+::v-deep .el-loading-mask {
+  background-color: rgba(0, 0, 0, 0.479);
+}
+
+</style>
diff --git a/src/views/popup/components/personTable.vue b/src/views/popup/components/personTable.vue
index e2e4c1e..ca73933 100644
--- a/src/views/popup/components/personTable.vue
+++ b/src/views/popup/components/personTable.vue
@@ -7,15 +7,17 @@
           <div class="tr4 th_style">安保人员姓名</div>
           <div class="tr4 th_style">性别</div>
           <div class="tr4 th_style">照片</div>
+          <div class="tr4 th_style">状态</div>
         </div>
         <div class="table_main_body">
           <div class="table_inner_body" :style="{top: tableTop + 'px'}">
-            <div v-for="(item,index) in tableList" :class="index%2==1?'table_tr':'table_tr1'" :key="index" @click="JumpDevice(item)">
+            <div v-for="(item,index) in tableList" :class="index % 2==1?'table_tr':'table_tr1'" :key="index" @click="JumpDevice(item)">
               <div class="tr4 tr">{{item.staffName}}</div>
               <div class="tr4 tr">{{item.staffGenderName}}</div>
               <div class="tr4 tr">
                 <img :src="item.picture ? `${item.picture}`: defaultPhoto" width="40px" height="40px" style="margin-left: 5px" @error="errorImg">
               </div>
+              <div class="tr4 tr">{{item.statusName}}</div>
             </div>
           </div>
         </div>
@@ -25,7 +27,7 @@
 </template>
 <script>
 
-import { getStaffListPage, hikPic } from '@/api/person'
+import {getStaffListPage, getStaffOnList, hikPic} from '@/api/person'
 import { repostSocket } from '@/api/common';
 import { getDate } from '@/utils/calendarUtil'
 
@@ -43,7 +45,7 @@
       tableList: [],
       tableListSize: 0,
       componentTimer: null,
-      visibleSize: 5, // 容器内可视最大完整行数
+      visibleSize: 8, // 容器内可视最大完整行数
       lineHeight: 45, // 每行的实际高度（包含margin-top/bottom,border等）
       componentTimerInterval: 3600000, //  刷新数据的时间间隔
       tableTimerInterval: 50 //  向上滚动 1px 所需要的时间，越小越快，推荐值 100
@@ -51,7 +53,7 @@
   },
 
   // 如果没有父元素传值，将watch内的内容搬至mounted中即可
-  props: ["activeFactoryId"],
+  props: ['activeFactoryId'],
   watch: {
     activeFactoryId(val, oldVal) {
       clearInterval(this.componentTimer)
@@ -70,6 +72,8 @@
   methods: {
     JumpDevice(item) {
       const params = {
+        personName: item.staffName,
+        staffCode: item.staffCode,
         facePicUrl: item.picture, // 图片url
         startTime: getDate(-31, 'SECOND'), // 开始时间
         endTime: getDate(0, 'SECOND'), // 结束时间
@@ -94,51 +98,32 @@
         message: this.wallList
       }
       repostSocket(params).then(response => {
-        if (response.code === 200) {
-        }
+        if (response.code === 200) {}
       })
     },
     fetchData() {
       const params = {
-        staffType: '2',
+        // staffType: '2',
         offset: 1,
-        limit: 50,
-        keywords: '',
-        cardNum: '',
-        phone: ''
+        limit: 200
       }
-      getStaffListPage(params).then(response => {
+      getStaffOnList(params).then(response => {
         if (response.code === 200) {
           this.tableList = response.data.rows
+          // this.tableListSize = response.data.total
           this.tableActionFun()
         }
       })
-      // this.tableList = [
-      //   {
-      //     id: '',
-      //     drawNo: 'YQ-001',
-      //     levelName: '一般',
-      //     description: '保安脱岗',
-      //     status: '0',
-      //     statusName: '未解决',
-      //     typeName: '临时事件',
-      //     devName: '视频监控摄像机5',
-      //     positionName: '一期主楼',
-      //     areaName: '3F',
-      //     isKeyAreaName: '否',
-      //     detailLocation: '详细位置',
-      //     happenTime: '2022-05-06 21:55:00'
-      //   }
-      // ]
     },
     tableActionFun() {
       this.tableListSize = this.tableList.length
       if (this.tableListSize > this.visibleSize) {
         this.tableList = this.tableList.concat(this.tableList)
         this.tableTimerFun()
-      } else {
-        this.fillTableList()
       }
+      // else {
+      //   this.fillTableList()
+      // }
     },
     //  当数据过少时，不触发自动轮播事件，并填充没有数据的行，参数根据实际情况修改即可
     fillTableList() {
@@ -230,7 +215,7 @@
 }
 .table_main_body {
   width: 100%;
-  height: 200px;
+  height: calc(40vh - 140px);
   overflow: hidden;
   position: relative;
   margin-top: 5px;
diff --git a/src/views/popup/components/staffLine1.vue b/src/views/popup/components/staffLine1.vue
index d3b0a95..d3cd04b 100644
--- a/src/views/popup/components/staffLine1.vue
+++ b/src/views/popup/components/staffLine1.vue
@@ -12,8 +12,8 @@
 </template>
 
 <script>
-import { multiScoreCommute } from '@/api/pop';
-import * as echarts from "echarts";
+import { multiScoreCommute } from '@/api/pop'
+import * as echarts from 'echarts'
 export default {
   name: 'StaffLine1',
   data() {

diff --git a/public/static/webCtrl/hk/demo_embedded_for_iframe.html b/public/static/webCtrl/hk/demo_embedded_for_iframe.html
index 3a0be10..5c18f74 100644
--- a/public/static/webCtrl/hk/demo_embedded_for_iframe.html
+++ b/public/static/webCtrl/hk/demo_embedded_for_iframe.html
@@ -107,6 +107,13 @@
         }
     });
 
+    function destoryPlugin() {
+      if (oWebControl != null){
+        oWebControl.JS_HideWnd();  // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
+        oWebControl.JS_Disconnect().then(function(){}, function() {});
+      }
+    }
+
     function hide(){
       oWebControl.JS_HideWnd();
     };
diff --git a/src/App.vue b/src/App.vue
index d9046c1..b8c5c1a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="app" v-resize="windowResize">
+  <div id="app" style="overflow-y: hidden" v-resize="windowResize">
     <router-view />
   </div>
 </template>
diff --git a/src/api/device.js b/src/api/device.js
index 0ba70ff..8d6c46b 100644
--- a/src/api/device.js
+++ b/src/api/device.js
@@ -159,3 +159,21 @@
     data
   })
 }
+
+export function getSwitchStatus(data) {
+  return request({
+    url: '/cockpit/gateLinkage/switchStatus',
+    method: 'get'
+  })
+}
+
+export function gateLinkageSwitch(controlSwitch) {
+  return request({
+    url: '/cockpit/gateLinkage/switch',
+    method: 'get',
+    params: {
+      controlSwitch
+    }
+  })
+}
+
diff --git a/src/api/person.js b/src/api/person.js
index 8a79c27..0c2a0ff 100644
--- a/src/api/person.js
+++ b/src/api/person.js
@@ -21,6 +21,14 @@
   })
 }
 
+export function getStaffOnList(params) {
+  return request({
+    url: '/cockpit/securityStaff/onList',
+    method: 'GET',
+    params
+  })
+}
+
 export function addStaff(data) {
   return request({
     url: 'staffInfo/add',
diff --git a/src/api/pop.js b/src/api/pop.js
index 01ddde7..6fa7381 100644
--- a/src/api/pop.js
+++ b/src/api/pop.js
@@ -72,6 +72,39 @@
   })
 }
 
+export function baoanStatistics() {
+  return request({
+    url: '/cockpit/securityStaff/statistics',
+    method: 'get',
+    data: {}
+  })
+}
+
+export function visitorStatistics() {
+  return request({
+    url: 'cockpit/visitor/statistics',
+    method: 'get',
+    data: {}
+  })
+}
+
+export function caseTodayStatistics() {
+  return request({
+    url: 'cockpit/case/todayStatistics',
+    method: 'get',
+    data: {}
+  })
+}
+
+export function casePieStatistics(params) {
+  return request({
+    url: 'cockpit/caseType/statisticsByTime',
+    method: 'get',
+    data: params,
+    params
+  })
+}
+
 // 安防事件频次因数组件
 export function securityFrequency() {
   return request({
@@ -158,3 +191,27 @@
     method: 'get'
   })
 }
+
+export function cameraTypeStatistics() {
+  return request({
+    url: '/cockpit/camera/typeStatistics',
+    method: 'get'
+  })
+}
+
+export function deviceStatistics(devType) {
+  return request({
+    url: '/cockpit/device/statistics',
+    method: 'post',
+    data: {
+      devType
+    }
+  })
+}
+
+export function buildPeopleNumber() {
+  return request({
+    url: '/cockpit/build/peopleNumber',
+    method: 'get'
+  })
+}
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index df71207..33d701a 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -280,37 +280,37 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  .table{
-    margin-bottom: 20px;
-  }
-  .pagination-container{
-    padding-bottom: 50px;
-  }
-  .table-title{
-    /*background-color:rgba(243, 243, 243, 1);*/
-    background-color:#fff;
-    .title-header{
-      font-size: 15px;
-      i{
-        margin-left: 10px;
-        margin-right: 5px;
-      }
-      i:focus{
-        outline: none;
-      }
+.table{
+  margin-bottom: 20px;
+}
+.pagination-container{
+  padding-bottom: 50px;
+}
+.table-title{
+  /*background-color:rgba(243, 243, 243, 1);*/
+  background-color:#fff;
+  .title-header{
+    font-size: 15px;
+    i{
+      margin-left: 10px;
+      margin-right: 5px;
+    }
+    i:focus{
+      outline: none;
     }
   }
-  .edit_btns{
-    padding-top:7px;
-    padding-right:3px;
-    text-align: right;
+}
+.edit_btns{
+  padding-top:7px;
+  padding-right:3px;
+  text-align: right;
+}
+.popper-div{
+  line-height: 1.5;
+  .popper-btns{
+    margin-top:10px;
   }
-  .popper-div{
-    line-height: 1.5;
-    .popper-btns{
-      margin-top:10px;
-    }
-  }
+}
 </style>
 
 <style>
diff --git a/src/router/modules/menu.js b/src/router/modules/menu.js
index 28ecc52..447517e 100644
--- a/src/router/modules/menu.js
+++ b/src/router/modules/menu.js
@@ -8,7 +8,7 @@
     redirect: '/loginBoard',
     meta: {
       title: '主页',
-      permission: ['/loginBoard'],
+      // permission: ['/loginBoard'],
       icon: '' // 图标
     },
     children: [
@@ -16,7 +16,7 @@
         path: '/loginBoard',
         name: 'LoginBoard',
         component: () => import('@/views/backstage/loginBoard'),
-        meta: { title: '主页', icon: '', permission: ['/loginBoard'] }
+        meta: { title: '主页', icon: '' }
       }
     ]
   },
diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss
index 0d1614b..f39542e 100644
--- a/src/styles/element-ui.scss
+++ b/src/styles/element-ui.scss
@@ -74,3 +74,6 @@
   height:48px;
   line-height:48px;
 }
+.el-time-panel {
+  margin-left: -20px !important;
+}
diff --git a/src/utils/request.js b/src/utils/request.js
index 02dcee1..a81c17f 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -39,19 +39,21 @@
     } else if (res.code !== 200) {
       // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
       if (res.code === 401 || res.code === 50012 || res.code === 50014) {
-        MessageBox.confirm(
-          '你已被登出，可以取消继续留在该页面，或者重新登录',
-          '确定登出',
-          {
-            confirmButtonText: '重新登录',
-            cancelButtonText: '取消',
-            type: 'warning'
-          }
-        ).then(() => {
-          store.dispatch('FedLogOut').then(() => {
-            location.reload() // 为了重新实例化vue-router对象 避免bug
+        if (!window.location.href.endsWith('right') && !window.location.href.endsWith('left') && !window.location.href.endsWith('bottom')) {
+          MessageBox.confirm(
+            '你已被登出，可以取消继续留在该页面，或者重新登录',
+            '确定登出',
+            {
+              confirmButtonText: '重新登录',
+              cancelButtonText: '取消',
+              type: 'warning'
+            }
+          ).then(() => {
+            store.dispatch('FedLogOut').then(() => {
+              location.reload() // 为了重新实例化vue-router对象 避免bug
+            })
           })
-        })
+        }
       } else {
         Message({
           showClose: true,
diff --git a/src/views/common/trailDialog.vue b/src/views/common/trailDialog.vue
index 04a83eb..fd90c34 100644
--- a/src/views/common/trailDialog.vue
+++ b/src/views/common/trailDialog.vue
@@ -52,6 +52,8 @@
         75: '75%'
       },
       listQuery: {
+        staffCode: '',
+        personName: '',
         facePicUrl: '',
         startTime: '',
         endTime: '',
@@ -81,11 +83,14 @@
   },
   methods: {
     // 初始化对话框
-    initDialog: function(picture = null, name) {
-      this.textMap = '轨迹追踪 — ' + name
+    initDialog: function(row) {
+      this.textMap = '轨迹追踪 — ' + row.staffName
+      this.list = []
       this.clearInput()
       this.dialogFormVisible = true
-      this.listQuery.facePicUrl = picture
+      this.listQuery.facePicUrl = row.picture
+      this.listQuery.staffCode = row.staffCode
+      this.listQuery.personName = row.staffName
       this.fetchData()
     },
     fetchData() {
diff --git a/src/views/person/staffList.vue b/src/views/person/staffList.vue
index ce8643e..95acc5c 100644
--- a/src/views/person/staffList.vue
+++ b/src/views/person/staffList.vue
@@ -332,7 +332,7 @@
     },
     trail(row) {
       this.dialogFormVisible1 = true
-      this.$refs.trailDialog.initDialog(row.picture, row.staffName)
+      this.$refs.trailDialog.initDialog(row)
     },
     // 打开详情对话框
     detail(row) {
diff --git a/src/views/popup/board.vue b/src/views/popup/board.vue
index eb229cc..0f47c22 100644
--- a/src/views/popup/board.vue
+++ b/src/views/popup/board.vue
@@ -4,7 +4,7 @@
       人员轨迹追踪
       <svg-icon v-if="list.length > 0" icon-class="pop-cross" class="close-icon" @click="close" />
     </div>
-    <el-form ref="ruleForm" :model="listQuery" :rules="rules" label-width="100px">
+    <el-form ref="ruleForm" :model="listQuery" :rules="rules" label-width="80px">
       <el-row :gutter="20">
         <el-col :span="12" class="form-item-person-info">
           <el-form-item label="人员信息" prop="personName" style="position:relative">
@@ -20,7 +20,8 @@
               size="small"
               placeholder="请输入人员姓名"
               :popper-append-to-body="false"
-              @change="handlePerson">
+              @change="handlePerson"
+            >
               <el-option
                 v-for="item in personNameList"
                 :key="item.staffCode"
@@ -41,7 +42,7 @@
               end-placeholder="终止时间"
               size="small"
               :clearable="false"
-              style="width:98%"
+              style="width:98%;"
             />
           </el-form-item>
         </el-col>
@@ -53,7 +54,7 @@
           </el-form-item>
         </el-col>
         <el-col :span="6">
-          <el-form-item label="最小相似度" prop="minSimilarity">
+          <el-form-item label="最小相似度" prop="minSimilarity" label-width="100px">
             <el-input v-model="listQuery.minSimilarity" size="small" placeholder="区间50-100" />
           </el-form-item>
         </el-col>
@@ -81,7 +82,7 @@
             <div class="title text-over">
               {{ child.positionName ? child.positionName : '' }}
             </div>
-            <div class="desc text-over" :title="child.devName">
+            <div class="desc text-over" :title="child.devName" style="white-space: normal;word-wrap: break-word;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2; ">
               {{ child.devName ? child.devName : '' }}
             </div>
             <div class="date" style="width:145px">
@@ -110,6 +111,7 @@
     return {
       selectLoading: false,
       personName: '',
+      staffCode: '',
       point: [],
       listQuery: {
         facePicUrl: '', // 图片url
@@ -260,6 +262,7 @@
       this.personNameList.map(item => {
         if (item.staffCode === person) {
           this.personName = item.personName
+          this.staffCode = item.staffCode
           // this.listQuery.personName = item.personName
           this.listQuery.facePicUrl = item.personPicture
           this.listQuery.gender = item.gender
@@ -299,7 +302,11 @@
         spinner: 'el-icon-loading',
         background: 'rgba(0, 0, 0, 0.7)'
       })
-      const postData = Object.assign(this.listQuery, { 'personName': this.personName })
+      const postData = Object.assign(this.listQuery,
+        {
+          'personName': this.personName,
+          'staffCode': this.staffCode
+        })
       console.log(postData)
       hikPic(postData).then(response => {
         loading.close()
@@ -325,6 +332,7 @@
       this.listQuery.minSimilarity = '50'
       this.listQuery.timeRange = ['', '']
       this.personName = ''
+      this.staffCode = ''
       this.list = []
     },
     // 轨迹上墙
@@ -359,299 +367,299 @@
   }
 }
 </script>
-
 <style rel="stylesheet/scss" lang="scss" scoped>
-  ::v-deep(.el-input__inner){
-    border:1px solid #40C3F1 !important;
-    background: transparent !important;
-    color:#fff !important;
+::v-deep(.el-input__inner){
+  border:1px solid #40C3F1 !important;
+  background: transparent !important;
+  color:#fff !important;
+}
+::v-deep(.el-range-input){
+  background: transparent !important;
+  color:#fff !important;
+}
+::v-deep(.el-form-item__label){
+  color:#f1f1f1 !important;
+  font-weight: 400 !important;
+}
+::v-deep(.el-range-separator){
+  color:#f1f1f1 !important;
+  font-weight: 400 !important;
+  color:#fff !important;
+}
+::v-deep(.el-select .el-select-dropdown__wrap) {
+  max-height: 350px !important;
+  overflow-y: auto !important;
+}
+
+.form-item-person-info:hover{
+  cursor: text !important;
+}
+.el-form-item__content:hover{
+  cursor: text !important;
+}
+::v-deep(.form-item-person-info .el-input__inner):hover{
+  cursor: text !important;
+}
+::-webkit-scrollbar {
+  z-index: 11;
+  width: 6px;
+}
+::-webkit-scrollbar-track,
+::-webkit-scrollbar-corner {
+  border-radius: 5px;
+  background: #fff;
+}
+::-webkit-scrollbar-thumb {
+  border-radius: 5px; // 滚动条
+  width: 6px;
+  background-color: #ccc;
+  :hover {
+    background-color: #ccc;
   }
-  ::v-deep(.el-range-input){
-    background: transparent !important;
-    color:#fff !important;
-  }
-  ::v-deep(.el-form-item__label){
-    color:#f1f1f1 !important;
-    font-weight: 400 !important;
-  }
-  ::v-deep(.el-range-separator){
-    color:#f1f1f1 !important;
-    font-weight: 400 !important;
-    color:#fff !important;
-  }
-  ::v-deep(.el-select .el-select-dropdown__wrap) {
-    max-height: 350px !important;
-    overflow-y: auto !important;
-  }
-  .form-item-person-info:hover{
-    cursor: text !important;
-  }
-  .el-form-item__content:hover{
-    cursor: text !important;
-  }
-  ::v-deep(.form-item-person-info .el-input__inner):hover{
-    cursor: text !important;
-  }
-  ::-webkit-scrollbar {
-      z-index: 11;
-      width: 6px;
-    }
-    ::-webkit-scrollbar-track,
-    ::-webkit-scrollbar-corner {
-      border-radius: 5px;
-      background: #fff;
-    }
-    ::-webkit-scrollbar-thumb {
-      border-radius: 5px; // 滚动条
-      width: 6px;
-      background-color: #ccc;
-      :hover {
-        background-color: #ccc;
-      }
-    }
-    ::-webkit-scrollbar-track-piece {
-      border-radius: 5px; // 轨道
-      background: #fff;
-      width: 6px;
-    }
-  .text-over{
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-  .wrap{
-    width:100%;
-    height: 100%;
-    background: #5F8EB9;
+}
+::-webkit-scrollbar-track-piece {
+  border-radius: 5px; // 轨道
+  background: #fff;
+  width: 6px;
+}
+.text-over{
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.wrap{
+  width:100%;
+  height: 100%;
+  background: #5F8EB9;
+  position: relative;
+  overflow: hidden;
+  .header{
     position: relative;
-    overflow: hidden;
-    .header{
+    width: 98%;
+    margin-left:20px;
+    border-top: 10px solid #5F8EB9;
+    border-bottom: 10px solid #5F8EB9;
+    padding:5px 0 5px 20px;
+    color:#f1f1f1;
+    background: #30486C;
+    font-size: 16px;
+  }
+}
+.el-select{
+  width: 100%;
+}
+.header::after{
+  content:"";
+  display: inline-block;
+  position: absolute;
+  top:0;
+  left: -8px;
+  width:4px;
+  height:100%;
+  background: #40C3F1;
+}
+.list-wrap{
+  width:100%;
+  // width:900px;
+  height: calc(100% - 175px); // 去除头部区域
+  overflow-y: auto;
+  .main{
+    width:99%;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    .row {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 40px;
+    }
+    .row:nth-child(2n) {
+      flex-direction: row-reverse;
+    }
+    .row:nth-child(2n):last-child .item {
+      margin-right: auto;
+    }
+    .list-item{
       position: relative;
-      width: 98%;
-      margin-left:20px;
-      border-top: 10px solid #5F8EB9;
-      border-bottom: 10px solid #5F8EB9;
-      padding:5px 0 5px 20px;
-      color:#f1f1f1;
-      background: #30486C;
-      font-size: 16px;
-    }
-  }
-  .el-select{
-    width: 100%;
-  }
-  .header::after{
-      content:"";
-      display: inline-block;
-      position: absolute;
-      top:0;
-      left: -8px;
-      width:4px;
-      height:100%;
-      background: #40C3F1;
-    }
-    .list-wrap{
-      width:100%;
-      // width:900px;
-      height: calc(100% - 175px); // 去除头部区域
-      overflow-y: auto;
-      .main{
-        width:99%;
-        margin: 0 auto;
-        display: flex;
-        flex-direction: column;
-        .row {
-          display: flex;
-          justify-content: space-between;
-          margin-bottom: 40px;
-        }
-        .row:nth-child(2n) {
-          flex-direction: row-reverse;
-        }
-        .row:nth-child(2n):last-child .item {
-          margin-right: auto;
-        }
-        .list-item{
-          position: relative;
-          width: 48%;
-          height: 240px;
-          background-image: url("../../assets/global_images/monitor.png");
-          background-repeat: no-repeat;
-          background-size: cover;
-          // background-size: 100% 100%;
-          // margin-left: 20px;
-          z-index: 10;
-          .img-wrap{
-            position: absolute;
-            left:35px;
-            top:40px;
-            width:238px;
-            height:138px;
-            overflow: hidden;
-            z-index: -1;
-          }
-          .title{
-            width:150px;
-            position: absolute;
-            left:42%;
-            top: 40px;
-            font-size: 20px;
-            color:#40C3F1;
-          }
-          .desc{
-            width:150px;
-            position: absolute;
-            left:42%;
-            top: 75px;
-            font-size: 16px;
-            color:#f1f1f1;
-          }
-          .date{
-            position: absolute;
-            left:50%;
-            transform: translateX(-50%);
-            bottom:70px;
-            font-size: 14px;
-            color:#c1c1c1;
-            margin-left:25px;
-          }
-          .date::after{
-            position: absolute;
-            top:0;
-            left:-20px;
-            content:"";
-            display: inline-block;
-            width: 15px;
-            height: 15px;
-            background-image: url("../../assets/global_images/date.png");
-            background-repeat: no-repeat;
-            background-size: cover;
-          }
-          .ratio{
-            // width:100px;
-            position: absolute;
-            left:50%;
-            transform: translateX(-50%);
-            bottom:40px;
-            font-size: 14px;
-            color:#c1c1c1;
-            // margin-left:18px;
-            margin-left: 25px;
-          }
-          .ratio::after{
-            position: absolute;
-            top:0;
-            left:-20px;
-            content:"";
-            display: inline-block;
-            width: 15px;
-            height: 15px;
-            background-image: url("../../assets/global_images/search.png");
-            background-repeat: no-repeat;
-            background-size: cover;
-          }
-        }
-      }
-    }
-    .main .row:nth-child(odd){
-      .list-item:nth-child(odd)::after{
-        content:"";
-        display: inline-block;
-        width:30px;
-        height: 30px;
+      width: 48%;
+      height: 240px;
+      background-image: url("../../assets/global_images/monitor.png");
+      background-repeat: no-repeat;
+      background-size: cover;
+      // background-size: 100% 100%;
+      // margin-left: 20px;
+      z-index: 10;
+      .img-wrap{
         position: absolute;
-        top:50%;
-        transform: translate(-50%);
-        right:-52px;
-        background-image: url("../../assets/global_images/right.png");
-        background-repeat: no-repeat;
-        background-size: cover;
+        left:35px;
+        top:40px;
+        width:238px;
+        height:138px;
+        overflow: hidden;
+        z-index: -1;
       }
-    }
-    .main .row:nth-child(odd){
-      .list-item:nth-child(even)::after{
-        content:"";
-        display: inline-block;
-        width:30px;
-        height: 30px;
+      .title{
+        width:150px;
         position: absolute;
-        right:50%;
-        transform: translate(-50%);
-        bottom:-35px;
-        background-image: url("../../assets/global_images/right.png");
-        background-repeat: no-repeat;
-        background-size: cover;
-        transform: rotate(90deg);
+        left:42%;
+        top: 40px;
+        font-size: 20px;
+        color:#40C3F1;
       }
-    }
-    .main .row:nth-child(even){
-      .list-item:nth-child(odd)::after{
-        content:"";
-        display: inline-block;
-        width:30px;
-        height: 30px;
+      .desc{
+        width:150px;
         position: absolute;
-        top:50%;
-        transform: translate(-50%);
-        left:-35px;
-        background-image: url("../../assets/global_images/right.png");
-        background-repeat: no-repeat;
-        background-size: cover;
-        transform: rotate(180deg);
+        left:42%;
+        top: 75px;
+        font-size: 16px;
+        color:#f1f1f1;
       }
-    }
-    .main .row:nth-child(even){
-      .list-item:nth-child(even)::after{
-        content:"";
-        display: inline-block;
-        width:30px;
-        height: 30px;
+      .date{
         position: absolute;
         left:50%;
-        transform: translate(-50%);
-        bottom:-35px;
-        background-image: url("../../assets/global_images/right.png");
+        transform: translateX(-50%);
+        bottom:70px;
+        font-size: 14px;
+        color:#c1c1c1;
+        margin-left:25px;
+      }
+      .date::after{
+        position: absolute;
+        top:0;
+        left:-20px;
+        content:"";
+        display: inline-block;
+        width: 15px;
+        height: 15px;
+        background-image: url("../../assets/global_images/date.png");
         background-repeat: no-repeat;
         background-size: cover;
-        transform: rotate(-270deg);
+      }
+      .ratio{
+        // width:100px;
+        position: absolute;
+        left:50%;
+        transform: translateX(-50%);
+        bottom:40px;
+        font-size: 14px;
+        color:#c1c1c1;
+        // margin-left:18px;
+        margin-left: 25px;
+      }
+      .ratio::after{
+        position: absolute;
+        top:0;
+        left:-20px;
+        content:"";
+        display: inline-block;
+        width: 15px;
+        height: 15px;
+        background-image: url("../../assets/global_images/search.png");
+        background-repeat: no-repeat;
+        background-size: cover;
       }
     }
-    // 如果是最后一个元素不显示箭头
-    .main .row:last-child{
-      .list-item:last-child::after{
-        display: none;
-      }
-    }
-    .list-wrap .main .list-item .img-wrap{
-      position: absolute;
-      left: 32px;
-      top: 40px;
-      // width: 190px;
-      width: 212px;
-      height: 138px;
-      overflow: hidden;
-      z-index: -1;
-    }
-    .list-wrap .main .list-item .date{
-      left:75% !important;
-      margin-bottom: 20px;
-    }
-    .list-wrap .main .list-item .ratio{
-      left:75% !important;
-    }
-    .list-wrap .main .list-item .title,.list-wrap .main .list-item .desc{
-      left:62% !important;
-    }
-    .close-icon{
-      z-index: 100;
-      position: absolute;
-      top:2px;
-      right:2px;
-      color:white;
-      background: #fc2323cc;
-      width:25px;
-      height:25px;
-      border-radius: 5px;
-      padding:3px;
-    }
+  }
+}
+.main .row:nth-child(odd){
+  .list-item:nth-child(odd)::after{
+    content:"";
+    display: inline-block;
+    width:30px;
+    height: 30px;
+    position: absolute;
+    top:50%;
+    transform: translate(-50%);
+    right:-52px;
+    background-image: url("../../assets/global_images/right.png");
+    background-repeat: no-repeat;
+    background-size: cover;
+  }
+}
+.main .row:nth-child(odd){
+  .list-item:nth-child(even)::after{
+    content:"";
+    display: inline-block;
+    width:30px;
+    height: 30px;
+    position: absolute;
+    right:50%;
+    transform: translate(-50%);
+    bottom:-35px;
+    background-image: url("../../assets/global_images/right.png");
+    background-repeat: no-repeat;
+    background-size: cover;
+    transform: rotate(90deg);
+  }
+}
+.main .row:nth-child(even){
+  .list-item:nth-child(odd)::after{
+    content:"";
+    display: inline-block;
+    width:30px;
+    height: 30px;
+    position: absolute;
+    top:50%;
+    transform: translate(-50%);
+    left:-35px;
+    background-image: url("../../assets/global_images/right.png");
+    background-repeat: no-repeat;
+    background-size: cover;
+    transform: rotate(180deg);
+  }
+}
+.main .row:nth-child(even){
+  .list-item:nth-child(even)::after{
+    content:"";
+    display: inline-block;
+    width:30px;
+    height: 30px;
+    position: absolute;
+    left:50%;
+    transform: translate(-50%);
+    bottom:-35px;
+    background-image: url("../../assets/global_images/right.png");
+    background-repeat: no-repeat;
+    background-size: cover;
+    transform: rotate(-270deg);
+  }
+}
+// 如果是最后一个元素不显示箭头
+.main .row:last-child{
+  .list-item:last-child::after{
+    display: none;
+  }
+}
+.list-wrap .main .list-item .img-wrap{
+  position: absolute;
+  left: 32px;
+  top: 40px;
+  // width: 190px;
+  width: 212px;
+  height: 138px;
+  overflow: hidden;
+  z-index: -1;
+}
+.list-wrap .main .list-item .date{
+  left:75% !important;
+  margin-bottom: 20px;
+}
+.list-wrap .main .list-item .ratio{
+  left:75% !important;
+}
+.list-wrap .main .list-item .title,.list-wrap .main .list-item .desc{
+  left:62% !important;
+}
+.close-icon{
+  z-index: 100;
+  position: absolute;
+  top:2px;
+  right:2px;
+  color:white;
+  background: #fc2323cc;
+  width:25px;
+  height:25px;
+  border-radius: 5px;
+  padding:3px;
+}
 </style>
diff --git a/src/views/popup/bottom.vue b/src/views/popup/bottom.vue
index e3fe7e2..c95b2a1 100644
--- a/src/views/popup/bottom.vue
+++ b/src/views/popup/bottom.vue
@@ -1,47 +1,84 @@
 <template>
   <div class="bottom">
-    <div class="block1">
-      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">访客控制安全系数组件</div>
-      <visit-bar style="flex:1;"/>
-    </div>
+<!--    <div class="block1" style="border-top-left-radius: 0px;margin-left: 5px">-->
+<!--      <inout-list style="flex:1;"/>-->
+<!--    </div>-->
     <div class="block">
       <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安防事件列表</div>
       <case-table style="flex:1;"/>
     </div>
-    <div class="block">
-      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">其他相关安全系数指标组件</div>
-      <other-line style="flex:1;"/>
+    <div class="block1" style="flex-direction: row;width: 700px">
+      <div style="width: 200px">
+        <div class="item0" style="margin: 36px 0">
+          <el-image :src="require('@/assets/popup/事件.png')" class="base-map-image" mode="fill" />
+          <div class="item-text">
+            <div class="num">{{caseNum.all}}<span class="unit"> 件</span></div>
+            <div style="color: #B3F3F6;">今日总事件</div>
+          </div>
+        </div>
+        <div class="item0">
+          <el-image :src="require('@/assets/popup/事件1.png')" class="base-map-image" mode="fill" />
+          <div class="item-text">
+            <div class="num"><span style="color: #08f102;text-shadow: 0 0 5px #08f102;">{{caseNum.solve}}</span><span class="unit"> 件</span></div>
+            <div style="color: #B3F3F6;">今日已解决</div>
+          </div>
+        </div>
+      </div>
+      <case-pie style="width: calc(100% - 200px);height: 100%"/>
     </div>
-    <div class="block1">
-      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安保人员到岗系数组件</div>
-      <staff-bar1 style="flex:1;"/>
+    <div class="block">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安防事件频率统计</div>
+      <case-bar style="flex:1;"/>
     </div>
   </div>
 </template>
 
 <script>
-// import VisitorPie from "@/views/popup/components/visitorPie";
-import VisitBar from '@/views/popup/components/visitBar';
-import StaffBar1 from '@/views/popup/components/staffBar1';
-import CaseTable from '@/views/popup/components/caseTable';
-// import ReqairTable from "@/views/popup/components/reqairTable";
-import OtherLine from '@/views/popup/components/otherLine';
+
+import CaseTable from '@/views/popup/components/caseTable'
+import CasePie from '@/views/popup/components/casePie'
+import { caseTodayStatistics } from '@/api/pop'
+import CaseBar from '@/views/popup/components/caseBar'
+import InoutList from '@/views/popup/components/inoutList'
 
 export default {
   name: 'Bottom',
-  components: { OtherLine, CaseTable, StaffBar1, VisitBar },
+  components: { InoutList, CaseBar, CasePie, CaseTable },
   data() {
     return {
+      timer: null,
       titleImg: require('@/assets/popup/title.png'), // 背景图片
-      titleAll: require('@/assets/popup/title-all.png'),// 背景图片
-      list: [2156, 2144, 455, 314, 98]
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      list: [2156, 2144, 455, 314, 98],
+      caseNum: {
+        all: 0,
+        solve: 0
+      }
     }
   },
+  mounted() {
+    clearInterval(this.timer)
+    this.search()
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+    this.timer = null
+  },
+  methods: {
+    search() {
+      this.timer = setInterval(() => {
+        caseTodayStatistics().then(response => {
+          if (response.code === 200) {
+            this.caseNum = response.data
+          }
+        })
+      }, 10000)
+    }
+  }
 }
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-
 .bottom{
   width: 100%;
   height: 220px;
@@ -57,11 +94,11 @@
     border-radius: 5px;
     box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
     border-color: rgba(0, 0, 0, .05);
-    margin: 0px 10px;
+    margin: 0px 5px;
     flex-direction: column;
   }
   .block1{
-    width: 500px;
+    width: 750px;
     height: 100%;
     display: flex;
     flex-wrap: wrap;
@@ -69,7 +106,7 @@
     border-radius: 5px;
     box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
     border-color: rgba(0, 0, 0, .05);
-    margin: 0px 10px;
+    margin: 0px 5px;
     flex-direction: column;
   }
   .title{
@@ -93,5 +130,31 @@
     font-size: 15px;
 
   }
+  .item0{
+    width: 100%;
+    height: 50px;
+    display: flex;
+    justify-content: left;
+    align-items: center;
+    padding: 0 8%;
+  }
+  .item-text{
+    text-shadow: 0 0 2px #d1ffff;
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 18px;
+  }
+  .num{
+    text-shadow: 0 0 5px #ffb441;
+    color: #ffb441;
+    font-size: 20px;
+    padding-top: 2px;
+  }
+  .unit{
+    color: #B3F3F6;
+    font-size: 14px;
+    margin-left: 1px;
+  }
 }
 </style>
diff --git a/src/views/popup/components/caseTable.vue b/src/views/popup/components/caseTable.vue
index 95aa677..c9708d7 100644
--- a/src/views/popup/components/caseTable.vue
+++ b/src/views/popup/components/caseTable.vue
@@ -1,5 +1,9 @@
 <template>
   <div class="flowTable">
+<!--    <el-tabs v-model="activeName" @tab-click="changeTime" style="display: flex;position:absolute;right: 30px;top:5px">-->
+<!--      <el-tab-pane label="已解决" name="week"/>-->
+<!--      <el-tab-pane label="未解决" name="month"/>-->
+<!--    </el-tabs>-->
     <div class="success_info_body" v-show="showFlag">
       <!-- 参数名称、列数根据实际情况调整 -->
       <div class="table_body">
@@ -14,7 +18,7 @@
         <div class="table_main_body">
           <div class="table_inner_body" :style="{top: tableTop + 'px'}">
             <div v-for="(item,index) in tableList" class="table_tr" :class="checkCell(item,index)" :key="index" @click="JumpDevice(item)">
-              <div class="tr1 tr">{{item.levelName}}</div>
+              <div class="tr1 tr" :style="{color: item.levelName ==='重大' ? 'red' : item.levelName ==='较大' ? 'orange' : '#b8dffd'}">{{item.levelName}}</div>
               <div class="tr2 tr">{{item.description}}</div>
               <div class="tr1 tr">{{item.statusName}}</div>
               <div class="tr2 tr">{{item.typeName}}</div>
@@ -41,7 +45,7 @@
   data() {
     return {
       picurl: '',
-      defaultPhoto: require('@/assets/global_images/photo_error.png'),
+      defaultPhoto: require('@/assets/global_images/photo_offline.png'),
       errorImg: require('@/assets/global_images/photo_error.png'),
       showFlag: true,
       tableTimer: null,
@@ -104,8 +108,9 @@
       this.picurl = ''
       this.isbig = false
       getCaseListPage({
+        status: '',
         offset: 1,
-        limit: 15
+        limit: 20
       }).then(response => {
         if (response.code === 200) {
           this.tableList = response.data.rows
@@ -190,13 +195,18 @@
   line-height: 15px;
 }
 .tr {
-  overflow: hidden;
   text-overflow: ellipsis;
-  white-space: nowrap;
   box-sizing: border-box;
   padding: 0 5px;
   text-align: center;
   font-size: 13px;
+  word-wrap: break-word; /* 允许在单词内换行 */
+  overflow-wrap: break-word; /* 同上，现代浏览器推荐使用 */
+  white-space: normal; /* 允许自动换行 */
+  line-height: 15px;
+  display: flex;
+  align-items: center; /* 垂直居中 */
+  justify-content: center; /* 水平居中，如需要 */
 }
 .tr1 {
   width: 13%;
@@ -253,7 +263,7 @@
   }
 }
 .hard-state{
-  background:red;
+  background: #ff8585;
 }
 .medium-state{
   background: #ea9700;
diff --git a/src/views/popup/components/doorList.vue b/src/views/popup/components/doorList.vue
new file mode 100644
index 0000000..7bc178a
--- /dev/null
+++ b/src/views/popup/components/doorList.vue
@@ -0,0 +1,257 @@
+<template>
+  <div style="width: 100%;height: 100%;">
+    <div style="text-align: right;margin-right: 5px;">
+      <el-button class="doorbar-btn" type="primary" plain @click="isOn1 = !isOn1" style="margin-left: 3px">{{isOn1 ? '隐藏操作按钮': '开启操作按钮'}}</el-button>
+      <el-button class="doorbar-btn" type="primary" plain @click="controlDool()">{{!isOn2 ? '开启黑名单与闸机联动': '关闭黑名单与闸机联动'}}</el-button>
+    </div>
+    <div class="success_info_body" style="margin: 0 10px;flex: 1">
+      <div class="table_body">
+        <div class="table_th">
+          <div class="tr4 th_style">门禁分组</div>
+          <div class="tr1 th_style" v-show="isOn1">操作</div>
+        </div>
+        <div class="table_main_body">
+          <div class="table_inner_body" :style="{top: tableTop + 'px'}">
+            <div v-for="(item,index) in tableList" class="table_tr" :key="index">
+              <div class="tr4 tr">{{item.groupName}}</div>
+              <div class="tr1 tr" v-show="isOn1">
+                <el-button type="text" v-for="item in statusList" :key="item.value" size="small" @click.stop="editStatus(scope.row, item.value)" style="height: 20px;margin-top: -10px">
+                  {{ item.name }}
+                </el-button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+<!--    <el-pagination layout="prev, pager, next" :total="tableListSize" style="width: 100%;text-align: center" @current-change="handleCurrentChange"/>-->
+  </div>
+</template>
+
+<script>
+import {controlGroup, gateLinkageSwitch, getGroupListPage, getSwitchStatus} from '@/api/device'
+export default {
+  name: 'DoorList',
+  data() {
+    return {
+      defaultPhoto: require('@/assets/global_images/photo.png'),
+      errorImg: require('@/assets/global_images/photo_error.png'),
+      isOn1: false,
+      isOn2: false,
+      tableTimer: null,
+      tableTop: 0,
+      tableList: [],
+      statusList: [
+        { name: '常开', id: '1557975745699823618', value: '0' },
+        { name: '常闭', id: '1557975746215723010', value: '3' },
+        { name: '门开', id: '1557975746723233793', value: '2' },
+        { name: '门闭', id: '1557975747402711041', value: '1' }
+      ],
+      tableListSize: 0,
+      componentTimer: null,
+      visibleSize: 8, // 容器内可视最大完整行数
+      lineHeight: 20, // 每行的实际高度（包含margin-top/bottom,border等）
+      componentTimerInterval: 3600000, //  刷新数据的时间间隔
+      tableTimerInterval: 50, //  向上滚动 1px 所需要的时间，越小越快，推荐值 100
+      listQuery: {
+        groupName: '',
+        gateCode: '',
+        status: '',
+        offset: 1,
+        limit: 8
+      }, // 筛选条件
+      dialogFormVisible: false, // 是否显示编辑框
+      timeRange: [], // 时间范围
+      multipleSelection: [], // 多选选中项
+      list: [], // 列表数据
+      colorRow: {
+        isColor: false,
+        isPop: true
+      },
+      inoutTypeList: [],
+      passWayList: [],
+      total: 0, // 数据总数
+      listLoading: true // 列表加载动画
+    }
+  },
+  created() {
+    getSwitchStatus().then(response => {
+      if (response.code === 200) {
+        this.isOn2 = response.data === 1
+      }
+    })
+    this.fetchData()
+  },
+  methods: {
+    controlDool() {
+      this.isOn2 = !this.isOn2
+      gateLinkageSwitch(this.isOn2 ? 1 : 0).then(response => {
+        if (response.code === 200) {
+          this.$message.success((this.isOn2 ? '开启' : '关闭') + '黑名单与闸机联动成功')
+        }
+      })
+    },
+    fetchData(isNowPage = true) {
+      if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+        this.listQuery.offset = 1
+      }
+      getGroupListPage(this.listQuery).then(response => {
+        if (response.code === 200) {
+          this.tableList = response.data.rows
+          this.tableListSize = parseInt(response.data.total)
+        }
+      })
+    },
+    editStatus(row, status) {
+      controlGroup(row.id, status).then(response => {
+        if (response.code === 200) {
+          this.$message.success('通道控制成功')
+          this.fetchData()
+        }
+      }).catch(_ => { // 异常情况，loading置为false
+      })
+    },
+    handleCurrentChange(val) {
+      this.listQuery.offset = val
+      this.fetchData()
+    },
+    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.doorbar-btn {
+  height: 22px;
+  padding-top: 4px;
+  padding-right: 6px;
+  padding-left: 6px;
+  margin-right: 4px;
+}
+.table_body {
+  width: 100%;
+  margin-top: 0px;
+}
+.table_th {
+  width: 100%;
+  display: flex;
+  height: 15px;
+  line-height: 20px;
+}
+.tr {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 0 5px;
+  text-align: center;
+  font-size: 13px;
+  height: 20px !important;
+}
+.tr1 {
+  width: 35%;
+}
+.tr2 {
+  width: 18%;
+}
+.tr3 {
+  width: 15%;
+  font-size: 13px;
+}
+
+.tr4 {
+  flex: 1;
+}
+.tr5 {
+  width: 100px;
+}
+
+.th_style {
+  color: #b8dffd;
+  font-size: 13px;
+  font-weight: bold;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  box-sizing: border-box;
+  text-align: center;
+}
+.table_main_body {
+  width: 100%;
+  height: 175px;
+  overflow: hidden;
+  position: relative;
+  margin-top: 5px;
+}
+.table_inner_body {
+  width: 100%;
+  position: absolute;
+  left: 0;
+  color: #cce9ff;
+}
+
+.table_tr {
+  display: flex;
+  font-size: 13px;
+  border: 1px solid rgb(71, 160, 199);
+  margin-top: 2px;
+  height: 20px;
+  line-height: 20px;
+  cursor: pointer;
+:hover{
+  background: rgba(255, 153, 51, 0.6);
+}
+}
+.table_tr0 {
+  background: rgba(3, 145, 167, 0.1);
+}
+.table_tr1 {
+  background: rgb(64, 87, 120);
+}
+
+::v-deep .el-pagination {
+  .el-pagination__total {
+    color: white !important;
+  }
+  .el-pagination__jump {
+    color: white !important;
+  }
+  // 两个输入框
+  .el-input__inner {
+    background-color: #092546;
+    border: 1px solid rgba(192, 192, 192, 0.479);
+    color: white !important;
+  }
+  // 左右按键和里面的图标
+  button {
+    background-color: #092546;
+    .el-icon::before {
+      color: white;
+    }
+  }
+  // 分页数字
+  ul {
+    color: white;
+    .el-icon::before {
+      color: white !important;
+    }
+  }
+  // 分页数字的背景色
+  ul > li {
+    background-color: #092546;
+  }
+}
+::v-deep .el-loading-mask {
+  background-color: rgba(0, 0, 0, 0.479);
+}
+
+</style>
diff --git a/src/views/popup/components/personTable.vue b/src/views/popup/components/personTable.vue
index e2e4c1e..ca73933 100644
--- a/src/views/popup/components/personTable.vue
+++ b/src/views/popup/components/personTable.vue
@@ -7,15 +7,17 @@
           <div class="tr4 th_style">安保人员姓名</div>
           <div class="tr4 th_style">性别</div>
           <div class="tr4 th_style">照片</div>
+          <div class="tr4 th_style">状态</div>
         </div>
         <div class="table_main_body">
           <div class="table_inner_body" :style="{top: tableTop + 'px'}">
-            <div v-for="(item,index) in tableList" :class="index%2==1?'table_tr':'table_tr1'" :key="index" @click="JumpDevice(item)">
+            <div v-for="(item,index) in tableList" :class="index % 2==1?'table_tr':'table_tr1'" :key="index" @click="JumpDevice(item)">
               <div class="tr4 tr">{{item.staffName}}</div>
               <div class="tr4 tr">{{item.staffGenderName}}</div>
               <div class="tr4 tr">
                 <img :src="item.picture ? `${item.picture}`: defaultPhoto" width="40px" height="40px" style="margin-left: 5px" @error="errorImg">
               </div>
+              <div class="tr4 tr">{{item.statusName}}</div>
             </div>
           </div>
         </div>
@@ -25,7 +27,7 @@
 </template>
 <script>
 
-import { getStaffListPage, hikPic } from '@/api/person'
+import {getStaffListPage, getStaffOnList, hikPic} from '@/api/person'
 import { repostSocket } from '@/api/common';
 import { getDate } from '@/utils/calendarUtil'
 
@@ -43,7 +45,7 @@
       tableList: [],
       tableListSize: 0,
       componentTimer: null,
-      visibleSize: 5, // 容器内可视最大完整行数
+      visibleSize: 8, // 容器内可视最大完整行数
       lineHeight: 45, // 每行的实际高度（包含margin-top/bottom,border等）
       componentTimerInterval: 3600000, //  刷新数据的时间间隔
       tableTimerInterval: 50 //  向上滚动 1px 所需要的时间，越小越快，推荐值 100
@@ -51,7 +53,7 @@
   },
 
   // 如果没有父元素传值，将watch内的内容搬至mounted中即可
-  props: ["activeFactoryId"],
+  props: ['activeFactoryId'],
   watch: {
     activeFactoryId(val, oldVal) {
       clearInterval(this.componentTimer)
@@ -70,6 +72,8 @@
   methods: {
     JumpDevice(item) {
       const params = {
+        personName: item.staffName,
+        staffCode: item.staffCode,
         facePicUrl: item.picture, // 图片url
         startTime: getDate(-31, 'SECOND'), // 开始时间
         endTime: getDate(0, 'SECOND'), // 结束时间
@@ -94,51 +98,32 @@
         message: this.wallList
       }
       repostSocket(params).then(response => {
-        if (response.code === 200) {
-        }
+        if (response.code === 200) {}
       })
     },
     fetchData() {
       const params = {
-        staffType: '2',
+        // staffType: '2',
         offset: 1,
-        limit: 50,
-        keywords: '',
-        cardNum: '',
-        phone: ''
+        limit: 200
       }
-      getStaffListPage(params).then(response => {
+      getStaffOnList(params).then(response => {
         if (response.code === 200) {
           this.tableList = response.data.rows
+          // this.tableListSize = response.data.total
           this.tableActionFun()
         }
       })
-      // this.tableList = [
-      //   {
-      //     id: '',
-      //     drawNo: 'YQ-001',
-      //     levelName: '一般',
-      //     description: '保安脱岗',
-      //     status: '0',
-      //     statusName: '未解决',
-      //     typeName: '临时事件',
-      //     devName: '视频监控摄像机5',
-      //     positionName: '一期主楼',
-      //     areaName: '3F',
-      //     isKeyAreaName: '否',
-      //     detailLocation: '详细位置',
-      //     happenTime: '2022-05-06 21:55:00'
-      //   }
-      // ]
     },
     tableActionFun() {
       this.tableListSize = this.tableList.length
       if (this.tableListSize > this.visibleSize) {
         this.tableList = this.tableList.concat(this.tableList)
         this.tableTimerFun()
-      } else {
-        this.fillTableList()
       }
+      // else {
+      //   this.fillTableList()
+      // }
     },
     //  当数据过少时，不触发自动轮播事件，并填充没有数据的行，参数根据实际情况修改即可
     fillTableList() {
@@ -230,7 +215,7 @@
 }
 .table_main_body {
   width: 100%;
-  height: 200px;
+  height: calc(40vh - 140px);
   overflow: hidden;
   position: relative;
   margin-top: 5px;
diff --git a/src/views/popup/components/staffLine1.vue b/src/views/popup/components/staffLine1.vue
index d3b0a95..d3cd04b 100644
--- a/src/views/popup/components/staffLine1.vue
+++ b/src/views/popup/components/staffLine1.vue
@@ -12,8 +12,8 @@
 </template>
 
 <script>
-import { multiScoreCommute } from '@/api/pop';
-import * as echarts from "echarts";
+import { multiScoreCommute } from '@/api/pop'
+import * as echarts from 'echarts'
 export default {
   name: 'StaffLine1',
   data() {
diff --git a/src/views/popup/components/visitBar.vue b/src/views/popup/components/visitBar.vue
index 1726d20..4f35e21 100644
--- a/src/views/popup/components/visitBar.vue
+++ b/src/views/popup/components/visitBar.vue
@@ -7,7 +7,7 @@
 import * as echarts from 'echarts';
 
 export default {
-  name: 'AreaBar1',
+  name: 'VisitBar',
   data() {
     return {
       isShow: true,

diff --git a/public/static/webCtrl/hk/demo_embedded_for_iframe.html b/public/static/webCtrl/hk/demo_embedded_for_iframe.html
index 3a0be10..5c18f74 100644
--- a/public/static/webCtrl/hk/demo_embedded_for_iframe.html
+++ b/public/static/webCtrl/hk/demo_embedded_for_iframe.html
@@ -107,6 +107,13 @@
         }
     });
 
+    function destoryPlugin() {
+      if (oWebControl != null){
+        oWebControl.JS_HideWnd();  // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
+        oWebControl.JS_Disconnect().then(function(){}, function() {});
+      }
+    }
+
     function hide(){
       oWebControl.JS_HideWnd();
     };
diff --git a/src/App.vue b/src/App.vue
index d9046c1..b8c5c1a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="app" v-resize="windowResize">
+  <div id="app" style="overflow-y: hidden" v-resize="windowResize">
     <router-view />
   </div>
 </template>
diff --git a/src/api/device.js b/src/api/device.js
index 0ba70ff..8d6c46b 100644
--- a/src/api/device.js
+++ b/src/api/device.js
@@ -159,3 +159,21 @@
     data
   })
 }
+
+export function getSwitchStatus(data) {
+  return request({
+    url: '/cockpit/gateLinkage/switchStatus',
+    method: 'get'
+  })
+}
+
+export function gateLinkageSwitch(controlSwitch) {
+  return request({
+    url: '/cockpit/gateLinkage/switch',
+    method: 'get',
+    params: {
+      controlSwitch
+    }
+  })
+}
+
diff --git a/src/api/person.js b/src/api/person.js
index 8a79c27..0c2a0ff 100644
--- a/src/api/person.js
+++ b/src/api/person.js
@@ -21,6 +21,14 @@
   })
 }
 
+export function getStaffOnList(params) {
+  return request({
+    url: '/cockpit/securityStaff/onList',
+    method: 'GET',
+    params
+  })
+}
+
 export function addStaff(data) {
   return request({
     url: 'staffInfo/add',
diff --git a/src/api/pop.js b/src/api/pop.js
index 01ddde7..6fa7381 100644
--- a/src/api/pop.js
+++ b/src/api/pop.js
@@ -72,6 +72,39 @@
   })
 }
 
+export function baoanStatistics() {
+  return request({
+    url: '/cockpit/securityStaff/statistics',
+    method: 'get',
+    data: {}
+  })
+}
+
+export function visitorStatistics() {
+  return request({
+    url: 'cockpit/visitor/statistics',
+    method: 'get',
+    data: {}
+  })
+}
+
+export function caseTodayStatistics() {
+  return request({
+    url: 'cockpit/case/todayStatistics',
+    method: 'get',
+    data: {}
+  })
+}
+
+export function casePieStatistics(params) {
+  return request({
+    url: 'cockpit/caseType/statisticsByTime',
+    method: 'get',
+    data: params,
+    params
+  })
+}
+
 // 安防事件频次因数组件
 export function securityFrequency() {
   return request({
@@ -158,3 +191,27 @@
     method: 'get'
   })
 }
+
+export function cameraTypeStatistics() {
+  return request({
+    url: '/cockpit/camera/typeStatistics',
+    method: 'get'
+  })
+}
+
+export function deviceStatistics(devType) {
+  return request({
+    url: '/cockpit/device/statistics',
+    method: 'post',
+    data: {
+      devType
+    }
+  })
+}
+
+export function buildPeopleNumber() {
+  return request({
+    url: '/cockpit/build/peopleNumber',
+    method: 'get'
+  })
+}
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index df71207..33d701a 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -280,37 +280,37 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  .table{
-    margin-bottom: 20px;
-  }
-  .pagination-container{
-    padding-bottom: 50px;
-  }
-  .table-title{
-    /*background-color:rgba(243, 243, 243, 1);*/
-    background-color:#fff;
-    .title-header{
-      font-size: 15px;
-      i{
-        margin-left: 10px;
-        margin-right: 5px;
-      }
-      i:focus{
-        outline: none;
-      }
+.table{
+  margin-bottom: 20px;
+}
+.pagination-container{
+  padding-bottom: 50px;
+}
+.table-title{
+  /*background-color:rgba(243, 243, 243, 1);*/
+  background-color:#fff;
+  .title-header{
+    font-size: 15px;
+    i{
+      margin-left: 10px;
+      margin-right: 5px;
+    }
+    i:focus{
+      outline: none;
     }
   }
-  .edit_btns{
-    padding-top:7px;
-    padding-right:3px;
-    text-align: right;
+}
+.edit_btns{
+  padding-top:7px;
+  padding-right:3px;
+  text-align: right;
+}
+.popper-div{
+  line-height: 1.5;
+  .popper-btns{
+    margin-top:10px;
   }
-  .popper-div{
-    line-height: 1.5;
-    .popper-btns{
-      margin-top:10px;
-    }
-  }
+}
 </style>
 
 <style>
diff --git a/src/router/modules/menu.js b/src/router/modules/menu.js
index 28ecc52..447517e 100644
--- a/src/router/modules/menu.js
+++ b/src/router/modules/menu.js
@@ -8,7 +8,7 @@
     redirect: '/loginBoard',
     meta: {
       title: '主页',
-      permission: ['/loginBoard'],
+      // permission: ['/loginBoard'],
       icon: '' // 图标
     },
     children: [
@@ -16,7 +16,7 @@
         path: '/loginBoard',
         name: 'LoginBoard',
         component: () => import('@/views/backstage/loginBoard'),
-        meta: { title: '主页', icon: '', permission: ['/loginBoard'] }
+        meta: { title: '主页', icon: '' }
       }
     ]
   },
diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss
index 0d1614b..f39542e 100644
--- a/src/styles/element-ui.scss
+++ b/src/styles/element-ui.scss
@@ -74,3 +74,6 @@
   height:48px;
   line-height:48px;
 }
+.el-time-panel {
+  margin-left: -20px !important;
+}
diff --git a/src/utils/request.js b/src/utils/request.js
index 02dcee1..a81c17f 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -39,19 +39,21 @@
     } else if (res.code !== 200) {
       // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
       if (res.code === 401 || res.code === 50012 || res.code === 50014) {
-        MessageBox.confirm(
-          '你已被登出，可以取消继续留在该页面，或者重新登录',
-          '确定登出',
-          {
-            confirmButtonText: '重新登录',
-            cancelButtonText: '取消',
-            type: 'warning'
-          }
-        ).then(() => {
-          store.dispatch('FedLogOut').then(() => {
-            location.reload() // 为了重新实例化vue-router对象 避免bug
+        if (!window.location.href.endsWith('right') && !window.location.href.endsWith('left') && !window.location.href.endsWith('bottom')) {
+          MessageBox.confirm(
+            '你已被登出，可以取消继续留在该页面，或者重新登录',
+            '确定登出',
+            {
+              confirmButtonText: '重新登录',
+              cancelButtonText: '取消',
+              type: 'warning'
+            }
+          ).then(() => {
+            store.dispatch('FedLogOut').then(() => {
+              location.reload() // 为了重新实例化vue-router对象 避免bug
+            })
           })
-        })
+        }
       } else {
         Message({
           showClose: true,
diff --git a/src/views/common/trailDialog.vue b/src/views/common/trailDialog.vue
index 04a83eb..fd90c34 100644
--- a/src/views/common/trailDialog.vue
+++ b/src/views/common/trailDialog.vue
@@ -52,6 +52,8 @@
         75: '75%'
       },
       listQuery: {
+        staffCode: '',
+        personName: '',
         facePicUrl: '',
         startTime: '',
         endTime: '',
@@ -81,11 +83,14 @@
   },
   methods: {
     // 初始化对话框
-    initDialog: function(picture = null, name) {
-      this.textMap = '轨迹追踪 — ' + name
+    initDialog: function(row) {
+      this.textMap = '轨迹追踪 — ' + row.staffName
+      this.list = []
       this.clearInput()
       this.dialogFormVisible = true
-      this.listQuery.facePicUrl = picture
+      this.listQuery.facePicUrl = row.picture
+      this.listQuery.staffCode = row.staffCode
+      this.listQuery.personName = row.staffName
       this.fetchData()
     },
     fetchData() {
diff --git a/src/views/person/staffList.vue b/src/views/person/staffList.vue
index ce8643e..95acc5c 100644
--- a/src/views/person/staffList.vue
+++ b/src/views/person/staffList.vue
@@ -332,7 +332,7 @@
     },
     trail(row) {
       this.dialogFormVisible1 = true
-      this.$refs.trailDialog.initDialog(row.picture, row.staffName)
+      this.$refs.trailDialog.initDialog(row)
     },
     // 打开详情对话框
     detail(row) {
diff --git a/src/views/popup/board.vue b/src/views/popup/board.vue
index eb229cc..0f47c22 100644
--- a/src/views/popup/board.vue
+++ b/src/views/popup/board.vue
@@ -4,7 +4,7 @@
       人员轨迹追踪
       <svg-icon v-if="list.length > 0" icon-class="pop-cross" class="close-icon" @click="close" />
     </div>
-    <el-form ref="ruleForm" :model="listQuery" :rules="rules" label-width="100px">
+    <el-form ref="ruleForm" :model="listQuery" :rules="rules" label-width="80px">
       <el-row :gutter="20">
         <el-col :span="12" class="form-item-person-info">
           <el-form-item label="人员信息" prop="personName" style="position:relative">
@@ -20,7 +20,8 @@
               size="small"
               placeholder="请输入人员姓名"
               :popper-append-to-body="false"
-              @change="handlePerson">
+              @change="handlePerson"
+            >
               <el-option
                 v-for="item in personNameList"
                 :key="item.staffCode"
@@ -41,7 +42,7 @@
               end-placeholder="终止时间"
               size="small"
               :clearable="false"
-              style="width:98%"
+              style="width:98%;"
             />
           </el-form-item>
         </el-col>
@@ -53,7 +54,7 @@
           </el-form-item>
         </el-col>
         <el-col :span="6">
-          <el-form-item label="最小相似度" prop="minSimilarity">
+          <el-form-item label="最小相似度" prop="minSimilarity" label-width="100px">
             <el-input v-model="listQuery.minSimilarity" size="small" placeholder="区间50-100" />
           </el-form-item>
         </el-col>
@@ -81,7 +82,7 @@
             <div class="title text-over">
               {{ child.positionName ? child.positionName : '' }}
             </div>
-            <div class="desc text-over" :title="child.devName">
+            <div class="desc text-over" :title="child.devName" style="white-space: normal;word-wrap: break-word;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2; ">
               {{ child.devName ? child.devName : '' }}
             </div>
             <div class="date" style="width:145px">
@@ -110,6 +111,7 @@
     return {
       selectLoading: false,
       personName: '',
+      staffCode: '',
       point: [],
       listQuery: {
         facePicUrl: '', // 图片url
@@ -260,6 +262,7 @@
       this.personNameList.map(item => {
         if (item.staffCode === person) {
           this.personName = item.personName
+          this.staffCode = item.staffCode
           // this.listQuery.personName = item.personName
           this.listQuery.facePicUrl = item.personPicture
           this.listQuery.gender = item.gender
@@ -299,7 +302,11 @@
         spinner: 'el-icon-loading',
         background: 'rgba(0, 0, 0, 0.7)'
       })
-      const postData = Object.assign(this.listQuery, { 'personName': this.personName })
+      const postData = Object.assign(this.listQuery,
+        {
+          'personName': this.personName,
+          'staffCode': this.staffCode
+        })
       console.log(postData)
       hikPic(postData).then(response => {
         loading.close()
@@ -325,6 +332,7 @@
       this.listQuery.minSimilarity = '50'
       this.listQuery.timeRange = ['', '']
       this.personName = ''
+      this.staffCode = ''
       this.list = []
     },
     // 轨迹上墙
@@ -359,299 +367,299 @@
   }
 }
 </script>
-
 <style rel="stylesheet/scss" lang="scss" scoped>
-  ::v-deep(.el-input__inner){
-    border:1px solid #40C3F1 !important;
-    background: transparent !important;
-    color:#fff !important;
+::v-deep(.el-input__inner){
+  border:1px solid #40C3F1 !important;
+  background: transparent !important;
+  color:#fff !important;
+}
+::v-deep(.el-range-input){
+  background: transparent !important;
+  color:#fff !important;
+}
+::v-deep(.el-form-item__label){
+  color:#f1f1f1 !important;
+  font-weight: 400 !important;
+}
+::v-deep(.el-range-separator){
+  color:#f1f1f1 !important;
+  font-weight: 400 !important;
+  color:#fff !important;
+}
+::v-deep(.el-select .el-select-dropdown__wrap) {
+  max-height: 350px !important;
+  overflow-y: auto !important;
+}
+
+.form-item-person-info:hover{
+  cursor: text !important;
+}
+.el-form-item__content:hover{
+  cursor: text !important;
+}
+::v-deep(.form-item-person-info .el-input__inner):hover{
+  cursor: text !important;
+}
+::-webkit-scrollbar {
+  z-index: 11;
+  width: 6px;
+}
+::-webkit-scrollbar-track,
+::-webkit-scrollbar-corner {
+  border-radius: 5px;
+  background: #fff;
+}
+::-webkit-scrollbar-thumb {
+  border-radius: 5px; // 滚动条
+  width: 6px;
+  background-color: #ccc;
+  :hover {
+    background-color: #ccc;
   }
-  ::v-deep(.el-range-input){
-    background: transparent !important;
-    color:#fff !important;
-  }
-  ::v-deep(.el-form-item__label){
-    color:#f1f1f1 !important;
-    font-weight: 400 !important;
-  }
-  ::v-deep(.el-range-separator){
-    color:#f1f1f1 !important;
-    font-weight: 400 !important;
-    color:#fff !important;
-  }
-  ::v-deep(.el-select .el-select-dropdown__wrap) {
-    max-height: 350px !important;
-    overflow-y: auto !important;
-  }
-  .form-item-person-info:hover{
-    cursor: text !important;
-  }
-  .el-form-item__content:hover{
-    cursor: text !important;
-  }
-  ::v-deep(.form-item-person-info .el-input__inner):hover{
-    cursor: text !important;
-  }
-  ::-webkit-scrollbar {
-      z-index: 11;
-      width: 6px;
-    }
-    ::-webkit-scrollbar-track,
-    ::-webkit-scrollbar-corner {
-      border-radius: 5px;
-      background: #fff;
-    }
-    ::-webkit-scrollbar-thumb {
-      border-radius: 5px; // 滚动条
-      width: 6px;
-      background-color: #ccc;
-      :hover {
-        background-color: #ccc;
-      }
-    }
-    ::-webkit-scrollbar-track-piece {
-      border-radius: 5px; // 轨道
-      background: #fff;
-      width: 6px;
-    }
-  .text-over{
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-  .wrap{
-    width:100%;
-    height: 100%;
-    background: #5F8EB9;
+}
+::-webkit-scrollbar-track-piece {
+  border-radius: 5px; // 轨道
+  background: #fff;
+  width: 6px;
+}
+.text-over{
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.wrap{
+  width:100%;
+  height: 100%;
+  background: #5F8EB9;
+  position: relative;
+  overflow: hidden;
+  .header{
     position: relative;
-    overflow: hidden;
-    .header{
+    width: 98%;
+    margin-left:20px;
+    border-top: 10px solid #5F8EB9;
+    border-bottom: 10px solid #5F8EB9;
+    padding:5px 0 5px 20px;
+    color:#f1f1f1;
+    background: #30486C;
+    font-size: 16px;
+  }
+}
+.el-select{
+  width: 100%;
+}
+.header::after{
+  content:"";
+  display: inline-block;
+  position: absolute;
+  top:0;
+  left: -8px;
+  width:4px;
+  height:100%;
+  background: #40C3F1;
+}
+.list-wrap{
+  width:100%;
+  // width:900px;
+  height: calc(100% - 175px); // 去除头部区域
+  overflow-y: auto;
+  .main{
+    width:99%;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    .row {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 40px;
+    }
+    .row:nth-child(2n) {
+      flex-direction: row-reverse;
+    }
+    .row:nth-child(2n):last-child .item {
+      margin-right: auto;
+    }
+    .list-item{
       position: relative;
-      width: 98%;
-      margin-left:20px;
-      border-top: 10px solid #5F8EB9;
-      border-bottom: 10px solid #5F8EB9;
-      padding:5px 0 5px 20px;
-      color:#f1f1f1;
-      background: #30486C;
-      font-size: 16px;
-    }
-  }
-  .el-select{
-    width: 100%;
-  }
-  .header::after{
-      content:"";
-      display: inline-block;
-      position: absolute;
-      top:0;
-      left: -8px;
-      width:4px;
-      height:100%;
-      background: #40C3F1;
-    }
-    .list-wrap{
-      width:100%;
-      // width:900px;
-      height: calc(100% - 175px); // 去除头部区域
-      overflow-y: auto;
-      .main{
-        width:99%;
-        margin: 0 auto;
-        display: flex;
-        flex-direction: column;
-        .row {
-          display: flex;
-          justify-content: space-between;
-          margin-bottom: 40px;
-        }
-        .row:nth-child(2n) {
-          flex-direction: row-reverse;
-        }
-        .row:nth-child(2n):last-child .item {
-          margin-right: auto;
-        }
-        .list-item{
-          position: relative;
-          width: 48%;
-          height: 240px;
-          background-image: url("../../assets/global_images/monitor.png");
-          background-repeat: no-repeat;
-          background-size: cover;
-          // background-size: 100% 100%;
-          // margin-left: 20px;
-          z-index: 10;
-          .img-wrap{
-            position: absolute;
-            left:35px;
-            top:40px;
-            width:238px;
-            height:138px;
-            overflow: hidden;
-            z-index: -1;
-          }
-          .title{
-            width:150px;
-            position: absolute;
-            left:42%;
-            top: 40px;
-            font-size: 20px;
-            color:#40C3F1;
-          }
-          .desc{
-            width:150px;
-            position: absolute;
-            left:42%;
-            top: 75px;
-            font-size: 16px;
-            color:#f1f1f1;
-          }
-          .date{
-            position: absolute;
-            left:50%;
-            transform: translateX(-50%);
-            bottom:70px;
-            font-size: 14px;
-            color:#c1c1c1;
-            margin-left:25px;
-          }
-          .date::after{
-            position: absolute;
-            top:0;
-            left:-20px;
-            content:"";
-            display: inline-block;
-            width: 15px;
-            height: 15px;
-            background-image: url("../../assets/global_images/date.png");
-            background-repeat: no-repeat;
-            background-size: cover;
-          }
-          .ratio{
-            // width:100px;
-            position: absolute;
-            left:50%;
-            transform: translateX(-50%);
-            bottom:40px;
-            font-size: 14px;
-            color:#c1c1c1;
-            // margin-left:18px;
-            margin-left: 25px;
-          }
-          .ratio::after{
-            position: absolute;
-            top:0;
-            left:-20px;
-            content:"";
-            display: inline-block;
-            width: 15px;
-            height: 15px;
-            background-image: url("../../assets/global_images/search.png");
-            background-repeat: no-repeat;
-            background-size: cover;
-          }
-        }
-      }
-    }
-    .main .row:nth-child(odd){
-      .list-item:nth-child(odd)::after{
-        content:"";
-        display: inline-block;
-        width:30px;
-        height: 30px;
+      width: 48%;
+      height: 240px;
+      background-image: url("../../assets/global_images/monitor.png");
+      background-repeat: no-repeat;
+      background-size: cover;
+      // background-size: 100% 100%;
+      // margin-left: 20px;
+      z-index: 10;
+      .img-wrap{
         position: absolute;
-        top:50%;
-        transform: translate(-50%);
-        right:-52px;
-        background-image: url("../../assets/global_images/right.png");
-        background-repeat: no-repeat;
-        background-size: cover;
+        left:35px;
+        top:40px;
+        width:238px;
+        height:138px;
+        overflow: hidden;
+        z-index: -1;
       }
-    }
-    .main .row:nth-child(odd){
-      .list-item:nth-child(even)::after{
-        content:"";
-        display: inline-block;
-        width:30px;
-        height: 30px;
+      .title{
+        width:150px;
         position: absolute;
-        right:50%;
-        transform: translate(-50%);
-        bottom:-35px;
-        background-image: url("../../assets/global_images/right.png");
-        background-repeat: no-repeat;
-        background-size: cover;
-        transform: rotate(90deg);
+        left:42%;
+        top: 40px;
+        font-size: 20px;
+        color:#40C3F1;
       }
-    }
-    .main .row:nth-child(even){
-      .list-item:nth-child(odd)::after{
-        content:"";
-        display: inline-block;
-        width:30px;
-        height: 30px;
+      .desc{
+        width:150px;
         position: absolute;
-        top:50%;
-        transform: translate(-50%);
-        left:-35px;
-        background-image: url("../../assets/global_images/right.png");
-        background-repeat: no-repeat;
-        background-size: cover;
-        transform: rotate(180deg);
+        left:42%;
+        top: 75px;
+        font-size: 16px;
+        color:#f1f1f1;
       }
-    }
-    .main .row:nth-child(even){
-      .list-item:nth-child(even)::after{
-        content:"";
-        display: inline-block;
-        width:30px;
-        height: 30px;
+      .date{
         position: absolute;
         left:50%;
-        transform: translate(-50%);
-        bottom:-35px;
-        background-image: url("../../assets/global_images/right.png");
+        transform: translateX(-50%);
+        bottom:70px;
+        font-size: 14px;
+        color:#c1c1c1;
+        margin-left:25px;
+      }
+      .date::after{
+        position: absolute;
+        top:0;
+        left:-20px;
+        content:"";
+        display: inline-block;
+        width: 15px;
+        height: 15px;
+        background-image: url("../../assets/global_images/date.png");
         background-repeat: no-repeat;
         background-size: cover;
-        transform: rotate(-270deg);
+      }
+      .ratio{
+        // width:100px;
+        position: absolute;
+        left:50%;
+        transform: translateX(-50%);
+        bottom:40px;
+        font-size: 14px;
+        color:#c1c1c1;
+        // margin-left:18px;
+        margin-left: 25px;
+      }
+      .ratio::after{
+        position: absolute;
+        top:0;
+        left:-20px;
+        content:"";
+        display: inline-block;
+        width: 15px;
+        height: 15px;
+        background-image: url("../../assets/global_images/search.png");
+        background-repeat: no-repeat;
+        background-size: cover;
       }
     }
-    // 如果是最后一个元素不显示箭头
-    .main .row:last-child{
-      .list-item:last-child::after{
-        display: none;
-      }
-    }
-    .list-wrap .main .list-item .img-wrap{
-      position: absolute;
-      left: 32px;
-      top: 40px;
-      // width: 190px;
-      width: 212px;
-      height: 138px;
-      overflow: hidden;
-      z-index: -1;
-    }
-    .list-wrap .main .list-item .date{
-      left:75% !important;
-      margin-bottom: 20px;
-    }
-    .list-wrap .main .list-item .ratio{
-      left:75% !important;
-    }
-    .list-wrap .main .list-item .title,.list-wrap .main .list-item .desc{
-      left:62% !important;
-    }
-    .close-icon{
-      z-index: 100;
-      position: absolute;
-      top:2px;
-      right:2px;
-      color:white;
-      background: #fc2323cc;
-      width:25px;
-      height:25px;
-      border-radius: 5px;
-      padding:3px;
-    }
+  }
+}
+.main .row:nth-child(odd){
+  .list-item:nth-child(odd)::after{
+    content:"";
+    display: inline-block;
+    width:30px;
+    height: 30px;
+    position: absolute;
+    top:50%;
+    transform: translate(-50%);
+    right:-52px;
+    background-image: url("../../assets/global_images/right.png");
+    background-repeat: no-repeat;
+    background-size: cover;
+  }
+}
+.main .row:nth-child(odd){
+  .list-item:nth-child(even)::after{
+    content:"";
+    display: inline-block;
+    width:30px;
+    height: 30px;
+    position: absolute;
+    right:50%;
+    transform: translate(-50%);
+    bottom:-35px;
+    background-image: url("../../assets/global_images/right.png");
+    background-repeat: no-repeat;
+    background-size: cover;
+    transform: rotate(90deg);
+  }
+}
+.main .row:nth-child(even){
+  .list-item:nth-child(odd)::after{
+    content:"";
+    display: inline-block;
+    width:30px;
+    height: 30px;
+    position: absolute;
+    top:50%;
+    transform: translate(-50%);
+    left:-35px;
+    background-image: url("../../assets/global_images/right.png");
+    background-repeat: no-repeat;
+    background-size: cover;
+    transform: rotate(180deg);
+  }
+}
+.main .row:nth-child(even){
+  .list-item:nth-child(even)::after{
+    content:"";
+    display: inline-block;
+    width:30px;
+    height: 30px;
+    position: absolute;
+    left:50%;
+    transform: translate(-50%);
+    bottom:-35px;
+    background-image: url("../../assets/global_images/right.png");
+    background-repeat: no-repeat;
+    background-size: cover;
+    transform: rotate(-270deg);
+  }
+}
+// 如果是最后一个元素不显示箭头
+.main .row:last-child{
+  .list-item:last-child::after{
+    display: none;
+  }
+}
+.list-wrap .main .list-item .img-wrap{
+  position: absolute;
+  left: 32px;
+  top: 40px;
+  // width: 190px;
+  width: 212px;
+  height: 138px;
+  overflow: hidden;
+  z-index: -1;
+}
+.list-wrap .main .list-item .date{
+  left:75% !important;
+  margin-bottom: 20px;
+}
+.list-wrap .main .list-item .ratio{
+  left:75% !important;
+}
+.list-wrap .main .list-item .title,.list-wrap .main .list-item .desc{
+  left:62% !important;
+}
+.close-icon{
+  z-index: 100;
+  position: absolute;
+  top:2px;
+  right:2px;
+  color:white;
+  background: #fc2323cc;
+  width:25px;
+  height:25px;
+  border-radius: 5px;
+  padding:3px;
+}
 </style>
diff --git a/src/views/popup/bottom.vue b/src/views/popup/bottom.vue
index e3fe7e2..c95b2a1 100644
--- a/src/views/popup/bottom.vue
+++ b/src/views/popup/bottom.vue
@@ -1,47 +1,84 @@
 <template>
   <div class="bottom">
-    <div class="block1">
-      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">访客控制安全系数组件</div>
-      <visit-bar style="flex:1;"/>
-    </div>
+<!--    <div class="block1" style="border-top-left-radius: 0px;margin-left: 5px">-->
+<!--      <inout-list style="flex:1;"/>-->
+<!--    </div>-->
     <div class="block">
       <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安防事件列表</div>
       <case-table style="flex:1;"/>
     </div>
-    <div class="block">
-      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">其他相关安全系数指标组件</div>
-      <other-line style="flex:1;"/>
+    <div class="block1" style="flex-direction: row;width: 700px">
+      <div style="width: 200px">
+        <div class="item0" style="margin: 36px 0">
+          <el-image :src="require('@/assets/popup/事件.png')" class="base-map-image" mode="fill" />
+          <div class="item-text">
+            <div class="num">{{caseNum.all}}<span class="unit"> 件</span></div>
+            <div style="color: #B3F3F6;">今日总事件</div>
+          </div>
+        </div>
+        <div class="item0">
+          <el-image :src="require('@/assets/popup/事件1.png')" class="base-map-image" mode="fill" />
+          <div class="item-text">
+            <div class="num"><span style="color: #08f102;text-shadow: 0 0 5px #08f102;">{{caseNum.solve}}</span><span class="unit"> 件</span></div>
+            <div style="color: #B3F3F6;">今日已解决</div>
+          </div>
+        </div>
+      </div>
+      <case-pie style="width: calc(100% - 200px);height: 100%"/>
     </div>
-    <div class="block1">
-      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安保人员到岗系数组件</div>
-      <staff-bar1 style="flex:1;"/>
+    <div class="block">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安防事件频率统计</div>
+      <case-bar style="flex:1;"/>
     </div>
   </div>
 </template>
 
 <script>
-// import VisitorPie from "@/views/popup/components/visitorPie";
-import VisitBar from '@/views/popup/components/visitBar';
-import StaffBar1 from '@/views/popup/components/staffBar1';
-import CaseTable from '@/views/popup/components/caseTable';
-// import ReqairTable from "@/views/popup/components/reqairTable";
-import OtherLine from '@/views/popup/components/otherLine';
+
+import CaseTable from '@/views/popup/components/caseTable'
+import CasePie from '@/views/popup/components/casePie'
+import { caseTodayStatistics } from '@/api/pop'
+import CaseBar from '@/views/popup/components/caseBar'
+import InoutList from '@/views/popup/components/inoutList'
 
 export default {
   name: 'Bottom',
-  components: { OtherLine, CaseTable, StaffBar1, VisitBar },
+  components: { InoutList, CaseBar, CasePie, CaseTable },
   data() {
     return {
+      timer: null,
       titleImg: require('@/assets/popup/title.png'), // 背景图片
-      titleAll: require('@/assets/popup/title-all.png'),// 背景图片
-      list: [2156, 2144, 455, 314, 98]
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      list: [2156, 2144, 455, 314, 98],
+      caseNum: {
+        all: 0,
+        solve: 0
+      }
     }
   },
+  mounted() {
+    clearInterval(this.timer)
+    this.search()
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+    this.timer = null
+  },
+  methods: {
+    search() {
+      this.timer = setInterval(() => {
+        caseTodayStatistics().then(response => {
+          if (response.code === 200) {
+            this.caseNum = response.data
+          }
+        })
+      }, 10000)
+    }
+  }
 }
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-
 .bottom{
   width: 100%;
   height: 220px;
@@ -57,11 +94,11 @@
     border-radius: 5px;
     box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
     border-color: rgba(0, 0, 0, .05);
-    margin: 0px 10px;
+    margin: 0px 5px;
     flex-direction: column;
   }
   .block1{
-    width: 500px;
+    width: 750px;
     height: 100%;
     display: flex;
     flex-wrap: wrap;
@@ -69,7 +106,7 @@
     border-radius: 5px;
     box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
     border-color: rgba(0, 0, 0, .05);
-    margin: 0px 10px;
+    margin: 0px 5px;
     flex-direction: column;
   }
   .title{
@@ -93,5 +130,31 @@
     font-size: 15px;
 
   }
+  .item0{
+    width: 100%;
+    height: 50px;
+    display: flex;
+    justify-content: left;
+    align-items: center;
+    padding: 0 8%;
+  }
+  .item-text{
+    text-shadow: 0 0 2px #d1ffff;
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 18px;
+  }
+  .num{
+    text-shadow: 0 0 5px #ffb441;
+    color: #ffb441;
+    font-size: 20px;
+    padding-top: 2px;
+  }
+  .unit{
+    color: #B3F3F6;
+    font-size: 14px;
+    margin-left: 1px;
+  }
 }
 </style>
diff --git a/src/views/popup/components/caseTable.vue b/src/views/popup/components/caseTable.vue
index 95aa677..c9708d7 100644
--- a/src/views/popup/components/caseTable.vue
+++ b/src/views/popup/components/caseTable.vue
@@ -1,5 +1,9 @@
 <template>
   <div class="flowTable">
+<!--    <el-tabs v-model="activeName" @tab-click="changeTime" style="display: flex;position:absolute;right: 30px;top:5px">-->
+<!--      <el-tab-pane label="已解决" name="week"/>-->
+<!--      <el-tab-pane label="未解决" name="month"/>-->
+<!--    </el-tabs>-->
     <div class="success_info_body" v-show="showFlag">
       <!-- 参数名称、列数根据实际情况调整 -->
       <div class="table_body">
@@ -14,7 +18,7 @@
         <div class="table_main_body">
           <div class="table_inner_body" :style="{top: tableTop + 'px'}">
             <div v-for="(item,index) in tableList" class="table_tr" :class="checkCell(item,index)" :key="index" @click="JumpDevice(item)">
-              <div class="tr1 tr">{{item.levelName}}</div>
+              <div class="tr1 tr" :style="{color: item.levelName ==='重大' ? 'red' : item.levelName ==='较大' ? 'orange' : '#b8dffd'}">{{item.levelName}}</div>
               <div class="tr2 tr">{{item.description}}</div>
               <div class="tr1 tr">{{item.statusName}}</div>
               <div class="tr2 tr">{{item.typeName}}</div>
@@ -41,7 +45,7 @@
   data() {
     return {
       picurl: '',
-      defaultPhoto: require('@/assets/global_images/photo_error.png'),
+      defaultPhoto: require('@/assets/global_images/photo_offline.png'),
       errorImg: require('@/assets/global_images/photo_error.png'),
       showFlag: true,
       tableTimer: null,
@@ -104,8 +108,9 @@
       this.picurl = ''
       this.isbig = false
       getCaseListPage({
+        status: '',
         offset: 1,
-        limit: 15
+        limit: 20
       }).then(response => {
         if (response.code === 200) {
           this.tableList = response.data.rows
@@ -190,13 +195,18 @@
   line-height: 15px;
 }
 .tr {
-  overflow: hidden;
   text-overflow: ellipsis;
-  white-space: nowrap;
   box-sizing: border-box;
   padding: 0 5px;
   text-align: center;
   font-size: 13px;
+  word-wrap: break-word; /* 允许在单词内换行 */
+  overflow-wrap: break-word; /* 同上，现代浏览器推荐使用 */
+  white-space: normal; /* 允许自动换行 */
+  line-height: 15px;
+  display: flex;
+  align-items: center; /* 垂直居中 */
+  justify-content: center; /* 水平居中，如需要 */
 }
 .tr1 {
   width: 13%;
@@ -253,7 +263,7 @@
   }
 }
 .hard-state{
-  background:red;
+  background: #ff8585;
 }
 .medium-state{
   background: #ea9700;
diff --git a/src/views/popup/components/doorList.vue b/src/views/popup/components/doorList.vue
new file mode 100644
index 0000000..7bc178a
--- /dev/null
+++ b/src/views/popup/components/doorList.vue
@@ -0,0 +1,257 @@
+<template>
+  <div style="width: 100%;height: 100%;">
+    <div style="text-align: right;margin-right: 5px;">
+      <el-button class="doorbar-btn" type="primary" plain @click="isOn1 = !isOn1" style="margin-left: 3px">{{isOn1 ? '隐藏操作按钮': '开启操作按钮'}}</el-button>
+      <el-button class="doorbar-btn" type="primary" plain @click="controlDool()">{{!isOn2 ? '开启黑名单与闸机联动': '关闭黑名单与闸机联动'}}</el-button>
+    </div>
+    <div class="success_info_body" style="margin: 0 10px;flex: 1">
+      <div class="table_body">
+        <div class="table_th">
+          <div class="tr4 th_style">门禁分组</div>
+          <div class="tr1 th_style" v-show="isOn1">操作</div>
+        </div>
+        <div class="table_main_body">
+          <div class="table_inner_body" :style="{top: tableTop + 'px'}">
+            <div v-for="(item,index) in tableList" class="table_tr" :key="index">
+              <div class="tr4 tr">{{item.groupName}}</div>
+              <div class="tr1 tr" v-show="isOn1">
+                <el-button type="text" v-for="item in statusList" :key="item.value" size="small" @click.stop="editStatus(scope.row, item.value)" style="height: 20px;margin-top: -10px">
+                  {{ item.name }}
+                </el-button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+<!--    <el-pagination layout="prev, pager, next" :total="tableListSize" style="width: 100%;text-align: center" @current-change="handleCurrentChange"/>-->
+  </div>
+</template>
+
+<script>
+import {controlGroup, gateLinkageSwitch, getGroupListPage, getSwitchStatus} from '@/api/device'
+export default {
+  name: 'DoorList',
+  data() {
+    return {
+      defaultPhoto: require('@/assets/global_images/photo.png'),
+      errorImg: require('@/assets/global_images/photo_error.png'),
+      isOn1: false,
+      isOn2: false,
+      tableTimer: null,
+      tableTop: 0,
+      tableList: [],
+      statusList: [
+        { name: '常开', id: '1557975745699823618', value: '0' },
+        { name: '常闭', id: '1557975746215723010', value: '3' },
+        { name: '门开', id: '1557975746723233793', value: '2' },
+        { name: '门闭', id: '1557975747402711041', value: '1' }
+      ],
+      tableListSize: 0,
+      componentTimer: null,
+      visibleSize: 8, // 容器内可视最大完整行数
+      lineHeight: 20, // 每行的实际高度（包含margin-top/bottom,border等）
+      componentTimerInterval: 3600000, //  刷新数据的时间间隔
+      tableTimerInterval: 50, //  向上滚动 1px 所需要的时间，越小越快，推荐值 100
+      listQuery: {
+        groupName: '',
+        gateCode: '',
+        status: '',
+        offset: 1,
+        limit: 8
+      }, // 筛选条件
+      dialogFormVisible: false, // 是否显示编辑框
+      timeRange: [], // 时间范围
+      multipleSelection: [], // 多选选中项
+      list: [], // 列表数据
+      colorRow: {
+        isColor: false,
+        isPop: true
+      },
+      inoutTypeList: [],
+      passWayList: [],
+      total: 0, // 数据总数
+      listLoading: true // 列表加载动画
+    }
+  },
+  created() {
+    getSwitchStatus().then(response => {
+      if (response.code === 200) {
+        this.isOn2 = response.data === 1
+      }
+    })
+    this.fetchData()
+  },
+  methods: {
+    controlDool() {
+      this.isOn2 = !this.isOn2
+      gateLinkageSwitch(this.isOn2 ? 1 : 0).then(response => {
+        if (response.code === 200) {
+          this.$message.success((this.isOn2 ? '开启' : '关闭') + '黑名单与闸机联动成功')
+        }
+      })
+    },
+    fetchData(isNowPage = true) {
+      if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+        this.listQuery.offset = 1
+      }
+      getGroupListPage(this.listQuery).then(response => {
+        if (response.code === 200) {
+          this.tableList = response.data.rows
+          this.tableListSize = parseInt(response.data.total)
+        }
+      })
+    },
+    editStatus(row, status) {
+      controlGroup(row.id, status).then(response => {
+        if (response.code === 200) {
+          this.$message.success('通道控制成功')
+          this.fetchData()
+        }
+      }).catch(_ => { // 异常情况，loading置为false
+      })
+    },
+    handleCurrentChange(val) {
+      this.listQuery.offset = val
+      this.fetchData()
+    },
+    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.doorbar-btn {
+  height: 22px;
+  padding-top: 4px;
+  padding-right: 6px;
+  padding-left: 6px;
+  margin-right: 4px;
+}
+.table_body {
+  width: 100%;
+  margin-top: 0px;
+}
+.table_th {
+  width: 100%;
+  display: flex;
+  height: 15px;
+  line-height: 20px;
+}
+.tr {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 0 5px;
+  text-align: center;
+  font-size: 13px;
+  height: 20px !important;
+}
+.tr1 {
+  width: 35%;
+}
+.tr2 {
+  width: 18%;
+}
+.tr3 {
+  width: 15%;
+  font-size: 13px;
+}
+
+.tr4 {
+  flex: 1;
+}
+.tr5 {
+  width: 100px;
+}
+
+.th_style {
+  color: #b8dffd;
+  font-size: 13px;
+  font-weight: bold;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  box-sizing: border-box;
+  text-align: center;
+}
+.table_main_body {
+  width: 100%;
+  height: 175px;
+  overflow: hidden;
+  position: relative;
+  margin-top: 5px;
+}
+.table_inner_body {
+  width: 100%;
+  position: absolute;
+  left: 0;
+  color: #cce9ff;
+}
+
+.table_tr {
+  display: flex;
+  font-size: 13px;
+  border: 1px solid rgb(71, 160, 199);
+  margin-top: 2px;
+  height: 20px;
+  line-height: 20px;
+  cursor: pointer;
+:hover{
+  background: rgba(255, 153, 51, 0.6);
+}
+}
+.table_tr0 {
+  background: rgba(3, 145, 167, 0.1);
+}
+.table_tr1 {
+  background: rgb(64, 87, 120);
+}
+
+::v-deep .el-pagination {
+  .el-pagination__total {
+    color: white !important;
+  }
+  .el-pagination__jump {
+    color: white !important;
+  }
+  // 两个输入框
+  .el-input__inner {
+    background-color: #092546;
+    border: 1px solid rgba(192, 192, 192, 0.479);
+    color: white !important;
+  }
+  // 左右按键和里面的图标
+  button {
+    background-color: #092546;
+    .el-icon::before {
+      color: white;
+    }
+  }
+  // 分页数字
+  ul {
+    color: white;
+    .el-icon::before {
+      color: white !important;
+    }
+  }
+  // 分页数字的背景色
+  ul > li {
+    background-color: #092546;
+  }
+}
+::v-deep .el-loading-mask {
+  background-color: rgba(0, 0, 0, 0.479);
+}
+
+</style>
diff --git a/src/views/popup/components/personTable.vue b/src/views/popup/components/personTable.vue
index e2e4c1e..ca73933 100644
--- a/src/views/popup/components/personTable.vue
+++ b/src/views/popup/components/personTable.vue
@@ -7,15 +7,17 @@
           <div class="tr4 th_style">安保人员姓名</div>
           <div class="tr4 th_style">性别</div>
           <div class="tr4 th_style">照片</div>
+          <div class="tr4 th_style">状态</div>
         </div>
         <div class="table_main_body">
           <div class="table_inner_body" :style="{top: tableTop + 'px'}">
-            <div v-for="(item,index) in tableList" :class="index%2==1?'table_tr':'table_tr1'" :key="index" @click="JumpDevice(item)">
+            <div v-for="(item,index) in tableList" :class="index % 2==1?'table_tr':'table_tr1'" :key="index" @click="JumpDevice(item)">
               <div class="tr4 tr">{{item.staffName}}</div>
               <div class="tr4 tr">{{item.staffGenderName}}</div>
               <div class="tr4 tr">
                 <img :src="item.picture ? `${item.picture}`: defaultPhoto" width="40px" height="40px" style="margin-left: 5px" @error="errorImg">
               </div>
+              <div class="tr4 tr">{{item.statusName}}</div>
             </div>
           </div>
         </div>
@@ -25,7 +27,7 @@
 </template>
 <script>
 
-import { getStaffListPage, hikPic } from '@/api/person'
+import {getStaffListPage, getStaffOnList, hikPic} from '@/api/person'
 import { repostSocket } from '@/api/common';
 import { getDate } from '@/utils/calendarUtil'
 
@@ -43,7 +45,7 @@
       tableList: [],
       tableListSize: 0,
       componentTimer: null,
-      visibleSize: 5, // 容器内可视最大完整行数
+      visibleSize: 8, // 容器内可视最大完整行数
       lineHeight: 45, // 每行的实际高度（包含margin-top/bottom,border等）
       componentTimerInterval: 3600000, //  刷新数据的时间间隔
       tableTimerInterval: 50 //  向上滚动 1px 所需要的时间，越小越快，推荐值 100
@@ -51,7 +53,7 @@
   },
 
   // 如果没有父元素传值，将watch内的内容搬至mounted中即可
-  props: ["activeFactoryId"],
+  props: ['activeFactoryId'],
   watch: {
     activeFactoryId(val, oldVal) {
       clearInterval(this.componentTimer)
@@ -70,6 +72,8 @@
   methods: {
     JumpDevice(item) {
       const params = {
+        personName: item.staffName,
+        staffCode: item.staffCode,
         facePicUrl: item.picture, // 图片url
         startTime: getDate(-31, 'SECOND'), // 开始时间
         endTime: getDate(0, 'SECOND'), // 结束时间
@@ -94,51 +98,32 @@
         message: this.wallList
       }
       repostSocket(params).then(response => {
-        if (response.code === 200) {
-        }
+        if (response.code === 200) {}
       })
     },
     fetchData() {
       const params = {
-        staffType: '2',
+        // staffType: '2',
         offset: 1,
-        limit: 50,
-        keywords: '',
-        cardNum: '',
-        phone: ''
+        limit: 200
       }
-      getStaffListPage(params).then(response => {
+      getStaffOnList(params).then(response => {
         if (response.code === 200) {
           this.tableList = response.data.rows
+          // this.tableListSize = response.data.total
           this.tableActionFun()
         }
       })
-      // this.tableList = [
-      //   {
-      //     id: '',
-      //     drawNo: 'YQ-001',
-      //     levelName: '一般',
-      //     description: '保安脱岗',
-      //     status: '0',
-      //     statusName: '未解决',
-      //     typeName: '临时事件',
-      //     devName: '视频监控摄像机5',
-      //     positionName: '一期主楼',
-      //     areaName: '3F',
-      //     isKeyAreaName: '否',
-      //     detailLocation: '详细位置',
-      //     happenTime: '2022-05-06 21:55:00'
-      //   }
-      // ]
     },
     tableActionFun() {
       this.tableListSize = this.tableList.length
       if (this.tableListSize > this.visibleSize) {
         this.tableList = this.tableList.concat(this.tableList)
         this.tableTimerFun()
-      } else {
-        this.fillTableList()
       }
+      // else {
+      //   this.fillTableList()
+      // }
     },
     //  当数据过少时，不触发自动轮播事件，并填充没有数据的行，参数根据实际情况修改即可
     fillTableList() {
@@ -230,7 +215,7 @@
 }
 .table_main_body {
   width: 100%;
-  height: 200px;
+  height: calc(40vh - 140px);
   overflow: hidden;
   position: relative;
   margin-top: 5px;
diff --git a/src/views/popup/components/staffLine1.vue b/src/views/popup/components/staffLine1.vue
index d3b0a95..d3cd04b 100644
--- a/src/views/popup/components/staffLine1.vue
+++ b/src/views/popup/components/staffLine1.vue
@@ -12,8 +12,8 @@
 </template>
 
 <script>
-import { multiScoreCommute } from '@/api/pop';
-import * as echarts from "echarts";
+import { multiScoreCommute } from '@/api/pop'
+import * as echarts from 'echarts'
 export default {
   name: 'StaffLine1',
   data() {
diff --git a/src/views/popup/components/visitBar.vue b/src/views/popup/components/visitBar.vue
index 1726d20..4f35e21 100644
--- a/src/views/popup/components/visitBar.vue
+++ b/src/views/popup/components/visitBar.vue
@@ -7,7 +7,7 @@
 import * as echarts from 'echarts';
 
 export default {
-  name: 'AreaBar1',
+  name: 'VisitBar',
   data() {
     return {
       isShow: true,
diff --git a/src/views/popup/floor.vue b/src/views/popup/floor.vue
index 6342d5a..8052ae4 100644
--- a/src/views/popup/floor.vue
+++ b/src/views/popup/floor.vue
@@ -107,8 +107,7 @@
         message: 'show'
       }
       repostSocket(params).then(response => {
-        if (response.code === 200) {
-        }
+        if (response.code === 200) {}
       })
     }
   }

diff --git a/public/static/webCtrl/hk/demo_embedded_for_iframe.html b/public/static/webCtrl/hk/demo_embedded_for_iframe.html
index 3a0be10..5c18f74 100644
--- a/public/static/webCtrl/hk/demo_embedded_for_iframe.html
+++ b/public/static/webCtrl/hk/demo_embedded_for_iframe.html
@@ -107,6 +107,13 @@
         }
     });
 
+    function destoryPlugin() {
+      if (oWebControl != null){
+        oWebControl.JS_HideWnd();  // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
+        oWebControl.JS_Disconnect().then(function(){}, function() {});
+      }
+    }
+
     function hide(){
       oWebControl.JS_HideWnd();
     };
diff --git a/src/App.vue b/src/App.vue
index d9046c1..b8c5c1a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="app" v-resize="windowResize">
+  <div id="app" style="overflow-y: hidden" v-resize="windowResize">
     <router-view />
   </div>
 </template>
diff --git a/src/api/device.js b/src/api/device.js
index 0ba70ff..8d6c46b 100644
--- a/src/api/device.js
+++ b/src/api/device.js
@@ -159,3 +159,21 @@
     data
   })
 }
+
+export function getSwitchStatus(data) {
+  return request({
+    url: '/cockpit/gateLinkage/switchStatus',
+    method: 'get'
+  })
+}
+
+export function gateLinkageSwitch(controlSwitch) {
+  return request({
+    url: '/cockpit/gateLinkage/switch',
+    method: 'get',
+    params: {
+      controlSwitch
+    }
+  })
+}
+
diff --git a/src/api/person.js b/src/api/person.js
index 8a79c27..0c2a0ff 100644
--- a/src/api/person.js
+++ b/src/api/person.js
@@ -21,6 +21,14 @@
   })
 }
 
+export function getStaffOnList(params) {
+  return request({
+    url: '/cockpit/securityStaff/onList',
+    method: 'GET',
+    params
+  })
+}
+
 export function addStaff(data) {
   return request({
     url: 'staffInfo/add',
diff --git a/src/api/pop.js b/src/api/pop.js
index 01ddde7..6fa7381 100644
--- a/src/api/pop.js
+++ b/src/api/pop.js
@@ -72,6 +72,39 @@
   })
 }
 
+export function baoanStatistics() {
+  return request({
+    url: '/cockpit/securityStaff/statistics',
+    method: 'get',
+    data: {}
+  })
+}
+
+export function visitorStatistics() {
+  return request({
+    url: 'cockpit/visitor/statistics',
+    method: 'get',
+    data: {}
+  })
+}
+
+export function caseTodayStatistics() {
+  return request({
+    url: 'cockpit/case/todayStatistics',
+    method: 'get',
+    data: {}
+  })
+}
+
+export function casePieStatistics(params) {
+  return request({
+    url: 'cockpit/caseType/statisticsByTime',
+    method: 'get',
+    data: params,
+    params
+  })
+}
+
 // 安防事件频次因数组件
 export function securityFrequency() {
   return request({
@@ -158,3 +191,27 @@
     method: 'get'
   })
 }
+
+export function cameraTypeStatistics() {
+  return request({
+    url: '/cockpit/camera/typeStatistics',
+    method: 'get'
+  })
+}
+
+export function deviceStatistics(devType) {
+  return request({
+    url: '/cockpit/device/statistics',
+    method: 'post',
+    data: {
+      devType
+    }
+  })
+}
+
+export function buildPeopleNumber() {
+  return request({
+    url: '/cockpit/build/peopleNumber',
+    method: 'get'
+  })
+}
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index df71207..33d701a 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -280,37 +280,37 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  .table{
-    margin-bottom: 20px;
-  }
-  .pagination-container{
-    padding-bottom: 50px;
-  }
-  .table-title{
-    /*background-color:rgba(243, 243, 243, 1);*/
-    background-color:#fff;
-    .title-header{
-      font-size: 15px;
-      i{
-        margin-left: 10px;
-        margin-right: 5px;
-      }
-      i:focus{
-        outline: none;
-      }
+.table{
+  margin-bottom: 20px;
+}
+.pagination-container{
+  padding-bottom: 50px;
+}
+.table-title{
+  /*background-color:rgba(243, 243, 243, 1);*/
+  background-color:#fff;
+  .title-header{
+    font-size: 15px;
+    i{
+      margin-left: 10px;
+      margin-right: 5px;
+    }
+    i:focus{
+      outline: none;
     }
   }
-  .edit_btns{
-    padding-top:7px;
-    padding-right:3px;
-    text-align: right;
+}
+.edit_btns{
+  padding-top:7px;
+  padding-right:3px;
+  text-align: right;
+}
+.popper-div{
+  line-height: 1.5;
+  .popper-btns{
+    margin-top:10px;
   }
-  .popper-div{
-    line-height: 1.5;
-    .popper-btns{
-      margin-top:10px;
-    }
-  }
+}
 </style>
 
 <style>
diff --git a/src/router/modules/menu.js b/src/router/modules/menu.js
index 28ecc52..447517e 100644
--- a/src/router/modules/menu.js
+++ b/src/router/modules/menu.js
@@ -8,7 +8,7 @@
     redirect: '/loginBoard',
     meta: {
       title: '主页',
-      permission: ['/loginBoard'],
+      // permission: ['/loginBoard'],
       icon: '' // 图标
     },
     children: [
@@ -16,7 +16,7 @@
         path: '/loginBoard',
         name: 'LoginBoard',
         component: () => import('@/views/backstage/loginBoard'),
-        meta: { title: '主页', icon: '', permission: ['/loginBoard'] }
+        meta: { title: '主页', icon: '' }
       }
     ]
   },
diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss
index 0d1614b..f39542e 100644
--- a/src/styles/element-ui.scss
+++ b/src/styles/element-ui.scss
@@ -74,3 +74,6 @@
   height:48px;
   line-height:48px;
 }
+.el-time-panel {
+  margin-left: -20px !important;
+}
diff --git a/src/utils/request.js b/src/utils/request.js
index 02dcee1..a81c17f 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -39,19 +39,21 @@
     } else if (res.code !== 200) {
       // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
       if (res.code === 401 || res.code === 50012 || res.code === 50014) {
-        MessageBox.confirm(
-          '你已被登出，可以取消继续留在该页面，或者重新登录',
-          '确定登出',
-          {
-            confirmButtonText: '重新登录',
-            cancelButtonText: '取消',
-            type: 'warning'
-          }
-        ).then(() => {
-          store.dispatch('FedLogOut').then(() => {
-            location.reload() // 为了重新实例化vue-router对象 避免bug
+        if (!window.location.href.endsWith('right') && !window.location.href.endsWith('left') && !window.location.href.endsWith('bottom')) {
+          MessageBox.confirm(
+            '你已被登出，可以取消继续留在该页面，或者重新登录',
+            '确定登出',
+            {
+              confirmButtonText: '重新登录',
+              cancelButtonText: '取消',
+              type: 'warning'
+            }
+          ).then(() => {
+            store.dispatch('FedLogOut').then(() => {
+              location.reload() // 为了重新实例化vue-router对象 避免bug
+            })
           })
-        })
+        }
       } else {
         Message({
           showClose: true,
diff --git a/src/views/common/trailDialog.vue b/src/views/common/trailDialog.vue
index 04a83eb..fd90c34 100644
--- a/src/views/common/trailDialog.vue
+++ b/src/views/common/trailDialog.vue
@@ -52,6 +52,8 @@
         75: '75%'
       },
       listQuery: {
+        staffCode: '',
+        personName: '',
         facePicUrl: '',
         startTime: '',
         endTime: '',
@@ -81,11 +83,14 @@
   },
   methods: {
     // 初始化对话框
-    initDialog: function(picture = null, name) {
-      this.textMap = '轨迹追踪 — ' + name
+    initDialog: function(row) {
+      this.textMap = '轨迹追踪 — ' + row.staffName
+      this.list = []
       this.clearInput()
       this.dialogFormVisible = true
-      this.listQuery.facePicUrl = picture
+      this.listQuery.facePicUrl = row.picture
+      this.listQuery.staffCode = row.staffCode
+      this.listQuery.personName = row.staffName
       this.fetchData()
     },
     fetchData() {
diff --git a/src/views/person/staffList.vue b/src/views/person/staffList.vue
index ce8643e..95acc5c 100644
--- a/src/views/person/staffList.vue
+++ b/src/views/person/staffList.vue
@@ -332,7 +332,7 @@
     },
     trail(row) {
       this.dialogFormVisible1 = true
-      this.$refs.trailDialog.initDialog(row.picture, row.staffName)
+      this.$refs.trailDialog.initDialog(row)
     },
     // 打开详情对话框
     detail(row) {
diff --git a/src/views/popup/board.vue b/src/views/popup/board.vue
index eb229cc..0f47c22 100644
--- a/src/views/popup/board.vue
+++ b/src/views/popup/board.vue
@@ -4,7 +4,7 @@
       人员轨迹追踪
       <svg-icon v-if="list.length > 0" icon-class="pop-cross" class="close-icon" @click="close" />
     </div>
-    <el-form ref="ruleForm" :model="listQuery" :rules="rules" label-width="100px">
+    <el-form ref="ruleForm" :model="listQuery" :rules="rules" label-width="80px">
       <el-row :gutter="20">
         <el-col :span="12" class="form-item-person-info">
           <el-form-item label="人员信息" prop="personName" style="position:relative">
@@ -20,7 +20,8 @@
               size="small"
               placeholder="请输入人员姓名"
               :popper-append-to-body="false"
-              @change="handlePerson">
+              @change="handlePerson"
+            >
               <el-option
                 v-for="item in personNameList"
                 :key="item.staffCode"
@@ -41,7 +42,7 @@
               end-placeholder="终止时间"
               size="small"
               :clearable="false"
-              style="width:98%"
+              style="width:98%;"
             />
           </el-form-item>
         </el-col>
@@ -53,7 +54,7 @@
           </el-form-item>
         </el-col>
         <el-col :span="6">
-          <el-form-item label="最小相似度" prop="minSimilarity">
+          <el-form-item label="最小相似度" prop="minSimilarity" label-width="100px">
             <el-input v-model="listQuery.minSimilarity" size="small" placeholder="区间50-100" />
           </el-form-item>
         </el-col>
@@ -81,7 +82,7 @@
             <div class="title text-over">
               {{ child.positionName ? child.positionName : '' }}
             </div>
-            <div class="desc text-over" :title="child.devName">
+            <div class="desc text-over" :title="child.devName" style="white-space: normal;word-wrap: break-word;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2; ">
               {{ child.devName ? child.devName : '' }}
             </div>
             <div class="date" style="width:145px">
@@ -110,6 +111,7 @@
     return {
       selectLoading: false,
       personName: '',
+      staffCode: '',
       point: [],
       listQuery: {
         facePicUrl: '', // 图片url
@@ -260,6 +262,7 @@
       this.personNameList.map(item => {
         if (item.staffCode === person) {
           this.personName = item.personName
+          this.staffCode = item.staffCode
           // this.listQuery.personName = item.personName
           this.listQuery.facePicUrl = item.personPicture
           this.listQuery.gender = item.gender
@@ -299,7 +302,11 @@
         spinner: 'el-icon-loading',
         background: 'rgba(0, 0, 0, 0.7)'
       })
-      const postData = Object.assign(this.listQuery, { 'personName': this.personName })
+      const postData = Object.assign(this.listQuery,
+        {
+          'personName': this.personName,
+          'staffCode': this.staffCode
+        })
       console.log(postData)
       hikPic(postData).then(response => {
         loading.close()
@@ -325,6 +332,7 @@
       this.listQuery.minSimilarity = '50'
       this.listQuery.timeRange = ['', '']
       this.personName = ''
+      this.staffCode = ''
       this.list = []
     },
     // 轨迹上墙
@@ -359,299 +367,299 @@
   }
 }
 </script>
-
 <style rel="stylesheet/scss" lang="scss" scoped>
-  ::v-deep(.el-input__inner){
-    border:1px solid #40C3F1 !important;
-    background: transparent !important;
-    color:#fff !important;
+::v-deep(.el-input__inner){
+  border:1px solid #40C3F1 !important;
+  background: transparent !important;
+  color:#fff !important;
+}
+::v-deep(.el-range-input){
+  background: transparent !important;
+  color:#fff !important;
+}
+::v-deep(.el-form-item__label){
+  color:#f1f1f1 !important;
+  font-weight: 400 !important;
+}
+::v-deep(.el-range-separator){
+  color:#f1f1f1 !important;
+  font-weight: 400 !important;
+  color:#fff !important;
+}
+::v-deep(.el-select .el-select-dropdown__wrap) {
+  max-height: 350px !important;
+  overflow-y: auto !important;
+}
+
+.form-item-person-info:hover{
+  cursor: text !important;
+}
+.el-form-item__content:hover{
+  cursor: text !important;
+}
+::v-deep(.form-item-person-info .el-input__inner):hover{
+  cursor: text !important;
+}
+::-webkit-scrollbar {
+  z-index: 11;
+  width: 6px;
+}
+::-webkit-scrollbar-track,
+::-webkit-scrollbar-corner {
+  border-radius: 5px;
+  background: #fff;
+}
+::-webkit-scrollbar-thumb {
+  border-radius: 5px; // 滚动条
+  width: 6px;
+  background-color: #ccc;
+  :hover {
+    background-color: #ccc;
   }
-  ::v-deep(.el-range-input){
-    background: transparent !important;
-    color:#fff !important;
-  }
-  ::v-deep(.el-form-item__label){
-    color:#f1f1f1 !important;
-    font-weight: 400 !important;
-  }
-  ::v-deep(.el-range-separator){
-    color:#f1f1f1 !important;
-    font-weight: 400 !important;
-    color:#fff !important;
-  }
-  ::v-deep(.el-select .el-select-dropdown__wrap) {
-    max-height: 350px !important;
-    overflow-y: auto !important;
-  }
-  .form-item-person-info:hover{
-    cursor: text !important;
-  }
-  .el-form-item__content:hover{
-    cursor: text !important;
-  }
-  ::v-deep(.form-item-person-info .el-input__inner):hover{
-    cursor: text !important;
-  }
-  ::-webkit-scrollbar {
-      z-index: 11;
-      width: 6px;
-    }
-    ::-webkit-scrollbar-track,
-    ::-webkit-scrollbar-corner {
-      border-radius: 5px;
-      background: #fff;
-    }
-    ::-webkit-scrollbar-thumb {
-      border-radius: 5px; // 滚动条
-      width: 6px;
-      background-color: #ccc;
-      :hover {
-        background-color: #ccc;
-      }
-    }
-    ::-webkit-scrollbar-track-piece {
-      border-radius: 5px; // 轨道
-      background: #fff;
-      width: 6px;
-    }
-  .text-over{
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-  .wrap{
-    width:100%;
-    height: 100%;
-    background: #5F8EB9;
+}
+::-webkit-scrollbar-track-piece {
+  border-radius: 5px; // 轨道
+  background: #fff;
+  width: 6px;
+}
+.text-over{
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.wrap{
+  width:100%;
+  height: 100%;
+  background: #5F8EB9;
+  position: relative;
+  overflow: hidden;
+  .header{
     position: relative;
-    overflow: hidden;
-    .header{
+    width: 98%;
+    margin-left:20px;
+    border-top: 10px solid #5F8EB9;
+    border-bottom: 10px solid #5F8EB9;
+    padding:5px 0 5px 20px;
+    color:#f1f1f1;
+    background: #30486C;
+    font-size: 16px;
+  }
+}
+.el-select{
+  width: 100%;
+}
+.header::after{
+  content:"";
+  display: inline-block;
+  position: absolute;
+  top:0;
+  left: -8px;
+  width:4px;
+  height:100%;
+  background: #40C3F1;
+}
+.list-wrap{
+  width:100%;
+  // width:900px;
+  height: calc(100% - 175px); // 去除头部区域
+  overflow-y: auto;
+  .main{
+    width:99%;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    .row {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 40px;
+    }
+    .row:nth-child(2n) {
+      flex-direction: row-reverse;
+    }
+    .row:nth-child(2n):last-child .item {
+      margin-right: auto;
+    }
+    .list-item{
       position: relative;
-      width: 98%;
-      margin-left:20px;
-      border-top: 10px solid #5F8EB9;
-      border-bottom: 10px solid #5F8EB9;
-      padding:5px 0 5px 20px;
-      color:#f1f1f1;
-      background: #30486C;
-      font-size: 16px;
-    }
-  }
-  .el-select{
-    width: 100%;
-  }
-  .header::after{
-      content:"";
-      display: inline-block;
-      position: absolute;
-      top:0;
-      left: -8px;
-      width:4px;
-      height:100%;
-      background: #40C3F1;
-    }
-    .list-wrap{
-      width:100%;
-      // width:900px;
-      height: calc(100% - 175px); // 去除头部区域
-      overflow-y: auto;
-      .main{
-        width:99%;
-        margin: 0 auto;
-        display: flex;
-        flex-direction: column;
-        .row {
-          display: flex;
-          justify-content: space-between;
-          margin-bottom: 40px;
-        }
-        .row:nth-child(2n) {
-          flex-direction: row-reverse;
-        }
-        .row:nth-child(2n):last-child .item {
-          margin-right: auto;
-        }
-        .list-item{
-          position: relative;
-          width: 48%;
-          height: 240px;
-          background-image: url("../../assets/global_images/monitor.png");
-          background-repeat: no-repeat;
-          background-size: cover;
-          // background-size: 100% 100%;
-          // margin-left: 20px;
-          z-index: 10;
-          .img-wrap{
-            position: absolute;
-            left:35px;
-            top:40px;
-            width:238px;
-            height:138px;
-            overflow: hidden;
-            z-index: -1;
-          }
-          .title{
-            width:150px;
-            position: absolute;
-            left:42%;
-            top: 40px;
-            font-size: 20px;
-            color:#40C3F1;
-          }
-          .desc{
-            width:150px;
-            position: absolute;
-            left:42%;
-            top: 75px;
-            font-size: 16px;
-            color:#f1f1f1;
-          }
-          .date{
-            position: absolute;
-            left:50%;
-            transform: translateX(-50%);
-            bottom:70px;
-            font-size: 14px;
-            color:#c1c1c1;
-            margin-left:25px;
-          }
-          .date::after{
-            position: absolute;
-            top:0;
-            left:-20px;
-            content:"";
-            display: inline-block;
-            width: 15px;
-            height: 15px;
-            background-image: url("../../assets/global_images/date.png");
-            background-repeat: no-repeat;
-            background-size: cover;
-          }
-          .ratio{
-            // width:100px;
-            position: absolute;
-            left:50%;
-            transform: translateX(-50%);
-            bottom:40px;
-            font-size: 14px;
-            color:#c1c1c1;
-            // margin-left:18px;
-            margin-left: 25px;
-          }
-          .ratio::after{
-            position: absolute;
-            top:0;
-            left:-20px;
-            content:"";
-            display: inline-block;
-            width: 15px;
-            height: 15px;
-            background-image: url("../../assets/global_images/search.png");
-            background-repeat: no-repeat;
-            background-size: cover;
-          }
-        }
-      }
-    }
-    .main .row:nth-child(odd){
-      .list-item:nth-child(odd)::after{
-        content:"";
-        display: inline-block;
-        width:30px;
-        height: 30px;
+      width: 48%;
+      height: 240px;
+      background-image: url("../../assets/global_images/monitor.png");
+      background-repeat: no-repeat;
+      background-size: cover;
+      // background-size: 100% 100%;
+      // margin-left: 20px;
+      z-index: 10;
+      .img-wrap{
         position: absolute;
-        top:50%;
-        transform: translate(-50%);
-        right:-52px;
-        background-image: url("../../assets/global_images/right.png");
-        background-repeat: no-repeat;
-        background-size: cover;
+        left:35px;
+        top:40px;
+        width:238px;
+        height:138px;
+        overflow: hidden;
+        z-index: -1;
       }
-    }
-    .main .row:nth-child(odd){
-      .list-item:nth-child(even)::after{
-        content:"";
-        display: inline-block;
-        width:30px;
-        height: 30px;
+      .title{
+        width:150px;
         position: absolute;
-        right:50%;
-        transform: translate(-50%);
-        bottom:-35px;
-        background-image: url("../../assets/global_images/right.png");
-        background-repeat: no-repeat;
-        background-size: cover;
-        transform: rotate(90deg);
+        left:42%;
+        top: 40px;
+        font-size: 20px;
+        color:#40C3F1;
       }
-    }
-    .main .row:nth-child(even){
-      .list-item:nth-child(odd)::after{
-        content:"";
-        display: inline-block;
-        width:30px;
-        height: 30px;
+      .desc{
+        width:150px;
         position: absolute;
-        top:50%;
-        transform: translate(-50%);
-        left:-35px;
-        background-image: url("../../assets/global_images/right.png");
-        background-repeat: no-repeat;
-        background-size: cover;
-        transform: rotate(180deg);
+        left:42%;
+        top: 75px;
+        font-size: 16px;
+        color:#f1f1f1;
       }
-    }
-    .main .row:nth-child(even){
-      .list-item:nth-child(even)::after{
-        content:"";
-        display: inline-block;
-        width:30px;
-        height: 30px;
+      .date{
         position: absolute;
         left:50%;
-        transform: translate(-50%);
-        bottom:-35px;
-        background-image: url("../../assets/global_images/right.png");
+        transform: translateX(-50%);
+        bottom:70px;
+        font-size: 14px;
+        color:#c1c1c1;
+        margin-left:25px;
+      }
+      .date::after{
+        position: absolute;
+        top:0;
+        left:-20px;
+        content:"";
+        display: inline-block;
+        width: 15px;
+        height: 15px;
+        background-image: url("../../assets/global_images/date.png");
         background-repeat: no-repeat;
         background-size: cover;
-        transform: rotate(-270deg);
+      }
+      .ratio{
+        // width:100px;
+        position: absolute;
+        left:50%;
+        transform: translateX(-50%);
+        bottom:40px;
+        font-size: 14px;
+        color:#c1c1c1;
+        // margin-left:18px;
+        margin-left: 25px;
+      }
+      .ratio::after{
+        position: absolute;
+        top:0;
+        left:-20px;
+        content:"";
+        display: inline-block;
+        width: 15px;
+        height: 15px;
+        background-image: url("../../assets/global_images/search.png");
+        background-repeat: no-repeat;
+        background-size: cover;
       }
     }
-    // 如果是最后一个元素不显示箭头
-    .main .row:last-child{
-      .list-item:last-child::after{
-        display: none;
-      }
-    }
-    .list-wrap .main .list-item .img-wrap{
-      position: absolute;
-      left: 32px;
-      top: 40px;
-      // width: 190px;
-      width: 212px;
-      height: 138px;
-      overflow: hidden;
-      z-index: -1;
-    }
-    .list-wrap .main .list-item .date{
-      left:75% !important;
-      margin-bottom: 20px;
-    }
-    .list-wrap .main .list-item .ratio{
-      left:75% !important;
-    }
-    .list-wrap .main .list-item .title,.list-wrap .main .list-item .desc{
-      left:62% !important;
-    }
-    .close-icon{
-      z-index: 100;
-      position: absolute;
-      top:2px;
-      right:2px;
-      color:white;
-      background: #fc2323cc;
-      width:25px;
-      height:25px;
-      border-radius: 5px;
-      padding:3px;
-    }
+  }
+}
+.main .row:nth-child(odd){
+  .list-item:nth-child(odd)::after{
+    content:"";
+    display: inline-block;
+    width:30px;
+    height: 30px;
+    position: absolute;
+    top:50%;
+    transform: translate(-50%);
+    right:-52px;
+    background-image: url("../../assets/global_images/right.png");
+    background-repeat: no-repeat;
+    background-size: cover;
+  }
+}
+.main .row:nth-child(odd){
+  .list-item:nth-child(even)::after{
+    content:"";
+    display: inline-block;
+    width:30px;
+    height: 30px;
+    position: absolute;
+    right:50%;
+    transform: translate(-50%);
+    bottom:-35px;
+    background-image: url("../../assets/global_images/right.png");
+    background-repeat: no-repeat;
+    background-size: cover;
+    transform: rotate(90deg);
+  }
+}
+.main .row:nth-child(even){
+  .list-item:nth-child(odd)::after{
+    content:"";
+    display: inline-block;
+    width:30px;
+    height: 30px;
+    position: absolute;
+    top:50%;
+    transform: translate(-50%);
+    left:-35px;
+    background-image: url("../../assets/global_images/right.png");
+    background-repeat: no-repeat;
+    background-size: cover;
+    transform: rotate(180deg);
+  }
+}
+.main .row:nth-child(even){
+  .list-item:nth-child(even)::after{
+    content:"";
+    display: inline-block;
+    width:30px;
+    height: 30px;
+    position: absolute;
+    left:50%;
+    transform: translate(-50%);
+    bottom:-35px;
+    background-image: url("../../assets/global_images/right.png");
+    background-repeat: no-repeat;
+    background-size: cover;
+    transform: rotate(-270deg);
+  }
+}
+// 如果是最后一个元素不显示箭头
+.main .row:last-child{
+  .list-item:last-child::after{
+    display: none;
+  }
+}
+.list-wrap .main .list-item .img-wrap{
+  position: absolute;
+  left: 32px;
+  top: 40px;
+  // width: 190px;
+  width: 212px;
+  height: 138px;
+  overflow: hidden;
+  z-index: -1;
+}
+.list-wrap .main .list-item .date{
+  left:75% !important;
+  margin-bottom: 20px;
+}
+.list-wrap .main .list-item .ratio{
+  left:75% !important;
+}
+.list-wrap .main .list-item .title,.list-wrap .main .list-item .desc{
+  left:62% !important;
+}
+.close-icon{
+  z-index: 100;
+  position: absolute;
+  top:2px;
+  right:2px;
+  color:white;
+  background: #fc2323cc;
+  width:25px;
+  height:25px;
+  border-radius: 5px;
+  padding:3px;
+}
 </style>
diff --git a/src/views/popup/bottom.vue b/src/views/popup/bottom.vue
index e3fe7e2..c95b2a1 100644
--- a/src/views/popup/bottom.vue
+++ b/src/views/popup/bottom.vue
@@ -1,47 +1,84 @@
 <template>
   <div class="bottom">
-    <div class="block1">
-      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">访客控制安全系数组件</div>
-      <visit-bar style="flex:1;"/>
-    </div>
+<!--    <div class="block1" style="border-top-left-radius: 0px;margin-left: 5px">-->
+<!--      <inout-list style="flex:1;"/>-->
+<!--    </div>-->
     <div class="block">
       <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安防事件列表</div>
       <case-table style="flex:1;"/>
     </div>
-    <div class="block">
-      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">其他相关安全系数指标组件</div>
-      <other-line style="flex:1;"/>
+    <div class="block1" style="flex-direction: row;width: 700px">
+      <div style="width: 200px">
+        <div class="item0" style="margin: 36px 0">
+          <el-image :src="require('@/assets/popup/事件.png')" class="base-map-image" mode="fill" />
+          <div class="item-text">
+            <div class="num">{{caseNum.all}}<span class="unit"> 件</span></div>
+            <div style="color: #B3F3F6;">今日总事件</div>
+          </div>
+        </div>
+        <div class="item0">
+          <el-image :src="require('@/assets/popup/事件1.png')" class="base-map-image" mode="fill" />
+          <div class="item-text">
+            <div class="num"><span style="color: #08f102;text-shadow: 0 0 5px #08f102;">{{caseNum.solve}}</span><span class="unit"> 件</span></div>
+            <div style="color: #B3F3F6;">今日已解决</div>
+          </div>
+        </div>
+      </div>
+      <case-pie style="width: calc(100% - 200px);height: 100%"/>
     </div>
-    <div class="block1">
-      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安保人员到岗系数组件</div>
-      <staff-bar1 style="flex:1;"/>
+    <div class="block">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安防事件频率统计</div>
+      <case-bar style="flex:1;"/>
     </div>
   </div>
 </template>
 
 <script>
-// import VisitorPie from "@/views/popup/components/visitorPie";
-import VisitBar from '@/views/popup/components/visitBar';
-import StaffBar1 from '@/views/popup/components/staffBar1';
-import CaseTable from '@/views/popup/components/caseTable';
-// import ReqairTable from "@/views/popup/components/reqairTable";
-import OtherLine from '@/views/popup/components/otherLine';
+
+import CaseTable from '@/views/popup/components/caseTable'
+import CasePie from '@/views/popup/components/casePie'
+import { caseTodayStatistics } from '@/api/pop'
+import CaseBar from '@/views/popup/components/caseBar'
+import InoutList from '@/views/popup/components/inoutList'
 
 export default {
   name: 'Bottom',
-  components: { OtherLine, CaseTable, StaffBar1, VisitBar },
+  components: { InoutList, CaseBar, CasePie, CaseTable },
   data() {
     return {
+      timer: null,
       titleImg: require('@/assets/popup/title.png'), // 背景图片
-      titleAll: require('@/assets/popup/title-all.png'),// 背景图片
-      list: [2156, 2144, 455, 314, 98]
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      list: [2156, 2144, 455, 314, 98],
+      caseNum: {
+        all: 0,
+        solve: 0
+      }
     }
   },
+  mounted() {
+    clearInterval(this.timer)
+    this.search()
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+    this.timer = null
+  },
+  methods: {
+    search() {
+      this.timer = setInterval(() => {
+        caseTodayStatistics().then(response => {
+          if (response.code === 200) {
+            this.caseNum = response.data
+          }
+        })
+      }, 10000)
+    }
+  }
 }
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-
 .bottom{
   width: 100%;
   height: 220px;
@@ -57,11 +94,11 @@
     border-radius: 5px;
     box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
     border-color: rgba(0, 0, 0, .05);
-    margin: 0px 10px;
+    margin: 0px 5px;
     flex-direction: column;
   }
   .block1{
-    width: 500px;
+    width: 750px;
     height: 100%;
     display: flex;
     flex-wrap: wrap;
@@ -69,7 +106,7 @@
     border-radius: 5px;
     box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
     border-color: rgba(0, 0, 0, .05);
-    margin: 0px 10px;
+    margin: 0px 5px;
     flex-direction: column;
   }
   .title{
@@ -93,5 +130,31 @@
     font-size: 15px;
 
   }
+  .item0{
+    width: 100%;
+    height: 50px;
+    display: flex;
+    justify-content: left;
+    align-items: center;
+    padding: 0 8%;
+  }
+  .item-text{
+    text-shadow: 0 0 2px #d1ffff;
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 18px;
+  }
+  .num{
+    text-shadow: 0 0 5px #ffb441;
+    color: #ffb441;
+    font-size: 20px;
+    padding-top: 2px;
+  }
+  .unit{
+    color: #B3F3F6;
+    font-size: 14px;
+    margin-left: 1px;
+  }
 }
 </style>
diff --git a/src/views/popup/components/caseTable.vue b/src/views/popup/components/caseTable.vue
index 95aa677..c9708d7 100644
--- a/src/views/popup/components/caseTable.vue
+++ b/src/views/popup/components/caseTable.vue
@@ -1,5 +1,9 @@
 <template>
   <div class="flowTable">
+<!--    <el-tabs v-model="activeName" @tab-click="changeTime" style="display: flex;position:absolute;right: 30px;top:5px">-->
+<!--      <el-tab-pane label="已解决" name="week"/>-->
+<!--      <el-tab-pane label="未解决" name="month"/>-->
+<!--    </el-tabs>-->
     <div class="success_info_body" v-show="showFlag">
       <!-- 参数名称、列数根据实际情况调整 -->
       <div class="table_body">
@@ -14,7 +18,7 @@
         <div class="table_main_body">
           <div class="table_inner_body" :style="{top: tableTop + 'px'}">
             <div v-for="(item,index) in tableList" class="table_tr" :class="checkCell(item,index)" :key="index" @click="JumpDevice(item)">
-              <div class="tr1 tr">{{item.levelName}}</div>
+              <div class="tr1 tr" :style="{color: item.levelName ==='重大' ? 'red' : item.levelName ==='较大' ? 'orange' : '#b8dffd'}">{{item.levelName}}</div>
               <div class="tr2 tr">{{item.description}}</div>
               <div class="tr1 tr">{{item.statusName}}</div>
               <div class="tr2 tr">{{item.typeName}}</div>
@@ -41,7 +45,7 @@
   data() {
     return {
       picurl: '',
-      defaultPhoto: require('@/assets/global_images/photo_error.png'),
+      defaultPhoto: require('@/assets/global_images/photo_offline.png'),
       errorImg: require('@/assets/global_images/photo_error.png'),
       showFlag: true,
       tableTimer: null,
@@ -104,8 +108,9 @@
       this.picurl = ''
       this.isbig = false
       getCaseListPage({
+        status: '',
         offset: 1,
-        limit: 15
+        limit: 20
       }).then(response => {
         if (response.code === 200) {
           this.tableList = response.data.rows
@@ -190,13 +195,18 @@
   line-height: 15px;
 }
 .tr {
-  overflow: hidden;
   text-overflow: ellipsis;
-  white-space: nowrap;
   box-sizing: border-box;
   padding: 0 5px;
   text-align: center;
   font-size: 13px;
+  word-wrap: break-word; /* 允许在单词内换行 */
+  overflow-wrap: break-word; /* 同上，现代浏览器推荐使用 */
+  white-space: normal; /* 允许自动换行 */
+  line-height: 15px;
+  display: flex;
+  align-items: center; /* 垂直居中 */
+  justify-content: center; /* 水平居中，如需要 */
 }
 .tr1 {
   width: 13%;
@@ -253,7 +263,7 @@
   }
 }
 .hard-state{
-  background:red;
+  background: #ff8585;
 }
 .medium-state{
   background: #ea9700;
diff --git a/src/views/popup/components/doorList.vue b/src/views/popup/components/doorList.vue
new file mode 100644
index 0000000..7bc178a
--- /dev/null
+++ b/src/views/popup/components/doorList.vue
@@ -0,0 +1,257 @@
+<template>
+  <div style="width: 100%;height: 100%;">
+    <div style="text-align: right;margin-right: 5px;">
+      <el-button class="doorbar-btn" type="primary" plain @click="isOn1 = !isOn1" style="margin-left: 3px">{{isOn1 ? '隐藏操作按钮': '开启操作按钮'}}</el-button>
+      <el-button class="doorbar-btn" type="primary" plain @click="controlDool()">{{!isOn2 ? '开启黑名单与闸机联动': '关闭黑名单与闸机联动'}}</el-button>
+    </div>
+    <div class="success_info_body" style="margin: 0 10px;flex: 1">
+      <div class="table_body">
+        <div class="table_th">
+          <div class="tr4 th_style">门禁分组</div>
+          <div class="tr1 th_style" v-show="isOn1">操作</div>
+        </div>
+        <div class="table_main_body">
+          <div class="table_inner_body" :style="{top: tableTop + 'px'}">
+            <div v-for="(item,index) in tableList" class="table_tr" :key="index">
+              <div class="tr4 tr">{{item.groupName}}</div>
+              <div class="tr1 tr" v-show="isOn1">
+                <el-button type="text" v-for="item in statusList" :key="item.value" size="small" @click.stop="editStatus(scope.row, item.value)" style="height: 20px;margin-top: -10px">
+                  {{ item.name }}
+                </el-button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+<!--    <el-pagination layout="prev, pager, next" :total="tableListSize" style="width: 100%;text-align: center" @current-change="handleCurrentChange"/>-->
+  </div>
+</template>
+
+<script>
+import {controlGroup, gateLinkageSwitch, getGroupListPage, getSwitchStatus} from '@/api/device'
+export default {
+  name: 'DoorList',
+  data() {
+    return {
+      defaultPhoto: require('@/assets/global_images/photo.png'),
+      errorImg: require('@/assets/global_images/photo_error.png'),
+      isOn1: false,
+      isOn2: false,
+      tableTimer: null,
+      tableTop: 0,
+      tableList: [],
+      statusList: [
+        { name: '常开', id: '1557975745699823618', value: '0' },
+        { name: '常闭', id: '1557975746215723010', value: '3' },
+        { name: '门开', id: '1557975746723233793', value: '2' },
+        { name: '门闭', id: '1557975747402711041', value: '1' }
+      ],
+      tableListSize: 0,
+      componentTimer: null,
+      visibleSize: 8, // 容器内可视最大完整行数
+      lineHeight: 20, // 每行的实际高度（包含margin-top/bottom,border等）
+      componentTimerInterval: 3600000, //  刷新数据的时间间隔
+      tableTimerInterval: 50, //  向上滚动 1px 所需要的时间，越小越快，推荐值 100
+      listQuery: {
+        groupName: '',
+        gateCode: '',
+        status: '',
+        offset: 1,
+        limit: 8
+      }, // 筛选条件
+      dialogFormVisible: false, // 是否显示编辑框
+      timeRange: [], // 时间范围
+      multipleSelection: [], // 多选选中项
+      list: [], // 列表数据
+      colorRow: {
+        isColor: false,
+        isPop: true
+      },
+      inoutTypeList: [],
+      passWayList: [],
+      total: 0, // 数据总数
+      listLoading: true // 列表加载动画
+    }
+  },
+  created() {
+    getSwitchStatus().then(response => {
+      if (response.code === 200) {
+        this.isOn2 = response.data === 1
+      }
+    })
+    this.fetchData()
+  },
+  methods: {
+    controlDool() {
+      this.isOn2 = !this.isOn2
+      gateLinkageSwitch(this.isOn2 ? 1 : 0).then(response => {
+        if (response.code === 200) {
+          this.$message.success((this.isOn2 ? '开启' : '关闭') + '黑名单与闸机联动成功')
+        }
+      })
+    },
+    fetchData(isNowPage = true) {
+      if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+        this.listQuery.offset = 1
+      }
+      getGroupListPage(this.listQuery).then(response => {
+        if (response.code === 200) {
+          this.tableList = response.data.rows
+          this.tableListSize = parseInt(response.data.total)
+        }
+      })
+    },
+    editStatus(row, status) {
+      controlGroup(row.id, status).then(response => {
+        if (response.code === 200) {
+          this.$message.success('通道控制成功')
+          this.fetchData()
+        }
+      }).catch(_ => { // 异常情况，loading置为false
+      })
+    },
+    handleCurrentChange(val) {
+      this.listQuery.offset = val
+      this.fetchData()
+    },
+    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.doorbar-btn {
+  height: 22px;
+  padding-top: 4px;
+  padding-right: 6px;
+  padding-left: 6px;
+  margin-right: 4px;
+}
+.table_body {
+  width: 100%;
+  margin-top: 0px;
+}
+.table_th {
+  width: 100%;
+  display: flex;
+  height: 15px;
+  line-height: 20px;
+}
+.tr {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 0 5px;
+  text-align: center;
+  font-size: 13px;
+  height: 20px !important;
+}
+.tr1 {
+  width: 35%;
+}
+.tr2 {
+  width: 18%;
+}
+.tr3 {
+  width: 15%;
+  font-size: 13px;
+}
+
+.tr4 {
+  flex: 1;
+}
+.tr5 {
+  width: 100px;
+}
+
+.th_style {
+  color: #b8dffd;
+  font-size: 13px;
+  font-weight: bold;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  box-sizing: border-box;
+  text-align: center;
+}
+.table_main_body {
+  width: 100%;
+  height: 175px;
+  overflow: hidden;
+  position: relative;
+  margin-top: 5px;
+}
+.table_inner_body {
+  width: 100%;
+  position: absolute;
+  left: 0;
+  color: #cce9ff;
+}
+
+.table_tr {
+  display: flex;
+  font-size: 13px;
+  border: 1px solid rgb(71, 160, 199);
+  margin-top: 2px;
+  height: 20px;
+  line-height: 20px;
+  cursor: pointer;
+:hover{
+  background: rgba(255, 153, 51, 0.6);
+}
+}
+.table_tr0 {
+  background: rgba(3, 145, 167, 0.1);
+}
+.table_tr1 {
+  background: rgb(64, 87, 120);
+}
+
+::v-deep .el-pagination {
+  .el-pagination__total {
+    color: white !important;
+  }
+  .el-pagination__jump {
+    color: white !important;
+  }
+  // 两个输入框
+  .el-input__inner {
+    background-color: #092546;
+    border: 1px solid rgba(192, 192, 192, 0.479);
+    color: white !important;
+  }
+  // 左右按键和里面的图标
+  button {
+    background-color: #092546;
+    .el-icon::before {
+      color: white;
+    }
+  }
+  // 分页数字
+  ul {
+    color: white;
+    .el-icon::before {
+      color: white !important;
+    }
+  }
+  // 分页数字的背景色
+  ul > li {
+    background-color: #092546;
+  }
+}
+::v-deep .el-loading-mask {
+  background-color: rgba(0, 0, 0, 0.479);
+}
+
+</style>
diff --git a/src/views/popup/components/personTable.vue b/src/views/popup/components/personTable.vue
index e2e4c1e..ca73933 100644
--- a/src/views/popup/components/personTable.vue
+++ b/src/views/popup/components/personTable.vue
@@ -7,15 +7,17 @@
           <div class="tr4 th_style">安保人员姓名</div>
           <div class="tr4 th_style">性别</div>
           <div class="tr4 th_style">照片</div>
+          <div class="tr4 th_style">状态</div>
         </div>
         <div class="table_main_body">
           <div class="table_inner_body" :style="{top: tableTop + 'px'}">
-            <div v-for="(item,index) in tableList" :class="index%2==1?'table_tr':'table_tr1'" :key="index" @click="JumpDevice(item)">
+            <div v-for="(item,index) in tableList" :class="index % 2==1?'table_tr':'table_tr1'" :key="index" @click="JumpDevice(item)">
               <div class="tr4 tr">{{item.staffName}}</div>
               <div class="tr4 tr">{{item.staffGenderName}}</div>
               <div class="tr4 tr">
                 <img :src="item.picture ? `${item.picture}`: defaultPhoto" width="40px" height="40px" style="margin-left: 5px" @error="errorImg">
               </div>
+              <div class="tr4 tr">{{item.statusName}}</div>
             </div>
           </div>
         </div>
@@ -25,7 +27,7 @@
 </template>
 <script>
 
-import { getStaffListPage, hikPic } from '@/api/person'
+import {getStaffListPage, getStaffOnList, hikPic} from '@/api/person'
 import { repostSocket } from '@/api/common';
 import { getDate } from '@/utils/calendarUtil'
 
@@ -43,7 +45,7 @@
       tableList: [],
       tableListSize: 0,
       componentTimer: null,
-      visibleSize: 5, // 容器内可视最大完整行数
+      visibleSize: 8, // 容器内可视最大完整行数
       lineHeight: 45, // 每行的实际高度（包含margin-top/bottom,border等）
       componentTimerInterval: 3600000, //  刷新数据的时间间隔
       tableTimerInterval: 50 //  向上滚动 1px 所需要的时间，越小越快，推荐值 100
@@ -51,7 +53,7 @@
   },
 
   // 如果没有父元素传值，将watch内的内容搬至mounted中即可
-  props: ["activeFactoryId"],
+  props: ['activeFactoryId'],
   watch: {
     activeFactoryId(val, oldVal) {
       clearInterval(this.componentTimer)
@@ -70,6 +72,8 @@
   methods: {
     JumpDevice(item) {
       const params = {
+        personName: item.staffName,
+        staffCode: item.staffCode,
         facePicUrl: item.picture, // 图片url
         startTime: getDate(-31, 'SECOND'), // 开始时间
         endTime: getDate(0, 'SECOND'), // 结束时间
@@ -94,51 +98,32 @@
         message: this.wallList
       }
       repostSocket(params).then(response => {
-        if (response.code === 200) {
-        }
+        if (response.code === 200) {}
       })
     },
     fetchData() {
       const params = {
-        staffType: '2',
+        // staffType: '2',
         offset: 1,
-        limit: 50,
-        keywords: '',
-        cardNum: '',
-        phone: ''
+        limit: 200
       }
-      getStaffListPage(params).then(response => {
+      getStaffOnList(params).then(response => {
         if (response.code === 200) {
           this.tableList = response.data.rows
+          // this.tableListSize = response.data.total
           this.tableActionFun()
         }
       })
-      // this.tableList = [
-      //   {
-      //     id: '',
-      //     drawNo: 'YQ-001',
-      //     levelName: '一般',
-      //     description: '保安脱岗',
-      //     status: '0',
-      //     statusName: '未解决',
-      //     typeName: '临时事件',
-      //     devName: '视频监控摄像机5',
-      //     positionName: '一期主楼',
-      //     areaName: '3F',
-      //     isKeyAreaName: '否',
-      //     detailLocation: '详细位置',
-      //     happenTime: '2022-05-06 21:55:00'
-      //   }
-      // ]
     },
     tableActionFun() {
       this.tableListSize = this.tableList.length
       if (this.tableListSize > this.visibleSize) {
         this.tableList = this.tableList.concat(this.tableList)
         this.tableTimerFun()
-      } else {
-        this.fillTableList()
       }
+      // else {
+      //   this.fillTableList()
+      // }
     },
     //  当数据过少时，不触发自动轮播事件，并填充没有数据的行，参数根据实际情况修改即可
     fillTableList() {
@@ -230,7 +215,7 @@
 }
 .table_main_body {
   width: 100%;
-  height: 200px;
+  height: calc(40vh - 140px);
   overflow: hidden;
   position: relative;
   margin-top: 5px;
diff --git a/src/views/popup/components/staffLine1.vue b/src/views/popup/components/staffLine1.vue
index d3b0a95..d3cd04b 100644
--- a/src/views/popup/components/staffLine1.vue
+++ b/src/views/popup/components/staffLine1.vue
@@ -12,8 +12,8 @@
 </template>
 
 <script>
-import { multiScoreCommute } from '@/api/pop';
-import * as echarts from "echarts";
+import { multiScoreCommute } from '@/api/pop'
+import * as echarts from 'echarts'
 export default {
   name: 'StaffLine1',
   data() {
diff --git a/src/views/popup/components/visitBar.vue b/src/views/popup/components/visitBar.vue
index 1726d20..4f35e21 100644
--- a/src/views/popup/components/visitBar.vue
+++ b/src/views/popup/components/visitBar.vue
@@ -7,7 +7,7 @@
 import * as echarts from 'echarts';
 
 export default {
-  name: 'AreaBar1',
+  name: 'VisitBar',
   data() {
     return {
       isShow: true,
diff --git a/src/views/popup/floor.vue b/src/views/popup/floor.vue
index 6342d5a..8052ae4 100644
--- a/src/views/popup/floor.vue
+++ b/src/views/popup/floor.vue
@@ -107,8 +107,7 @@
         message: 'show'
       }
       repostSocket(params).then(response => {
-        if (response.code === 200) {
-        }
+        if (response.code === 200) {}
       })
     }
   }
diff --git a/src/views/popup/left.vue b/src/views/popup/left.vue
index d35b6b2..dab745c 100644
--- a/src/views/popup/left.vue
+++ b/src/views/popup/left.vue
@@ -1,67 +1,75 @@
 <template>
   <div class="left">
-    <div class="block" style="justify-content: center;height: 29%;padding-top: 10px">
-      <div class="item">
-        <el-image :src="require('@/assets/popup/人员.png')" class="base-map-image" mode="fill" />
-        <div style="color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;"> 一期主楼、录制楼</div>
-        <div class="num">{{list["0"]}}<span class="unit">人</span></div>
+    <div class="block" style="height: 270px;">
+      <div style="display: flex;flex-direction: row;justify-content: center;padding-top: 10px;height: 70px">
+        <div class="item">
+          <el-image :src="require('@/assets/popup/cam.png')" class="base-map-image" mode="fill" />
+          <div class="item-title">摄像机</div>
+          <div class="num"><span style="color: #08f102;text-shadow: 0 0 5px #08f102;">{{cam.on}}</span> / {{cam.all}}</div>
+        </div>
+        <div class="item">
+          <el-image :src="require('@/assets/popup/闸机.png')" class="base-map-image" mode="fill" />
+          <div class="item-title">闸机</div>
+          <div class="num"><span style="color: #08f102;text-shadow: 0 0 5px #08f102;">{{door.on}}</span> / {{door.all}}</div>
+        </div>
       </div>
-      <div class="item">
-        <el-image :src="require('@/assets/popup/人员.png')" class="base-map-image" mode="fill" />
-        <div style="color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;"> 二期主楼</div>
-        <div class="num">{{list["1"]}}<span class="unit">人</span></div>
-      </div>
-      <div class="item">
-        <el-image :src="require('@/assets/popup/访客.png')" class="base-map-image" mode="fill" />
-        <div style="color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;"> 今日访客量</div>
-        <div class="num">{{list["2"]}}<span class="unit">人</span></div>
-      </div>
-      <div class="item">
-        <el-image :src="require('@/assets/popup/今日事件.png')" class="base-map-image" mode="fill" />
-        <div style="color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;"> 今日事件数</div>
-        <div class="num">{{list["3"]}}<span class="unit">件</span></div>
-      </div>
-      <div class="item">
-        <el-image :src="require('@/assets/popup/今日处置.png')" class="base-map-image" mode="fill" />
-        <div style="color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;"> 事件处置数</div>
-        <div class="num">{{list["4"]}}<span class="unit">件</span></div>
-      </div>
-      <div class="item">
-        <el-image :src="require('@/assets/popup/离线.png')" class="base-map-image" mode="fill" />
-        <div style="color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;">设备离线率</div>
-        <div class="num">{{list["5"]}}<span class="unit"></span></div>
-      </div>
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title" style="margin: 0">摄像机状态分析</div>
+      <cam-bar style="width: 100%;height: 165px"/>
     </div>
-    <div class="block" style="flex-direction: column;">
-      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">员工通勤安防系数组件</div>
-      <staff-line1 style="flex:1;"/>
+    <div class="block" style="height: 250px;">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title" style="margin: 5px 0">闸机控制</div>
+      <door-list style="width: 100%;height: 250px;margin-top: -34px"/>
     </div>
-    <div class="block" style="flex-direction: column;">
-      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">重点区域防控系数组件</div>
-      <area-bar1 style="flex: 1"/>
+    <div class="block" style="height: 500px;">
+      <div style="display: flex;flex-direction: row;justify-content: center;height: 50px">
+        <el-tooltip class="item" effect="dark" :content="`进入人数${tips['1进入人数']}，离开人数${tips['1离开人数']}`" placement="bottom">
+          <div class="item">
+            <el-image :src="require('@/assets/popup/人员.png')" class="base-map-image" mode="fill" style="margin-top: 10px"/>
+            <div class="item-title"> 一期主楼、录制楼</div>
+            <div class="num" style="margin-top: -15px">{{tips["1"]}}<span class="unit">人</span></div>
+          </div>
+        </el-tooltip>
+        <el-tooltip class="item" effect="dark" :content="`进入人数${tips['2进入人数']}，离开人数${tips['2离开人数']}`" placement="bottom">
+          <div class="item">
+            <el-image :src="require('@/assets/popup/人员.png')" class="base-map-image" mode="fill" style="margin-top: 10px;margin-left: -20px"/>
+            <div class="item-title"> 二期主楼 </div>
+            <div class="num" style="margin-top: -15px">{{tips["2"]}}<span class="unit">人</span></div>
+          </div>
+        </el-tooltip>
+      </div>
+      <inout-list style="width: 100%;height: 350px;margin-top: 10px"/>
     </div>
   </div>
 </template>
 
 <script>
-import StaffLine1 from '@/views/popup/components/staffLine1'
-import AreaBar1 from '@/views/popup/components/areaBar1'
-import { getTodayNumber, getPeopleNumber, getDeviceNumber, offlineRate, eventNum } from '@/api/pop'
+import { buildPeopleNumber, deviceStatistics, getPeopleNumber } from '@/api/pop'
+import CamBar from '@/views/popup/components/camBar'
+import DoorList from '@/views/popup/components/doorList'
+import InoutList from '@/views/popup/components/inoutList'
+
 export default {
   name: 'Left',
-  components: { AreaBar1, StaffLine1 },
+  components: { InoutList, DoorList, CamBar },
   data() {
     return {
       timer: null,
       titleImg: require('@/assets/popup/title.png'), // 背景图片
-      titleAll: require('@/assets/popup/title-all.png'),// 背景图片
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      cam: { on: '', all: '' },
+      door: { on: '', all: '' },
       list: {
         '0': '*',
         '1': '*',
-        '2': '*',
-        '3': '*',
-        '4': '*',
-        '5': '*'
+        '2': '*'
+      },
+      tips: {
+        '1': 0,
+        '2': 0,
+        '2进入人数': 0,
+        '1进入人数': 0,
+        '2离开人数': 0,
+        '1离开人数': 0
       }
     }
   },
@@ -73,59 +81,51 @@
     this.timer = setInterval(() => {
       this.initData()
     }, 60000)
+    this.initData()
   },
   methods: {
     initData() {
-      getPeopleNumber().then(response => {
+      deviceStatistics(2).then(response => {
         if (response.code === 200) {
-          this.list['0'] = response.data[1] + (response.data[3] ? response.data[3] : 0)
-          this.list['1'] = response.data[2]
+          this.cam.on = response.data.list.filter(item => item.status === '在线')[0].quantity
+          this.cam.all = response.data.total
         }
       })
-      getTodayNumber().then(response => {
+      deviceStatistics(1).then(response => {
         if (response.code === 200) {
-          this.list['2'] = response.data['今日访客量']
+          this.door.on = response.data.list.filter(item => item.status === '在线')[0].quantity
+          this.door.all = response.data.total
         }
       })
-      // getDeviceNumber().then(response => {
-      //   if (response.code === 200) {
-      //     // this.list['3'] = response.data['设备总数']
-      //     // this.list['4'] = response.data['设备在线率'].replace('%', '')
-      //   }
-      // })
-
-      offlineRate().then(response => {
+      buildPeopleNumber().then(response => {
         if (response.code === 200) {
-          this.list['5'] = response.data['设备离线率']
-        }
-      })
-      eventNum().then(response => {
-        if (response.code === 200) {
-          this.list['3'] = response.data['今日事件数']
-          this.list['4'] = response.data['今日事件处置数']
+          this.tips = response.data
         }
       })
     }
   }
 }
 </script>
-
 <style rel="stylesheet/scss" lang="scss" scoped>
-.left{
+.block{
   width: 100%;
+  height: 200px;
+  background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+  border-radius: 5px;
+  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+  border-color: rgba(0, 0, 0, .05);
+  margin-bottom: 5px;
+  flex-direction: column;
+}
+.left{
+  width: 500px;
   height: 100%;
   overflow: hidden;
-  .block{
-    height: 33%;
-    width: 500px;
-    display: flex;
-    flex-wrap: wrap;
-    background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
-    border-radius: 5px;
-    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
-    border-color: rgba(0, 0, 0, .05);
-    margin: 10px;
-  }
+  //background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+  //box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+  //border-color: rgba(0, 0, 0, .05);
+  margin: 10px 10px 0 10px;
+  border-radius: 5px;
   .title{
     text-shadow: 0 0 5px #d1ffff;
     width: 500px;
@@ -139,6 +139,7 @@
     padding-left: 30px;
     font-family: 黑体;
     letter-spacing: 1px;
+    z-index: 1;
   }
   .base-map-image{
     width: 45px;
@@ -151,15 +152,24 @@
     height: 80%;
   }
   .item{
-    width: 33%;
+    width: 50%;
     font-weight: bold;
     text-align: center;
-    font-size: 15px;
+    font-size: 16px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    .item-title{
+      color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;margin-left: 10px;
+      line-height: 40px;
+      vertical-align: middle;
+    }
     .num{
       text-shadow: 0 0 5px #ffb441;
       color: #ffb441;
-      font-size: 18px;
-      padding-top: 2px;
+      font-size: 20px;
+      width: 100%;
+      margin-top: -0px;
     }
     .unit{
       color: #B3F3F6;

diff --git a/public/static/webCtrl/hk/demo_embedded_for_iframe.html b/public/static/webCtrl/hk/demo_embedded_for_iframe.html
index 3a0be10..5c18f74 100644
--- a/public/static/webCtrl/hk/demo_embedded_for_iframe.html
+++ b/public/static/webCtrl/hk/demo_embedded_for_iframe.html
@@ -107,6 +107,13 @@
         }
     });
 
+    function destoryPlugin() {
+      if (oWebControl != null){
+        oWebControl.JS_HideWnd();  // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
+        oWebControl.JS_Disconnect().then(function(){}, function() {});
+      }
+    }
+
     function hide(){
       oWebControl.JS_HideWnd();
     };
diff --git a/src/App.vue b/src/App.vue
index d9046c1..b8c5c1a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="app" v-resize="windowResize">
+  <div id="app" style="overflow-y: hidden" v-resize="windowResize">
     <router-view />
   </div>
 </template>
diff --git a/src/api/device.js b/src/api/device.js
index 0ba70ff..8d6c46b 100644
--- a/src/api/device.js
+++ b/src/api/device.js
@@ -159,3 +159,21 @@
     data
   })
 }
+
+export function getSwitchStatus(data) {
+  return request({
+    url: '/cockpit/gateLinkage/switchStatus',
+    method: 'get'
+  })
+}
+
+export function gateLinkageSwitch(controlSwitch) {
+  return request({
+    url: '/cockpit/gateLinkage/switch',
+    method: 'get',
+    params: {
+      controlSwitch
+    }
+  })
+}
+
diff --git a/src/api/person.js b/src/api/person.js
index 8a79c27..0c2a0ff 100644
--- a/src/api/person.js
+++ b/src/api/person.js
@@ -21,6 +21,14 @@
   })
 }
 
+export function getStaffOnList(params) {
+  return request({
+    url: '/cockpit/securityStaff/onList',
+    method: 'GET',
+    params
+  })
+}
+
 export function addStaff(data) {
   return request({
     url: 'staffInfo/add',
diff --git a/src/api/pop.js b/src/api/pop.js
index 01ddde7..6fa7381 100644
--- a/src/api/pop.js
+++ b/src/api/pop.js
@@ -72,6 +72,39 @@
   })
 }
 
+export function baoanStatistics() {
+  return request({
+    url: '/cockpit/securityStaff/statistics',
+    method: 'get',
+    data: {}
+  })
+}
+
+export function visitorStatistics() {
+  return request({
+    url: 'cockpit/visitor/statistics',
+    method: 'get',
+    data: {}
+  })
+}
+
+export function caseTodayStatistics() {
+  return request({
+    url: 'cockpit/case/todayStatistics',
+    method: 'get',
+    data: {}
+  })
+}
+
+export function casePieStatistics(params) {
+  return request({
+    url: 'cockpit/caseType/statisticsByTime',
+    method: 'get',
+    data: params,
+    params
+  })
+}
+
 // 安防事件频次因数组件
 export function securityFrequency() {
   return request({
@@ -158,3 +191,27 @@
     method: 'get'
   })
 }
+
+export function cameraTypeStatistics() {
+  return request({
+    url: '/cockpit/camera/typeStatistics',
+    method: 'get'
+  })
+}
+
+export function deviceStatistics(devType) {
+  return request({
+    url: '/cockpit/device/statistics',
+    method: 'post',
+    data: {
+      devType
+    }
+  })
+}
+
+export function buildPeopleNumber() {
+  return request({
+    url: '/cockpit/build/peopleNumber',
+    method: 'get'
+  })
+}
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index df71207..33d701a 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -280,37 +280,37 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  .table{
-    margin-bottom: 20px;
-  }
-  .pagination-container{
-    padding-bottom: 50px;
-  }
-  .table-title{
-    /*background-color:rgba(243, 243, 243, 1);*/
-    background-color:#fff;
-    .title-header{
-      font-size: 15px;
-      i{
-        margin-left: 10px;
-        margin-right: 5px;
-      }
-      i:focus{
-        outline: none;
-      }
+.table{
+  margin-bottom: 20px;
+}
+.pagination-container{
+  padding-bottom: 50px;
+}
+.table-title{
+  /*background-color:rgba(243, 243, 243, 1);*/
+  background-color:#fff;
+  .title-header{
+    font-size: 15px;
+    i{
+      margin-left: 10px;
+      margin-right: 5px;
+    }
+    i:focus{
+      outline: none;
     }
   }
-  .edit_btns{
-    padding-top:7px;
-    padding-right:3px;
-    text-align: right;
+}
+.edit_btns{
+  padding-top:7px;
+  padding-right:3px;
+  text-align: right;
+}
+.popper-div{
+  line-height: 1.5;
+  .popper-btns{
+    margin-top:10px;
   }
-  .popper-div{
-    line-height: 1.5;
-    .popper-btns{
-      margin-top:10px;
-    }
-  }
+}
 </style>
 
 <style>
diff --git a/src/router/modules/menu.js b/src/router/modules/menu.js
index 28ecc52..447517e 100644
--- a/src/router/modules/menu.js
+++ b/src/router/modules/menu.js
@@ -8,7 +8,7 @@
     redirect: '/loginBoard',
     meta: {
       title: '主页',
-      permission: ['/loginBoard'],
+      // permission: ['/loginBoard'],
       icon: '' // 图标
     },
     children: [
@@ -16,7 +16,7 @@
         path: '/loginBoard',
         name: 'LoginBoard',
         component: () => import('@/views/backstage/loginBoard'),
-        meta: { title: '主页', icon: '', permission: ['/loginBoard'] }
+        meta: { title: '主页', icon: '' }
       }
     ]
   },
diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss
index 0d1614b..f39542e 100644
--- a/src/styles/element-ui.scss
+++ b/src/styles/element-ui.scss
@@ -74,3 +74,6 @@
   height:48px;
   line-height:48px;
 }
+.el-time-panel {
+  margin-left: -20px !important;
+}
diff --git a/src/utils/request.js b/src/utils/request.js
index 02dcee1..a81c17f 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -39,19 +39,21 @@
     } else if (res.code !== 200) {
       // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
       if (res.code === 401 || res.code === 50012 || res.code === 50014) {
-        MessageBox.confirm(
-          '你已被登出，可以取消继续留在该页面，或者重新登录',
-          '确定登出',
-          {
-            confirmButtonText: '重新登录',
-            cancelButtonText: '取消',
-            type: 'warning'
-          }
-        ).then(() => {
-          store.dispatch('FedLogOut').then(() => {
-            location.reload() // 为了重新实例化vue-router对象 避免bug
+        if (!window.location.href.endsWith('right') && !window.location.href.endsWith('left') && !window.location.href.endsWith('bottom')) {
+          MessageBox.confirm(
+            '你已被登出，可以取消继续留在该页面，或者重新登录',
+            '确定登出',
+            {
+              confirmButtonText: '重新登录',
+              cancelButtonText: '取消',
+              type: 'warning'
+            }
+          ).then(() => {
+            store.dispatch('FedLogOut').then(() => {
+              location.reload() // 为了重新实例化vue-router对象 避免bug
+            })
           })
-        })
+        }
       } else {
         Message({
           showClose: true,
diff --git a/src/views/common/trailDialog.vue b/src/views/common/trailDialog.vue
index 04a83eb..fd90c34 100644
--- a/src/views/common/trailDialog.vue
+++ b/src/views/common/trailDialog.vue
@@ -52,6 +52,8 @@
         75: '75%'
       },
       listQuery: {
+        staffCode: '',
+        personName: '',
         facePicUrl: '',
         startTime: '',
         endTime: '',
@@ -81,11 +83,14 @@
   },
   methods: {
     // 初始化对话框
-    initDialog: function(picture = null, name) {
-      this.textMap = '轨迹追踪 — ' + name
+    initDialog: function(row) {
+      this.textMap = '轨迹追踪 — ' + row.staffName
+      this.list = []
       this.clearInput()
       this.dialogFormVisible = true
-      this.listQuery.facePicUrl = picture
+      this.listQuery.facePicUrl = row.picture
+      this.listQuery.staffCode = row.staffCode
+      this.listQuery.personName = row.staffName
       this.fetchData()
     },
     fetchData() {
diff --git a/src/views/person/staffList.vue b/src/views/person/staffList.vue
index ce8643e..95acc5c 100644
--- a/src/views/person/staffList.vue
+++ b/src/views/person/staffList.vue
@@ -332,7 +332,7 @@
     },
     trail(row) {
       this.dialogFormVisible1 = true
-      this.$refs.trailDialog.initDialog(row.picture, row.staffName)
+      this.$refs.trailDialog.initDialog(row)
     },
     // 打开详情对话框
     detail(row) {
diff --git a/src/views/popup/board.vue b/src/views/popup/board.vue
index eb229cc..0f47c22 100644
--- a/src/views/popup/board.vue
+++ b/src/views/popup/board.vue
@@ -4,7 +4,7 @@
       人员轨迹追踪
       <svg-icon v-if="list.length > 0" icon-class="pop-cross" class="close-icon" @click="close" />
     </div>
-    <el-form ref="ruleForm" :model="listQuery" :rules="rules" label-width="100px">
+    <el-form ref="ruleForm" :model="listQuery" :rules="rules" label-width="80px">
       <el-row :gutter="20">
         <el-col :span="12" class="form-item-person-info">
           <el-form-item label="人员信息" prop="personName" style="position:relative">
@@ -20,7 +20,8 @@
               size="small"
               placeholder="请输入人员姓名"
               :popper-append-to-body="false"
-              @change="handlePerson">
+              @change="handlePerson"
+            >
               <el-option
                 v-for="item in personNameList"
                 :key="item.staffCode"
@@ -41,7 +42,7 @@
               end-placeholder="终止时间"
               size="small"
               :clearable="false"
-              style="width:98%"
+              style="width:98%;"
             />
           </el-form-item>
         </el-col>
@@ -53,7 +54,7 @@
           </el-form-item>
         </el-col>
         <el-col :span="6">
-          <el-form-item label="最小相似度" prop="minSimilarity">
+          <el-form-item label="最小相似度" prop="minSimilarity" label-width="100px">
             <el-input v-model="listQuery.minSimilarity" size="small" placeholder="区间50-100" />
           </el-form-item>
         </el-col>
@@ -81,7 +82,7 @@
             <div class="title text-over">
               {{ child.positionName ? child.positionName : '' }}
             </div>
-            <div class="desc text-over" :title="child.devName">
+            <div class="desc text-over" :title="child.devName" style="white-space: normal;word-wrap: break-word;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2; ">
               {{ child.devName ? child.devName : '' }}
             </div>
             <div class="date" style="width:145px">
@@ -110,6 +111,7 @@
     return {
       selectLoading: false,
       personName: '',
+      staffCode: '',
       point: [],
       listQuery: {
         facePicUrl: '', // 图片url
@@ -260,6 +262,7 @@
       this.personNameList.map(item => {
         if (item.staffCode === person) {
           this.personName = item.personName
+          this.staffCode = item.staffCode
           // this.listQuery.personName = item.personName
           this.listQuery.facePicUrl = item.personPicture
           this.listQuery.gender = item.gender
@@ -299,7 +302,11 @@
         spinner: 'el-icon-loading',
         background: 'rgba(0, 0, 0, 0.7)'
       })
-      const postData = Object.assign(this.listQuery, { 'personName': this.personName })
+      const postData = Object.assign(this.listQuery,
+        {
+          'personName': this.personName,
+          'staffCode': this.staffCode
+        })
       console.log(postData)
       hikPic(postData).then(response => {
         loading.close()
@@ -325,6 +332,7 @@
       this.listQuery.minSimilarity = '50'
       this.listQuery.timeRange = ['', '']
       this.personName = ''
+      this.staffCode = ''
       this.list = []
     },
     // 轨迹上墙
@@ -359,299 +367,299 @@
   }
 }
 </script>
-
 <style rel="stylesheet/scss" lang="scss" scoped>
-  ::v-deep(.el-input__inner){
-    border:1px solid #40C3F1 !important;
-    background: transparent !important;
-    color:#fff !important;
+::v-deep(.el-input__inner){
+  border:1px solid #40C3F1 !important;
+  background: transparent !important;
+  color:#fff !important;
+}
+::v-deep(.el-range-input){
+  background: transparent !important;
+  color:#fff !important;
+}
+::v-deep(.el-form-item__label){
+  color:#f1f1f1 !important;
+  font-weight: 400 !important;
+}
+::v-deep(.el-range-separator){
+  color:#f1f1f1 !important;
+  font-weight: 400 !important;
+  color:#fff !important;
+}
+::v-deep(.el-select .el-select-dropdown__wrap) {
+  max-height: 350px !important;
+  overflow-y: auto !important;
+}
+
+.form-item-person-info:hover{
+  cursor: text !important;
+}
+.el-form-item__content:hover{
+  cursor: text !important;
+}
+::v-deep(.form-item-person-info .el-input__inner):hover{
+  cursor: text !important;
+}
+::-webkit-scrollbar {
+  z-index: 11;
+  width: 6px;
+}
+::-webkit-scrollbar-track,
+::-webkit-scrollbar-corner {
+  border-radius: 5px;
+  background: #fff;
+}
+::-webkit-scrollbar-thumb {
+  border-radius: 5px; // 滚动条
+  width: 6px;
+  background-color: #ccc;
+  :hover {
+    background-color: #ccc;
   }
-  ::v-deep(.el-range-input){
-    background: transparent !important;
-    color:#fff !important;
-  }
-  ::v-deep(.el-form-item__label){
-    color:#f1f1f1 !important;
-    font-weight: 400 !important;
-  }
-  ::v-deep(.el-range-separator){
-    color:#f1f1f1 !important;
-    font-weight: 400 !important;
-    color:#fff !important;
-  }
-  ::v-deep(.el-select .el-select-dropdown__wrap) {
-    max-height: 350px !important;
-    overflow-y: auto !important;
-  }
-  .form-item-person-info:hover{
-    cursor: text !important;
-  }
-  .el-form-item__content:hover{
-    cursor: text !important;
-  }
-  ::v-deep(.form-item-person-info .el-input__inner):hover{
-    cursor: text !important;
-  }
-  ::-webkit-scrollbar {
-      z-index: 11;
-      width: 6px;
-    }
-    ::-webkit-scrollbar-track,
-    ::-webkit-scrollbar-corner {
-      border-radius: 5px;
-      background: #fff;
-    }
-    ::-webkit-scrollbar-thumb {
-      border-radius: 5px; // 滚动条
-      width: 6px;
-      background-color: #ccc;
-      :hover {
-        background-color: #ccc;
-      }
-    }
-    ::-webkit-scrollbar-track-piece {
-      border-radius: 5px; // 轨道
-      background: #fff;
-      width: 6px;
-    }
-  .text-over{
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-  .wrap{
-    width:100%;
-    height: 100%;
-    background: #5F8EB9;
+}
+::-webkit-scrollbar-track-piece {
+  border-radius: 5px; // 轨道
+  background: #fff;
+  width: 6px;
+}
+.text-over{
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.wrap{
+  width:100%;
+  height: 100%;
+  background: #5F8EB9;
+  position: relative;
+  overflow: hidden;
+  .header{
     position: relative;
-    overflow: hidden;
-    .header{
+    width: 98%;
+    margin-left:20px;
+    border-top: 10px solid #5F8EB9;
+    border-bottom: 10px solid #5F8EB9;
+    padding:5px 0 5px 20px;
+    color:#f1f1f1;
+    background: #30486C;
+    font-size: 16px;
+  }
+}
+.el-select{
+  width: 100%;
+}
+.header::after{
+  content:"";
+  display: inline-block;
+  position: absolute;
+  top:0;
+  left: -8px;
+  width:4px;
+  height:100%;
+  background: #40C3F1;
+}
+.list-wrap{
+  width:100%;
+  // width:900px;
+  height: calc(100% - 175px); // 去除头部区域
+  overflow-y: auto;
+  .main{
+    width:99%;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    .row {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 40px;
+    }
+    .row:nth-child(2n) {
+      flex-direction: row-reverse;
+    }
+    .row:nth-child(2n):last-child .item {
+      margin-right: auto;
+    }
+    .list-item{
       position: relative;
-      width: 98%;
-      margin-left:20px;
-      border-top: 10px solid #5F8EB9;
-      border-bottom: 10px solid #5F8EB9;
-      padding:5px 0 5px 20px;
-      color:#f1f1f1;
-      background: #30486C;
-      font-size: 16px;
-    }
-  }
-  .el-select{
-    width: 100%;
-  }
-  .header::after{
-      content:"";
-      display: inline-block;
-      position: absolute;
-      top:0;
-      left: -8px;
-      width:4px;
-      height:100%;
-      background: #40C3F1;
-    }
-    .list-wrap{
-      width:100%;
-      // width:900px;
-      height: calc(100% - 175px); // 去除头部区域
-      overflow-y: auto;
-      .main{
-        width:99%;
-        margin: 0 auto;
-        display: flex;
-        flex-direction: column;
-        .row {
-          display: flex;
-          justify-content: space-between;
-          margin-bottom: 40px;
-        }
-        .row:nth-child(2n) {
-          flex-direction: row-reverse;
-        }
-        .row:nth-child(2n):last-child .item {
-          margin-right: auto;
-        }
-        .list-item{
-          position: relative;
-          width: 48%;
-          height: 240px;
-          background-image: url("../../assets/global_images/monitor.png");
-          background-repeat: no-repeat;
-          background-size: cover;
-          // background-size: 100% 100%;
-          // margin-left: 20px;
-          z-index: 10;
-          .img-wrap{
-            position: absolute;
-            left:35px;
-            top:40px;
-            width:238px;
-            height:138px;
-            overflow: hidden;
-            z-index: -1;
-          }
-          .title{
-            width:150px;
-            position: absolute;
-            left:42%;
-            top: 40px;
-            font-size: 20px;
-            color:#40C3F1;
-          }
-          .desc{
-            width:150px;
-            position: absolute;
-            left:42%;
-            top: 75px;
-            font-size: 16px;
-            color:#f1f1f1;
-          }
-          .date{
-            position: absolute;
-            left:50%;
-            transform: translateX(-50%);
-            bottom:70px;
-            font-size: 14px;
-            color:#c1c1c1;
-            margin-left:25px;
-          }
-          .date::after{
-            position: absolute;
-            top:0;
-            left:-20px;
-            content:"";
-            display: inline-block;
-            width: 15px;
-            height: 15px;
-            background-image: url("../../assets/global_images/date.png");
-            background-repeat: no-repeat;
-            background-size: cover;
-          }
-          .ratio{
-            // width:100px;
-            position: absolute;
-            left:50%;
-            transform: translateX(-50%);
-            bottom:40px;
-            font-size: 14px;
-            color:#c1c1c1;
-            // margin-left:18px;
-            margin-left: 25px;
-          }
-          .ratio::after{
-            position: absolute;
-            top:0;
-            left:-20px;
-            content:"";
-            display: inline-block;
-            width: 15px;
-            height: 15px;
-            background-image: url("../../assets/global_images/search.png");
-            background-repeat: no-repeat;
-            background-size: cover;
-          }
-        }
-      }
-    }
-    .main .row:nth-child(odd){
-      .list-item:nth-child(odd)::after{
-        content:"";
-        display: inline-block;
-        width:30px;
-        height: 30px;
+      width: 48%;
+      height: 240px;
+      background-image: url("../../assets/global_images/monitor.png");
+      background-repeat: no-repeat;
+      background-size: cover;
+      // background-size: 100% 100%;
+      // margin-left: 20px;
+      z-index: 10;
+      .img-wrap{
         position: absolute;
-        top:50%;
-        transform: translate(-50%);
-        right:-52px;
-        background-image: url("../../assets/global_images/right.png");
-        background-repeat: no-repeat;
-        background-size: cover;
+        left:35px;
+        top:40px;
+        width:238px;
+        height:138px;
+        overflow: hidden;
+        z-index: -1;
       }
-    }
-    .main .row:nth-child(odd){
-      .list-item:nth-child(even)::after{
-        content:"";
-        display: inline-block;
-        width:30px;
-        height: 30px;
+      .title{
+        width:150px;
         position: absolute;
-        right:50%;
-        transform: translate(-50%);
-        bottom:-35px;
-        background-image: url("../../assets/global_images/right.png");
-        background-repeat: no-repeat;
-        background-size: cover;
-        transform: rotate(90deg);
+        left:42%;
+        top: 40px;
+        font-size: 20px;
+        color:#40C3F1;
       }
-    }
-    .main .row:nth-child(even){
-      .list-item:nth-child(odd)::after{
-        content:"";
-        display: inline-block;
-        width:30px;
-        height: 30px;
+      .desc{
+        width:150px;
         position: absolute;
-        top:50%;
-        transform: translate(-50%);
-        left:-35px;
-        background-image: url("../../assets/global_images/right.png");
-        background-repeat: no-repeat;
-        background-size: cover;
-        transform: rotate(180deg);
+        left:42%;
+        top: 75px;
+        font-size: 16px;
+        color:#f1f1f1;
       }
-    }
-    .main .row:nth-child(even){
-      .list-item:nth-child(even)::after{
-        content:"";
-        display: inline-block;
-        width:30px;
-        height: 30px;
+      .date{
         position: absolute;
         left:50%;
-        transform: translate(-50%);
-        bottom:-35px;
-        background-image: url("../../assets/global_images/right.png");
+        transform: translateX(-50%);
+        bottom:70px;
+        font-size: 14px;
+        color:#c1c1c1;
+        margin-left:25px;
+      }
+      .date::after{
+        position: absolute;
+        top:0;
+        left:-20px;
+        content:"";
+        display: inline-block;
+        width: 15px;
+        height: 15px;
+        background-image: url("../../assets/global_images/date.png");
         background-repeat: no-repeat;
         background-size: cover;
-        transform: rotate(-270deg);
+      }
+      .ratio{
+        // width:100px;
+        position: absolute;
+        left:50%;
+        transform: translateX(-50%);
+        bottom:40px;
+        font-size: 14px;
+        color:#c1c1c1;
+        // margin-left:18px;
+        margin-left: 25px;
+      }
+      .ratio::after{
+        position: absolute;
+        top:0;
+        left:-20px;
+        content:"";
+        display: inline-block;
+        width: 15px;
+        height: 15px;
+        background-image: url("../../assets/global_images/search.png");
+        background-repeat: no-repeat;
+        background-size: cover;
       }
     }
-    // 如果是最后一个元素不显示箭头
-    .main .row:last-child{
-      .list-item:last-child::after{
-        display: none;
-      }
-    }
-    .list-wrap .main .list-item .img-wrap{
-      position: absolute;
-      left: 32px;
-      top: 40px;
-      // width: 190px;
-      width: 212px;
-      height: 138px;
-      overflow: hidden;
-      z-index: -1;
-    }
-    .list-wrap .main .list-item .date{
-      left:75% !important;
-      margin-bottom: 20px;
-    }
-    .list-wrap .main .list-item .ratio{
-      left:75% !important;
-    }
-    .list-wrap .main .list-item .title,.list-wrap .main .list-item .desc{
-      left:62% !important;
-    }
-    .close-icon{
-      z-index: 100;
-      position: absolute;
-      top:2px;
-      right:2px;
-      color:white;
-      background: #fc2323cc;
-      width:25px;
-      height:25px;
-      border-radius: 5px;
-      padding:3px;
-    }
+  }
+}
+.main .row:nth-child(odd){
+  .list-item:nth-child(odd)::after{
+    content:"";
+    display: inline-block;
+    width:30px;
+    height: 30px;
+    position: absolute;
+    top:50%;
+    transform: translate(-50%);
+    right:-52px;
+    background-image: url("../../assets/global_images/right.png");
+    background-repeat: no-repeat;
+    background-size: cover;
+  }
+}
+.main .row:nth-child(odd){
+  .list-item:nth-child(even)::after{
+    content:"";
+    display: inline-block;
+    width:30px;
+    height: 30px;
+    position: absolute;
+    right:50%;
+    transform: translate(-50%);
+    bottom:-35px;
+    background-image: url("../../assets/global_images/right.png");
+    background-repeat: no-repeat;
+    background-size: cover;
+    transform: rotate(90deg);
+  }
+}
+.main .row:nth-child(even){
+  .list-item:nth-child(odd)::after{
+    content:"";
+    display: inline-block;
+    width:30px;
+    height: 30px;
+    position: absolute;
+    top:50%;
+    transform: translate(-50%);
+    left:-35px;
+    background-image: url("../../assets/global_images/right.png");
+    background-repeat: no-repeat;
+    background-size: cover;
+    transform: rotate(180deg);
+  }
+}
+.main .row:nth-child(even){
+  .list-item:nth-child(even)::after{
+    content:"";
+    display: inline-block;
+    width:30px;
+    height: 30px;
+    position: absolute;
+    left:50%;
+    transform: translate(-50%);
+    bottom:-35px;
+    background-image: url("../../assets/global_images/right.png");
+    background-repeat: no-repeat;
+    background-size: cover;
+    transform: rotate(-270deg);
+  }
+}
+// 如果是最后一个元素不显示箭头
+.main .row:last-child{
+  .list-item:last-child::after{
+    display: none;
+  }
+}
+.list-wrap .main .list-item .img-wrap{
+  position: absolute;
+  left: 32px;
+  top: 40px;
+  // width: 190px;
+  width: 212px;
+  height: 138px;
+  overflow: hidden;
+  z-index: -1;
+}
+.list-wrap .main .list-item .date{
+  left:75% !important;
+  margin-bottom: 20px;
+}
+.list-wrap .main .list-item .ratio{
+  left:75% !important;
+}
+.list-wrap .main .list-item .title,.list-wrap .main .list-item .desc{
+  left:62% !important;
+}
+.close-icon{
+  z-index: 100;
+  position: absolute;
+  top:2px;
+  right:2px;
+  color:white;
+  background: #fc2323cc;
+  width:25px;
+  height:25px;
+  border-radius: 5px;
+  padding:3px;
+}
 </style>
diff --git a/src/views/popup/bottom.vue b/src/views/popup/bottom.vue
index e3fe7e2..c95b2a1 100644
--- a/src/views/popup/bottom.vue
+++ b/src/views/popup/bottom.vue
@@ -1,47 +1,84 @@
 <template>
   <div class="bottom">
-    <div class="block1">
-      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">访客控制安全系数组件</div>
-      <visit-bar style="flex:1;"/>
-    </div>
+<!--    <div class="block1" style="border-top-left-radius: 0px;margin-left: 5px">-->
+<!--      <inout-list style="flex:1;"/>-->
+<!--    </div>-->
     <div class="block">
       <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安防事件列表</div>
       <case-table style="flex:1;"/>
     </div>
-    <div class="block">
-      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">其他相关安全系数指标组件</div>
-      <other-line style="flex:1;"/>
+    <div class="block1" style="flex-direction: row;width: 700px">
+      <div style="width: 200px">
+        <div class="item0" style="margin: 36px 0">
+          <el-image :src="require('@/assets/popup/事件.png')" class="base-map-image" mode="fill" />
+          <div class="item-text">
+            <div class="num">{{caseNum.all}}<span class="unit"> 件</span></div>
+            <div style="color: #B3F3F6;">今日总事件</div>
+          </div>
+        </div>
+        <div class="item0">
+          <el-image :src="require('@/assets/popup/事件1.png')" class="base-map-image" mode="fill" />
+          <div class="item-text">
+            <div class="num"><span style="color: #08f102;text-shadow: 0 0 5px #08f102;">{{caseNum.solve}}</span><span class="unit"> 件</span></div>
+            <div style="color: #B3F3F6;">今日已解决</div>
+          </div>
+        </div>
+      </div>
+      <case-pie style="width: calc(100% - 200px);height: 100%"/>
     </div>
-    <div class="block1">
-      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安保人员到岗系数组件</div>
-      <staff-bar1 style="flex:1;"/>
+    <div class="block">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安防事件频率统计</div>
+      <case-bar style="flex:1;"/>
     </div>
   </div>
 </template>
 
 <script>
-// import VisitorPie from "@/views/popup/components/visitorPie";
-import VisitBar from '@/views/popup/components/visitBar';
-import StaffBar1 from '@/views/popup/components/staffBar1';
-import CaseTable from '@/views/popup/components/caseTable';
-// import ReqairTable from "@/views/popup/components/reqairTable";
-import OtherLine from '@/views/popup/components/otherLine';
+
+import CaseTable from '@/views/popup/components/caseTable'
+import CasePie from '@/views/popup/components/casePie'
+import { caseTodayStatistics } from '@/api/pop'
+import CaseBar from '@/views/popup/components/caseBar'
+import InoutList from '@/views/popup/components/inoutList'
 
 export default {
   name: 'Bottom',
-  components: { OtherLine, CaseTable, StaffBar1, VisitBar },
+  components: { InoutList, CaseBar, CasePie, CaseTable },
   data() {
     return {
+      timer: null,
       titleImg: require('@/assets/popup/title.png'), // 背景图片
-      titleAll: require('@/assets/popup/title-all.png'),// 背景图片
-      list: [2156, 2144, 455, 314, 98]
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      list: [2156, 2144, 455, 314, 98],
+      caseNum: {
+        all: 0,
+        solve: 0
+      }
     }
   },
+  mounted() {
+    clearInterval(this.timer)
+    this.search()
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+    this.timer = null
+  },
+  methods: {
+    search() {
+      this.timer = setInterval(() => {
+        caseTodayStatistics().then(response => {
+          if (response.code === 200) {
+            this.caseNum = response.data
+          }
+        })
+      }, 10000)
+    }
+  }
 }
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-
 .bottom{
   width: 100%;
   height: 220px;
@@ -57,11 +94,11 @@
     border-radius: 5px;
     box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
     border-color: rgba(0, 0, 0, .05);
-    margin: 0px 10px;
+    margin: 0px 5px;
     flex-direction: column;
   }
   .block1{
-    width: 500px;
+    width: 750px;
     height: 100%;
     display: flex;
     flex-wrap: wrap;
@@ -69,7 +106,7 @@
     border-radius: 5px;
     box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
     border-color: rgba(0, 0, 0, .05);
-    margin: 0px 10px;
+    margin: 0px 5px;
     flex-direction: column;
   }
   .title{
@@ -93,5 +130,31 @@
     font-size: 15px;
 
   }
+  .item0{
+    width: 100%;
+    height: 50px;
+    display: flex;
+    justify-content: left;
+    align-items: center;
+    padding: 0 8%;
+  }
+  .item-text{
+    text-shadow: 0 0 2px #d1ffff;
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 18px;
+  }
+  .num{
+    text-shadow: 0 0 5px #ffb441;
+    color: #ffb441;
+    font-size: 20px;
+    padding-top: 2px;
+  }
+  .unit{
+    color: #B3F3F6;
+    font-size: 14px;
+    margin-left: 1px;
+  }
 }
 </style>
diff --git a/src/views/popup/components/caseTable.vue b/src/views/popup/components/caseTable.vue
index 95aa677..c9708d7 100644
--- a/src/views/popup/components/caseTable.vue
+++ b/src/views/popup/components/caseTable.vue
@@ -1,5 +1,9 @@
 <template>
   <div class="flowTable">
+<!--    <el-tabs v-model="activeName" @tab-click="changeTime" style="display: flex;position:absolute;right: 30px;top:5px">-->
+<!--      <el-tab-pane label="已解决" name="week"/>-->
+<!--      <el-tab-pane label="未解决" name="month"/>-->
+<!--    </el-tabs>-->
     <div class="success_info_body" v-show="showFlag">
       <!-- 参数名称、列数根据实际情况调整 -->
       <div class="table_body">
@@ -14,7 +18,7 @@
         <div class="table_main_body">
           <div class="table_inner_body" :style="{top: tableTop + 'px'}">
             <div v-for="(item,index) in tableList" class="table_tr" :class="checkCell(item,index)" :key="index" @click="JumpDevice(item)">
-              <div class="tr1 tr">{{item.levelName}}</div>
+              <div class="tr1 tr" :style="{color: item.levelName ==='重大' ? 'red' : item.levelName ==='较大' ? 'orange' : '#b8dffd'}">{{item.levelName}}</div>
               <div class="tr2 tr">{{item.description}}</div>
               <div class="tr1 tr">{{item.statusName}}</div>
               <div class="tr2 tr">{{item.typeName}}</div>
@@ -41,7 +45,7 @@
   data() {
     return {
       picurl: '',
-      defaultPhoto: require('@/assets/global_images/photo_error.png'),
+      defaultPhoto: require('@/assets/global_images/photo_offline.png'),
       errorImg: require('@/assets/global_images/photo_error.png'),
       showFlag: true,
       tableTimer: null,
@@ -104,8 +108,9 @@
       this.picurl = ''
       this.isbig = false
       getCaseListPage({
+        status: '',
         offset: 1,
-        limit: 15
+        limit: 20
       }).then(response => {
         if (response.code === 200) {
           this.tableList = response.data.rows
@@ -190,13 +195,18 @@
   line-height: 15px;
 }
 .tr {
-  overflow: hidden;
   text-overflow: ellipsis;
-  white-space: nowrap;
   box-sizing: border-box;
   padding: 0 5px;
   text-align: center;
   font-size: 13px;
+  word-wrap: break-word; /* 允许在单词内换行 */
+  overflow-wrap: break-word; /* 同上，现代浏览器推荐使用 */
+  white-space: normal; /* 允许自动换行 */
+  line-height: 15px;
+  display: flex;
+  align-items: center; /* 垂直居中 */
+  justify-content: center; /* 水平居中，如需要 */
 }
 .tr1 {
   width: 13%;
@@ -253,7 +263,7 @@
   }
 }
 .hard-state{
-  background:red;
+  background: #ff8585;
 }
 .medium-state{
   background: #ea9700;
diff --git a/src/views/popup/components/doorList.vue b/src/views/popup/components/doorList.vue
new file mode 100644
index 0000000..7bc178a
--- /dev/null
+++ b/src/views/popup/components/doorList.vue
@@ -0,0 +1,257 @@
+<template>
+  <div style="width: 100%;height: 100%;">
+    <div style="text-align: right;margin-right: 5px;">
+      <el-button class="doorbar-btn" type="primary" plain @click="isOn1 = !isOn1" style="margin-left: 3px">{{isOn1 ? '隐藏操作按钮': '开启操作按钮'}}</el-button>
+      <el-button class="doorbar-btn" type="primary" plain @click="controlDool()">{{!isOn2 ? '开启黑名单与闸机联动': '关闭黑名单与闸机联动'}}</el-button>
+    </div>
+    <div class="success_info_body" style="margin: 0 10px;flex: 1">
+      <div class="table_body">
+        <div class="table_th">
+          <div class="tr4 th_style">门禁分组</div>
+          <div class="tr1 th_style" v-show="isOn1">操作</div>
+        </div>
+        <div class="table_main_body">
+          <div class="table_inner_body" :style="{top: tableTop + 'px'}">
+            <div v-for="(item,index) in tableList" class="table_tr" :key="index">
+              <div class="tr4 tr">{{item.groupName}}</div>
+              <div class="tr1 tr" v-show="isOn1">
+                <el-button type="text" v-for="item in statusList" :key="item.value" size="small" @click.stop="editStatus(scope.row, item.value)" style="height: 20px;margin-top: -10px">
+                  {{ item.name }}
+                </el-button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+<!--    <el-pagination layout="prev, pager, next" :total="tableListSize" style="width: 100%;text-align: center" @current-change="handleCurrentChange"/>-->
+  </div>
+</template>
+
+<script>
+import {controlGroup, gateLinkageSwitch, getGroupListPage, getSwitchStatus} from '@/api/device'
+export default {
+  name: 'DoorList',
+  data() {
+    return {
+      defaultPhoto: require('@/assets/global_images/photo.png'),
+      errorImg: require('@/assets/global_images/photo_error.png'),
+      isOn1: false,
+      isOn2: false,
+      tableTimer: null,
+      tableTop: 0,
+      tableList: [],
+      statusList: [
+        { name: '常开', id: '1557975745699823618', value: '0' },
+        { name: '常闭', id: '1557975746215723010', value: '3' },
+        { name: '门开', id: '1557975746723233793', value: '2' },
+        { name: '门闭', id: '1557975747402711041', value: '1' }
+      ],
+      tableListSize: 0,
+      componentTimer: null,
+      visibleSize: 8, // 容器内可视最大完整行数
+      lineHeight: 20, // 每行的实际高度（包含margin-top/bottom,border等）
+      componentTimerInterval: 3600000, //  刷新数据的时间间隔
+      tableTimerInterval: 50, //  向上滚动 1px 所需要的时间，越小越快，推荐值 100
+      listQuery: {
+        groupName: '',
+        gateCode: '',
+        status: '',
+        offset: 1,
+        limit: 8
+      }, // 筛选条件
+      dialogFormVisible: false, // 是否显示编辑框
+      timeRange: [], // 时间范围
+      multipleSelection: [], // 多选选中项
+      list: [], // 列表数据
+      colorRow: {
+        isColor: false,
+        isPop: true
+      },
+      inoutTypeList: [],
+      passWayList: [],
+      total: 0, // 数据总数
+      listLoading: true // 列表加载动画
+    }
+  },
+  created() {
+    getSwitchStatus().then(response => {
+      if (response.code === 200) {
+        this.isOn2 = response.data === 1
+      }
+    })
+    this.fetchData()
+  },
+  methods: {
+    controlDool() {
+      this.isOn2 = !this.isOn2
+      gateLinkageSwitch(this.isOn2 ? 1 : 0).then(response => {
+        if (response.code === 200) {
+          this.$message.success((this.isOn2 ? '开启' : '关闭') + '黑名单与闸机联动成功')
+        }
+      })
+    },
+    fetchData(isNowPage = true) {
+      if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+        this.listQuery.offset = 1
+      }
+      getGroupListPage(this.listQuery).then(response => {
+        if (response.code === 200) {
+          this.tableList = response.data.rows
+          this.tableListSize = parseInt(response.data.total)
+        }
+      })
+    },
+    editStatus(row, status) {
+      controlGroup(row.id, status).then(response => {
+        if (response.code === 200) {
+          this.$message.success('通道控制成功')
+          this.fetchData()
+        }
+      }).catch(_ => { // 异常情况，loading置为false
+      })
+    },
+    handleCurrentChange(val) {
+      this.listQuery.offset = val
+      this.fetchData()
+    },
+    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.doorbar-btn {
+  height: 22px;
+  padding-top: 4px;
+  padding-right: 6px;
+  padding-left: 6px;
+  margin-right: 4px;
+}
+.table_body {
+  width: 100%;
+  margin-top: 0px;
+}
+.table_th {
+  width: 100%;
+  display: flex;
+  height: 15px;
+  line-height: 20px;
+}
+.tr {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 0 5px;
+  text-align: center;
+  font-size: 13px;
+  height: 20px !important;
+}
+.tr1 {
+  width: 35%;
+}
+.tr2 {
+  width: 18%;
+}
+.tr3 {
+  width: 15%;
+  font-size: 13px;
+}
+
+.tr4 {
+  flex: 1;
+}
+.tr5 {
+  width: 100px;
+}
+
+.th_style {
+  color: #b8dffd;
+  font-size: 13px;
+  font-weight: bold;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  box-sizing: border-box;
+  text-align: center;
+}
+.table_main_body {
+  width: 100%;
+  height: 175px;
+  overflow: hidden;
+  position: relative;
+  margin-top: 5px;
+}
+.table_inner_body {
+  width: 100%;
+  position: absolute;
+  left: 0;
+  color: #cce9ff;
+}
+
+.table_tr {
+  display: flex;
+  font-size: 13px;
+  border: 1px solid rgb(71, 160, 199);
+  margin-top: 2px;
+  height: 20px;
+  line-height: 20px;
+  cursor: pointer;
+:hover{
+  background: rgba(255, 153, 51, 0.6);
+}
+}
+.table_tr0 {
+  background: rgba(3, 145, 167, 0.1);
+}
+.table_tr1 {
+  background: rgb(64, 87, 120);
+}
+
+::v-deep .el-pagination {
+  .el-pagination__total {
+    color: white !important;
+  }
+  .el-pagination__jump {
+    color: white !important;
+  }
+  // 两个输入框
+  .el-input__inner {
+    background-color: #092546;
+    border: 1px solid rgba(192, 192, 192, 0.479);
+    color: white !important;
+  }
+  // 左右按键和里面的图标
+  button {
+    background-color: #092546;
+    .el-icon::before {
+      color: white;
+    }
+  }
+  // 分页数字
+  ul {
+    color: white;
+    .el-icon::before {
+      color: white !important;
+    }
+  }
+  // 分页数字的背景色
+  ul > li {
+    background-color: #092546;
+  }
+}
+::v-deep .el-loading-mask {
+  background-color: rgba(0, 0, 0, 0.479);
+}
+
+</style>
diff --git a/src/views/popup/components/personTable.vue b/src/views/popup/components/personTable.vue
index e2e4c1e..ca73933 100644
--- a/src/views/popup/components/personTable.vue
+++ b/src/views/popup/components/personTable.vue
@@ -7,15 +7,17 @@
           <div class="tr4 th_style">安保人员姓名</div>
           <div class="tr4 th_style">性别</div>
           <div class="tr4 th_style">照片</div>
+          <div class="tr4 th_style">状态</div>
         </div>
         <div class="table_main_body">
           <div class="table_inner_body" :style="{top: tableTop + 'px'}">
-            <div v-for="(item,index) in tableList" :class="index%2==1?'table_tr':'table_tr1'" :key="index" @click="JumpDevice(item)">
+            <div v-for="(item,index) in tableList" :class="index % 2==1?'table_tr':'table_tr1'" :key="index" @click="JumpDevice(item)">
               <div class="tr4 tr">{{item.staffName}}</div>
               <div class="tr4 tr">{{item.staffGenderName}}</div>
               <div class="tr4 tr">
                 <img :src="item.picture ? `${item.picture}`: defaultPhoto" width="40px" height="40px" style="margin-left: 5px" @error="errorImg">
               </div>
+              <div class="tr4 tr">{{item.statusName}}</div>
             </div>
           </div>
         </div>
@@ -25,7 +27,7 @@
 </template>
 <script>
 
-import { getStaffListPage, hikPic } from '@/api/person'
+import {getStaffListPage, getStaffOnList, hikPic} from '@/api/person'
 import { repostSocket } from '@/api/common';
 import { getDate } from '@/utils/calendarUtil'
 
@@ -43,7 +45,7 @@
       tableList: [],
       tableListSize: 0,
       componentTimer: null,
-      visibleSize: 5, // 容器内可视最大完整行数
+      visibleSize: 8, // 容器内可视最大完整行数
       lineHeight: 45, // 每行的实际高度（包含margin-top/bottom,border等）
       componentTimerInterval: 3600000, //  刷新数据的时间间隔
       tableTimerInterval: 50 //  向上滚动 1px 所需要的时间，越小越快，推荐值 100
@@ -51,7 +53,7 @@
   },
 
   // 如果没有父元素传值，将watch内的内容搬至mounted中即可
-  props: ["activeFactoryId"],
+  props: ['activeFactoryId'],
   watch: {
     activeFactoryId(val, oldVal) {
       clearInterval(this.componentTimer)
@@ -70,6 +72,8 @@
   methods: {
     JumpDevice(item) {
       const params = {
+        personName: item.staffName,
+        staffCode: item.staffCode,
         facePicUrl: item.picture, // 图片url
         startTime: getDate(-31, 'SECOND'), // 开始时间
         endTime: getDate(0, 'SECOND'), // 结束时间
@@ -94,51 +98,32 @@
         message: this.wallList
       }
       repostSocket(params).then(response => {
-        if (response.code === 200) {
-        }
+        if (response.code === 200) {}
       })
     },
     fetchData() {
       const params = {
-        staffType: '2',
+        // staffType: '2',
         offset: 1,
-        limit: 50,
-        keywords: '',
-        cardNum: '',
-        phone: ''
+        limit: 200
       }
-      getStaffListPage(params).then(response => {
+      getStaffOnList(params).then(response => {
         if (response.code === 200) {
           this.tableList = response.data.rows
+          // this.tableListSize = response.data.total
           this.tableActionFun()
         }
       })
-      // this.tableList = [
-      //   {
-      //     id: '',
-      //     drawNo: 'YQ-001',
-      //     levelName: '一般',
-      //     description: '保安脱岗',
-      //     status: '0',
-      //     statusName: '未解决',
-      //     typeName: '临时事件',
-      //     devName: '视频监控摄像机5',
-      //     positionName: '一期主楼',
-      //     areaName: '3F',
-      //     isKeyAreaName: '否',
-      //     detailLocation: '详细位置',
-      //     happenTime: '2022-05-06 21:55:00'
-      //   }
-      // ]
     },
     tableActionFun() {
       this.tableListSize = this.tableList.length
       if (this.tableListSize > this.visibleSize) {
         this.tableList = this.tableList.concat(this.tableList)
         this.tableTimerFun()
-      } else {
-        this.fillTableList()
       }
+      // else {
+      //   this.fillTableList()
+      // }
     },
     //  当数据过少时，不触发自动轮播事件，并填充没有数据的行，参数根据实际情况修改即可
     fillTableList() {
@@ -230,7 +215,7 @@
 }
 .table_main_body {
   width: 100%;
-  height: 200px;
+  height: calc(40vh - 140px);
   overflow: hidden;
   position: relative;
   margin-top: 5px;
diff --git a/src/views/popup/components/staffLine1.vue b/src/views/popup/components/staffLine1.vue
index d3b0a95..d3cd04b 100644
--- a/src/views/popup/components/staffLine1.vue
+++ b/src/views/popup/components/staffLine1.vue
@@ -12,8 +12,8 @@
 </template>
 
 <script>
-import { multiScoreCommute } from '@/api/pop';
-import * as echarts from "echarts";
+import { multiScoreCommute } from '@/api/pop'
+import * as echarts from 'echarts'
 export default {
   name: 'StaffLine1',
   data() {
diff --git a/src/views/popup/components/visitBar.vue b/src/views/popup/components/visitBar.vue
index 1726d20..4f35e21 100644
--- a/src/views/popup/components/visitBar.vue
+++ b/src/views/popup/components/visitBar.vue
@@ -7,7 +7,7 @@
 import * as echarts from 'echarts';
 
 export default {
-  name: 'AreaBar1',
+  name: 'VisitBar',
   data() {
     return {
       isShow: true,
diff --git a/src/views/popup/floor.vue b/src/views/popup/floor.vue
index 6342d5a..8052ae4 100644
--- a/src/views/popup/floor.vue
+++ b/src/views/popup/floor.vue
@@ -107,8 +107,7 @@
         message: 'show'
       }
       repostSocket(params).then(response => {
-        if (response.code === 200) {
-        }
+        if (response.code === 200) {}
       })
     }
   }
diff --git a/src/views/popup/left.vue b/src/views/popup/left.vue
index d35b6b2..dab745c 100644
--- a/src/views/popup/left.vue
+++ b/src/views/popup/left.vue
@@ -1,67 +1,75 @@
 <template>
   <div class="left">
-    <div class="block" style="justify-content: center;height: 29%;padding-top: 10px">
-      <div class="item">
-        <el-image :src="require('@/assets/popup/人员.png')" class="base-map-image" mode="fill" />
-        <div style="color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;"> 一期主楼、录制楼</div>
-        <div class="num">{{list["0"]}}<span class="unit">人</span></div>
+    <div class="block" style="height: 270px;">
+      <div style="display: flex;flex-direction: row;justify-content: center;padding-top: 10px;height: 70px">
+        <div class="item">
+          <el-image :src="require('@/assets/popup/cam.png')" class="base-map-image" mode="fill" />
+          <div class="item-title">摄像机</div>
+          <div class="num"><span style="color: #08f102;text-shadow: 0 0 5px #08f102;">{{cam.on}}</span> / {{cam.all}}</div>
+        </div>
+        <div class="item">
+          <el-image :src="require('@/assets/popup/闸机.png')" class="base-map-image" mode="fill" />
+          <div class="item-title">闸机</div>
+          <div class="num"><span style="color: #08f102;text-shadow: 0 0 5px #08f102;">{{door.on}}</span> / {{door.all}}</div>
+        </div>
       </div>
-      <div class="item">
-        <el-image :src="require('@/assets/popup/人员.png')" class="base-map-image" mode="fill" />
-        <div style="color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;"> 二期主楼</div>
-        <div class="num">{{list["1"]}}<span class="unit">人</span></div>
-      </div>
-      <div class="item">
-        <el-image :src="require('@/assets/popup/访客.png')" class="base-map-image" mode="fill" />
-        <div style="color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;"> 今日访客量</div>
-        <div class="num">{{list["2"]}}<span class="unit">人</span></div>
-      </div>
-      <div class="item">
-        <el-image :src="require('@/assets/popup/今日事件.png')" class="base-map-image" mode="fill" />
-        <div style="color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;"> 今日事件数</div>
-        <div class="num">{{list["3"]}}<span class="unit">件</span></div>
-      </div>
-      <div class="item">
-        <el-image :src="require('@/assets/popup/今日处置.png')" class="base-map-image" mode="fill" />
-        <div style="color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;"> 事件处置数</div>
-        <div class="num">{{list["4"]}}<span class="unit">件</span></div>
-      </div>
-      <div class="item">
-        <el-image :src="require('@/assets/popup/离线.png')" class="base-map-image" mode="fill" />
-        <div style="color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;">设备离线率</div>
-        <div class="num">{{list["5"]}}<span class="unit"></span></div>
-      </div>
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title" style="margin: 0">摄像机状态分析</div>
+      <cam-bar style="width: 100%;height: 165px"/>
     </div>
-    <div class="block" style="flex-direction: column;">
-      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">员工通勤安防系数组件</div>
-      <staff-line1 style="flex:1;"/>
+    <div class="block" style="height: 250px;">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title" style="margin: 5px 0">闸机控制</div>
+      <door-list style="width: 100%;height: 250px;margin-top: -34px"/>
     </div>
-    <div class="block" style="flex-direction: column;">
-      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">重点区域防控系数组件</div>
-      <area-bar1 style="flex: 1"/>
+    <div class="block" style="height: 500px;">
+      <div style="display: flex;flex-direction: row;justify-content: center;height: 50px">
+        <el-tooltip class="item" effect="dark" :content="`进入人数${tips['1进入人数']}，离开人数${tips['1离开人数']}`" placement="bottom">
+          <div class="item">
+            <el-image :src="require('@/assets/popup/人员.png')" class="base-map-image" mode="fill" style="margin-top: 10px"/>
+            <div class="item-title"> 一期主楼、录制楼</div>
+            <div class="num" style="margin-top: -15px">{{tips["1"]}}<span class="unit">人</span></div>
+          </div>
+        </el-tooltip>
+        <el-tooltip class="item" effect="dark" :content="`进入人数${tips['2进入人数']}，离开人数${tips['2离开人数']}`" placement="bottom">
+          <div class="item">
+            <el-image :src="require('@/assets/popup/人员.png')" class="base-map-image" mode="fill" style="margin-top: 10px;margin-left: -20px"/>
+            <div class="item-title"> 二期主楼 </div>
+            <div class="num" style="margin-top: -15px">{{tips["2"]}}<span class="unit">人</span></div>
+          </div>
+        </el-tooltip>
+      </div>
+      <inout-list style="width: 100%;height: 350px;margin-top: 10px"/>
     </div>
   </div>
 </template>
 
 <script>
-import StaffLine1 from '@/views/popup/components/staffLine1'
-import AreaBar1 from '@/views/popup/components/areaBar1'
-import { getTodayNumber, getPeopleNumber, getDeviceNumber, offlineRate, eventNum } from '@/api/pop'
+import { buildPeopleNumber, deviceStatistics, getPeopleNumber } from '@/api/pop'
+import CamBar from '@/views/popup/components/camBar'
+import DoorList from '@/views/popup/components/doorList'
+import InoutList from '@/views/popup/components/inoutList'
+
 export default {
   name: 'Left',
-  components: { AreaBar1, StaffLine1 },
+  components: { InoutList, DoorList, CamBar },
   data() {
     return {
       timer: null,
       titleImg: require('@/assets/popup/title.png'), // 背景图片
-      titleAll: require('@/assets/popup/title-all.png'),// 背景图片
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      cam: { on: '', all: '' },
+      door: { on: '', all: '' },
       list: {
         '0': '*',
         '1': '*',
-        '2': '*',
-        '3': '*',
-        '4': '*',
-        '5': '*'
+        '2': '*'
+      },
+      tips: {
+        '1': 0,
+        '2': 0,
+        '2进入人数': 0,
+        '1进入人数': 0,
+        '2离开人数': 0,
+        '1离开人数': 0
       }
     }
   },
@@ -73,59 +81,51 @@
     this.timer = setInterval(() => {
       this.initData()
     }, 60000)
+    this.initData()
   },
   methods: {
     initData() {
-      getPeopleNumber().then(response => {
+      deviceStatistics(2).then(response => {
         if (response.code === 200) {
-          this.list['0'] = response.data[1] + (response.data[3] ? response.data[3] : 0)
-          this.list['1'] = response.data[2]
+          this.cam.on = response.data.list.filter(item => item.status === '在线')[0].quantity
+          this.cam.all = response.data.total
         }
       })
-      getTodayNumber().then(response => {
+      deviceStatistics(1).then(response => {
         if (response.code === 200) {
-          this.list['2'] = response.data['今日访客量']
+          this.door.on = response.data.list.filter(item => item.status === '在线')[0].quantity
+          this.door.all = response.data.total
         }
       })
-      // getDeviceNumber().then(response => {
-      //   if (response.code === 200) {
-      //     // this.list['3'] = response.data['设备总数']
-      //     // this.list['4'] = response.data['设备在线率'].replace('%', '')
-      //   }
-      // })
-
-      offlineRate().then(response => {
+      buildPeopleNumber().then(response => {
         if (response.code === 200) {
-          this.list['5'] = response.data['设备离线率']
-        }
-      })
-      eventNum().then(response => {
-        if (response.code === 200) {
-          this.list['3'] = response.data['今日事件数']
-          this.list['4'] = response.data['今日事件处置数']
+          this.tips = response.data
         }
       })
     }
   }
 }
 </script>
-
 <style rel="stylesheet/scss" lang="scss" scoped>
-.left{
+.block{
   width: 100%;
+  height: 200px;
+  background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+  border-radius: 5px;
+  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+  border-color: rgba(0, 0, 0, .05);
+  margin-bottom: 5px;
+  flex-direction: column;
+}
+.left{
+  width: 500px;
   height: 100%;
   overflow: hidden;
-  .block{
-    height: 33%;
-    width: 500px;
-    display: flex;
-    flex-wrap: wrap;
-    background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
-    border-radius: 5px;
-    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
-    border-color: rgba(0, 0, 0, .05);
-    margin: 10px;
-  }
+  //background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+  //box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+  //border-color: rgba(0, 0, 0, .05);
+  margin: 10px 10px 0 10px;
+  border-radius: 5px;
   .title{
     text-shadow: 0 0 5px #d1ffff;
     width: 500px;
@@ -139,6 +139,7 @@
     padding-left: 30px;
     font-family: 黑体;
     letter-spacing: 1px;
+    z-index: 1;
   }
   .base-map-image{
     width: 45px;
@@ -151,15 +152,24 @@
     height: 80%;
   }
   .item{
-    width: 33%;
+    width: 50%;
     font-weight: bold;
     text-align: center;
-    font-size: 15px;
+    font-size: 16px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    .item-title{
+      color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;margin-left: 10px;
+      line-height: 40px;
+      vertical-align: middle;
+    }
     .num{
       text-shadow: 0 0 5px #ffb441;
       color: #ffb441;
-      font-size: 18px;
-      padding-top: 2px;
+      font-size: 20px;
+      width: 100%;
+      margin-top: -0px;
     }
     .unit{
       color: #B3F3F6;
diff --git a/src/views/popup/right.vue b/src/views/popup/right.vue
index 4571ea1..b139de4 100644
--- a/src/views/popup/right.vue
+++ b/src/views/popup/right.vue
@@ -1,64 +1,79 @@
 <template>
   <div class="right">
-    <div class="block" style="justify-content: center;height: 29%;">
-      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安全防护梯度指标组件</div>
-      <div class="item">
-        <el-image :src="require('@/assets/popup/safe.png')" class="base-map-image" mode="fill" />
-        <div class="item-text">
-          <div class="num">{{list["0"]}}<span class="unit">分</span></div>
-          <div style="color: #B3F3F6;">一期主楼</div>
+    <el-tooltip effect="dark" content="安防事件评分由安防事件影响（占比50%）、访客事件影响（占比30%）、各楼栋设备维修次数（占比10%）、各楼栋消防设备有效期（占比10%）" placement="bottom">
+      <div class="block" style="justify-content: center;height: 20%;padding-top: 30px">
+        <div class="item">
+          <el-image :src="require('@/assets/popup/safe.png')" class="base-map-image" mode="fill" />
+          <div class="item-text">
+            <div class="num">{{list["0"]}}<span class="unit">分</span></div>
+            <div style="color: #B3F3F6;">一期主楼</div>
+          </div>
+        </div>
+        <div class="item">
+          <el-image :src="require('@/assets/popup/safe.png')" class="base-map-image" mode="fill" />
+          <div class="item-text">
+            <div class="num">{{list["1"]}}<span class="unit">分</span></div>
+            <div style="color: #B3F3F6;">二期主楼</div>
+          </div>
+        </div>
+        <div class="item">
+          <el-image :src="require('@/assets/popup/safe.png')" class="base-map-image" mode="fill" />
+          <div class="item-text">
+            <div class="num">{{list["2"]}}<span class="unit">分</span></div>
+            <div style="color: #B3F3F6;">录制楼</div>
+          </div>
+        </div>
+        <div class="item">
+          <el-image :src="require('@/assets/popup/safe.png')" class="base-map-image" mode="fill" />
+          <div class="item-text">
+            <div class="num">{{list["3"]}}<span class="unit">分</span></div>
+            <div style="color: #B3F3F6;">1600演播厅</div>
+          </div>
         </div>
       </div>
-      <div class="item">
-        <el-image :src="require('@/assets/popup/safe.png')" class="base-map-image" mode="fill" />
+    </el-tooltip>
+    <div class="block" style="flex-direction: column;height: 40%;">
+      <div class="item" style="margin-bottom: 10px;margin-top: -10px;margin-left: 25%">
+        <el-image :src="require('@/assets/popup/baoan.png')" class="base-map-image" mode="fill" />
         <div class="item-text">
-          <div class="num">{{list["1"]}}<span class="unit">分</span></div>
-          <div style="color: #B3F3F6;">二期主楼</div>
+          <div class="num"><span style="color: #08f102;text-shadow: 0 0 5px #08f102;">{{baoan.on}}</span> / {{baoan.all}}<span class="unit"> 位</span></div>
+          <div style="color: #B3F3F6;">安保人员总数</div>
         </div>
       </div>
-      <div class="item">
-        <el-image :src="require('@/assets/popup/safe.png')" class="base-map-image" mode="fill" />
-        <div class="item-text">
-          <div class="num">{{list["2"]}}<span class="unit">分</span></div>
-          <div style="color: #B3F3F6;">录制楼</div>
-        </div>
-      </div>
-      <div class="item">
-        <el-image :src="require('@/assets/popup/safe.png')" class="base-map-image" mode="fill" />
-        <div class="item-text">
-          <div class="num">{{list["3"]}}<span class="unit">分</span></div>
-          <div style="color: #B3F3F6;">1600演播厅</div>
-        </div>
-      </div>
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title" style="width: 100%;margin-bottom: 10px">安保人员列表</div>
+      <person-table style="flex:1;height: calc(100% - 120px)"/>
     </div>
-    <div class="block" style="flex-direction: column;">
-      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安防事件频次因数组件</div>
-          <div id="safe-star" class="star"/>
-<!--      <div :style="{backgroundImage:'url('+line+')', flex: 1}" class="case-bg">-->
-<!--        <div :style="{backgroundImage:'url('+ ball +')'}" class="ball-bg">-->
-<!--          <div class="num case-text">{{num}}<span class="unit">次</span></div>-->
-<!--          <div :style="{backgroundImage:'url('+ bottom +')'}" class="bottom-bg"/>-->
-<!--        </div>-->
-<!--      </div>-->
-    </div>
-    <div class="block" style="flex-direction: column;">
-      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">巡视人员分布因数组件</div>
-      <person-table style="flex:1;"/>
-<!--      <power-line1 style="flex:1;"/>-->
+    <div class="block" style="justify-content: center;height: 40%;align-content: flex-start;">
+      <div class="item">
+        <el-image :src="require('@/assets/popup/visitor.png')" class="base-map-image" mode="fill" />
+        <div class="item-text">
+          <div class="num"> {{visitor.in}}<span class="unit"> 位</span></div>
+          <div style="color: #B3F3F6;">今日访客进入</div>
+        </div>
+      </div>
+      <div class="item">
+        <el-image :src="require('@/assets/popup/visitor.png')" class="base-map-image" mode="fill" />
+        <div class="item-text">
+          <div class="num">{{visitor.out}}<span class="unit"> 位</span></div>
+          <div style="color: #B3F3F6;">今日访客离开</div>
+        </div>
+      </div>
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title" style="width: 100%;margin: 10px 0">今日访客访问列表</div>
+      <visitor-table style="flex:1;"/>
     </div>
   </div>
 </template>
 
 <script>
 
-// import PowerLine1 from '@/views/popup/components/powerLine1'
-import { securityScore, securityFrequency, categoryStatistics } from '@/api/pop'
+import { securityScore, categoryStatistics, baoanStatistics, visitorStatistics } from '@/api/pop'
 import * as echarts from 'echarts'
-import PersonTable from "@/views/popup/components/personTable";
+import PersonTable from '@/views/popup/components/personTable'
+import VisitorTable from '@/views/popup/components/visitorTable'
 
 export default {
   name: 'Right',
-  components: {PersonTable },
+  components: { PersonTable, VisitorTable },
   data() {
     return {
       timer: null,
@@ -72,6 +87,14 @@
         '2': '*',
         '3': '*'
       },
+      baoan: {
+        on: 0,
+        all: 0
+      },
+      visitor: {
+        in: 0,
+        out: 0
+      },
       safeData: [],
       num: '*'
     }
@@ -85,151 +108,55 @@
     this.timer = null
   },
   methods: {
-    initStar() {
-      var myChart = echarts.init(document.getElementById('safe-star'))
-      const that = this
-      const option = {
-        tooltip: {
-          trigger: 'item'
-        },
-        legend: {
-          right: 20,
-          top: 10,
-          data: ['事件频次'],
-          itemStyle: {
-            color: '#d5f6fa'
-          },
-          textStyle: {
-            color: '#cce9ff',
-            fontWeight: 'bold',
-            fontSize: 14
-          }
-        },
-        radar: [{
-          indicator: that.safeData.map((item) => {
-            return { text: item.categoryLevelName, max: that.safeData[0].quantity * 1.2 }
-          }),
-          center: ['50%', '55%'],
-          splitArea: {
-            areaStyle: {
-              color: ['#77EADF99', '#26C3BE99', '#64AFE999', '#428BD499'],
-              shadowColor: 'rgba(0, 0, 0, 0.2)',
-              shadowBlur: 10
-            }
-          },
-          name: {
-            color: '#d5f6fa',
-            fontWeight: 'bold',
-            fontSize: 14
-          }
-        }],
-        series: [{
-          type: 'radar',
-          symbol: 'none',
-          symbolSize: 4,
-          lineStyle: {
-            width: 3,
-            color: 'rgb(12,228,235)'
-          },
-          areaStyle: {
-            color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
-              {
-                color: 'rgb(8,91,121,0.8)',
-                offset: 0
-              },
-              {
-                color: 'rgb(12,228,235,0.8)',
-                offset: 1
-              }
-            ])
-          },
-          emphasis: {
-            areaStyle: {
-              color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
-                {
-                  color: 'rgb(8,91,121,0.5)',
-                  offset: 0
-                },
-                {
-                  color: 'rgb(12,228,235,0.5)',
-                  offset: 1
-                }
-              ])
-            }
-          },
-          data: [{
-            value: that.safeData.map(item => item.quantity),
-            name: '事件频次',
-            symbol: 'rect',
-            symbolSize: 5,
-            lineStyle: {
-              type: 'dashed'
-            },
-            label: {
-              show: true,
-              fontSize: 14,
-              fontWeight: 'bold',
-              color: '#ff9933',
-              formatter: function (params) {
-                return params.value
-              }
-            }
-          }]
-        }]
-      }
-      myChart.clear()
-      myChart.setOption(option, true)
-      window.addEventListener('resize', function() {
-        myChart.resize()
-      })
-    },
     initData() {
       this.timer = setInterval(() => {
         securityScore().then(response => {
           if (response.code === 200) {
-            this.list['0'] = response.data['一期主楼']
-            this.list['1'] = response.data['二期主楼']
-            this.list['2'] = response.data['录制楼']
-            this.list['3'] = response.data['1600演播厅']
+            this.list['0'] = response.data['一期主楼'].toFixed(2)
+            this.list['1'] = response.data['二期主楼'].toFixed(2)
+            this.list['2'] = response.data['录制楼'].toFixed(2)
+            this.list['3'] = response.data['1600演播厅'].toFixed(2)
           }
         })
-      }, 10000)
-      categoryStatistics().then(response => {
-        if (response.code === 200) {
-          this.safeData = response.data
-          this.safeData.length = 5
-          this.initStar()
-        }
-      })
-      // securityFrequency().then(response => {
-      //   if (response.code === 200) {
-      //     this.num = response.data['quantity']
-      //   }
-      // })
+        baoanStatistics().then(response => {
+          if (response.code === 200) {
+            this.baoan = response.data
+          }
+        })
+        visitorStatistics().then(response => {
+          if (response.code === 200) {
+            this.visitor = response.data
+          }
+        })
+      }, 5000)
     }
   }
 }
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
+.el-tooltip__popper{
+  margin-top: 0px !important;
+}
 .star {
   width: 100%;
-  height: 85%;
+  height: calc(100% - 40px);
 }
 .right{
   width: 100%;
   height: 100%;
   overflow: hidden;
   .block{
-    height: 33%;
-    width: 500px;
-    display: flex;
-    flex-wrap: wrap;
     background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
     border-radius: 5px;
     box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
     border-color: rgba(0, 0, 0, .05);
+    height: 33%;
+    width: 500px;
+    display: flex;
+    flex-wrap: wrap;
     margin: 10px;
+    padding-top: 20px;
   }
   .title{
     text-shadow: 0 0 5px #d1ffff;

diff --git a/public/static/webCtrl/hk/demo_embedded_for_iframe.html b/public/static/webCtrl/hk/demo_embedded_for_iframe.html
index 3a0be10..5c18f74 100644
--- a/public/static/webCtrl/hk/demo_embedded_for_iframe.html
+++ b/public/static/webCtrl/hk/demo_embedded_for_iframe.html
@@ -107,6 +107,13 @@
         }
     });
 
+    function destoryPlugin() {
+      if (oWebControl != null){
+        oWebControl.JS_HideWnd();  // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
+        oWebControl.JS_Disconnect().then(function(){}, function() {});
+      }
+    }
+
     function hide(){
       oWebControl.JS_HideWnd();
     };
diff --git a/src/App.vue b/src/App.vue
index d9046c1..b8c5c1a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="app" v-resize="windowResize">
+  <div id="app" style="overflow-y: hidden" v-resize="windowResize">
     <router-view />
   </div>
 </template>
diff --git a/src/api/device.js b/src/api/device.js
index 0ba70ff..8d6c46b 100644
--- a/src/api/device.js
+++ b/src/api/device.js
@@ -159,3 +159,21 @@
     data
   })
 }
+
+export function getSwitchStatus(data) {
+  return request({
+    url: '/cockpit/gateLinkage/switchStatus',
+    method: 'get'
+  })
+}
+
+export function gateLinkageSwitch(controlSwitch) {
+  return request({
+    url: '/cockpit/gateLinkage/switch',
+    method: 'get',
+    params: {
+      controlSwitch
+    }
+  })
+}
+
diff --git a/src/api/person.js b/src/api/person.js
index 8a79c27..0c2a0ff 100644
--- a/src/api/person.js
+++ b/src/api/person.js
@@ -21,6 +21,14 @@
   })
 }
 
+export function getStaffOnList(params) {
+  return request({
+    url: '/cockpit/securityStaff/onList',
+    method: 'GET',
+    params
+  })
+}
+
 export function addStaff(data) {
   return request({
     url: 'staffInfo/add',
diff --git a/src/api/pop.js b/src/api/pop.js
index 01ddde7..6fa7381 100644
--- a/src/api/pop.js
+++ b/src/api/pop.js
@@ -72,6 +72,39 @@
   })
 }
 
+export function baoanStatistics() {
+  return request({
+    url: '/cockpit/securityStaff/statistics',
+    method: 'get',
+    data: {}
+  })
+}
+
+export function visitorStatistics() {
+  return request({
+    url: 'cockpit/visitor/statistics',
+    method: 'get',
+    data: {}
+  })
+}
+
+export function caseTodayStatistics() {
+  return request({
+    url: 'cockpit/case/todayStatistics',
+    method: 'get',
+    data: {}
+  })
+}
+
+export function casePieStatistics(params) {
+  return request({
+    url: 'cockpit/caseType/statisticsByTime',
+    method: 'get',
+    data: params,
+    params
+  })
+}
+
 // 安防事件频次因数组件
 export function securityFrequency() {
   return request({
@@ -158,3 +191,27 @@
     method: 'get'
   })
 }
+
+export function cameraTypeStatistics() {
+  return request({
+    url: '/cockpit/camera/typeStatistics',
+    method: 'get'
+  })
+}
+
+export function deviceStatistics(devType) {
+  return request({
+    url: '/cockpit/device/statistics',
+    method: 'post',
+    data: {
+      devType
+    }
+  })
+}
+
+export function buildPeopleNumber() {
+  return request({
+    url: '/cockpit/build/peopleNumber',
+    method: 'get'
+  })
+}
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index df71207..33d701a 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -280,37 +280,37 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  .table{
-    margin-bottom: 20px;
-  }
-  .pagination-container{
-    padding-bottom: 50px;
-  }
-  .table-title{
-    /*background-color:rgba(243, 243, 243, 1);*/
-    background-color:#fff;
-    .title-header{
-      font-size: 15px;
-      i{
-        margin-left: 10px;
-        margin-right: 5px;
-      }
-      i:focus{
-        outline: none;
-      }
+.table{
+  margin-bottom: 20px;
+}
+.pagination-container{
+  padding-bottom: 50px;
+}
+.table-title{
+  /*background-color:rgba(243, 243, 243, 1);*/
+  background-color:#fff;
+  .title-header{
+    font-size: 15px;
+    i{
+      margin-left: 10px;
+      margin-right: 5px;
+    }
+    i:focus{
+      outline: none;
     }
   }
-  .edit_btns{
-    padding-top:7px;
-    padding-right:3px;
-    text-align: right;
+}
+.edit_btns{
+  padding-top:7px;
+  padding-right:3px;
+  text-align: right;
+}
+.popper-div{
+  line-height: 1.5;
+  .popper-btns{
+    margin-top:10px;
   }
-  .popper-div{
-    line-height: 1.5;
-    .popper-btns{
-      margin-top:10px;
-    }
-  }
+}
 </style>
 
 <style>
diff --git a/src/router/modules/menu.js b/src/router/modules/menu.js
index 28ecc52..447517e 100644
--- a/src/router/modules/menu.js
+++ b/src/router/modules/menu.js
@@ -8,7 +8,7 @@
     redirect: '/loginBoard',
     meta: {
       title: '主页',
-      permission: ['/loginBoard'],
+      // permission: ['/loginBoard'],
       icon: '' // 图标
     },
     children: [
@@ -16,7 +16,7 @@
         path: '/loginBoard',
         name: 'LoginBoard',
         component: () => import('@/views/backstage/loginBoard'),
-        meta: { title: '主页', icon: '', permission: ['/loginBoard'] }
+        meta: { title: '主页', icon: '' }
       }
     ]
   },
diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss
index 0d1614b..f39542e 100644
--- a/src/styles/element-ui.scss
+++ b/src/styles/element-ui.scss
@@ -74,3 +74,6 @@
   height:48px;
   line-height:48px;
 }
+.el-time-panel {
+  margin-left: -20px !important;
+}
diff --git a/src/utils/request.js b/src/utils/request.js
index 02dcee1..a81c17f 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -39,19 +39,21 @@
     } else if (res.code !== 200) {
       // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
       if (res.code === 401 || res.code === 50012 || res.code === 50014) {
-        MessageBox.confirm(
-          '你已被登出，可以取消继续留在该页面，或者重新登录',
-          '确定登出',
-          {
-            confirmButtonText: '重新登录',
-            cancelButtonText: '取消',
-            type: 'warning'
-          }
-        ).then(() => {
-          store.dispatch('FedLogOut').then(() => {
-            location.reload() // 为了重新实例化vue-router对象 避免bug
+        if (!window.location.href.endsWith('right') && !window.location.href.endsWith('left') && !window.location.href.endsWith('bottom')) {
+          MessageBox.confirm(
+            '你已被登出，可以取消继续留在该页面，或者重新登录',
+            '确定登出',
+            {
+              confirmButtonText: '重新登录',
+              cancelButtonText: '取消',
+              type: 'warning'
+            }
+          ).then(() => {
+            store.dispatch('FedLogOut').then(() => {
+              location.reload() // 为了重新实例化vue-router对象 避免bug
+            })
           })
-        })
+        }
       } else {
         Message({
           showClose: true,
diff --git a/src/views/common/trailDialog.vue b/src/views/common/trailDialog.vue
index 04a83eb..fd90c34 100644
--- a/src/views/common/trailDialog.vue
+++ b/src/views/common/trailDialog.vue
@@ -52,6 +52,8 @@
         75: '75%'
       },
       listQuery: {
+        staffCode: '',
+        personName: '',
         facePicUrl: '',
         startTime: '',
         endTime: '',
@@ -81,11 +83,14 @@
   },
   methods: {
     // 初始化对话框
-    initDialog: function(picture = null, name) {
-      this.textMap = '轨迹追踪 — ' + name
+    initDialog: function(row) {
+      this.textMap = '轨迹追踪 — ' + row.staffName
+      this.list = []
       this.clearInput()
       this.dialogFormVisible = true
-      this.listQuery.facePicUrl = picture
+      this.listQuery.facePicUrl = row.picture
+      this.listQuery.staffCode = row.staffCode
+      this.listQuery.personName = row.staffName
       this.fetchData()
     },
     fetchData() {
diff --git a/src/views/person/staffList.vue b/src/views/person/staffList.vue
index ce8643e..95acc5c 100644
--- a/src/views/person/staffList.vue
+++ b/src/views/person/staffList.vue
@@ -332,7 +332,7 @@
     },
     trail(row) {
       this.dialogFormVisible1 = true
-      this.$refs.trailDialog.initDialog(row.picture, row.staffName)
+      this.$refs.trailDialog.initDialog(row)
     },
     // 打开详情对话框
     detail(row) {
diff --git a/src/views/popup/board.vue b/src/views/popup/board.vue
index eb229cc..0f47c22 100644
--- a/src/views/popup/board.vue
+++ b/src/views/popup/board.vue
@@ -4,7 +4,7 @@
       人员轨迹追踪
       <svg-icon v-if="list.length > 0" icon-class="pop-cross" class="close-icon" @click="close" />
     </div>
-    <el-form ref="ruleForm" :model="listQuery" :rules="rules" label-width="100px">
+    <el-form ref="ruleForm" :model="listQuery" :rules="rules" label-width="80px">
       <el-row :gutter="20">
         <el-col :span="12" class="form-item-person-info">
           <el-form-item label="人员信息" prop="personName" style="position:relative">
@@ -20,7 +20,8 @@
               size="small"
               placeholder="请输入人员姓名"
               :popper-append-to-body="false"
-              @change="handlePerson">
+              @change="handlePerson"
+            >
               <el-option
                 v-for="item in personNameList"
                 :key="item.staffCode"
@@ -41,7 +42,7 @@
               end-placeholder="终止时间"
               size="small"
               :clearable="false"
-              style="width:98%"
+              style="width:98%;"
             />
           </el-form-item>
         </el-col>
@@ -53,7 +54,7 @@
           </el-form-item>
         </el-col>
         <el-col :span="6">
-          <el-form-item label="最小相似度" prop="minSimilarity">
+          <el-form-item label="最小相似度" prop="minSimilarity" label-width="100px">
             <el-input v-model="listQuery.minSimilarity" size="small" placeholder="区间50-100" />
           </el-form-item>
         </el-col>
@@ -81,7 +82,7 @@
             <div class="title text-over">
               {{ child.positionName ? child.positionName : '' }}
             </div>
-            <div class="desc text-over" :title="child.devName">
+            <div class="desc text-over" :title="child.devName" style="white-space: normal;word-wrap: break-word;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2; ">
               {{ child.devName ? child.devName : '' }}
             </div>
             <div class="date" style="width:145px">
@@ -110,6 +111,7 @@
     return {
       selectLoading: false,
       personName: '',
+      staffCode: '',
       point: [],
       listQuery: {
         facePicUrl: '', // 图片url
@@ -260,6 +262,7 @@
       this.personNameList.map(item => {
         if (item.staffCode === person) {
           this.personName = item.personName
+          this.staffCode = item.staffCode
           // this.listQuery.personName = item.personName
           this.listQuery.facePicUrl = item.personPicture
           this.listQuery.gender = item.gender
@@ -299,7 +302,11 @@
         spinner: 'el-icon-loading',
         background: 'rgba(0, 0, 0, 0.7)'
       })
-      const postData = Object.assign(this.listQuery, { 'personName': this.personName })
+      const postData = Object.assign(this.listQuery,
+        {
+          'personName': this.personName,
+          'staffCode': this.staffCode
+        })
       console.log(postData)
       hikPic(postData).then(response => {
         loading.close()
@@ -325,6 +332,7 @@
       this.listQuery.minSimilarity = '50'
       this.listQuery.timeRange = ['', '']
       this.personName = ''
+      this.staffCode = ''
       this.list = []
     },
     // 轨迹上墙
@@ -359,299 +367,299 @@
   }
 }
 </script>
-
 <style rel="stylesheet/scss" lang="scss" scoped>
-  ::v-deep(.el-input__inner){
-    border:1px solid #40C3F1 !important;
-    background: transparent !important;
-    color:#fff !important;
+::v-deep(.el-input__inner){
+  border:1px solid #40C3F1 !important;
+  background: transparent !important;
+  color:#fff !important;
+}
+::v-deep(.el-range-input){
+  background: transparent !important;
+  color:#fff !important;
+}
+::v-deep(.el-form-item__label){
+  color:#f1f1f1 !important;
+  font-weight: 400 !important;
+}
+::v-deep(.el-range-separator){
+  color:#f1f1f1 !important;
+  font-weight: 400 !important;
+  color:#fff !important;
+}
+::v-deep(.el-select .el-select-dropdown__wrap) {
+  max-height: 350px !important;
+  overflow-y: auto !important;
+}
+
+.form-item-person-info:hover{
+  cursor: text !important;
+}
+.el-form-item__content:hover{
+  cursor: text !important;
+}
+::v-deep(.form-item-person-info .el-input__inner):hover{
+  cursor: text !important;
+}
+::-webkit-scrollbar {
+  z-index: 11;
+  width: 6px;
+}
+::-webkit-scrollbar-track,
+::-webkit-scrollbar-corner {
+  border-radius: 5px;
+  background: #fff;
+}
+::-webkit-scrollbar-thumb {
+  border-radius: 5px; // 滚动条
+  width: 6px;
+  background-color: #ccc;
+  :hover {
+    background-color: #ccc;
   }
-  ::v-deep(.el-range-input){
-    background: transparent !important;
-    color:#fff !important;
-  }
-  ::v-deep(.el-form-item__label){
-    color:#f1f1f1 !important;
-    font-weight: 400 !important;
-  }
-  ::v-deep(.el-range-separator){
-    color:#f1f1f1 !important;
-    font-weight: 400 !important;
-    color:#fff !important;
-  }
-  ::v-deep(.el-select .el-select-dropdown__wrap) {
-    max-height: 350px !important;
-    overflow-y: auto !important;
-  }
-  .form-item-person-info:hover{
-    cursor: text !important;
-  }
-  .el-form-item__content:hover{
-    cursor: text !important;
-  }
-  ::v-deep(.form-item-person-info .el-input__inner):hover{
-    cursor: text !important;
-  }
-  ::-webkit-scrollbar {
-      z-index: 11;
-      width: 6px;
-    }
-    ::-webkit-scrollbar-track,
-    ::-webkit-scrollbar-corner {
-      border-radius: 5px;
-      background: #fff;
-    }
-    ::-webkit-scrollbar-thumb {
-      border-radius: 5px; // 滚动条
-      width: 6px;
-      background-color: #ccc;
-      :hover {
-        background-color: #ccc;
-      }
-    }
-    ::-webkit-scrollbar-track-piece {
-      border-radius: 5px; // 轨道
-      background: #fff;
-      width: 6px;
-    }
-  .text-over{
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-  .wrap{
-    width:100%;
-    height: 100%;
-    background: #5F8EB9;
+}
+::-webkit-scrollbar-track-piece {
+  border-radius: 5px; // 轨道
+  background: #fff;
+  width: 6px;
+}
+.text-over{
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.wrap{
+  width:100%;
+  height: 100%;
+  background: #5F8EB9;
+  position: relative;
+  overflow: hidden;
+  .header{
     position: relative;
-    overflow: hidden;
-    .header{
+    width: 98%;
+    margin-left:20px;
+    border-top: 10px solid #5F8EB9;
+    border-bottom: 10px solid #5F8EB9;
+    padding:5px 0 5px 20px;
+    color:#f1f1f1;
+    background: #30486C;
+    font-size: 16px;
+  }
+}
+.el-select{
+  width: 100%;
+}
+.header::after{
+  content:"";
+  display: inline-block;
+  position: absolute;
+  top:0;
+  left: -8px;
+  width:4px;
+  height:100%;
+  background: #40C3F1;
+}
+.list-wrap{
+  width:100%;
+  // width:900px;
+  height: calc(100% - 175px); // 去除头部区域
+  overflow-y: auto;
+  .main{
+    width:99%;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    .row {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 40px;
+    }
+    .row:nth-child(2n) {
+      flex-direction: row-reverse;
+    }
+    .row:nth-child(2n):last-child .item {
+      margin-right: auto;
+    }
+    .list-item{
       position: relative;
-      width: 98%;
-      margin-left:20px;
-      border-top: 10px solid #5F8EB9;
-      border-bottom: 10px solid #5F8EB9;
-      padding:5px 0 5px 20px;
-      color:#f1f1f1;
-      background: #30486C;
-      font-size: 16px;
-    }
-  }
-  .el-select{
-    width: 100%;
-  }
-  .header::after{
-      content:"";
-      display: inline-block;
-      position: absolute;
-      top:0;
-      left: -8px;
-      width:4px;
-      height:100%;
-      background: #40C3F1;
-    }
-    .list-wrap{
-      width:100%;
-      // width:900px;
-      height: calc(100% - 175px); // 去除头部区域
-      overflow-y: auto;
-      .main{
-        width:99%;
-        margin: 0 auto;
-        display: flex;
-        flex-direction: column;
-        .row {
-          display: flex;
-          justify-content: space-between;
-          margin-bottom: 40px;
-        }
-        .row:nth-child(2n) {
-          flex-direction: row-reverse;
-        }
-        .row:nth-child(2n):last-child .item {
-          margin-right: auto;
-        }
-        .list-item{
-          position: relative;
-          width: 48%;
-          height: 240px;
-          background-image: url("../../assets/global_images/monitor.png");
-          background-repeat: no-repeat;
-          background-size: cover;
-          // background-size: 100% 100%;
-          // margin-left: 20px;
-          z-index: 10;
-          .img-wrap{
-            position: absolute;
-            left:35px;
-            top:40px;
-            width:238px;
-            height:138px;
-            overflow: hidden;
-            z-index: -1;
-          }
-          .title{
-            width:150px;
-            position: absolute;
-            left:42%;
-            top: 40px;
-            font-size: 20px;
-            color:#40C3F1;
-          }
-          .desc{
-            width:150px;
-            position: absolute;
-            left:42%;
-            top: 75px;
-            font-size: 16px;
-            color:#f1f1f1;
-          }
-          .date{
-            position: absolute;
-            left:50%;
-            transform: translateX(-50%);
-            bottom:70px;
-            font-size: 14px;
-            color:#c1c1c1;
-            margin-left:25px;
-          }
-          .date::after{
-            position: absolute;
-            top:0;
-            left:-20px;
-            content:"";
-            display: inline-block;
-            width: 15px;
-            height: 15px;
-            background-image: url("../../assets/global_images/date.png");
-            background-repeat: no-repeat;
-            background-size: cover;
-          }
-          .ratio{
-            // width:100px;
-            position: absolute;
-            left:50%;
-            transform: translateX(-50%);
-            bottom:40px;
-            font-size: 14px;
-            color:#c1c1c1;
-            // margin-left:18px;
-            margin-left: 25px;
-          }
-          .ratio::after{
-            position: absolute;
-            top:0;
-            left:-20px;
-            content:"";
-            display: inline-block;
-            width: 15px;
-            height: 15px;
-            background-image: url("../../assets/global_images/search.png");
-            background-repeat: no-repeat;
-            background-size: cover;
-          }
-        }
-      }
-    }
-    .main .row:nth-child(odd){
-      .list-item:nth-child(odd)::after{
-        content:"";
-        display: inline-block;
-        width:30px;
-        height: 30px;
+      width: 48%;
+      height: 240px;
+      background-image: url("../../assets/global_images/monitor.png");
+      background-repeat: no-repeat;
+      background-size: cover;
+      // background-size: 100% 100%;
+      // margin-left: 20px;
+      z-index: 10;
+      .img-wrap{
         position: absolute;
-        top:50%;
-        transform: translate(-50%);
-        right:-52px;
-        background-image: url("../../assets/global_images/right.png");
-        background-repeat: no-repeat;
-        background-size: cover;
+        left:35px;
+        top:40px;
+        width:238px;
+        height:138px;
+        overflow: hidden;
+        z-index: -1;
       }
-    }
-    .main .row:nth-child(odd){
-      .list-item:nth-child(even)::after{
-        content:"";
-        display: inline-block;
-        width:30px;
-        height: 30px;
+      .title{
+        width:150px;
         position: absolute;
-        right:50%;
-        transform: translate(-50%);
-        bottom:-35px;
-        background-image: url("../../assets/global_images/right.png");
-        background-repeat: no-repeat;
-        background-size: cover;
-        transform: rotate(90deg);
+        left:42%;
+        top: 40px;
+        font-size: 20px;
+        color:#40C3F1;
       }
-    }
-    .main .row:nth-child(even){
-      .list-item:nth-child(odd)::after{
-        content:"";
-        display: inline-block;
-        width:30px;
-        height: 30px;
+      .desc{
+        width:150px;
         position: absolute;
-        top:50%;
-        transform: translate(-50%);
-        left:-35px;
-        background-image: url("../../assets/global_images/right.png");
-        background-repeat: no-repeat;
-        background-size: cover;
-        transform: rotate(180deg);
+        left:42%;
+        top: 75px;
+        font-size: 16px;
+        color:#f1f1f1;
       }
-    }
-    .main .row:nth-child(even){
-      .list-item:nth-child(even)::after{
-        content:"";
-        display: inline-block;
-        width:30px;
-        height: 30px;
+      .date{
         position: absolute;
         left:50%;
-        transform: translate(-50%);
-        bottom:-35px;
-        background-image: url("../../assets/global_images/right.png");
+        transform: translateX(-50%);
+        bottom:70px;
+        font-size: 14px;
+        color:#c1c1c1;
+        margin-left:25px;
+      }
+      .date::after{
+        position: absolute;
+        top:0;
+        left:-20px;
+        content:"";
+        display: inline-block;
+        width: 15px;
+        height: 15px;
+        background-image: url("../../assets/global_images/date.png");
         background-repeat: no-repeat;
         background-size: cover;
-        transform: rotate(-270deg);
+      }
+      .ratio{
+        // width:100px;
+        position: absolute;
+        left:50%;
+        transform: translateX(-50%);
+        bottom:40px;
+        font-size: 14px;
+        color:#c1c1c1;
+        // margin-left:18px;
+        margin-left: 25px;
+      }
+      .ratio::after{
+        position: absolute;
+        top:0;
+        left:-20px;
+        content:"";
+        display: inline-block;
+        width: 15px;
+        height: 15px;
+        background-image: url("../../assets/global_images/search.png");
+        background-repeat: no-repeat;
+        background-size: cover;
       }
     }
-    // 如果是最后一个元素不显示箭头
-    .main .row:last-child{
-      .list-item:last-child::after{
-        display: none;
-      }
-    }
-    .list-wrap .main .list-item .img-wrap{
-      position: absolute;
-      left: 32px;
-      top: 40px;
-      // width: 190px;
-      width: 212px;
-      height: 138px;
-      overflow: hidden;
-      z-index: -1;
-    }
-    .list-wrap .main .list-item .date{
-      left:75% !important;
-      margin-bottom: 20px;
-    }
-    .list-wrap .main .list-item .ratio{
-      left:75% !important;
-    }
-    .list-wrap .main .list-item .title,.list-wrap .main .list-item .desc{
-      left:62% !important;
-    }
-    .close-icon{
-      z-index: 100;
-      position: absolute;
-      top:2px;
-      right:2px;
-      color:white;
-      background: #fc2323cc;
-      width:25px;
-      height:25px;
-      border-radius: 5px;
-      padding:3px;
-    }
+  }
+}
+.main .row:nth-child(odd){
+  .list-item:nth-child(odd)::after{
+    content:"";
+    display: inline-block;
+    width:30px;
+    height: 30px;
+    position: absolute;
+    top:50%;
+    transform: translate(-50%);
+    right:-52px;
+    background-image: url("../../assets/global_images/right.png");
+    background-repeat: no-repeat;
+    background-size: cover;
+  }
+}
+.main .row:nth-child(odd){
+  .list-item:nth-child(even)::after{
+    content:"";
+    display: inline-block;
+    width:30px;
+    height: 30px;
+    position: absolute;
+    right:50%;
+    transform: translate(-50%);
+    bottom:-35px;
+    background-image: url("../../assets/global_images/right.png");
+    background-repeat: no-repeat;
+    background-size: cover;
+    transform: rotate(90deg);
+  }
+}
+.main .row:nth-child(even){
+  .list-item:nth-child(odd)::after{
+    content:"";
+    display: inline-block;
+    width:30px;
+    height: 30px;
+    position: absolute;
+    top:50%;
+    transform: translate(-50%);
+    left:-35px;
+    background-image: url("../../assets/global_images/right.png");
+    background-repeat: no-repeat;
+    background-size: cover;
+    transform: rotate(180deg);
+  }
+}
+.main .row:nth-child(even){
+  .list-item:nth-child(even)::after{
+    content:"";
+    display: inline-block;
+    width:30px;
+    height: 30px;
+    position: absolute;
+    left:50%;
+    transform: translate(-50%);
+    bottom:-35px;
+    background-image: url("../../assets/global_images/right.png");
+    background-repeat: no-repeat;
+    background-size: cover;
+    transform: rotate(-270deg);
+  }
+}
+// 如果是最后一个元素不显示箭头
+.main .row:last-child{
+  .list-item:last-child::after{
+    display: none;
+  }
+}
+.list-wrap .main .list-item .img-wrap{
+  position: absolute;
+  left: 32px;
+  top: 40px;
+  // width: 190px;
+  width: 212px;
+  height: 138px;
+  overflow: hidden;
+  z-index: -1;
+}
+.list-wrap .main .list-item .date{
+  left:75% !important;
+  margin-bottom: 20px;
+}
+.list-wrap .main .list-item .ratio{
+  left:75% !important;
+}
+.list-wrap .main .list-item .title,.list-wrap .main .list-item .desc{
+  left:62% !important;
+}
+.close-icon{
+  z-index: 100;
+  position: absolute;
+  top:2px;
+  right:2px;
+  color:white;
+  background: #fc2323cc;
+  width:25px;
+  height:25px;
+  border-radius: 5px;
+  padding:3px;
+}
 </style>
diff --git a/src/views/popup/bottom.vue b/src/views/popup/bottom.vue
index e3fe7e2..c95b2a1 100644
--- a/src/views/popup/bottom.vue
+++ b/src/views/popup/bottom.vue
@@ -1,47 +1,84 @@
 <template>
   <div class="bottom">
-    <div class="block1">
-      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">访客控制安全系数组件</div>
-      <visit-bar style="flex:1;"/>
-    </div>
+<!--    <div class="block1" style="border-top-left-radius: 0px;margin-left: 5px">-->
+<!--      <inout-list style="flex:1;"/>-->
+<!--    </div>-->
     <div class="block">
       <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安防事件列表</div>
       <case-table style="flex:1;"/>
     </div>
-    <div class="block">
-      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">其他相关安全系数指标组件</div>
-      <other-line style="flex:1;"/>
+    <div class="block1" style="flex-direction: row;width: 700px">
+      <div style="width: 200px">
+        <div class="item0" style="margin: 36px 0">
+          <el-image :src="require('@/assets/popup/事件.png')" class="base-map-image" mode="fill" />
+          <div class="item-text">
+            <div class="num">{{caseNum.all}}<span class="unit"> 件</span></div>
+            <div style="color: #B3F3F6;">今日总事件</div>
+          </div>
+        </div>
+        <div class="item0">
+          <el-image :src="require('@/assets/popup/事件1.png')" class="base-map-image" mode="fill" />
+          <div class="item-text">
+            <div class="num"><span style="color: #08f102;text-shadow: 0 0 5px #08f102;">{{caseNum.solve}}</span><span class="unit"> 件</span></div>
+            <div style="color: #B3F3F6;">今日已解决</div>
+          </div>
+        </div>
+      </div>
+      <case-pie style="width: calc(100% - 200px);height: 100%"/>
     </div>
-    <div class="block1">
-      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安保人员到岗系数组件</div>
-      <staff-bar1 style="flex:1;"/>
+    <div class="block">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安防事件频率统计</div>
+      <case-bar style="flex:1;"/>
     </div>
   </div>
 </template>
 
 <script>
-// import VisitorPie from "@/views/popup/components/visitorPie";
-import VisitBar from '@/views/popup/components/visitBar';
-import StaffBar1 from '@/views/popup/components/staffBar1';
-import CaseTable from '@/views/popup/components/caseTable';
-// import ReqairTable from "@/views/popup/components/reqairTable";
-import OtherLine from '@/views/popup/components/otherLine';
+
+import CaseTable from '@/views/popup/components/caseTable'
+import CasePie from '@/views/popup/components/casePie'
+import { caseTodayStatistics } from '@/api/pop'
+import CaseBar from '@/views/popup/components/caseBar'
+import InoutList from '@/views/popup/components/inoutList'
 
 export default {
   name: 'Bottom',
-  components: { OtherLine, CaseTable, StaffBar1, VisitBar },
+  components: { InoutList, CaseBar, CasePie, CaseTable },
   data() {
     return {
+      timer: null,
       titleImg: require('@/assets/popup/title.png'), // 背景图片
-      titleAll: require('@/assets/popup/title-all.png'),// 背景图片
-      list: [2156, 2144, 455, 314, 98]
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      list: [2156, 2144, 455, 314, 98],
+      caseNum: {
+        all: 0,
+        solve: 0
+      }
     }
   },
+  mounted() {
+    clearInterval(this.timer)
+    this.search()
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+    this.timer = null
+  },
+  methods: {
+    search() {
+      this.timer = setInterval(() => {
+        caseTodayStatistics().then(response => {
+          if (response.code === 200) {
+            this.caseNum = response.data
+          }
+        })
+      }, 10000)
+    }
+  }
 }
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-
 .bottom{
   width: 100%;
   height: 220px;
@@ -57,11 +94,11 @@
     border-radius: 5px;
     box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
     border-color: rgba(0, 0, 0, .05);
-    margin: 0px 10px;
+    margin: 0px 5px;
     flex-direction: column;
   }
   .block1{
-    width: 500px;
+    width: 750px;
     height: 100%;
     display: flex;
     flex-wrap: wrap;
@@ -69,7 +106,7 @@
     border-radius: 5px;
     box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
     border-color: rgba(0, 0, 0, .05);
-    margin: 0px 10px;
+    margin: 0px 5px;
     flex-direction: column;
   }
   .title{
@@ -93,5 +130,31 @@
     font-size: 15px;
 
   }
+  .item0{
+    width: 100%;
+    height: 50px;
+    display: flex;
+    justify-content: left;
+    align-items: center;
+    padding: 0 8%;
+  }
+  .item-text{
+    text-shadow: 0 0 2px #d1ffff;
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 18px;
+  }
+  .num{
+    text-shadow: 0 0 5px #ffb441;
+    color: #ffb441;
+    font-size: 20px;
+    padding-top: 2px;
+  }
+  .unit{
+    color: #B3F3F6;
+    font-size: 14px;
+    margin-left: 1px;
+  }
 }
 </style>
diff --git a/src/views/popup/components/caseTable.vue b/src/views/popup/components/caseTable.vue
index 95aa677..c9708d7 100644
--- a/src/views/popup/components/caseTable.vue
+++ b/src/views/popup/components/caseTable.vue
@@ -1,5 +1,9 @@
 <template>
   <div class="flowTable">
+<!--    <el-tabs v-model="activeName" @tab-click="changeTime" style="display: flex;position:absolute;right: 30px;top:5px">-->
+<!--      <el-tab-pane label="已解决" name="week"/>-->
+<!--      <el-tab-pane label="未解决" name="month"/>-->
+<!--    </el-tabs>-->
     <div class="success_info_body" v-show="showFlag">
       <!-- 参数名称、列数根据实际情况调整 -->
       <div class="table_body">
@@ -14,7 +18,7 @@
         <div class="table_main_body">
           <div class="table_inner_body" :style="{top: tableTop + 'px'}">
             <div v-for="(item,index) in tableList" class="table_tr" :class="checkCell(item,index)" :key="index" @click="JumpDevice(item)">
-              <div class="tr1 tr">{{item.levelName}}</div>
+              <div class="tr1 tr" :style="{color: item.levelName ==='重大' ? 'red' : item.levelName ==='较大' ? 'orange' : '#b8dffd'}">{{item.levelName}}</div>
               <div class="tr2 tr">{{item.description}}</div>
               <div class="tr1 tr">{{item.statusName}}</div>
               <div class="tr2 tr">{{item.typeName}}</div>
@@ -41,7 +45,7 @@
   data() {
     return {
       picurl: '',
-      defaultPhoto: require('@/assets/global_images/photo_error.png'),
+      defaultPhoto: require('@/assets/global_images/photo_offline.png'),
       errorImg: require('@/assets/global_images/photo_error.png'),
       showFlag: true,
       tableTimer: null,
@@ -104,8 +108,9 @@
       this.picurl = ''
       this.isbig = false
       getCaseListPage({
+        status: '',
         offset: 1,
-        limit: 15
+        limit: 20
       }).then(response => {
         if (response.code === 200) {
           this.tableList = response.data.rows
@@ -190,13 +195,18 @@
   line-height: 15px;
 }
 .tr {
-  overflow: hidden;
   text-overflow: ellipsis;
-  white-space: nowrap;
   box-sizing: border-box;
   padding: 0 5px;
   text-align: center;
   font-size: 13px;
+  word-wrap: break-word; /* 允许在单词内换行 */
+  overflow-wrap: break-word; /* 同上，现代浏览器推荐使用 */
+  white-space: normal; /* 允许自动换行 */
+  line-height: 15px;
+  display: flex;
+  align-items: center; /* 垂直居中 */
+  justify-content: center; /* 水平居中，如需要 */
 }
 .tr1 {
   width: 13%;
@@ -253,7 +263,7 @@
   }
 }
 .hard-state{
-  background:red;
+  background: #ff8585;
 }
 .medium-state{
   background: #ea9700;
diff --git a/src/views/popup/components/doorList.vue b/src/views/popup/components/doorList.vue
new file mode 100644
index 0000000..7bc178a
--- /dev/null
+++ b/src/views/popup/components/doorList.vue
@@ -0,0 +1,257 @@
+<template>
+  <div style="width: 100%;height: 100%;">
+    <div style="text-align: right;margin-right: 5px;">
+      <el-button class="doorbar-btn" type="primary" plain @click="isOn1 = !isOn1" style="margin-left: 3px">{{isOn1 ? '隐藏操作按钮': '开启操作按钮'}}</el-button>
+      <el-button class="doorbar-btn" type="primary" plain @click="controlDool()">{{!isOn2 ? '开启黑名单与闸机联动': '关闭黑名单与闸机联动'}}</el-button>
+    </div>
+    <div class="success_info_body" style="margin: 0 10px;flex: 1">
+      <div class="table_body">
+        <div class="table_th">
+          <div class="tr4 th_style">门禁分组</div>
+          <div class="tr1 th_style" v-show="isOn1">操作</div>
+        </div>
+        <div class="table_main_body">
+          <div class="table_inner_body" :style="{top: tableTop + 'px'}">
+            <div v-for="(item,index) in tableList" class="table_tr" :key="index">
+              <div class="tr4 tr">{{item.groupName}}</div>
+              <div class="tr1 tr" v-show="isOn1">
+                <el-button type="text" v-for="item in statusList" :key="item.value" size="small" @click.stop="editStatus(scope.row, item.value)" style="height: 20px;margin-top: -10px">
+                  {{ item.name }}
+                </el-button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+<!--    <el-pagination layout="prev, pager, next" :total="tableListSize" style="width: 100%;text-align: center" @current-change="handleCurrentChange"/>-->
+  </div>
+</template>
+
+<script>
+import {controlGroup, gateLinkageSwitch, getGroupListPage, getSwitchStatus} from '@/api/device'
+export default {
+  name: 'DoorList',
+  data() {
+    return {
+      defaultPhoto: require('@/assets/global_images/photo.png'),
+      errorImg: require('@/assets/global_images/photo_error.png'),
+      isOn1: false,
+      isOn2: false,
+      tableTimer: null,
+      tableTop: 0,
+      tableList: [],
+      statusList: [
+        { name: '常开', id: '1557975745699823618', value: '0' },
+        { name: '常闭', id: '1557975746215723010', value: '3' },
+        { name: '门开', id: '1557975746723233793', value: '2' },
+        { name: '门闭', id: '1557975747402711041', value: '1' }
+      ],
+      tableListSize: 0,
+      componentTimer: null,
+      visibleSize: 8, // 容器内可视最大完整行数
+      lineHeight: 20, // 每行的实际高度（包含margin-top/bottom,border等）
+      componentTimerInterval: 3600000, //  刷新数据的时间间隔
+      tableTimerInterval: 50, //  向上滚动 1px 所需要的时间，越小越快，推荐值 100
+      listQuery: {
+        groupName: '',
+        gateCode: '',
+        status: '',
+        offset: 1,
+        limit: 8
+      }, // 筛选条件
+      dialogFormVisible: false, // 是否显示编辑框
+      timeRange: [], // 时间范围
+      multipleSelection: [], // 多选选中项
+      list: [], // 列表数据
+      colorRow: {
+        isColor: false,
+        isPop: true
+      },
+      inoutTypeList: [],
+      passWayList: [],
+      total: 0, // 数据总数
+      listLoading: true // 列表加载动画
+    }
+  },
+  created() {
+    getSwitchStatus().then(response => {
+      if (response.code === 200) {
+        this.isOn2 = response.data === 1
+      }
+    })
+    this.fetchData()
+  },
+  methods: {
+    controlDool() {
+      this.isOn2 = !this.isOn2
+      gateLinkageSwitch(this.isOn2 ? 1 : 0).then(response => {
+        if (response.code === 200) {
+          this.$message.success((this.isOn2 ? '开启' : '关闭') + '黑名单与闸机联动成功')
+        }
+      })
+    },
+    fetchData(isNowPage = true) {
+      if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+        this.listQuery.offset = 1
+      }
+      getGroupListPage(this.listQuery).then(response => {
+        if (response.code === 200) {
+          this.tableList = response.data.rows
+          this.tableListSize = parseInt(response.data.total)
+        }
+      })
+    },
+    editStatus(row, status) {
+      controlGroup(row.id, status).then(response => {
+        if (response.code === 200) {
+          this.$message.success('通道控制成功')
+          this.fetchData()
+        }
+      }).catch(_ => { // 异常情况，loading置为false
+      })
+    },
+    handleCurrentChange(val) {
+      this.listQuery.offset = val
+      this.fetchData()
+    },
+    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.doorbar-btn {
+  height: 22px;
+  padding-top: 4px;
+  padding-right: 6px;
+  padding-left: 6px;
+  margin-right: 4px;
+}
+.table_body {
+  width: 100%;
+  margin-top: 0px;
+}
+.table_th {
+  width: 100%;
+  display: flex;
+  height: 15px;
+  line-height: 20px;
+}
+.tr {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 0 5px;
+  text-align: center;
+  font-size: 13px;
+  height: 20px !important;
+}
+.tr1 {
+  width: 35%;
+}
+.tr2 {
+  width: 18%;
+}
+.tr3 {
+  width: 15%;
+  font-size: 13px;
+}
+
+.tr4 {
+  flex: 1;
+}
+.tr5 {
+  width: 100px;
+}
+
+.th_style {
+  color: #b8dffd;
+  font-size: 13px;
+  font-weight: bold;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  box-sizing: border-box;
+  text-align: center;
+}
+.table_main_body {
+  width: 100%;
+  height: 175px;
+  overflow: hidden;
+  position: relative;
+  margin-top: 5px;
+}
+.table_inner_body {
+  width: 100%;
+  position: absolute;
+  left: 0;
+  color: #cce9ff;
+}
+
+.table_tr {
+  display: flex;
+  font-size: 13px;
+  border: 1px solid rgb(71, 160, 199);
+  margin-top: 2px;
+  height: 20px;
+  line-height: 20px;
+  cursor: pointer;
+:hover{
+  background: rgba(255, 153, 51, 0.6);
+}
+}
+.table_tr0 {
+  background: rgba(3, 145, 167, 0.1);
+}
+.table_tr1 {
+  background: rgb(64, 87, 120);
+}
+
+::v-deep .el-pagination {
+  .el-pagination__total {
+    color: white !important;
+  }
+  .el-pagination__jump {
+    color: white !important;
+  }
+  // 两个输入框
+  .el-input__inner {
+    background-color: #092546;
+    border: 1px solid rgba(192, 192, 192, 0.479);
+    color: white !important;
+  }
+  // 左右按键和里面的图标
+  button {
+    background-color: #092546;
+    .el-icon::before {
+      color: white;
+    }
+  }
+  // 分页数字
+  ul {
+    color: white;
+    .el-icon::before {
+      color: white !important;
+    }
+  }
+  // 分页数字的背景色
+  ul > li {
+    background-color: #092546;
+  }
+}
+::v-deep .el-loading-mask {
+  background-color: rgba(0, 0, 0, 0.479);
+}
+
+</style>
diff --git a/src/views/popup/components/personTable.vue b/src/views/popup/components/personTable.vue
index e2e4c1e..ca73933 100644
--- a/src/views/popup/components/personTable.vue
+++ b/src/views/popup/components/personTable.vue
@@ -7,15 +7,17 @@
           <div class="tr4 th_style">安保人员姓名</div>
           <div class="tr4 th_style">性别</div>
           <div class="tr4 th_style">照片</div>
+          <div class="tr4 th_style">状态</div>
         </div>
         <div class="table_main_body">
           <div class="table_inner_body" :style="{top: tableTop + 'px'}">
-            <div v-for="(item,index) in tableList" :class="index%2==1?'table_tr':'table_tr1'" :key="index" @click="JumpDevice(item)">
+            <div v-for="(item,index) in tableList" :class="index % 2==1?'table_tr':'table_tr1'" :key="index" @click="JumpDevice(item)">
               <div class="tr4 tr">{{item.staffName}}</div>
               <div class="tr4 tr">{{item.staffGenderName}}</div>
               <div class="tr4 tr">
                 <img :src="item.picture ? `${item.picture}`: defaultPhoto" width="40px" height="40px" style="margin-left: 5px" @error="errorImg">
               </div>
+              <div class="tr4 tr">{{item.statusName}}</div>
             </div>
           </div>
         </div>
@@ -25,7 +27,7 @@
 </template>
 <script>
 
-import { getStaffListPage, hikPic } from '@/api/person'
+import {getStaffListPage, getStaffOnList, hikPic} from '@/api/person'
 import { repostSocket } from '@/api/common';
 import { getDate } from '@/utils/calendarUtil'
 
@@ -43,7 +45,7 @@
       tableList: [],
       tableListSize: 0,
       componentTimer: null,
-      visibleSize: 5, // 容器内可视最大完整行数
+      visibleSize: 8, // 容器内可视最大完整行数
       lineHeight: 45, // 每行的实际高度（包含margin-top/bottom,border等）
       componentTimerInterval: 3600000, //  刷新数据的时间间隔
       tableTimerInterval: 50 //  向上滚动 1px 所需要的时间，越小越快，推荐值 100
@@ -51,7 +53,7 @@
   },
 
   // 如果没有父元素传值，将watch内的内容搬至mounted中即可
-  props: ["activeFactoryId"],
+  props: ['activeFactoryId'],
   watch: {
     activeFactoryId(val, oldVal) {
       clearInterval(this.componentTimer)
@@ -70,6 +72,8 @@
   methods: {
     JumpDevice(item) {
       const params = {
+        personName: item.staffName,
+        staffCode: item.staffCode,
         facePicUrl: item.picture, // 图片url
         startTime: getDate(-31, 'SECOND'), // 开始时间
         endTime: getDate(0, 'SECOND'), // 结束时间
@@ -94,51 +98,32 @@
         message: this.wallList
       }
       repostSocket(params).then(response => {
-        if (response.code === 200) {
-        }
+        if (response.code === 200) {}
       })
     },
     fetchData() {
       const params = {
-        staffType: '2',
+        // staffType: '2',
         offset: 1,
-        limit: 50,
-        keywords: '',
-        cardNum: '',
-        phone: ''
+        limit: 200
       }
-      getStaffListPage(params).then(response => {
+      getStaffOnList(params).then(response => {
         if (response.code === 200) {
           this.tableList = response.data.rows
+          // this.tableListSize = response.data.total
           this.tableActionFun()
         }
       })
-      // this.tableList = [
-      //   {
-      //     id: '',
-      //     drawNo: 'YQ-001',
-      //     levelName: '一般',
-      //     description: '保安脱岗',
-      //     status: '0',
-      //     statusName: '未解决',
-      //     typeName: '临时事件',
-      //     devName: '视频监控摄像机5',
-      //     positionName: '一期主楼',
-      //     areaName: '3F',
-      //     isKeyAreaName: '否',
-      //     detailLocation: '详细位置',
-      //     happenTime: '2022-05-06 21:55:00'
-      //   }
-      // ]
     },
     tableActionFun() {
       this.tableListSize = this.tableList.length
       if (this.tableListSize > this.visibleSize) {
         this.tableList = this.tableList.concat(this.tableList)
         this.tableTimerFun()
-      } else {
-        this.fillTableList()
       }
+      // else {
+      //   this.fillTableList()
+      // }
     },
     //  当数据过少时，不触发自动轮播事件，并填充没有数据的行，参数根据实际情况修改即可
     fillTableList() {
@@ -230,7 +215,7 @@
 }
 .table_main_body {
   width: 100%;
-  height: 200px;
+  height: calc(40vh - 140px);
   overflow: hidden;
   position: relative;
   margin-top: 5px;
diff --git a/src/views/popup/components/staffLine1.vue b/src/views/popup/components/staffLine1.vue
index d3b0a95..d3cd04b 100644
--- a/src/views/popup/components/staffLine1.vue
+++ b/src/views/popup/components/staffLine1.vue
@@ -12,8 +12,8 @@
 </template>
 
 <script>
-import { multiScoreCommute } from '@/api/pop';
-import * as echarts from "echarts";
+import { multiScoreCommute } from '@/api/pop'
+import * as echarts from 'echarts'
 export default {
   name: 'StaffLine1',
   data() {
diff --git a/src/views/popup/components/visitBar.vue b/src/views/popup/components/visitBar.vue
index 1726d20..4f35e21 100644
--- a/src/views/popup/components/visitBar.vue
+++ b/src/views/popup/components/visitBar.vue
@@ -7,7 +7,7 @@
 import * as echarts from 'echarts';
 
 export default {
-  name: 'AreaBar1',
+  name: 'VisitBar',
   data() {
     return {
       isShow: true,
diff --git a/src/views/popup/floor.vue b/src/views/popup/floor.vue
index 6342d5a..8052ae4 100644
--- a/src/views/popup/floor.vue
+++ b/src/views/popup/floor.vue
@@ -107,8 +107,7 @@
         message: 'show'
       }
       repostSocket(params).then(response => {
-        if (response.code === 200) {
-        }
+        if (response.code === 200) {}
       })
     }
   }
diff --git a/src/views/popup/left.vue b/src/views/popup/left.vue
index d35b6b2..dab745c 100644
--- a/src/views/popup/left.vue
+++ b/src/views/popup/left.vue
@@ -1,67 +1,75 @@
 <template>
   <div class="left">
-    <div class="block" style="justify-content: center;height: 29%;padding-top: 10px">
-      <div class="item">
-        <el-image :src="require('@/assets/popup/人员.png')" class="base-map-image" mode="fill" />
-        <div style="color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;"> 一期主楼、录制楼</div>
-        <div class="num">{{list["0"]}}<span class="unit">人</span></div>
+    <div class="block" style="height: 270px;">
+      <div style="display: flex;flex-direction: row;justify-content: center;padding-top: 10px;height: 70px">
+        <div class="item">
+          <el-image :src="require('@/assets/popup/cam.png')" class="base-map-image" mode="fill" />
+          <div class="item-title">摄像机</div>
+          <div class="num"><span style="color: #08f102;text-shadow: 0 0 5px #08f102;">{{cam.on}}</span> / {{cam.all}}</div>
+        </div>
+        <div class="item">
+          <el-image :src="require('@/assets/popup/闸机.png')" class="base-map-image" mode="fill" />
+          <div class="item-title">闸机</div>
+          <div class="num"><span style="color: #08f102;text-shadow: 0 0 5px #08f102;">{{door.on}}</span> / {{door.all}}</div>
+        </div>
       </div>
-      <div class="item">
-        <el-image :src="require('@/assets/popup/人员.png')" class="base-map-image" mode="fill" />
-        <div style="color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;"> 二期主楼</div>
-        <div class="num">{{list["1"]}}<span class="unit">人</span></div>
-      </div>
-      <div class="item">
-        <el-image :src="require('@/assets/popup/访客.png')" class="base-map-image" mode="fill" />
-        <div style="color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;"> 今日访客量</div>
-        <div class="num">{{list["2"]}}<span class="unit">人</span></div>
-      </div>
-      <div class="item">
-        <el-image :src="require('@/assets/popup/今日事件.png')" class="base-map-image" mode="fill" />
-        <div style="color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;"> 今日事件数</div>
-        <div class="num">{{list["3"]}}<span class="unit">件</span></div>
-      </div>
-      <div class="item">
-        <el-image :src="require('@/assets/popup/今日处置.png')" class="base-map-image" mode="fill" />
-        <div style="color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;"> 事件处置数</div>
-        <div class="num">{{list["4"]}}<span class="unit">件</span></div>
-      </div>
-      <div class="item">
-        <el-image :src="require('@/assets/popup/离线.png')" class="base-map-image" mode="fill" />
-        <div style="color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;">设备离线率</div>
-        <div class="num">{{list["5"]}}<span class="unit"></span></div>
-      </div>
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title" style="margin: 0">摄像机状态分析</div>
+      <cam-bar style="width: 100%;height: 165px"/>
     </div>
-    <div class="block" style="flex-direction: column;">
-      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">员工通勤安防系数组件</div>
-      <staff-line1 style="flex:1;"/>
+    <div class="block" style="height: 250px;">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title" style="margin: 5px 0">闸机控制</div>
+      <door-list style="width: 100%;height: 250px;margin-top: -34px"/>
     </div>
-    <div class="block" style="flex-direction: column;">
-      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">重点区域防控系数组件</div>
-      <area-bar1 style="flex: 1"/>
+    <div class="block" style="height: 500px;">
+      <div style="display: flex;flex-direction: row;justify-content: center;height: 50px">
+        <el-tooltip class="item" effect="dark" :content="`进入人数${tips['1进入人数']}，离开人数${tips['1离开人数']}`" placement="bottom">
+          <div class="item">
+            <el-image :src="require('@/assets/popup/人员.png')" class="base-map-image" mode="fill" style="margin-top: 10px"/>
+            <div class="item-title"> 一期主楼、录制楼</div>
+            <div class="num" style="margin-top: -15px">{{tips["1"]}}<span class="unit">人</span></div>
+          </div>
+        </el-tooltip>
+        <el-tooltip class="item" effect="dark" :content="`进入人数${tips['2进入人数']}，离开人数${tips['2离开人数']}`" placement="bottom">
+          <div class="item">
+            <el-image :src="require('@/assets/popup/人员.png')" class="base-map-image" mode="fill" style="margin-top: 10px;margin-left: -20px"/>
+            <div class="item-title"> 二期主楼 </div>
+            <div class="num" style="margin-top: -15px">{{tips["2"]}}<span class="unit">人</span></div>
+          </div>
+        </el-tooltip>
+      </div>
+      <inout-list style="width: 100%;height: 350px;margin-top: 10px"/>
     </div>
   </div>
 </template>
 
 <script>
-import StaffLine1 from '@/views/popup/components/staffLine1'
-import AreaBar1 from '@/views/popup/components/areaBar1'
-import { getTodayNumber, getPeopleNumber, getDeviceNumber, offlineRate, eventNum } from '@/api/pop'
+import { buildPeopleNumber, deviceStatistics, getPeopleNumber } from '@/api/pop'
+import CamBar from '@/views/popup/components/camBar'
+import DoorList from '@/views/popup/components/doorList'
+import InoutList from '@/views/popup/components/inoutList'
+
 export default {
   name: 'Left',
-  components: { AreaBar1, StaffLine1 },
+  components: { InoutList, DoorList, CamBar },
   data() {
     return {
       timer: null,
       titleImg: require('@/assets/popup/title.png'), // 背景图片
-      titleAll: require('@/assets/popup/title-all.png'),// 背景图片
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      cam: { on: '', all: '' },
+      door: { on: '', all: '' },
       list: {
         '0': '*',
         '1': '*',
-        '2': '*',
-        '3': '*',
-        '4': '*',
-        '5': '*'
+        '2': '*'
+      },
+      tips: {
+        '1': 0,
+        '2': 0,
+        '2进入人数': 0,
+        '1进入人数': 0,
+        '2离开人数': 0,
+        '1离开人数': 0
       }
     }
   },
@@ -73,59 +81,51 @@
     this.timer = setInterval(() => {
       this.initData()
     }, 60000)
+    this.initData()
   },
   methods: {
     initData() {
-      getPeopleNumber().then(response => {
+      deviceStatistics(2).then(response => {
         if (response.code === 200) {
-          this.list['0'] = response.data[1] + (response.data[3] ? response.data[3] : 0)
-          this.list['1'] = response.data[2]
+          this.cam.on = response.data.list.filter(item => item.status === '在线')[0].quantity
+          this.cam.all = response.data.total
         }
       })
-      getTodayNumber().then(response => {
+      deviceStatistics(1).then(response => {
         if (response.code === 200) {
-          this.list['2'] = response.data['今日访客量']
+          this.door.on = response.data.list.filter(item => item.status === '在线')[0].quantity
+          this.door.all = response.data.total
         }
       })
-      // getDeviceNumber().then(response => {
-      //   if (response.code === 200) {
-      //     // this.list['3'] = response.data['设备总数']
-      //     // this.list['4'] = response.data['设备在线率'].replace('%', '')
-      //   }
-      // })
-
-      offlineRate().then(response => {
+      buildPeopleNumber().then(response => {
         if (response.code === 200) {
-          this.list['5'] = response.data['设备离线率']
-        }
-      })
-      eventNum().then(response => {
-        if (response.code === 200) {
-          this.list['3'] = response.data['今日事件数']
-          this.list['4'] = response.data['今日事件处置数']
+          this.tips = response.data
         }
       })
     }
   }
 }
 </script>
-
 <style rel="stylesheet/scss" lang="scss" scoped>
-.left{
+.block{
   width: 100%;
+  height: 200px;
+  background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+  border-radius: 5px;
+  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+  border-color: rgba(0, 0, 0, .05);
+  margin-bottom: 5px;
+  flex-direction: column;
+}
+.left{
+  width: 500px;
   height: 100%;
   overflow: hidden;
-  .block{
-    height: 33%;
-    width: 500px;
-    display: flex;
-    flex-wrap: wrap;
-    background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
-    border-radius: 5px;
-    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
-    border-color: rgba(0, 0, 0, .05);
-    margin: 10px;
-  }
+  //background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+  //box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+  //border-color: rgba(0, 0, 0, .05);
+  margin: 10px 10px 0 10px;
+  border-radius: 5px;
   .title{
     text-shadow: 0 0 5px #d1ffff;
     width: 500px;
@@ -139,6 +139,7 @@
     padding-left: 30px;
     font-family: 黑体;
     letter-spacing: 1px;
+    z-index: 1;
   }
   .base-map-image{
     width: 45px;
@@ -151,15 +152,24 @@
     height: 80%;
   }
   .item{
-    width: 33%;
+    width: 50%;
     font-weight: bold;
     text-align: center;
-    font-size: 15px;
+    font-size: 16px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    .item-title{
+      color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;margin-left: 10px;
+      line-height: 40px;
+      vertical-align: middle;
+    }
     .num{
       text-shadow: 0 0 5px #ffb441;
       color: #ffb441;
-      font-size: 18px;
-      padding-top: 2px;
+      font-size: 20px;
+      width: 100%;
+      margin-top: -0px;
     }
     .unit{
       color: #B3F3F6;
diff --git a/src/views/popup/right.vue b/src/views/popup/right.vue
index 4571ea1..b139de4 100644
--- a/src/views/popup/right.vue
+++ b/src/views/popup/right.vue
@@ -1,64 +1,79 @@
 <template>
   <div class="right">
-    <div class="block" style="justify-content: center;height: 29%;">
-      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安全防护梯度指标组件</div>
-      <div class="item">
-        <el-image :src="require('@/assets/popup/safe.png')" class="base-map-image" mode="fill" />
-        <div class="item-text">
-          <div class="num">{{list["0"]}}<span class="unit">分</span></div>
-          <div style="color: #B3F3F6;">一期主楼</div>
+    <el-tooltip effect="dark" content="安防事件评分由安防事件影响（占比50%）、访客事件影响（占比30%）、各楼栋设备维修次数（占比10%）、各楼栋消防设备有效期（占比10%）" placement="bottom">
+      <div class="block" style="justify-content: center;height: 20%;padding-top: 30px">
+        <div class="item">
+          <el-image :src="require('@/assets/popup/safe.png')" class="base-map-image" mode="fill" />
+          <div class="item-text">
+            <div class="num">{{list["0"]}}<span class="unit">分</span></div>
+            <div style="color: #B3F3F6;">一期主楼</div>
+          </div>
+        </div>
+        <div class="item">
+          <el-image :src="require('@/assets/popup/safe.png')" class="base-map-image" mode="fill" />
+          <div class="item-text">
+            <div class="num">{{list["1"]}}<span class="unit">分</span></div>
+            <div style="color: #B3F3F6;">二期主楼</div>
+          </div>
+        </div>
+        <div class="item">
+          <el-image :src="require('@/assets/popup/safe.png')" class="base-map-image" mode="fill" />
+          <div class="item-text">
+            <div class="num">{{list["2"]}}<span class="unit">分</span></div>
+            <div style="color: #B3F3F6;">录制楼</div>
+          </div>
+        </div>
+        <div class="item">
+          <el-image :src="require('@/assets/popup/safe.png')" class="base-map-image" mode="fill" />
+          <div class="item-text">
+            <div class="num">{{list["3"]}}<span class="unit">分</span></div>
+            <div style="color: #B3F3F6;">1600演播厅</div>
+          </div>
         </div>
       </div>
-      <div class="item">
-        <el-image :src="require('@/assets/popup/safe.png')" class="base-map-image" mode="fill" />
+    </el-tooltip>
+    <div class="block" style="flex-direction: column;height: 40%;">
+      <div class="item" style="margin-bottom: 10px;margin-top: -10px;margin-left: 25%">
+        <el-image :src="require('@/assets/popup/baoan.png')" class="base-map-image" mode="fill" />
         <div class="item-text">
-          <div class="num">{{list["1"]}}<span class="unit">分</span></div>
-          <div style="color: #B3F3F6;">二期主楼</div>
+          <div class="num"><span style="color: #08f102;text-shadow: 0 0 5px #08f102;">{{baoan.on}}</span> / {{baoan.all}}<span class="unit"> 位</span></div>
+          <div style="color: #B3F3F6;">安保人员总数</div>
         </div>
       </div>
-      <div class="item">
-        <el-image :src="require('@/assets/popup/safe.png')" class="base-map-image" mode="fill" />
-        <div class="item-text">
-          <div class="num">{{list["2"]}}<span class="unit">分</span></div>
-          <div style="color: #B3F3F6;">录制楼</div>
-        </div>
-      </div>
-      <div class="item">
-        <el-image :src="require('@/assets/popup/safe.png')" class="base-map-image" mode="fill" />
-        <div class="item-text">
-          <div class="num">{{list["3"]}}<span class="unit">分</span></div>
-          <div style="color: #B3F3F6;">1600演播厅</div>
-        </div>
-      </div>
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title" style="width: 100%;margin-bottom: 10px">安保人员列表</div>
+      <person-table style="flex:1;height: calc(100% - 120px)"/>
     </div>
-    <div class="block" style="flex-direction: column;">
-      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安防事件频次因数组件</div>
-          <div id="safe-star" class="star"/>
-<!--      <div :style="{backgroundImage:'url('+line+')', flex: 1}" class="case-bg">-->
-<!--        <div :style="{backgroundImage:'url('+ ball +')'}" class="ball-bg">-->
-<!--          <div class="num case-text">{{num}}<span class="unit">次</span></div>-->
-<!--          <div :style="{backgroundImage:'url('+ bottom +')'}" class="bottom-bg"/>-->
-<!--        </div>-->
-<!--      </div>-->
-    </div>
-    <div class="block" style="flex-direction: column;">
-      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">巡视人员分布因数组件</div>
-      <person-table style="flex:1;"/>
-<!--      <power-line1 style="flex:1;"/>-->
+    <div class="block" style="justify-content: center;height: 40%;align-content: flex-start;">
+      <div class="item">
+        <el-image :src="require('@/assets/popup/visitor.png')" class="base-map-image" mode="fill" />
+        <div class="item-text">
+          <div class="num"> {{visitor.in}}<span class="unit"> 位</span></div>
+          <div style="color: #B3F3F6;">今日访客进入</div>
+        </div>
+      </div>
+      <div class="item">
+        <el-image :src="require('@/assets/popup/visitor.png')" class="base-map-image" mode="fill" />
+        <div class="item-text">
+          <div class="num">{{visitor.out}}<span class="unit"> 位</span></div>
+          <div style="color: #B3F3F6;">今日访客离开</div>
+        </div>
+      </div>
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title" style="width: 100%;margin: 10px 0">今日访客访问列表</div>
+      <visitor-table style="flex:1;"/>
     </div>
   </div>
 </template>
 
 <script>
 
-// import PowerLine1 from '@/views/popup/components/powerLine1'
-import { securityScore, securityFrequency, categoryStatistics } from '@/api/pop'
+import { securityScore, categoryStatistics, baoanStatistics, visitorStatistics } from '@/api/pop'
 import * as echarts from 'echarts'
-import PersonTable from "@/views/popup/components/personTable";
+import PersonTable from '@/views/popup/components/personTable'
+import VisitorTable from '@/views/popup/components/visitorTable'
 
 export default {
   name: 'Right',
-  components: {PersonTable },
+  components: { PersonTable, VisitorTable },
   data() {
     return {
       timer: null,
@@ -72,6 +87,14 @@
         '2': '*',
         '3': '*'
       },
+      baoan: {
+        on: 0,
+        all: 0
+      },
+      visitor: {
+        in: 0,
+        out: 0
+      },
       safeData: [],
       num: '*'
     }
@@ -85,151 +108,55 @@
     this.timer = null
   },
   methods: {
-    initStar() {
-      var myChart = echarts.init(document.getElementById('safe-star'))
-      const that = this
-      const option = {
-        tooltip: {
-          trigger: 'item'
-        },
-        legend: {
-          right: 20,
-          top: 10,
-          data: ['事件频次'],
-          itemStyle: {
-            color: '#d5f6fa'
-          },
-          textStyle: {
-            color: '#cce9ff',
-            fontWeight: 'bold',
-            fontSize: 14
-          }
-        },
-        radar: [{
-          indicator: that.safeData.map((item) => {
-            return { text: item.categoryLevelName, max: that.safeData[0].quantity * 1.2 }
-          }),
-          center: ['50%', '55%'],
-          splitArea: {
-            areaStyle: {
-              color: ['#77EADF99', '#26C3BE99', '#64AFE999', '#428BD499'],
-              shadowColor: 'rgba(0, 0, 0, 0.2)',
-              shadowBlur: 10
-            }
-          },
-          name: {
-            color: '#d5f6fa',
-            fontWeight: 'bold',
-            fontSize: 14
-          }
-        }],
-        series: [{
-          type: 'radar',
-          symbol: 'none',
-          symbolSize: 4,
-          lineStyle: {
-            width: 3,
-            color: 'rgb(12,228,235)'
-          },
-          areaStyle: {
-            color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
-              {
-                color: 'rgb(8,91,121,0.8)',
-                offset: 0
-              },
-              {
-                color: 'rgb(12,228,235,0.8)',
-                offset: 1
-              }
-            ])
-          },
-          emphasis: {
-            areaStyle: {
-              color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
-                {
-                  color: 'rgb(8,91,121,0.5)',
-                  offset: 0
-                },
-                {
-                  color: 'rgb(12,228,235,0.5)',
-                  offset: 1
-                }
-              ])
-            }
-          },
-          data: [{
-            value: that.safeData.map(item => item.quantity),
-            name: '事件频次',
-            symbol: 'rect',
-            symbolSize: 5,
-            lineStyle: {
-              type: 'dashed'
-            },
-            label: {
-              show: true,
-              fontSize: 14,
-              fontWeight: 'bold',
-              color: '#ff9933',
-              formatter: function (params) {
-                return params.value
-              }
-            }
-          }]
-        }]
-      }
-      myChart.clear()
-      myChart.setOption(option, true)
-      window.addEventListener('resize', function() {
-        myChart.resize()
-      })
-    },
     initData() {
       this.timer = setInterval(() => {
         securityScore().then(response => {
           if (response.code === 200) {
-            this.list['0'] = response.data['一期主楼']
-            this.list['1'] = response.data['二期主楼']
-            this.list['2'] = response.data['录制楼']
-            this.list['3'] = response.data['1600演播厅']
+            this.list['0'] = response.data['一期主楼'].toFixed(2)
+            this.list['1'] = response.data['二期主楼'].toFixed(2)
+            this.list['2'] = response.data['录制楼'].toFixed(2)
+            this.list['3'] = response.data['1600演播厅'].toFixed(2)
           }
         })
-      }, 10000)
-      categoryStatistics().then(response => {
-        if (response.code === 200) {
-          this.safeData = response.data
-          this.safeData.length = 5
-          this.initStar()
-        }
-      })
-      // securityFrequency().then(response => {
-      //   if (response.code === 200) {
-      //     this.num = response.data['quantity']
-      //   }
-      // })
+        baoanStatistics().then(response => {
+          if (response.code === 200) {
+            this.baoan = response.data
+          }
+        })
+        visitorStatistics().then(response => {
+          if (response.code === 200) {
+            this.visitor = response.data
+          }
+        })
+      }, 5000)
     }
   }
 }
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
+.el-tooltip__popper{
+  margin-top: 0px !important;
+}
 .star {
   width: 100%;
-  height: 85%;
+  height: calc(100% - 40px);
 }
 .right{
   width: 100%;
   height: 100%;
   overflow: hidden;
   .block{
-    height: 33%;
-    width: 500px;
-    display: flex;
-    flex-wrap: wrap;
     background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
     border-radius: 5px;
     box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
     border-color: rgba(0, 0, 0, .05);
+    height: 33%;
+    width: 500px;
+    display: flex;
+    flex-wrap: wrap;
     margin: 10px;
+    padding-top: 20px;
   }
   .title{
     text-shadow: 0 0 5px #d1ffff;
diff --git a/src/views/popup/top.vue b/src/views/popup/top.vue
index 7850d83..d86f120 100644
--- a/src/views/popup/top.vue
+++ b/src/views/popup/top.vue
@@ -3,6 +3,14 @@
     <div :style="{backgroundImage:'url('+top+')'}" class="top"/>
     <div class="title">安防综合管理平台</div>
     <clock class="clock"/>
+    <div style="position: absolute;top:5px;left:450px;display: flex">
+      <el-button type="primary" circle style="width: 28px;height: 28px;padding-top: 4px;padding-left: 4px;" @click="shj('1')">
+        <el-image :src="require('@/assets/images/1.png')" mode="fill" style="width: 20px;height: 20px;" />
+      </el-button>
+      <el-button type="primary" circle style="width: 28px;height: 28px;margin-left: 10px;padding-top: 4px;padding-left: 4px;" @click="shj('2')">
+        <el-image :src="require('@/assets/images/2.png')" mode="fill" style="width: 20px;height: 20px;" />
+      </el-button>
+    </div>
     <div class="sys">
       <svg-icon icon-class="next-circle"/>
     </div>
@@ -10,7 +18,8 @@
 </template>
 
 <script>
-import Clock from '@/components/Clock';
+import Clock from '@/components/Clock'
+import { repostSocket } from '@/api/common'
 export default {
   name: 'Top',
   components: { Clock },
@@ -20,6 +29,16 @@
     }
   },
   methods: {
+    shj(num) {
+      const params = {
+        type: 'shj-page',
+        message: num
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+        }
+      })
+    }
   }
 }
 </script>

diff --git a/public/static/webCtrl/hk/demo_embedded_for_iframe.html b/public/static/webCtrl/hk/demo_embedded_for_iframe.html
index 3a0be10..5c18f74 100644
--- a/public/static/webCtrl/hk/demo_embedded_for_iframe.html
+++ b/public/static/webCtrl/hk/demo_embedded_for_iframe.html
@@ -107,6 +107,13 @@
         }
     });
 
+    function destoryPlugin() {
+      if (oWebControl != null){
+        oWebControl.JS_HideWnd();  // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
+        oWebControl.JS_Disconnect().then(function(){}, function() {});
+      }
+    }
+
     function hide(){
       oWebControl.JS_HideWnd();
     };
diff --git a/src/App.vue b/src/App.vue
index d9046c1..b8c5c1a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="app" v-resize="windowResize">
+  <div id="app" style="overflow-y: hidden" v-resize="windowResize">
     <router-view />
   </div>
 </template>
diff --git a/src/api/device.js b/src/api/device.js
index 0ba70ff..8d6c46b 100644
--- a/src/api/device.js
+++ b/src/api/device.js
@@ -159,3 +159,21 @@
     data
   })
 }
+
+export function getSwitchStatus(data) {
+  return request({
+    url: '/cockpit/gateLinkage/switchStatus',
+    method: 'get'
+  })
+}
+
+export function gateLinkageSwitch(controlSwitch) {
+  return request({
+    url: '/cockpit/gateLinkage/switch',
+    method: 'get',
+    params: {
+      controlSwitch
+    }
+  })
+}
+
diff --git a/src/api/person.js b/src/api/person.js
index 8a79c27..0c2a0ff 100644
--- a/src/api/person.js
+++ b/src/api/person.js
@@ -21,6 +21,14 @@
   })
 }
 
+export function getStaffOnList(params) {
+  return request({
+    url: '/cockpit/securityStaff/onList',
+    method: 'GET',
+    params
+  })
+}
+
 export function addStaff(data) {
   return request({
     url: 'staffInfo/add',
diff --git a/src/api/pop.js b/src/api/pop.js
index 01ddde7..6fa7381 100644
--- a/src/api/pop.js
+++ b/src/api/pop.js
@@ -72,6 +72,39 @@
   })
 }
 
+export function baoanStatistics() {
+  return request({
+    url: '/cockpit/securityStaff/statistics',
+    method: 'get',
+    data: {}
+  })
+}
+
+export function visitorStatistics() {
+  return request({
+    url: 'cockpit/visitor/statistics',
+    method: 'get',
+    data: {}
+  })
+}
+
+export function caseTodayStatistics() {
+  return request({
+    url: 'cockpit/case/todayStatistics',
+    method: 'get',
+    data: {}
+  })
+}
+
+export function casePieStatistics(params) {
+  return request({
+    url: 'cockpit/caseType/statisticsByTime',
+    method: 'get',
+    data: params,
+    params
+  })
+}
+
 // 安防事件频次因数组件
 export function securityFrequency() {
   return request({
@@ -158,3 +191,27 @@
     method: 'get'
   })
 }
+
+export function cameraTypeStatistics() {
+  return request({
+    url: '/cockpit/camera/typeStatistics',
+    method: 'get'
+  })
+}
+
+export function deviceStatistics(devType) {
+  return request({
+    url: '/cockpit/device/statistics',
+    method: 'post',
+    data: {
+      devType
+    }
+  })
+}
+
+export function buildPeopleNumber() {
+  return request({
+    url: '/cockpit/build/peopleNumber',
+    method: 'get'
+  })
+}
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index df71207..33d701a 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -280,37 +280,37 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  .table{
-    margin-bottom: 20px;
-  }
-  .pagination-container{
-    padding-bottom: 50px;
-  }
-  .table-title{
-    /*background-color:rgba(243, 243, 243, 1);*/
-    background-color:#fff;
-    .title-header{
-      font-size: 15px;
-      i{
-        margin-left: 10px;
-        margin-right: 5px;
-      }
-      i:focus{
-        outline: none;
-      }
+.table{
+  margin-bottom: 20px;
+}
+.pagination-container{
+  padding-bottom: 50px;
+}
+.table-title{
+  /*background-color:rgba(243, 243, 243, 1);*/
+  background-color:#fff;
+  .title-header{
+    font-size: 15px;
+    i{
+      margin-left: 10px;
+      margin-right: 5px;
+    }
+    i:focus{
+      outline: none;
     }
   }
-  .edit_btns{
-    padding-top:7px;
-    padding-right:3px;
-    text-align: right;
+}
+.edit_btns{
+  padding-top:7px;
+  padding-right:3px;
+  text-align: right;
+}
+.popper-div{
+  line-height: 1.5;
+  .popper-btns{
+    margin-top:10px;
   }
-  .popper-div{
-    line-height: 1.5;
-    .popper-btns{
-      margin-top:10px;
-    }
-  }
+}
 </style>
 
 <style>
diff --git a/src/router/modules/menu.js b/src/router/modules/menu.js
index 28ecc52..447517e 100644
--- a/src/router/modules/menu.js
+++ b/src/router/modules/menu.js
@@ -8,7 +8,7 @@
     redirect: '/loginBoard',
     meta: {
       title: '主页',
-      permission: ['/loginBoard'],
+      // permission: ['/loginBoard'],
       icon: '' // 图标
     },
     children: [
@@ -16,7 +16,7 @@
         path: '/loginBoard',
         name: 'LoginBoard',
         component: () => import('@/views/backstage/loginBoard'),
-        meta: { title: '主页', icon: '', permission: ['/loginBoard'] }
+        meta: { title: '主页', icon: '' }
       }
     ]
   },
diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss
index 0d1614b..f39542e 100644
--- a/src/styles/element-ui.scss
+++ b/src/styles/element-ui.scss
@@ -74,3 +74,6 @@
   height:48px;
   line-height:48px;
 }
+.el-time-panel {
+  margin-left: -20px !important;
+}
diff --git a/src/utils/request.js b/src/utils/request.js
index 02dcee1..a81c17f 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -39,19 +39,21 @@
     } else if (res.code !== 200) {
       // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
       if (res.code === 401 || res.code === 50012 || res.code === 50014) {
-        MessageBox.confirm(
-          '你已被登出，可以取消继续留在该页面，或者重新登录',
-          '确定登出',
-          {
-            confirmButtonText: '重新登录',
-            cancelButtonText: '取消',
-            type: 'warning'
-          }
-        ).then(() => {
-          store.dispatch('FedLogOut').then(() => {
-            location.reload() // 为了重新实例化vue-router对象 避免bug
+        if (!window.location.href.endsWith('right') && !window.location.href.endsWith('left') && !window.location.href.endsWith('bottom')) {
+          MessageBox.confirm(
+            '你已被登出，可以取消继续留在该页面，或者重新登录',
+            '确定登出',
+            {
+              confirmButtonText: '重新登录',
+              cancelButtonText: '取消',
+              type: 'warning'
+            }
+          ).then(() => {
+            store.dispatch('FedLogOut').then(() => {
+              location.reload() // 为了重新实例化vue-router对象 避免bug
+            })
           })
-        })
+        }
       } else {
         Message({
           showClose: true,
diff --git a/src/views/common/trailDialog.vue b/src/views/common/trailDialog.vue
index 04a83eb..fd90c34 100644
--- a/src/views/common/trailDialog.vue
+++ b/src/views/common/trailDialog.vue
@@ -52,6 +52,8 @@
         75: '75%'
       },
       listQuery: {
+        staffCode: '',
+        personName: '',
         facePicUrl: '',
         startTime: '',
         endTime: '',
@@ -81,11 +83,14 @@
   },
   methods: {
     // 初始化对话框
-    initDialog: function(picture = null, name) {
-      this.textMap = '轨迹追踪 — ' + name
+    initDialog: function(row) {
+      this.textMap = '轨迹追踪 — ' + row.staffName
+      this.list = []
       this.clearInput()
       this.dialogFormVisible = true
-      this.listQuery.facePicUrl = picture
+      this.listQuery.facePicUrl = row.picture
+      this.listQuery.staffCode = row.staffCode
+      this.listQuery.personName = row.staffName
       this.fetchData()
     },
     fetchData() {
diff --git a/src/views/person/staffList.vue b/src/views/person/staffList.vue
index ce8643e..95acc5c 100644
--- a/src/views/person/staffList.vue
+++ b/src/views/person/staffList.vue
@@ -332,7 +332,7 @@
     },
     trail(row) {
       this.dialogFormVisible1 = true
-      this.$refs.trailDialog.initDialog(row.picture, row.staffName)
+      this.$refs.trailDialog.initDialog(row)
     },
     // 打开详情对话框
     detail(row) {
diff --git a/src/views/popup/board.vue b/src/views/popup/board.vue
index eb229cc..0f47c22 100644
--- a/src/views/popup/board.vue
+++ b/src/views/popup/board.vue
@@ -4,7 +4,7 @@
       人员轨迹追踪
       <svg-icon v-if="list.length > 0" icon-class="pop-cross" class="close-icon" @click="close" />
     </div>
-    <el-form ref="ruleForm" :model="listQuery" :rules="rules" label-width="100px">
+    <el-form ref="ruleForm" :model="listQuery" :rules="rules" label-width="80px">
       <el-row :gutter="20">
         <el-col :span="12" class="form-item-person-info">
           <el-form-item label="人员信息" prop="personName" style="position:relative">
@@ -20,7 +20,8 @@
               size="small"
               placeholder="请输入人员姓名"
               :popper-append-to-body="false"
-              @change="handlePerson">
+              @change="handlePerson"
+            >
               <el-option
                 v-for="item in personNameList"
                 :key="item.staffCode"
@@ -41,7 +42,7 @@
               end-placeholder="终止时间"
               size="small"
               :clearable="false"
-              style="width:98%"
+              style="width:98%;"
             />
           </el-form-item>
         </el-col>
@@ -53,7 +54,7 @@
           </el-form-item>
         </el-col>
         <el-col :span="6">
-          <el-form-item label="最小相似度" prop="minSimilarity">
+          <el-form-item label="最小相似度" prop="minSimilarity" label-width="100px">
             <el-input v-model="listQuery.minSimilarity" size="small" placeholder="区间50-100" />
           </el-form-item>
         </el-col>
@@ -81,7 +82,7 @@
             <div class="title text-over">
               {{ child.positionName ? child.positionName : '' }}
             </div>
-            <div class="desc text-over" :title="child.devName">
+            <div class="desc text-over" :title="child.devName" style="white-space: normal;word-wrap: break-word;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2; ">
               {{ child.devName ? child.devName : '' }}
             </div>
             <div class="date" style="width:145px">
@@ -110,6 +111,7 @@
     return {
       selectLoading: false,
       personName: '',
+      staffCode: '',
       point: [],
       listQuery: {
         facePicUrl: '', // 图片url
@@ -260,6 +262,7 @@
       this.personNameList.map(item => {
         if (item.staffCode === person) {
           this.personName = item.personName
+          this.staffCode = item.staffCode
           // this.listQuery.personName = item.personName
           this.listQuery.facePicUrl = item.personPicture
           this.listQuery.gender = item.gender
@@ -299,7 +302,11 @@
         spinner: 'el-icon-loading',
         background: 'rgba(0, 0, 0, 0.7)'
       })
-      const postData = Object.assign(this.listQuery, { 'personName': this.personName })
+      const postData = Object.assign(this.listQuery,
+        {
+          'personName': this.personName,
+          'staffCode': this.staffCode
+        })
       console.log(postData)
       hikPic(postData).then(response => {
         loading.close()
@@ -325,6 +332,7 @@
       this.listQuery.minSimilarity = '50'
       this.listQuery.timeRange = ['', '']
       this.personName = ''
+      this.staffCode = ''
       this.list = []
     },
     // 轨迹上墙
@@ -359,299 +367,299 @@
   }
 }
 </script>
-
 <style rel="stylesheet/scss" lang="scss" scoped>
-  ::v-deep(.el-input__inner){
-    border:1px solid #40C3F1 !important;
-    background: transparent !important;
-    color:#fff !important;
+::v-deep(.el-input__inner){
+  border:1px solid #40C3F1 !important;
+  background: transparent !important;
+  color:#fff !important;
+}
+::v-deep(.el-range-input){
+  background: transparent !important;
+  color:#fff !important;
+}
+::v-deep(.el-form-item__label){
+  color:#f1f1f1 !important;
+  font-weight: 400 !important;
+}
+::v-deep(.el-range-separator){
+  color:#f1f1f1 !important;
+  font-weight: 400 !important;
+  color:#fff !important;
+}
+::v-deep(.el-select .el-select-dropdown__wrap) {
+  max-height: 350px !important;
+  overflow-y: auto !important;
+}
+
+.form-item-person-info:hover{
+  cursor: text !important;
+}
+.el-form-item__content:hover{
+  cursor: text !important;
+}
+::v-deep(.form-item-person-info .el-input__inner):hover{
+  cursor: text !important;
+}
+::-webkit-scrollbar {
+  z-index: 11;
+  width: 6px;
+}
+::-webkit-scrollbar-track,
+::-webkit-scrollbar-corner {
+  border-radius: 5px;
+  background: #fff;
+}
+::-webkit-scrollbar-thumb {
+  border-radius: 5px; // 滚动条
+  width: 6px;
+  background-color: #ccc;
+  :hover {
+    background-color: #ccc;
   }
-  ::v-deep(.el-range-input){
-    background: transparent !important;
-    color:#fff !important;
-  }
-  ::v-deep(.el-form-item__label){
-    color:#f1f1f1 !important;
-    font-weight: 400 !important;
-  }
-  ::v-deep(.el-range-separator){
-    color:#f1f1f1 !important;
-    font-weight: 400 !important;
-    color:#fff !important;
-  }
-  ::v-deep(.el-select .el-select-dropdown__wrap) {
-    max-height: 350px !important;
-    overflow-y: auto !important;
-  }
-  .form-item-person-info:hover{
-    cursor: text !important;
-  }
-  .el-form-item__content:hover{
-    cursor: text !important;
-  }
-  ::v-deep(.form-item-person-info .el-input__inner):hover{
-    cursor: text !important;
-  }
-  ::-webkit-scrollbar {
-      z-index: 11;
-      width: 6px;
-    }
-    ::-webkit-scrollbar-track,
-    ::-webkit-scrollbar-corner {
-      border-radius: 5px;
-      background: #fff;
-    }
-    ::-webkit-scrollbar-thumb {
-      border-radius: 5px; // 滚动条
-      width: 6px;
-      background-color: #ccc;
-      :hover {
-        background-color: #ccc;
-      }
-    }
-    ::-webkit-scrollbar-track-piece {
-      border-radius: 5px; // 轨道
-      background: #fff;
-      width: 6px;
-    }
-  .text-over{
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-  .wrap{
-    width:100%;
-    height: 100%;
-    background: #5F8EB9;
+}
+::-webkit-scrollbar-track-piece {
+  border-radius: 5px; // 轨道
+  background: #fff;
+  width: 6px;
+}
+.text-over{
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.wrap{
+  width:100%;
+  height: 100%;
+  background: #5F8EB9;
+  position: relative;
+  overflow: hidden;
+  .header{
     position: relative;
-    overflow: hidden;
-    .header{
+    width: 98%;
+    margin-left:20px;
+    border-top: 10px solid #5F8EB9;
+    border-bottom: 10px solid #5F8EB9;
+    padding:5px 0 5px 20px;
+    color:#f1f1f1;
+    background: #30486C;
+    font-size: 16px;
+  }
+}
+.el-select{
+  width: 100%;
+}
+.header::after{
+  content:"";
+  display: inline-block;
+  position: absolute;
+  top:0;
+  left: -8px;
+  width:4px;
+  height:100%;
+  background: #40C3F1;
+}
+.list-wrap{
+  width:100%;
+  // width:900px;
+  height: calc(100% - 175px); // 去除头部区域
+  overflow-y: auto;
+  .main{
+    width:99%;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    .row {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 40px;
+    }
+    .row:nth-child(2n) {
+      flex-direction: row-reverse;
+    }
+    .row:nth-child(2n):last-child .item {
+      margin-right: auto;
+    }
+    .list-item{
       position: relative;
-      width: 98%;
-      margin-left:20px;
-      border-top: 10px solid #5F8EB9;
-      border-bottom: 10px solid #5F8EB9;
-      padding:5px 0 5px 20px;
-      color:#f1f1f1;
-      background: #30486C;
-      font-size: 16px;
-    }
-  }
-  .el-select{
-    width: 100%;
-  }
-  .header::after{
-      content:"";
-      display: inline-block;
-      position: absolute;
-      top:0;
-      left: -8px;
-      width:4px;
-      height:100%;
-      background: #40C3F1;
-    }
-    .list-wrap{
-      width:100%;
-      // width:900px;
-      height: calc(100% - 175px); // 去除头部区域
-      overflow-y: auto;
-      .main{
-        width:99%;
-        margin: 0 auto;
-        display: flex;
-        flex-direction: column;
-        .row {
-          display: flex;
-          justify-content: space-between;
-          margin-bottom: 40px;
-        }
-        .row:nth-child(2n) {
-          flex-direction: row-reverse;
-        }
-        .row:nth-child(2n):last-child .item {
-          margin-right: auto;
-        }
-        .list-item{
-          position: relative;
-          width: 48%;
-          height: 240px;
-          background-image: url("../../assets/global_images/monitor.png");
-          background-repeat: no-repeat;
-          background-size: cover;
-          // background-size: 100% 100%;
-          // margin-left: 20px;
-          z-index: 10;
-          .img-wrap{
-            position: absolute;
-            left:35px;
-            top:40px;
-            width:238px;
-            height:138px;
-            overflow: hidden;
-            z-index: -1;
-          }
-          .title{
-            width:150px;
-            position: absolute;
-            left:42%;
-            top: 40px;
-            font-size: 20px;
-            color:#40C3F1;
-          }
-          .desc{
-            width:150px;
-            position: absolute;
-            left:42%;
-            top: 75px;
-            font-size: 16px;
-            color:#f1f1f1;
-          }
-          .date{
-            position: absolute;
-            left:50%;
-            transform: translateX(-50%);
-            bottom:70px;
-            font-size: 14px;
-            color:#c1c1c1;
-            margin-left:25px;
-          }
-          .date::after{
-            position: absolute;
-            top:0;
-            left:-20px;
-            content:"";
-            display: inline-block;
-            width: 15px;
-            height: 15px;
-            background-image: url("../../assets/global_images/date.png");
-            background-repeat: no-repeat;
-            background-size: cover;
-          }
-          .ratio{
-            // width:100px;
-            position: absolute;
-            left:50%;
-            transform: translateX(-50%);
-            bottom:40px;
-            font-size: 14px;
-            color:#c1c1c1;
-            // margin-left:18px;
-            margin-left: 25px;
-          }
-          .ratio::after{
-            position: absolute;
-            top:0;
-            left:-20px;
-            content:"";
-            display: inline-block;
-            width: 15px;
-            height: 15px;
-            background-image: url("../../assets/global_images/search.png");
-            background-repeat: no-repeat;
-            background-size: cover;
-          }
-        }
-      }
-    }
-    .main .row:nth-child(odd){
-      .list-item:nth-child(odd)::after{
-        content:"";
-        display: inline-block;
-        width:30px;
-        height: 30px;
+      width: 48%;
+      height: 240px;
+      background-image: url("../../assets/global_images/monitor.png");
+      background-repeat: no-repeat;
+      background-size: cover;
+      // background-size: 100% 100%;
+      // margin-left: 20px;
+      z-index: 10;
+      .img-wrap{
         position: absolute;
-        top:50%;
-        transform: translate(-50%);
-        right:-52px;
-        background-image: url("../../assets/global_images/right.png");
-        background-repeat: no-repeat;
-        background-size: cover;
+        left:35px;
+        top:40px;
+        width:238px;
+        height:138px;
+        overflow: hidden;
+        z-index: -1;
       }
-    }
-    .main .row:nth-child(odd){
-      .list-item:nth-child(even)::after{
-        content:"";
-        display: inline-block;
-        width:30px;
-        height: 30px;
+      .title{
+        width:150px;
         position: absolute;
-        right:50%;
-        transform: translate(-50%);
-        bottom:-35px;
-        background-image: url("../../assets/global_images/right.png");
-        background-repeat: no-repeat;
-        background-size: cover;
-        transform: rotate(90deg);
+        left:42%;
+        top: 40px;
+        font-size: 20px;
+        color:#40C3F1;
       }
-    }
-    .main .row:nth-child(even){
-      .list-item:nth-child(odd)::after{
-        content:"";
-        display: inline-block;
-        width:30px;
-        height: 30px;
+      .desc{
+        width:150px;
         position: absolute;
-        top:50%;
-        transform: translate(-50%);
-        left:-35px;
-        background-image: url("../../assets/global_images/right.png");
-        background-repeat: no-repeat;
-        background-size: cover;
-        transform: rotate(180deg);
+        left:42%;
+        top: 75px;
+        font-size: 16px;
+        color:#f1f1f1;
       }
-    }
-    .main .row:nth-child(even){
-      .list-item:nth-child(even)::after{
-        content:"";
-        display: inline-block;
-        width:30px;
-        height: 30px;
+      .date{
         position: absolute;
         left:50%;
-        transform: translate(-50%);
-        bottom:-35px;
-        background-image: url("../../assets/global_images/right.png");
+        transform: translateX(-50%);
+        bottom:70px;
+        font-size: 14px;
+        color:#c1c1c1;
+        margin-left:25px;
+      }
+      .date::after{
+        position: absolute;
+        top:0;
+        left:-20px;
+        content:"";
+        display: inline-block;
+        width: 15px;
+        height: 15px;
+        background-image: url("../../assets/global_images/date.png");
         background-repeat: no-repeat;
         background-size: cover;
-        transform: rotate(-270deg);
+      }
+      .ratio{
+        // width:100px;
+        position: absolute;
+        left:50%;
+        transform: translateX(-50%);
+        bottom:40px;
+        font-size: 14px;
+        color:#c1c1c1;
+        // margin-left:18px;
+        margin-left: 25px;
+      }
+      .ratio::after{
+        position: absolute;
+        top:0;
+        left:-20px;
+        content:"";
+        display: inline-block;
+        width: 15px;
+        height: 15px;
+        background-image: url("../../assets/global_images/search.png");
+        background-repeat: no-repeat;
+        background-size: cover;
       }
     }
-    // 如果是最后一个元素不显示箭头
-    .main .row:last-child{
-      .list-item:last-child::after{
-        display: none;
-      }
-    }
-    .list-wrap .main .list-item .img-wrap{
-      position: absolute;
-      left: 32px;
-      top: 40px;
-      // width: 190px;
-      width: 212px;
-      height: 138px;
-      overflow: hidden;
-      z-index: -1;
-    }
-    .list-wrap .main .list-item .date{
-      left:75% !important;
-      margin-bottom: 20px;
-    }
-    .list-wrap .main .list-item .ratio{
-      left:75% !important;
-    }
-    .list-wrap .main .list-item .title,.list-wrap .main .list-item .desc{
-      left:62% !important;
-    }
-    .close-icon{
-      z-index: 100;
-      position: absolute;
-      top:2px;
-      right:2px;
-      color:white;
-      background: #fc2323cc;
-      width:25px;
-      height:25px;
-      border-radius: 5px;
-      padding:3px;
-    }
+  }
+}
+.main .row:nth-child(odd){
+  .list-item:nth-child(odd)::after{
+    content:"";
+    display: inline-block;
+    width:30px;
+    height: 30px;
+    position: absolute;
+    top:50%;
+    transform: translate(-50%);
+    right:-52px;
+    background-image: url("../../assets/global_images/right.png");
+    background-repeat: no-repeat;
+    background-size: cover;
+  }
+}
+.main .row:nth-child(odd){
+  .list-item:nth-child(even)::after{
+    content:"";
+    display: inline-block;
+    width:30px;
+    height: 30px;
+    position: absolute;
+    right:50%;
+    transform: translate(-50%);
+    bottom:-35px;
+    background-image: url("../../assets/global_images/right.png");
+    background-repeat: no-repeat;
+    background-size: cover;
+    transform: rotate(90deg);
+  }
+}
+.main .row:nth-child(even){
+  .list-item:nth-child(odd)::after{
+    content:"";
+    display: inline-block;
+    width:30px;
+    height: 30px;
+    position: absolute;
+    top:50%;
+    transform: translate(-50%);
+    left:-35px;
+    background-image: url("../../assets/global_images/right.png");
+    background-repeat: no-repeat;
+    background-size: cover;
+    transform: rotate(180deg);
+  }
+}
+.main .row:nth-child(even){
+  .list-item:nth-child(even)::after{
+    content:"";
+    display: inline-block;
+    width:30px;
+    height: 30px;
+    position: absolute;
+    left:50%;
+    transform: translate(-50%);
+    bottom:-35px;
+    background-image: url("../../assets/global_images/right.png");
+    background-repeat: no-repeat;
+    background-size: cover;
+    transform: rotate(-270deg);
+  }
+}
+// 如果是最后一个元素不显示箭头
+.main .row:last-child{
+  .list-item:last-child::after{
+    display: none;
+  }
+}
+.list-wrap .main .list-item .img-wrap{
+  position: absolute;
+  left: 32px;
+  top: 40px;
+  // width: 190px;
+  width: 212px;
+  height: 138px;
+  overflow: hidden;
+  z-index: -1;
+}
+.list-wrap .main .list-item .date{
+  left:75% !important;
+  margin-bottom: 20px;
+}
+.list-wrap .main .list-item .ratio{
+  left:75% !important;
+}
+.list-wrap .main .list-item .title,.list-wrap .main .list-item .desc{
+  left:62% !important;
+}
+.close-icon{
+  z-index: 100;
+  position: absolute;
+  top:2px;
+  right:2px;
+  color:white;
+  background: #fc2323cc;
+  width:25px;
+  height:25px;
+  border-radius: 5px;
+  padding:3px;
+}
 </style>
diff --git a/src/views/popup/bottom.vue b/src/views/popup/bottom.vue
index e3fe7e2..c95b2a1 100644
--- a/src/views/popup/bottom.vue
+++ b/src/views/popup/bottom.vue
@@ -1,47 +1,84 @@
 <template>
   <div class="bottom">
-    <div class="block1">
-      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">访客控制安全系数组件</div>
-      <visit-bar style="flex:1;"/>
-    </div>
+<!--    <div class="block1" style="border-top-left-radius: 0px;margin-left: 5px">-->
+<!--      <inout-list style="flex:1;"/>-->
+<!--    </div>-->
     <div class="block">
       <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安防事件列表</div>
       <case-table style="flex:1;"/>
     </div>
-    <div class="block">
-      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">其他相关安全系数指标组件</div>
-      <other-line style="flex:1;"/>
+    <div class="block1" style="flex-direction: row;width: 700px">
+      <div style="width: 200px">
+        <div class="item0" style="margin: 36px 0">
+          <el-image :src="require('@/assets/popup/事件.png')" class="base-map-image" mode="fill" />
+          <div class="item-text">
+            <div class="num">{{caseNum.all}}<span class="unit"> 件</span></div>
+            <div style="color: #B3F3F6;">今日总事件</div>
+          </div>
+        </div>
+        <div class="item0">
+          <el-image :src="require('@/assets/popup/事件1.png')" class="base-map-image" mode="fill" />
+          <div class="item-text">
+            <div class="num"><span style="color: #08f102;text-shadow: 0 0 5px #08f102;">{{caseNum.solve}}</span><span class="unit"> 件</span></div>
+            <div style="color: #B3F3F6;">今日已解决</div>
+          </div>
+        </div>
+      </div>
+      <case-pie style="width: calc(100% - 200px);height: 100%"/>
     </div>
-    <div class="block1">
-      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安保人员到岗系数组件</div>
-      <staff-bar1 style="flex:1;"/>
+    <div class="block">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安防事件频率统计</div>
+      <case-bar style="flex:1;"/>
     </div>
   </div>
 </template>
 
 <script>
-// import VisitorPie from "@/views/popup/components/visitorPie";
-import VisitBar from '@/views/popup/components/visitBar';
-import StaffBar1 from '@/views/popup/components/staffBar1';
-import CaseTable from '@/views/popup/components/caseTable';
-// import ReqairTable from "@/views/popup/components/reqairTable";
-import OtherLine from '@/views/popup/components/otherLine';
+
+import CaseTable from '@/views/popup/components/caseTable'
+import CasePie from '@/views/popup/components/casePie'
+import { caseTodayStatistics } from '@/api/pop'
+import CaseBar from '@/views/popup/components/caseBar'
+import InoutList from '@/views/popup/components/inoutList'
 
 export default {
   name: 'Bottom',
-  components: { OtherLine, CaseTable, StaffBar1, VisitBar },
+  components: { InoutList, CaseBar, CasePie, CaseTable },
   data() {
     return {
+      timer: null,
       titleImg: require('@/assets/popup/title.png'), // 背景图片
-      titleAll: require('@/assets/popup/title-all.png'),// 背景图片
-      list: [2156, 2144, 455, 314, 98]
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      list: [2156, 2144, 455, 314, 98],
+      caseNum: {
+        all: 0,
+        solve: 0
+      }
     }
   },
+  mounted() {
+    clearInterval(this.timer)
+    this.search()
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+    this.timer = null
+  },
+  methods: {
+    search() {
+      this.timer = setInterval(() => {
+        caseTodayStatistics().then(response => {
+          if (response.code === 200) {
+            this.caseNum = response.data
+          }
+        })
+      }, 10000)
+    }
+  }
 }
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-
 .bottom{
   width: 100%;
   height: 220px;
@@ -57,11 +94,11 @@
     border-radius: 5px;
     box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
     border-color: rgba(0, 0, 0, .05);
-    margin: 0px 10px;
+    margin: 0px 5px;
     flex-direction: column;
   }
   .block1{
-    width: 500px;
+    width: 750px;
     height: 100%;
     display: flex;
     flex-wrap: wrap;
@@ -69,7 +106,7 @@
     border-radius: 5px;
     box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
     border-color: rgba(0, 0, 0, .05);
-    margin: 0px 10px;
+    margin: 0px 5px;
     flex-direction: column;
   }
   .title{
@@ -93,5 +130,31 @@
     font-size: 15px;
 
   }
+  .item0{
+    width: 100%;
+    height: 50px;
+    display: flex;
+    justify-content: left;
+    align-items: center;
+    padding: 0 8%;
+  }
+  .item-text{
+    text-shadow: 0 0 2px #d1ffff;
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 18px;
+  }
+  .num{
+    text-shadow: 0 0 5px #ffb441;
+    color: #ffb441;
+    font-size: 20px;
+    padding-top: 2px;
+  }
+  .unit{
+    color: #B3F3F6;
+    font-size: 14px;
+    margin-left: 1px;
+  }
 }
 </style>
diff --git a/src/views/popup/components/caseTable.vue b/src/views/popup/components/caseTable.vue
index 95aa677..c9708d7 100644
--- a/src/views/popup/components/caseTable.vue
+++ b/src/views/popup/components/caseTable.vue
@@ -1,5 +1,9 @@
 <template>
   <div class="flowTable">
+<!--    <el-tabs v-model="activeName" @tab-click="changeTime" style="display: flex;position:absolute;right: 30px;top:5px">-->
+<!--      <el-tab-pane label="已解决" name="week"/>-->
+<!--      <el-tab-pane label="未解决" name="month"/>-->
+<!--    </el-tabs>-->
     <div class="success_info_body" v-show="showFlag">
       <!-- 参数名称、列数根据实际情况调整 -->
       <div class="table_body">
@@ -14,7 +18,7 @@
         <div class="table_main_body">
           <div class="table_inner_body" :style="{top: tableTop + 'px'}">
             <div v-for="(item,index) in tableList" class="table_tr" :class="checkCell(item,index)" :key="index" @click="JumpDevice(item)">
-              <div class="tr1 tr">{{item.levelName}}</div>
+              <div class="tr1 tr" :style="{color: item.levelName ==='重大' ? 'red' : item.levelName ==='较大' ? 'orange' : '#b8dffd'}">{{item.levelName}}</div>
               <div class="tr2 tr">{{item.description}}</div>
               <div class="tr1 tr">{{item.statusName}}</div>
               <div class="tr2 tr">{{item.typeName}}</div>
@@ -41,7 +45,7 @@
   data() {
     return {
       picurl: '',
-      defaultPhoto: require('@/assets/global_images/photo_error.png'),
+      defaultPhoto: require('@/assets/global_images/photo_offline.png'),
       errorImg: require('@/assets/global_images/photo_error.png'),
       showFlag: true,
       tableTimer: null,
@@ -104,8 +108,9 @@
       this.picurl = ''
       this.isbig = false
       getCaseListPage({
+        status: '',
         offset: 1,
-        limit: 15
+        limit: 20
       }).then(response => {
         if (response.code === 200) {
           this.tableList = response.data.rows
@@ -190,13 +195,18 @@
   line-height: 15px;
 }
 .tr {
-  overflow: hidden;
   text-overflow: ellipsis;
-  white-space: nowrap;
   box-sizing: border-box;
   padding: 0 5px;
   text-align: center;
   font-size: 13px;
+  word-wrap: break-word; /* 允许在单词内换行 */
+  overflow-wrap: break-word; /* 同上，现代浏览器推荐使用 */
+  white-space: normal; /* 允许自动换行 */
+  line-height: 15px;
+  display: flex;
+  align-items: center; /* 垂直居中 */
+  justify-content: center; /* 水平居中，如需要 */
 }
 .tr1 {
   width: 13%;
@@ -253,7 +263,7 @@
   }
 }
 .hard-state{
-  background:red;
+  background: #ff8585;
 }
 .medium-state{
   background: #ea9700;
diff --git a/src/views/popup/components/doorList.vue b/src/views/popup/components/doorList.vue
new file mode 100644
index 0000000..7bc178a
--- /dev/null
+++ b/src/views/popup/components/doorList.vue
@@ -0,0 +1,257 @@
+<template>
+  <div style="width: 100%;height: 100%;">
+    <div style="text-align: right;margin-right: 5px;">
+      <el-button class="doorbar-btn" type="primary" plain @click="isOn1 = !isOn1" style="margin-left: 3px">{{isOn1 ? '隐藏操作按钮': '开启操作按钮'}}</el-button>
+      <el-button class="doorbar-btn" type="primary" plain @click="controlDool()">{{!isOn2 ? '开启黑名单与闸机联动': '关闭黑名单与闸机联动'}}</el-button>
+    </div>
+    <div class="success_info_body" style="margin: 0 10px;flex: 1">
+      <div class="table_body">
+        <div class="table_th">
+          <div class="tr4 th_style">门禁分组</div>
+          <div class="tr1 th_style" v-show="isOn1">操作</div>
+        </div>
+        <div class="table_main_body">
+          <div class="table_inner_body" :style="{top: tableTop + 'px'}">
+            <div v-for="(item,index) in tableList" class="table_tr" :key="index">
+              <div class="tr4 tr">{{item.groupName}}</div>
+              <div class="tr1 tr" v-show="isOn1">
+                <el-button type="text" v-for="item in statusList" :key="item.value" size="small" @click.stop="editStatus(scope.row, item.value)" style="height: 20px;margin-top: -10px">
+                  {{ item.name }}
+                </el-button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+<!--    <el-pagination layout="prev, pager, next" :total="tableListSize" style="width: 100%;text-align: center" @current-change="handleCurrentChange"/>-->
+  </div>
+</template>
+
+<script>
+import {controlGroup, gateLinkageSwitch, getGroupListPage, getSwitchStatus} from '@/api/device'
+export default {
+  name: 'DoorList',
+  data() {
+    return {
+      defaultPhoto: require('@/assets/global_images/photo.png'),
+      errorImg: require('@/assets/global_images/photo_error.png'),
+      isOn1: false,
+      isOn2: false,
+      tableTimer: null,
+      tableTop: 0,
+      tableList: [],
+      statusList: [
+        { name: '常开', id: '1557975745699823618', value: '0' },
+        { name: '常闭', id: '1557975746215723010', value: '3' },
+        { name: '门开', id: '1557975746723233793', value: '2' },
+        { name: '门闭', id: '1557975747402711041', value: '1' }
+      ],
+      tableListSize: 0,
+      componentTimer: null,
+      visibleSize: 8, // 容器内可视最大完整行数
+      lineHeight: 20, // 每行的实际高度（包含margin-top/bottom,border等）
+      componentTimerInterval: 3600000, //  刷新数据的时间间隔
+      tableTimerInterval: 50, //  向上滚动 1px 所需要的时间，越小越快，推荐值 100
+      listQuery: {
+        groupName: '',
+        gateCode: '',
+        status: '',
+        offset: 1,
+        limit: 8
+      }, // 筛选条件
+      dialogFormVisible: false, // 是否显示编辑框
+      timeRange: [], // 时间范围
+      multipleSelection: [], // 多选选中项
+      list: [], // 列表数据
+      colorRow: {
+        isColor: false,
+        isPop: true
+      },
+      inoutTypeList: [],
+      passWayList: [],
+      total: 0, // 数据总数
+      listLoading: true // 列表加载动画
+    }
+  },
+  created() {
+    getSwitchStatus().then(response => {
+      if (response.code === 200) {
+        this.isOn2 = response.data === 1
+      }
+    })
+    this.fetchData()
+  },
+  methods: {
+    controlDool() {
+      this.isOn2 = !this.isOn2
+      gateLinkageSwitch(this.isOn2 ? 1 : 0).then(response => {
+        if (response.code === 200) {
+          this.$message.success((this.isOn2 ? '开启' : '关闭') + '黑名单与闸机联动成功')
+        }
+      })
+    },
+    fetchData(isNowPage = true) {
+      if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+        this.listQuery.offset = 1
+      }
+      getGroupListPage(this.listQuery).then(response => {
+        if (response.code === 200) {
+          this.tableList = response.data.rows
+          this.tableListSize = parseInt(response.data.total)
+        }
+      })
+    },
+    editStatus(row, status) {
+      controlGroup(row.id, status).then(response => {
+        if (response.code === 200) {
+          this.$message.success('通道控制成功')
+          this.fetchData()
+        }
+      }).catch(_ => { // 异常情况，loading置为false
+      })
+    },
+    handleCurrentChange(val) {
+      this.listQuery.offset = val
+      this.fetchData()
+    },
+    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.doorbar-btn {
+  height: 22px;
+  padding-top: 4px;
+  padding-right: 6px;
+  padding-left: 6px;
+  margin-right: 4px;
+}
+.table_body {
+  width: 100%;
+  margin-top: 0px;
+}
+.table_th {
+  width: 100%;
+  display: flex;
+  height: 15px;
+  line-height: 20px;
+}
+.tr {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 0 5px;
+  text-align: center;
+  font-size: 13px;
+  height: 20px !important;
+}
+.tr1 {
+  width: 35%;
+}
+.tr2 {
+  width: 18%;
+}
+.tr3 {
+  width: 15%;
+  font-size: 13px;
+}
+
+.tr4 {
+  flex: 1;
+}
+.tr5 {
+  width: 100px;
+}
+
+.th_style {
+  color: #b8dffd;
+  font-size: 13px;
+  font-weight: bold;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  box-sizing: border-box;
+  text-align: center;
+}
+.table_main_body {
+  width: 100%;
+  height: 175px;
+  overflow: hidden;
+  position: relative;
+  margin-top: 5px;
+}
+.table_inner_body {
+  width: 100%;
+  position: absolute;
+  left: 0;
+  color: #cce9ff;
+}
+
+.table_tr {
+  display: flex;
+  font-size: 13px;
+  border: 1px solid rgb(71, 160, 199);
+  margin-top: 2px;
+  height: 20px;
+  line-height: 20px;
+  cursor: pointer;
+:hover{
+  background: rgba(255, 153, 51, 0.6);
+}
+}
+.table_tr0 {
+  background: rgba(3, 145, 167, 0.1);
+}
+.table_tr1 {
+  background: rgb(64, 87, 120);
+}
+
+::v-deep .el-pagination {
+  .el-pagination__total {
+    color: white !important;
+  }
+  .el-pagination__jump {
+    color: white !important;
+  }
+  // 两个输入框
+  .el-input__inner {
+    background-color: #092546;
+    border: 1px solid rgba(192, 192, 192, 0.479);
+    color: white !important;
+  }
+  // 左右按键和里面的图标
+  button {
+    background-color: #092546;
+    .el-icon::before {
+      color: white;
+    }
+  }
+  // 分页数字
+  ul {
+    color: white;
+    .el-icon::before {
+      color: white !important;
+    }
+  }
+  // 分页数字的背景色
+  ul > li {
+    background-color: #092546;
+  }
+}
+::v-deep .el-loading-mask {
+  background-color: rgba(0, 0, 0, 0.479);
+}
+
+</style>
diff --git a/src/views/popup/components/personTable.vue b/src/views/popup/components/personTable.vue
index e2e4c1e..ca73933 100644
--- a/src/views/popup/components/personTable.vue
+++ b/src/views/popup/components/personTable.vue
@@ -7,15 +7,17 @@
           <div class="tr4 th_style">安保人员姓名</div>
           <div class="tr4 th_style">性别</div>
           <div class="tr4 th_style">照片</div>
+          <div class="tr4 th_style">状态</div>
         </div>
         <div class="table_main_body">
           <div class="table_inner_body" :style="{top: tableTop + 'px'}">
-            <div v-for="(item,index) in tableList" :class="index%2==1?'table_tr':'table_tr1'" :key="index" @click="JumpDevice(item)">
+            <div v-for="(item,index) in tableList" :class="index % 2==1?'table_tr':'table_tr1'" :key="index" @click="JumpDevice(item)">
               <div class="tr4 tr">{{item.staffName}}</div>
               <div class="tr4 tr">{{item.staffGenderName}}</div>
               <div class="tr4 tr">
                 <img :src="item.picture ? `${item.picture}`: defaultPhoto" width="40px" height="40px" style="margin-left: 5px" @error="errorImg">
               </div>
+              <div class="tr4 tr">{{item.statusName}}</div>
             </div>
           </div>
         </div>
@@ -25,7 +27,7 @@
 </template>
 <script>
 
-import { getStaffListPage, hikPic } from '@/api/person'
+import {getStaffListPage, getStaffOnList, hikPic} from '@/api/person'
 import { repostSocket } from '@/api/common';
 import { getDate } from '@/utils/calendarUtil'
 
@@ -43,7 +45,7 @@
       tableList: [],
       tableListSize: 0,
       componentTimer: null,
-      visibleSize: 5, // 容器内可视最大完整行数
+      visibleSize: 8, // 容器内可视最大完整行数
       lineHeight: 45, // 每行的实际高度（包含margin-top/bottom,border等）
       componentTimerInterval: 3600000, //  刷新数据的时间间隔
       tableTimerInterval: 50 //  向上滚动 1px 所需要的时间，越小越快，推荐值 100
@@ -51,7 +53,7 @@
   },
 
   // 如果没有父元素传值，将watch内的内容搬至mounted中即可
-  props: ["activeFactoryId"],
+  props: ['activeFactoryId'],
   watch: {
     activeFactoryId(val, oldVal) {
       clearInterval(this.componentTimer)
@@ -70,6 +72,8 @@
   methods: {
     JumpDevice(item) {
       const params = {
+        personName: item.staffName,
+        staffCode: item.staffCode,
         facePicUrl: item.picture, // 图片url
         startTime: getDate(-31, 'SECOND'), // 开始时间
         endTime: getDate(0, 'SECOND'), // 结束时间
@@ -94,51 +98,32 @@
         message: this.wallList
       }
       repostSocket(params).then(response => {
-        if (response.code === 200) {
-        }
+        if (response.code === 200) {}
       })
     },
     fetchData() {
       const params = {
-        staffType: '2',
+        // staffType: '2',
         offset: 1,
-        limit: 50,
-        keywords: '',
-        cardNum: '',
-        phone: ''
+        limit: 200
       }
-      getStaffListPage(params).then(response => {
+      getStaffOnList(params).then(response => {
         if (response.code === 200) {
           this.tableList = response.data.rows
+          // this.tableListSize = response.data.total
           this.tableActionFun()
         }
       })
-      // this.tableList = [
-      //   {
-      //     id: '',
-      //     drawNo: 'YQ-001',
-      //     levelName: '一般',
-      //     description: '保安脱岗',
-      //     status: '0',
-      //     statusName: '未解决',
-      //     typeName: '临时事件',
-      //     devName: '视频监控摄像机5',
-      //     positionName: '一期主楼',
-      //     areaName: '3F',
-      //     isKeyAreaName: '否',
-      //     detailLocation: '详细位置',
-      //     happenTime: '2022-05-06 21:55:00'
-      //   }
-      // ]
     },
     tableActionFun() {
       this.tableListSize = this.tableList.length
       if (this.tableListSize > this.visibleSize) {
         this.tableList = this.tableList.concat(this.tableList)
         this.tableTimerFun()
-      } else {
-        this.fillTableList()
       }
+      // else {
+      //   this.fillTableList()
+      // }
     },
     //  当数据过少时，不触发自动轮播事件，并填充没有数据的行，参数根据实际情况修改即可
     fillTableList() {
@@ -230,7 +215,7 @@
 }
 .table_main_body {
   width: 100%;
-  height: 200px;
+  height: calc(40vh - 140px);
   overflow: hidden;
   position: relative;
   margin-top: 5px;
diff --git a/src/views/popup/components/staffLine1.vue b/src/views/popup/components/staffLine1.vue
index d3b0a95..d3cd04b 100644
--- a/src/views/popup/components/staffLine1.vue
+++ b/src/views/popup/components/staffLine1.vue
@@ -12,8 +12,8 @@
 </template>
 
 <script>
-import { multiScoreCommute } from '@/api/pop';
-import * as echarts from "echarts";
+import { multiScoreCommute } from '@/api/pop'
+import * as echarts from 'echarts'
 export default {
   name: 'StaffLine1',
   data() {
diff --git a/src/views/popup/components/visitBar.vue b/src/views/popup/components/visitBar.vue
index 1726d20..4f35e21 100644
--- a/src/views/popup/components/visitBar.vue
+++ b/src/views/popup/components/visitBar.vue
@@ -7,7 +7,7 @@
 import * as echarts from 'echarts';
 
 export default {
-  name: 'AreaBar1',
+  name: 'VisitBar',
   data() {
     return {
       isShow: true,
diff --git a/src/views/popup/floor.vue b/src/views/popup/floor.vue
index 6342d5a..8052ae4 100644
--- a/src/views/popup/floor.vue
+++ b/src/views/popup/floor.vue
@@ -107,8 +107,7 @@
         message: 'show'
       }
       repostSocket(params).then(response => {
-        if (response.code === 200) {
-        }
+        if (response.code === 200) {}
       })
     }
   }
diff --git a/src/views/popup/left.vue b/src/views/popup/left.vue
index d35b6b2..dab745c 100644
--- a/src/views/popup/left.vue
+++ b/src/views/popup/left.vue
@@ -1,67 +1,75 @@
 <template>
   <div class="left">
-    <div class="block" style="justify-content: center;height: 29%;padding-top: 10px">
-      <div class="item">
-        <el-image :src="require('@/assets/popup/人员.png')" class="base-map-image" mode="fill" />
-        <div style="color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;"> 一期主楼、录制楼</div>
-        <div class="num">{{list["0"]}}<span class="unit">人</span></div>
+    <div class="block" style="height: 270px;">
+      <div style="display: flex;flex-direction: row;justify-content: center;padding-top: 10px;height: 70px">
+        <div class="item">
+          <el-image :src="require('@/assets/popup/cam.png')" class="base-map-image" mode="fill" />
+          <div class="item-title">摄像机</div>
+          <div class="num"><span style="color: #08f102;text-shadow: 0 0 5px #08f102;">{{cam.on}}</span> / {{cam.all}}</div>
+        </div>
+        <div class="item">
+          <el-image :src="require('@/assets/popup/闸机.png')" class="base-map-image" mode="fill" />
+          <div class="item-title">闸机</div>
+          <div class="num"><span style="color: #08f102;text-shadow: 0 0 5px #08f102;">{{door.on}}</span> / {{door.all}}</div>
+        </div>
       </div>
-      <div class="item">
-        <el-image :src="require('@/assets/popup/人员.png')" class="base-map-image" mode="fill" />
-        <div style="color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;"> 二期主楼</div>
-        <div class="num">{{list["1"]}}<span class="unit">人</span></div>
-      </div>
-      <div class="item">
-        <el-image :src="require('@/assets/popup/访客.png')" class="base-map-image" mode="fill" />
-        <div style="color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;"> 今日访客量</div>
-        <div class="num">{{list["2"]}}<span class="unit">人</span></div>
-      </div>
-      <div class="item">
-        <el-image :src="require('@/assets/popup/今日事件.png')" class="base-map-image" mode="fill" />
-        <div style="color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;"> 今日事件数</div>
-        <div class="num">{{list["3"]}}<span class="unit">件</span></div>
-      </div>
-      <div class="item">
-        <el-image :src="require('@/assets/popup/今日处置.png')" class="base-map-image" mode="fill" />
-        <div style="color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;"> 事件处置数</div>
-        <div class="num">{{list["4"]}}<span class="unit">件</span></div>
-      </div>
-      <div class="item">
-        <el-image :src="require('@/assets/popup/离线.png')" class="base-map-image" mode="fill" />
-        <div style="color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;">设备离线率</div>
-        <div class="num">{{list["5"]}}<span class="unit"></span></div>
-      </div>
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title" style="margin: 0">摄像机状态分析</div>
+      <cam-bar style="width: 100%;height: 165px"/>
     </div>
-    <div class="block" style="flex-direction: column;">
-      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">员工通勤安防系数组件</div>
-      <staff-line1 style="flex:1;"/>
+    <div class="block" style="height: 250px;">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title" style="margin: 5px 0">闸机控制</div>
+      <door-list style="width: 100%;height: 250px;margin-top: -34px"/>
     </div>
-    <div class="block" style="flex-direction: column;">
-      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">重点区域防控系数组件</div>
-      <area-bar1 style="flex: 1"/>
+    <div class="block" style="height: 500px;">
+      <div style="display: flex;flex-direction: row;justify-content: center;height: 50px">
+        <el-tooltip class="item" effect="dark" :content="`进入人数${tips['1进入人数']}，离开人数${tips['1离开人数']}`" placement="bottom">
+          <div class="item">
+            <el-image :src="require('@/assets/popup/人员.png')" class="base-map-image" mode="fill" style="margin-top: 10px"/>
+            <div class="item-title"> 一期主楼、录制楼</div>
+            <div class="num" style="margin-top: -15px">{{tips["1"]}}<span class="unit">人</span></div>
+          </div>
+        </el-tooltip>
+        <el-tooltip class="item" effect="dark" :content="`进入人数${tips['2进入人数']}，离开人数${tips['2离开人数']}`" placement="bottom">
+          <div class="item">
+            <el-image :src="require('@/assets/popup/人员.png')" class="base-map-image" mode="fill" style="margin-top: 10px;margin-left: -20px"/>
+            <div class="item-title"> 二期主楼 </div>
+            <div class="num" style="margin-top: -15px">{{tips["2"]}}<span class="unit">人</span></div>
+          </div>
+        </el-tooltip>
+      </div>
+      <inout-list style="width: 100%;height: 350px;margin-top: 10px"/>
     </div>
   </div>
 </template>
 
 <script>
-import StaffLine1 from '@/views/popup/components/staffLine1'
-import AreaBar1 from '@/views/popup/components/areaBar1'
-import { getTodayNumber, getPeopleNumber, getDeviceNumber, offlineRate, eventNum } from '@/api/pop'
+import { buildPeopleNumber, deviceStatistics, getPeopleNumber } from '@/api/pop'
+import CamBar from '@/views/popup/components/camBar'
+import DoorList from '@/views/popup/components/doorList'
+import InoutList from '@/views/popup/components/inoutList'
+
 export default {
   name: 'Left',
-  components: { AreaBar1, StaffLine1 },
+  components: { InoutList, DoorList, CamBar },
   data() {
     return {
       timer: null,
       titleImg: require('@/assets/popup/title.png'), // 背景图片
-      titleAll: require('@/assets/popup/title-all.png'),// 背景图片
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      cam: { on: '', all: '' },
+      door: { on: '', all: '' },
       list: {
         '0': '*',
         '1': '*',
-        '2': '*',
-        '3': '*',
-        '4': '*',
-        '5': '*'
+        '2': '*'
+      },
+      tips: {
+        '1': 0,
+        '2': 0,
+        '2进入人数': 0,
+        '1进入人数': 0,
+        '2离开人数': 0,
+        '1离开人数': 0
       }
     }
   },
@@ -73,59 +81,51 @@
     this.timer = setInterval(() => {
       this.initData()
     }, 60000)
+    this.initData()
   },
   methods: {
     initData() {
-      getPeopleNumber().then(response => {
+      deviceStatistics(2).then(response => {
         if (response.code === 200) {
-          this.list['0'] = response.data[1] + (response.data[3] ? response.data[3] : 0)
-          this.list['1'] = response.data[2]
+          this.cam.on = response.data.list.filter(item => item.status === '在线')[0].quantity
+          this.cam.all = response.data.total
         }
       })
-      getTodayNumber().then(response => {
+      deviceStatistics(1).then(response => {
         if (response.code === 200) {
-          this.list['2'] = response.data['今日访客量']
+          this.door.on = response.data.list.filter(item => item.status === '在线')[0].quantity
+          this.door.all = response.data.total
         }
       })
-      // getDeviceNumber().then(response => {
-      //   if (response.code === 200) {
-      //     // this.list['3'] = response.data['设备总数']
-      //     // this.list['4'] = response.data['设备在线率'].replace('%', '')
-      //   }
-      // })
-
-      offlineRate().then(response => {
+      buildPeopleNumber().then(response => {
         if (response.code === 200) {
-          this.list['5'] = response.data['设备离线率']
-        }
-      })
-      eventNum().then(response => {
-        if (response.code === 200) {
-          this.list['3'] = response.data['今日事件数']
-          this.list['4'] = response.data['今日事件处置数']
+          this.tips = response.data
         }
       })
     }
   }
 }
 </script>
-
 <style rel="stylesheet/scss" lang="scss" scoped>
-.left{
+.block{
   width: 100%;
+  height: 200px;
+  background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+  border-radius: 5px;
+  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+  border-color: rgba(0, 0, 0, .05);
+  margin-bottom: 5px;
+  flex-direction: column;
+}
+.left{
+  width: 500px;
   height: 100%;
   overflow: hidden;
-  .block{
-    height: 33%;
-    width: 500px;
-    display: flex;
-    flex-wrap: wrap;
-    background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
-    border-radius: 5px;
-    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
-    border-color: rgba(0, 0, 0, .05);
-    margin: 10px;
-  }
+  //background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+  //box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+  //border-color: rgba(0, 0, 0, .05);
+  margin: 10px 10px 0 10px;
+  border-radius: 5px;
   .title{
     text-shadow: 0 0 5px #d1ffff;
     width: 500px;
@@ -139,6 +139,7 @@
     padding-left: 30px;
     font-family: 黑体;
     letter-spacing: 1px;
+    z-index: 1;
   }
   .base-map-image{
     width: 45px;
@@ -151,15 +152,24 @@
     height: 80%;
   }
   .item{
-    width: 33%;
+    width: 50%;
     font-weight: bold;
     text-align: center;
-    font-size: 15px;
+    font-size: 16px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    .item-title{
+      color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;margin-left: 10px;
+      line-height: 40px;
+      vertical-align: middle;
+    }
     .num{
       text-shadow: 0 0 5px #ffb441;
       color: #ffb441;
-      font-size: 18px;
-      padding-top: 2px;
+      font-size: 20px;
+      width: 100%;
+      margin-top: -0px;
     }
     .unit{
       color: #B3F3F6;
diff --git a/src/views/popup/right.vue b/src/views/popup/right.vue
index 4571ea1..b139de4 100644
--- a/src/views/popup/right.vue
+++ b/src/views/popup/right.vue
@@ -1,64 +1,79 @@
 <template>
   <div class="right">
-    <div class="block" style="justify-content: center;height: 29%;">
-      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安全防护梯度指标组件</div>
-      <div class="item">
-        <el-image :src="require('@/assets/popup/safe.png')" class="base-map-image" mode="fill" />
-        <div class="item-text">
-          <div class="num">{{list["0"]}}<span class="unit">分</span></div>
-          <div style="color: #B3F3F6;">一期主楼</div>
+    <el-tooltip effect="dark" content="安防事件评分由安防事件影响（占比50%）、访客事件影响（占比30%）、各楼栋设备维修次数（占比10%）、各楼栋消防设备有效期（占比10%）" placement="bottom">
+      <div class="block" style="justify-content: center;height: 20%;padding-top: 30px">
+        <div class="item">
+          <el-image :src="require('@/assets/popup/safe.png')" class="base-map-image" mode="fill" />
+          <div class="item-text">
+            <div class="num">{{list["0"]}}<span class="unit">分</span></div>
+            <div style="color: #B3F3F6;">一期主楼</div>
+          </div>
+        </div>
+        <div class="item">
+          <el-image :src="require('@/assets/popup/safe.png')" class="base-map-image" mode="fill" />
+          <div class="item-text">
+            <div class="num">{{list["1"]}}<span class="unit">分</span></div>
+            <div style="color: #B3F3F6;">二期主楼</div>
+          </div>
+        </div>
+        <div class="item">
+          <el-image :src="require('@/assets/popup/safe.png')" class="base-map-image" mode="fill" />
+          <div class="item-text">
+            <div class="num">{{list["2"]}}<span class="unit">分</span></div>
+            <div style="color: #B3F3F6;">录制楼</div>
+          </div>
+        </div>
+        <div class="item">
+          <el-image :src="require('@/assets/popup/safe.png')" class="base-map-image" mode="fill" />
+          <div class="item-text">
+            <div class="num">{{list["3"]}}<span class="unit">分</span></div>
+            <div style="color: #B3F3F6;">1600演播厅</div>
+          </div>
         </div>
       </div>
-      <div class="item">
-        <el-image :src="require('@/assets/popup/safe.png')" class="base-map-image" mode="fill" />
+    </el-tooltip>
+    <div class="block" style="flex-direction: column;height: 40%;">
+      <div class="item" style="margin-bottom: 10px;margin-top: -10px;margin-left: 25%">
+        <el-image :src="require('@/assets/popup/baoan.png')" class="base-map-image" mode="fill" />
         <div class="item-text">
-          <div class="num">{{list["1"]}}<span class="unit">分</span></div>
-          <div style="color: #B3F3F6;">二期主楼</div>
+          <div class="num"><span style="color: #08f102;text-shadow: 0 0 5px #08f102;">{{baoan.on}}</span> / {{baoan.all}}<span class="unit"> 位</span></div>
+          <div style="color: #B3F3F6;">安保人员总数</div>
         </div>
       </div>
-      <div class="item">
-        <el-image :src="require('@/assets/popup/safe.png')" class="base-map-image" mode="fill" />
-        <div class="item-text">
-          <div class="num">{{list["2"]}}<span class="unit">分</span></div>
-          <div style="color: #B3F3F6;">录制楼</div>
-        </div>
-      </div>
-      <div class="item">
-        <el-image :src="require('@/assets/popup/safe.png')" class="base-map-image" mode="fill" />
-        <div class="item-text">
-          <div class="num">{{list["3"]}}<span class="unit">分</span></div>
-          <div style="color: #B3F3F6;">1600演播厅</div>
-        </div>
-      </div>
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title" style="width: 100%;margin-bottom: 10px">安保人员列表</div>
+      <person-table style="flex:1;height: calc(100% - 120px)"/>
     </div>
-    <div class="block" style="flex-direction: column;">
-      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安防事件频次因数组件</div>
-          <div id="safe-star" class="star"/>
-<!--      <div :style="{backgroundImage:'url('+line+')', flex: 1}" class="case-bg">-->
-<!--        <div :style="{backgroundImage:'url('+ ball +')'}" class="ball-bg">-->
-<!--          <div class="num case-text">{{num}}<span class="unit">次</span></div>-->
-<!--          <div :style="{backgroundImage:'url('+ bottom +')'}" class="bottom-bg"/>-->
-<!--        </div>-->
-<!--      </div>-->
-    </div>
-    <div class="block" style="flex-direction: column;">
-      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">巡视人员分布因数组件</div>
-      <person-table style="flex:1;"/>
-<!--      <power-line1 style="flex:1;"/>-->
+    <div class="block" style="justify-content: center;height: 40%;align-content: flex-start;">
+      <div class="item">
+        <el-image :src="require('@/assets/popup/visitor.png')" class="base-map-image" mode="fill" />
+        <div class="item-text">
+          <div class="num"> {{visitor.in}}<span class="unit"> 位</span></div>
+          <div style="color: #B3F3F6;">今日访客进入</div>
+        </div>
+      </div>
+      <div class="item">
+        <el-image :src="require('@/assets/popup/visitor.png')" class="base-map-image" mode="fill" />
+        <div class="item-text">
+          <div class="num">{{visitor.out}}<span class="unit"> 位</span></div>
+          <div style="color: #B3F3F6;">今日访客离开</div>
+        </div>
+      </div>
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title" style="width: 100%;margin: 10px 0">今日访客访问列表</div>
+      <visitor-table style="flex:1;"/>
     </div>
   </div>
 </template>
 
 <script>
 
-// import PowerLine1 from '@/views/popup/components/powerLine1'
-import { securityScore, securityFrequency, categoryStatistics } from '@/api/pop'
+import { securityScore, categoryStatistics, baoanStatistics, visitorStatistics } from '@/api/pop'
 import * as echarts from 'echarts'
-import PersonTable from "@/views/popup/components/personTable";
+import PersonTable from '@/views/popup/components/personTable'
+import VisitorTable from '@/views/popup/components/visitorTable'
 
 export default {
   name: 'Right',
-  components: {PersonTable },
+  components: { PersonTable, VisitorTable },
   data() {
     return {
       timer: null,
@@ -72,6 +87,14 @@
         '2': '*',
         '3': '*'
       },
+      baoan: {
+        on: 0,
+        all: 0
+      },
+      visitor: {
+        in: 0,
+        out: 0
+      },
       safeData: [],
       num: '*'
     }
@@ -85,151 +108,55 @@
     this.timer = null
   },
   methods: {
-    initStar() {
-      var myChart = echarts.init(document.getElementById('safe-star'))
-      const that = this
-      const option = {
-        tooltip: {
-          trigger: 'item'
-        },
-        legend: {
-          right: 20,
-          top: 10,
-          data: ['事件频次'],
-          itemStyle: {
-            color: '#d5f6fa'
-          },
-          textStyle: {
-            color: '#cce9ff',
-            fontWeight: 'bold',
-            fontSize: 14
-          }
-        },
-        radar: [{
-          indicator: that.safeData.map((item) => {
-            return { text: item.categoryLevelName, max: that.safeData[0].quantity * 1.2 }
-          }),
-          center: ['50%', '55%'],
-          splitArea: {
-            areaStyle: {
-              color: ['#77EADF99', '#26C3BE99', '#64AFE999', '#428BD499'],
-              shadowColor: 'rgba(0, 0, 0, 0.2)',
-              shadowBlur: 10
-            }
-          },
-          name: {
-            color: '#d5f6fa',
-            fontWeight: 'bold',
-            fontSize: 14
-          }
-        }],
-        series: [{
-          type: 'radar',
-          symbol: 'none',
-          symbolSize: 4,
-          lineStyle: {
-            width: 3,
-            color: 'rgb(12,228,235)'
-          },
-          areaStyle: {
-            color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
-              {
-                color: 'rgb(8,91,121,0.8)',
-                offset: 0
-              },
-              {
-                color: 'rgb(12,228,235,0.8)',
-                offset: 1
-              }
-            ])
-          },
-          emphasis: {
-            areaStyle: {
-              color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
-                {
-                  color: 'rgb(8,91,121,0.5)',
-                  offset: 0
-                },
-                {
-                  color: 'rgb(12,228,235,0.5)',
-                  offset: 1
-                }
-              ])
-            }
-          },
-          data: [{
-            value: that.safeData.map(item => item.quantity),
-            name: '事件频次',
-            symbol: 'rect',
-            symbolSize: 5,
-            lineStyle: {
-              type: 'dashed'
-            },
-            label: {
-              show: true,
-              fontSize: 14,
-              fontWeight: 'bold',
-              color: '#ff9933',
-              formatter: function (params) {
-                return params.value
-              }
-            }
-          }]
-        }]
-      }
-      myChart.clear()
-      myChart.setOption(option, true)
-      window.addEventListener('resize', function() {
-        myChart.resize()
-      })
-    },
     initData() {
       this.timer = setInterval(() => {
         securityScore().then(response => {
           if (response.code === 200) {
-            this.list['0'] = response.data['一期主楼']
-            this.list['1'] = response.data['二期主楼']
-            this.list['2'] = response.data['录制楼']
-            this.list['3'] = response.data['1600演播厅']
+            this.list['0'] = response.data['一期主楼'].toFixed(2)
+            this.list['1'] = response.data['二期主楼'].toFixed(2)
+            this.list['2'] = response.data['录制楼'].toFixed(2)
+            this.list['3'] = response.data['1600演播厅'].toFixed(2)
           }
         })
-      }, 10000)
-      categoryStatistics().then(response => {
-        if (response.code === 200) {
-          this.safeData = response.data
-          this.safeData.length = 5
-          this.initStar()
-        }
-      })
-      // securityFrequency().then(response => {
-      //   if (response.code === 200) {
-      //     this.num = response.data['quantity']
-      //   }
-      // })
+        baoanStatistics().then(response => {
+          if (response.code === 200) {
+            this.baoan = response.data
+          }
+        })
+        visitorStatistics().then(response => {
+          if (response.code === 200) {
+            this.visitor = response.data
+          }
+        })
+      }, 5000)
     }
   }
 }
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
+.el-tooltip__popper{
+  margin-top: 0px !important;
+}
 .star {
   width: 100%;
-  height: 85%;
+  height: calc(100% - 40px);
 }
 .right{
   width: 100%;
   height: 100%;
   overflow: hidden;
   .block{
-    height: 33%;
-    width: 500px;
-    display: flex;
-    flex-wrap: wrap;
     background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
     border-radius: 5px;
     box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
     border-color: rgba(0, 0, 0, .05);
+    height: 33%;
+    width: 500px;
+    display: flex;
+    flex-wrap: wrap;
     margin: 10px;
+    padding-top: 20px;
   }
   .title{
     text-shadow: 0 0 5px #d1ffff;
diff --git a/src/views/popup/top.vue b/src/views/popup/top.vue
index 7850d83..d86f120 100644
--- a/src/views/popup/top.vue
+++ b/src/views/popup/top.vue
@@ -3,6 +3,14 @@
     <div :style="{backgroundImage:'url('+top+')'}" class="top"/>
     <div class="title">安防综合管理平台</div>
     <clock class="clock"/>
+    <div style="position: absolute;top:5px;left:450px;display: flex">
+      <el-button type="primary" circle style="width: 28px;height: 28px;padding-top: 4px;padding-left: 4px;" @click="shj('1')">
+        <el-image :src="require('@/assets/images/1.png')" mode="fill" style="width: 20px;height: 20px;" />
+      </el-button>
+      <el-button type="primary" circle style="width: 28px;height: 28px;margin-left: 10px;padding-top: 4px;padding-left: 4px;" @click="shj('2')">
+        <el-image :src="require('@/assets/images/2.png')" mode="fill" style="width: 20px;height: 20px;" />
+      </el-button>
+    </div>
     <div class="sys">
       <svg-icon icon-class="next-circle"/>
     </div>
@@ -10,7 +18,8 @@
 </template>
 
 <script>
-import Clock from '@/components/Clock';
+import Clock from '@/components/Clock'
+import { repostSocket } from '@/api/common'
 export default {
   name: 'Top',
   components: { Clock },
@@ -20,6 +29,16 @@
     }
   },
   methods: {
+    shj(num) {
+      const params = {
+        type: 'shj-page',
+        message: num
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+        }
+      })
+    }
   }
 }
 </script>
diff --git a/src/views/video/history.vue b/src/views/video/history.vue
index dbf02b0..f2f2430 100644
--- a/src/views/video/history.vue
+++ b/src/views/video/history.vue
@@ -6,37 +6,23 @@
       </el-col>
     </div>
     <el-col :span="18">
-      <el-card class="box-card" style="margin-top: 14px; height: calc(100vh - 170px);">
-        <div style="z-index: 9999;margin-left: 20px">
-          <el-form ref="dataForm" :inline="true" :model="listQuery" :rules="rules" class="form-container">
-            <el-form-item class="selectForm-container-item" prop="startTime">
-              <el-date-picker
-                v-model="timeRange"
-                type="datetimerange"
-                range-separator="至"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                start-placeholder="搜索起始时间"
-                end-placeholder="搜索截止时间"
-                arrow-control="true"
-                @focus="dateClick"
-                @change="dateSelected"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <!--<el-button class="filter-item" type="primary" @click="live">实时预览</el-button>-->
-          </el-form>
-        </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 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"/>-->
-          <!--</el-tab-pane>-->
-          <!--</el-tabs>-->
-        </div>
-      </el-card>
+      <div style="z-index: 9999;margin-left: 10px;margin-top: 25px">
+        <el-date-picker
+          v-model="timeRange"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="搜索起始时间"
+          end-placeholder="搜索截止时间"
+          arrow-control="true"
+          :clearable="false"
+          @focus="dateClick"
+          @blur="dateSelected"
+          @change="dateSelected"/>
+      </div>
+      <div id="tabDiv">
+        <iframe name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html?wmode=opaque"/>
+      </div>
     </el-col>
   </div>
 </template>
@@ -59,8 +45,6 @@
       }
     }
     return {
-      activeName: 'hk',
-      videoShow: true,
       timeRange: [],
       listQuery: {
         indexCode: '',
@@ -90,41 +74,24 @@
     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',document.getElementById('tabDiv').getBoundingClientRect().left + 20)
     }, 100)
   },
+  beforeDestroy() {
+    window.frames['playHK'].destoryPlugin()
+  },
   methods: {
-    handleClick(tab, event) {
-      if (tab.name === 'hk') {
-        this.activeName = 'hk'
-        console.log('hk')
-        window.frames['playHK'].initPlugin('back',document.getElementById('tabDiv').getBoundingClientRect().left + 20)
-      } else if (tab.name === 'nvr') {
-        this.activeName = 'nvr'
-        // window.frames['playNVR'].stopPlayReal(null)
-      }
-    },
     search() {
       window.frames['playHK'].show()
-      if (this.listQuery. indexCode === '') {
+      if (this.listQuery.indexCode === '') {
         this.$message.warning('请先选中一个监控点')
         return
       }
-      this.videoShow = true
-      this.$refs['dataForm'].validate((valid) => {
-        if (valid) {
-          if (this.activeName === 'nvr') {
-            window.frames['playNVR'].search(0, this.listQuery.startTime, this.listQuery.endTime)
-          } else if (this.activeName === 'hk') {
-            console.log(this.listQuery. indexCode, this.listQuery.startTime, this.listQuery.endTime)
-            window.frames['playHK'].search(this.listQuery. indexCode, this.listQuery.startTime, this.listQuery.endTime)
-          }
-        }
-      })
+      if (this.timeRange !== []) {
+        window.frames['playHK'].search(this.listQuery.indexCode, this.listQuery.startTime, this.listQuery.endTime)
+      }
     },
     handleCameraClicked(camera) {
-      console.log(camera)
       if (typeof camera.indexCode === 'undefined' || camera.indexCode === '') {
         return false
       } else {
@@ -138,6 +105,7 @@
     },
     dateSelected() {
       window.frames['playHK'].show()
+      this.search()
     }
   }
 }
@@ -145,7 +113,7 @@
 
 <style scoped>
 .iframe-body{
-  height: calc(100vh - 250px);
+  height: calc(100vh - 200px);
   width: 100%;
   frameBorder: 0;
   scrolling: no;
@@ -153,6 +121,7 @@
   vspale: 0;
   z-index: -1;
   padding:0 !important;
+  margin-top: -10px;
 }
 .playWnd {
   margin: 10px 0 0 20px;
@@ -163,5 +132,7 @@
 }
 .video{
   background: white;
+  width: 100%;
+  height: calc(100vh - 80px);
 }
 </style>

diff --git a/public/static/webCtrl/hk/demo_embedded_for_iframe.html b/public/static/webCtrl/hk/demo_embedded_for_iframe.html
index 3a0be10..5c18f74 100644
--- a/public/static/webCtrl/hk/demo_embedded_for_iframe.html
+++ b/public/static/webCtrl/hk/demo_embedded_for_iframe.html
@@ -107,6 +107,13 @@
         }
     });
 
+    function destoryPlugin() {
+      if (oWebControl != null){
+        oWebControl.JS_HideWnd();  // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
+        oWebControl.JS_Disconnect().then(function(){}, function() {});
+      }
+    }
+
     function hide(){
       oWebControl.JS_HideWnd();
     };
diff --git a/src/App.vue b/src/App.vue
index d9046c1..b8c5c1a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="app" v-resize="windowResize">
+  <div id="app" style="overflow-y: hidden" v-resize="windowResize">
     <router-view />
   </div>
 </template>
diff --git a/src/api/device.js b/src/api/device.js
index 0ba70ff..8d6c46b 100644
--- a/src/api/device.js
+++ b/src/api/device.js
@@ -159,3 +159,21 @@
     data
   })
 }
+
+export function getSwitchStatus(data) {
+  return request({
+    url: '/cockpit/gateLinkage/switchStatus',
+    method: 'get'
+  })
+}
+
+export function gateLinkageSwitch(controlSwitch) {
+  return request({
+    url: '/cockpit/gateLinkage/switch',
+    method: 'get',
+    params: {
+      controlSwitch
+    }
+  })
+}
+
diff --git a/src/api/person.js b/src/api/person.js
index 8a79c27..0c2a0ff 100644
--- a/src/api/person.js
+++ b/src/api/person.js
@@ -21,6 +21,14 @@
   })
 }
 
+export function getStaffOnList(params) {
+  return request({
+    url: '/cockpit/securityStaff/onList',
+    method: 'GET',
+    params
+  })
+}
+
 export function addStaff(data) {
   return request({
     url: 'staffInfo/add',
diff --git a/src/api/pop.js b/src/api/pop.js
index 01ddde7..6fa7381 100644
--- a/src/api/pop.js
+++ b/src/api/pop.js
@@ -72,6 +72,39 @@
   })
 }
 
+export function baoanStatistics() {
+  return request({
+    url: '/cockpit/securityStaff/statistics',
+    method: 'get',
+    data: {}
+  })
+}
+
+export function visitorStatistics() {
+  return request({
+    url: 'cockpit/visitor/statistics',
+    method: 'get',
+    data: {}
+  })
+}
+
+export function caseTodayStatistics() {
+  return request({
+    url: 'cockpit/case/todayStatistics',
+    method: 'get',
+    data: {}
+  })
+}
+
+export function casePieStatistics(params) {
+  return request({
+    url: 'cockpit/caseType/statisticsByTime',
+    method: 'get',
+    data: params,
+    params
+  })
+}
+
 // 安防事件频次因数组件
 export function securityFrequency() {
   return request({
@@ -158,3 +191,27 @@
     method: 'get'
   })
 }
+
+export function cameraTypeStatistics() {
+  return request({
+    url: '/cockpit/camera/typeStatistics',
+    method: 'get'
+  })
+}
+
+export function deviceStatistics(devType) {
+  return request({
+    url: '/cockpit/device/statistics',
+    method: 'post',
+    data: {
+      devType
+    }
+  })
+}
+
+export function buildPeopleNumber() {
+  return request({
+    url: '/cockpit/build/peopleNumber',
+    method: 'get'
+  })
+}
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index df71207..33d701a 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -280,37 +280,37 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  .table{
-    margin-bottom: 20px;
-  }
-  .pagination-container{
-    padding-bottom: 50px;
-  }
-  .table-title{
-    /*background-color:rgba(243, 243, 243, 1);*/
-    background-color:#fff;
-    .title-header{
-      font-size: 15px;
-      i{
-        margin-left: 10px;
-        margin-right: 5px;
-      }
-      i:focus{
-        outline: none;
-      }
+.table{
+  margin-bottom: 20px;
+}
+.pagination-container{
+  padding-bottom: 50px;
+}
+.table-title{
+  /*background-color:rgba(243, 243, 243, 1);*/
+  background-color:#fff;
+  .title-header{
+    font-size: 15px;
+    i{
+      margin-left: 10px;
+      margin-right: 5px;
+    }
+    i:focus{
+      outline: none;
     }
   }
-  .edit_btns{
-    padding-top:7px;
-    padding-right:3px;
-    text-align: right;
+}
+.edit_btns{
+  padding-top:7px;
+  padding-right:3px;
+  text-align: right;
+}
+.popper-div{
+  line-height: 1.5;
+  .popper-btns{
+    margin-top:10px;
   }
-  .popper-div{
-    line-height: 1.5;
-    .popper-btns{
-      margin-top:10px;
-    }
-  }
+}
 </style>
 
 <style>
diff --git a/src/router/modules/menu.js b/src/router/modules/menu.js
index 28ecc52..447517e 100644
--- a/src/router/modules/menu.js
+++ b/src/router/modules/menu.js
@@ -8,7 +8,7 @@
     redirect: '/loginBoard',
     meta: {
       title: '主页',
-      permission: ['/loginBoard'],
+      // permission: ['/loginBoard'],
       icon: '' // 图标
     },
     children: [
@@ -16,7 +16,7 @@
         path: '/loginBoard',
         name: 'LoginBoard',
         component: () => import('@/views/backstage/loginBoard'),
-        meta: { title: '主页', icon: '', permission: ['/loginBoard'] }
+        meta: { title: '主页', icon: '' }
       }
     ]
   },
diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss
index 0d1614b..f39542e 100644
--- a/src/styles/element-ui.scss
+++ b/src/styles/element-ui.scss
@@ -74,3 +74,6 @@
   height:48px;
   line-height:48px;
 }
+.el-time-panel {
+  margin-left: -20px !important;
+}
diff --git a/src/utils/request.js b/src/utils/request.js
index 02dcee1..a81c17f 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -39,19 +39,21 @@
     } else if (res.code !== 200) {
       // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
       if (res.code === 401 || res.code === 50012 || res.code === 50014) {
-        MessageBox.confirm(
-          '你已被登出，可以取消继续留在该页面，或者重新登录',
-          '确定登出',
-          {
-            confirmButtonText: '重新登录',
-            cancelButtonText: '取消',
-            type: 'warning'
-          }
-        ).then(() => {
-          store.dispatch('FedLogOut').then(() => {
-            location.reload() // 为了重新实例化vue-router对象 避免bug
+        if (!window.location.href.endsWith('right') && !window.location.href.endsWith('left') && !window.location.href.endsWith('bottom')) {
+          MessageBox.confirm(
+            '你已被登出，可以取消继续留在该页面，或者重新登录',
+            '确定登出',
+            {
+              confirmButtonText: '重新登录',
+              cancelButtonText: '取消',
+              type: 'warning'
+            }
+          ).then(() => {
+            store.dispatch('FedLogOut').then(() => {
+              location.reload() // 为了重新实例化vue-router对象 避免bug
+            })
           })
-        })
+        }
       } else {
         Message({
           showClose: true,
diff --git a/src/views/common/trailDialog.vue b/src/views/common/trailDialog.vue
index 04a83eb..fd90c34 100644
--- a/src/views/common/trailDialog.vue
+++ b/src/views/common/trailDialog.vue
@@ -52,6 +52,8 @@
         75: '75%'
       },
       listQuery: {
+        staffCode: '',
+        personName: '',
         facePicUrl: '',
         startTime: '',
         endTime: '',
@@ -81,11 +83,14 @@
   },
   methods: {
     // 初始化对话框
-    initDialog: function(picture = null, name) {
-      this.textMap = '轨迹追踪 — ' + name
+    initDialog: function(row) {
+      this.textMap = '轨迹追踪 — ' + row.staffName
+      this.list = []
       this.clearInput()
       this.dialogFormVisible = true
-      this.listQuery.facePicUrl = picture
+      this.listQuery.facePicUrl = row.picture
+      this.listQuery.staffCode = row.staffCode
+      this.listQuery.personName = row.staffName
       this.fetchData()
     },
     fetchData() {
diff --git a/src/views/person/staffList.vue b/src/views/person/staffList.vue
index ce8643e..95acc5c 100644
--- a/src/views/person/staffList.vue
+++ b/src/views/person/staffList.vue
@@ -332,7 +332,7 @@
     },
     trail(row) {
       this.dialogFormVisible1 = true
-      this.$refs.trailDialog.initDialog(row.picture, row.staffName)
+      this.$refs.trailDialog.initDialog(row)
     },
     // 打开详情对话框
     detail(row) {
diff --git a/src/views/popup/board.vue b/src/views/popup/board.vue
index eb229cc..0f47c22 100644
--- a/src/views/popup/board.vue
+++ b/src/views/popup/board.vue
@@ -4,7 +4,7 @@
       人员轨迹追踪
       <svg-icon v-if="list.length > 0" icon-class="pop-cross" class="close-icon" @click="close" />
     </div>
-    <el-form ref="ruleForm" :model="listQuery" :rules="rules" label-width="100px">
+    <el-form ref="ruleForm" :model="listQuery" :rules="rules" label-width="80px">
       <el-row :gutter="20">
         <el-col :span="12" class="form-item-person-info">
           <el-form-item label="人员信息" prop="personName" style="position:relative">
@@ -20,7 +20,8 @@
               size="small"
               placeholder="请输入人员姓名"
               :popper-append-to-body="false"
-              @change="handlePerson">
+              @change="handlePerson"
+            >
               <el-option
                 v-for="item in personNameList"
                 :key="item.staffCode"
@@ -41,7 +42,7 @@
               end-placeholder="终止时间"
               size="small"
               :clearable="false"
-              style="width:98%"
+              style="width:98%;"
             />
           </el-form-item>
         </el-col>
@@ -53,7 +54,7 @@
           </el-form-item>
         </el-col>
         <el-col :span="6">
-          <el-form-item label="最小相似度" prop="minSimilarity">
+          <el-form-item label="最小相似度" prop="minSimilarity" label-width="100px">
             <el-input v-model="listQuery.minSimilarity" size="small" placeholder="区间50-100" />
           </el-form-item>
         </el-col>
@@ -81,7 +82,7 @@
             <div class="title text-over">
               {{ child.positionName ? child.positionName : '' }}
             </div>
-            <div class="desc text-over" :title="child.devName">
+            <div class="desc text-over" :title="child.devName" style="white-space: normal;word-wrap: break-word;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2; ">
               {{ child.devName ? child.devName : '' }}
             </div>
             <div class="date" style="width:145px">
@@ -110,6 +111,7 @@
     return {
       selectLoading: false,
       personName: '',
+      staffCode: '',
       point: [],
       listQuery: {
         facePicUrl: '', // 图片url
@@ -260,6 +262,7 @@
       this.personNameList.map(item => {
         if (item.staffCode === person) {
           this.personName = item.personName
+          this.staffCode = item.staffCode
           // this.listQuery.personName = item.personName
           this.listQuery.facePicUrl = item.personPicture
           this.listQuery.gender = item.gender
@@ -299,7 +302,11 @@
         spinner: 'el-icon-loading',
         background: 'rgba(0, 0, 0, 0.7)'
       })
-      const postData = Object.assign(this.listQuery, { 'personName': this.personName })
+      const postData = Object.assign(this.listQuery,
+        {
+          'personName': this.personName,
+          'staffCode': this.staffCode
+        })
       console.log(postData)
       hikPic(postData).then(response => {
         loading.close()
@@ -325,6 +332,7 @@
       this.listQuery.minSimilarity = '50'
       this.listQuery.timeRange = ['', '']
       this.personName = ''
+      this.staffCode = ''
       this.list = []
     },
     // 轨迹上墙
@@ -359,299 +367,299 @@
   }
 }
 </script>
-
 <style rel="stylesheet/scss" lang="scss" scoped>
-  ::v-deep(.el-input__inner){
-    border:1px solid #40C3F1 !important;
-    background: transparent !important;
-    color:#fff !important;
+::v-deep(.el-input__inner){
+  border:1px solid #40C3F1 !important;
+  background: transparent !important;
+  color:#fff !important;
+}
+::v-deep(.el-range-input){
+  background: transparent !important;
+  color:#fff !important;
+}
+::v-deep(.el-form-item__label){
+  color:#f1f1f1 !important;
+  font-weight: 400 !important;
+}
+::v-deep(.el-range-separator){
+  color:#f1f1f1 !important;
+  font-weight: 400 !important;
+  color:#fff !important;
+}
+::v-deep(.el-select .el-select-dropdown__wrap) {
+  max-height: 350px !important;
+  overflow-y: auto !important;
+}
+
+.form-item-person-info:hover{
+  cursor: text !important;
+}
+.el-form-item__content:hover{
+  cursor: text !important;
+}
+::v-deep(.form-item-person-info .el-input__inner):hover{
+  cursor: text !important;
+}
+::-webkit-scrollbar {
+  z-index: 11;
+  width: 6px;
+}
+::-webkit-scrollbar-track,
+::-webkit-scrollbar-corner {
+  border-radius: 5px;
+  background: #fff;
+}
+::-webkit-scrollbar-thumb {
+  border-radius: 5px; // 滚动条
+  width: 6px;
+  background-color: #ccc;
+  :hover {
+    background-color: #ccc;
   }
-  ::v-deep(.el-range-input){
-    background: transparent !important;
-    color:#fff !important;
-  }
-  ::v-deep(.el-form-item__label){
-    color:#f1f1f1 !important;
-    font-weight: 400 !important;
-  }
-  ::v-deep(.el-range-separator){
-    color:#f1f1f1 !important;
-    font-weight: 400 !important;
-    color:#fff !important;
-  }
-  ::v-deep(.el-select .el-select-dropdown__wrap) {
-    max-height: 350px !important;
-    overflow-y: auto !important;
-  }
-  .form-item-person-info:hover{
-    cursor: text !important;
-  }
-  .el-form-item__content:hover{
-    cursor: text !important;
-  }
-  ::v-deep(.form-item-person-info .el-input__inner):hover{
-    cursor: text !important;
-  }
-  ::-webkit-scrollbar {
-      z-index: 11;
-      width: 6px;
-    }
-    ::-webkit-scrollbar-track,
-    ::-webkit-scrollbar-corner {
-      border-radius: 5px;
-      background: #fff;
-    }
-    ::-webkit-scrollbar-thumb {
-      border-radius: 5px; // 滚动条
-      width: 6px;
-      background-color: #ccc;
-      :hover {
-        background-color: #ccc;
-      }
-    }
-    ::-webkit-scrollbar-track-piece {
-      border-radius: 5px; // 轨道
-      background: #fff;
-      width: 6px;
-    }
-  .text-over{
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-  .wrap{
-    width:100%;
-    height: 100%;
-    background: #5F8EB9;
+}
+::-webkit-scrollbar-track-piece {
+  border-radius: 5px; // 轨道
+  background: #fff;
+  width: 6px;
+}
+.text-over{
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.wrap{
+  width:100%;
+  height: 100%;
+  background: #5F8EB9;
+  position: relative;
+  overflow: hidden;
+  .header{
     position: relative;
-    overflow: hidden;
-    .header{
+    width: 98%;
+    margin-left:20px;
+    border-top: 10px solid #5F8EB9;
+    border-bottom: 10px solid #5F8EB9;
+    padding:5px 0 5px 20px;
+    color:#f1f1f1;
+    background: #30486C;
+    font-size: 16px;
+  }
+}
+.el-select{
+  width: 100%;
+}
+.header::after{
+  content:"";
+  display: inline-block;
+  position: absolute;
+  top:0;
+  left: -8px;
+  width:4px;
+  height:100%;
+  background: #40C3F1;
+}
+.list-wrap{
+  width:100%;
+  // width:900px;
+  height: calc(100% - 175px); // 去除头部区域
+  overflow-y: auto;
+  .main{
+    width:99%;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    .row {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 40px;
+    }
+    .row:nth-child(2n) {
+      flex-direction: row-reverse;
+    }
+    .row:nth-child(2n):last-child .item {
+      margin-right: auto;
+    }
+    .list-item{
       position: relative;
-      width: 98%;
-      margin-left:20px;
-      border-top: 10px solid #5F8EB9;
-      border-bottom: 10px solid #5F8EB9;
-      padding:5px 0 5px 20px;
-      color:#f1f1f1;
-      background: #30486C;
-      font-size: 16px;
-    }
-  }
-  .el-select{
-    width: 100%;
-  }
-  .header::after{
-      content:"";
-      display: inline-block;
-      position: absolute;
-      top:0;
-      left: -8px;
-      width:4px;
-      height:100%;
-      background: #40C3F1;
-    }
-    .list-wrap{
-      width:100%;
-      // width:900px;
-      height: calc(100% - 175px); // 去除头部区域
-      overflow-y: auto;
-      .main{
-        width:99%;
-        margin: 0 auto;
-        display: flex;
-        flex-direction: column;
-        .row {
-          display: flex;
-          justify-content: space-between;
-          margin-bottom: 40px;
-        }
-        .row:nth-child(2n) {
-          flex-direction: row-reverse;
-        }
-        .row:nth-child(2n):last-child .item {
-          margin-right: auto;
-        }
-        .list-item{
-          position: relative;
-          width: 48%;
-          height: 240px;
-          background-image: url("../../assets/global_images/monitor.png");
-          background-repeat: no-repeat;
-          background-size: cover;
-          // background-size: 100% 100%;
-          // margin-left: 20px;
-          z-index: 10;
-          .img-wrap{
-            position: absolute;
-            left:35px;
-            top:40px;
-            width:238px;
-            height:138px;
-            overflow: hidden;
-            z-index: -1;
-          }
-          .title{
-            width:150px;
-            position: absolute;
-            left:42%;
-            top: 40px;
-            font-size: 20px;
-            color:#40C3F1;
-          }
-          .desc{
-            width:150px;
-            position: absolute;
-            left:42%;
-            top: 75px;
-            font-size: 16px;
-            color:#f1f1f1;
-          }
-          .date{
-            position: absolute;
-            left:50%;
-            transform: translateX(-50%);
-            bottom:70px;
-            font-size: 14px;
-            color:#c1c1c1;
-            margin-left:25px;
-          }
-          .date::after{
-            position: absolute;
-            top:0;
-            left:-20px;
-            content:"";
-            display: inline-block;
-            width: 15px;
-            height: 15px;
-            background-image: url("../../assets/global_images/date.png");
-            background-repeat: no-repeat;
-            background-size: cover;
-          }
-          .ratio{
-            // width:100px;
-            position: absolute;
-            left:50%;
-            transform: translateX(-50%);
-            bottom:40px;
-            font-size: 14px;
-            color:#c1c1c1;
-            // margin-left:18px;
-            margin-left: 25px;
-          }
-          .ratio::after{
-            position: absolute;
-            top:0;
-            left:-20px;
-            content:"";
-            display: inline-block;
-            width: 15px;
-            height: 15px;
-            background-image: url("../../assets/global_images/search.png");
-            background-repeat: no-repeat;
-            background-size: cover;
-          }
-        }
-      }
-    }
-    .main .row:nth-child(odd){
-      .list-item:nth-child(odd)::after{
-        content:"";
-        display: inline-block;
-        width:30px;
-        height: 30px;
+      width: 48%;
+      height: 240px;
+      background-image: url("../../assets/global_images/monitor.png");
+      background-repeat: no-repeat;
+      background-size: cover;
+      // background-size: 100% 100%;
+      // margin-left: 20px;
+      z-index: 10;
+      .img-wrap{
         position: absolute;
-        top:50%;
-        transform: translate(-50%);
-        right:-52px;
-        background-image: url("../../assets/global_images/right.png");
-        background-repeat: no-repeat;
-        background-size: cover;
+        left:35px;
+        top:40px;
+        width:238px;
+        height:138px;
+        overflow: hidden;
+        z-index: -1;
       }
-    }
-    .main .row:nth-child(odd){
-      .list-item:nth-child(even)::after{
-        content:"";
-        display: inline-block;
-        width:30px;
-        height: 30px;
+      .title{
+        width:150px;
         position: absolute;
-        right:50%;
-        transform: translate(-50%);
-        bottom:-35px;
-        background-image: url("../../assets/global_images/right.png");
-        background-repeat: no-repeat;
-        background-size: cover;
-        transform: rotate(90deg);
+        left:42%;
+        top: 40px;
+        font-size: 20px;
+        color:#40C3F1;
       }
-    }
-    .main .row:nth-child(even){
-      .list-item:nth-child(odd)::after{
-        content:"";
-        display: inline-block;
-        width:30px;
-        height: 30px;
+      .desc{
+        width:150px;
         position: absolute;
-        top:50%;
-        transform: translate(-50%);
-        left:-35px;
-        background-image: url("../../assets/global_images/right.png");
-        background-repeat: no-repeat;
-        background-size: cover;
-        transform: rotate(180deg);
+        left:42%;
+        top: 75px;
+        font-size: 16px;
+        color:#f1f1f1;
       }
-    }
-    .main .row:nth-child(even){
-      .list-item:nth-child(even)::after{
-        content:"";
-        display: inline-block;
-        width:30px;
-        height: 30px;
+      .date{
         position: absolute;
         left:50%;
-        transform: translate(-50%);
-        bottom:-35px;
-        background-image: url("../../assets/global_images/right.png");
+        transform: translateX(-50%);
+        bottom:70px;
+        font-size: 14px;
+        color:#c1c1c1;
+        margin-left:25px;
+      }
+      .date::after{
+        position: absolute;
+        top:0;
+        left:-20px;
+        content:"";
+        display: inline-block;
+        width: 15px;
+        height: 15px;
+        background-image: url("../../assets/global_images/date.png");
         background-repeat: no-repeat;
         background-size: cover;
-        transform: rotate(-270deg);
+      }
+      .ratio{
+        // width:100px;
+        position: absolute;
+        left:50%;
+        transform: translateX(-50%);
+        bottom:40px;
+        font-size: 14px;
+        color:#c1c1c1;
+        // margin-left:18px;
+        margin-left: 25px;
+      }
+      .ratio::after{
+        position: absolute;
+        top:0;
+        left:-20px;
+        content:"";
+        display: inline-block;
+        width: 15px;
+        height: 15px;
+        background-image: url("../../assets/global_images/search.png");
+        background-repeat: no-repeat;
+        background-size: cover;
       }
     }
-    // 如果是最后一个元素不显示箭头
-    .main .row:last-child{
-      .list-item:last-child::after{
-        display: none;
-      }
-    }
-    .list-wrap .main .list-item .img-wrap{
-      position: absolute;
-      left: 32px;
-      top: 40px;
-      // width: 190px;
-      width: 212px;
-      height: 138px;
-      overflow: hidden;
-      z-index: -1;
-    }
-    .list-wrap .main .list-item .date{
-      left:75% !important;
-      margin-bottom: 20px;
-    }
-    .list-wrap .main .list-item .ratio{
-      left:75% !important;
-    }
-    .list-wrap .main .list-item .title,.list-wrap .main .list-item .desc{
-      left:62% !important;
-    }
-    .close-icon{
-      z-index: 100;
-      position: absolute;
-      top:2px;
-      right:2px;
-      color:white;
-      background: #fc2323cc;
-      width:25px;
-      height:25px;
-      border-radius: 5px;
-      padding:3px;
-    }
+  }
+}
+.main .row:nth-child(odd){
+  .list-item:nth-child(odd)::after{
+    content:"";
+    display: inline-block;
+    width:30px;
+    height: 30px;
+    position: absolute;
+    top:50%;
+    transform: translate(-50%);
+    right:-52px;
+    background-image: url("../../assets/global_images/right.png");
+    background-repeat: no-repeat;
+    background-size: cover;
+  }
+}
+.main .row:nth-child(odd){
+  .list-item:nth-child(even)::after{
+    content:"";
+    display: inline-block;
+    width:30px;
+    height: 30px;
+    position: absolute;
+    right:50%;
+    transform: translate(-50%);
+    bottom:-35px;
+    background-image: url("../../assets/global_images/right.png");
+    background-repeat: no-repeat;
+    background-size: cover;
+    transform: rotate(90deg);
+  }
+}
+.main .row:nth-child(even){
+  .list-item:nth-child(odd)::after{
+    content:"";
+    display: inline-block;
+    width:30px;
+    height: 30px;
+    position: absolute;
+    top:50%;
+    transform: translate(-50%);
+    left:-35px;
+    background-image: url("../../assets/global_images/right.png");
+    background-repeat: no-repeat;
+    background-size: cover;
+    transform: rotate(180deg);
+  }
+}
+.main .row:nth-child(even){
+  .list-item:nth-child(even)::after{
+    content:"";
+    display: inline-block;
+    width:30px;
+    height: 30px;
+    position: absolute;
+    left:50%;
+    transform: translate(-50%);
+    bottom:-35px;
+    background-image: url("../../assets/global_images/right.png");
+    background-repeat: no-repeat;
+    background-size: cover;
+    transform: rotate(-270deg);
+  }
+}
+// 如果是最后一个元素不显示箭头
+.main .row:last-child{
+  .list-item:last-child::after{
+    display: none;
+  }
+}
+.list-wrap .main .list-item .img-wrap{
+  position: absolute;
+  left: 32px;
+  top: 40px;
+  // width: 190px;
+  width: 212px;
+  height: 138px;
+  overflow: hidden;
+  z-index: -1;
+}
+.list-wrap .main .list-item .date{
+  left:75% !important;
+  margin-bottom: 20px;
+}
+.list-wrap .main .list-item .ratio{
+  left:75% !important;
+}
+.list-wrap .main .list-item .title,.list-wrap .main .list-item .desc{
+  left:62% !important;
+}
+.close-icon{
+  z-index: 100;
+  position: absolute;
+  top:2px;
+  right:2px;
+  color:white;
+  background: #fc2323cc;
+  width:25px;
+  height:25px;
+  border-radius: 5px;
+  padding:3px;
+}
 </style>
diff --git a/src/views/popup/bottom.vue b/src/views/popup/bottom.vue
index e3fe7e2..c95b2a1 100644
--- a/src/views/popup/bottom.vue
+++ b/src/views/popup/bottom.vue
@@ -1,47 +1,84 @@
 <template>
   <div class="bottom">
-    <div class="block1">
-      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">访客控制安全系数组件</div>
-      <visit-bar style="flex:1;"/>
-    </div>
+<!--    <div class="block1" style="border-top-left-radius: 0px;margin-left: 5px">-->
+<!--      <inout-list style="flex:1;"/>-->
+<!--    </div>-->
     <div class="block">
       <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安防事件列表</div>
       <case-table style="flex:1;"/>
     </div>
-    <div class="block">
-      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">其他相关安全系数指标组件</div>
-      <other-line style="flex:1;"/>
+    <div class="block1" style="flex-direction: row;width: 700px">
+      <div style="width: 200px">
+        <div class="item0" style="margin: 36px 0">
+          <el-image :src="require('@/assets/popup/事件.png')" class="base-map-image" mode="fill" />
+          <div class="item-text">
+            <div class="num">{{caseNum.all}}<span class="unit"> 件</span></div>
+            <div style="color: #B3F3F6;">今日总事件</div>
+          </div>
+        </div>
+        <div class="item0">
+          <el-image :src="require('@/assets/popup/事件1.png')" class="base-map-image" mode="fill" />
+          <div class="item-text">
+            <div class="num"><span style="color: #08f102;text-shadow: 0 0 5px #08f102;">{{caseNum.solve}}</span><span class="unit"> 件</span></div>
+            <div style="color: #B3F3F6;">今日已解决</div>
+          </div>
+        </div>
+      </div>
+      <case-pie style="width: calc(100% - 200px);height: 100%"/>
     </div>
-    <div class="block1">
-      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安保人员到岗系数组件</div>
-      <staff-bar1 style="flex:1;"/>
+    <div class="block">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安防事件频率统计</div>
+      <case-bar style="flex:1;"/>
     </div>
   </div>
 </template>
 
 <script>
-// import VisitorPie from "@/views/popup/components/visitorPie";
-import VisitBar from '@/views/popup/components/visitBar';
-import StaffBar1 from '@/views/popup/components/staffBar1';
-import CaseTable from '@/views/popup/components/caseTable';
-// import ReqairTable from "@/views/popup/components/reqairTable";
-import OtherLine from '@/views/popup/components/otherLine';
+
+import CaseTable from '@/views/popup/components/caseTable'
+import CasePie from '@/views/popup/components/casePie'
+import { caseTodayStatistics } from '@/api/pop'
+import CaseBar from '@/views/popup/components/caseBar'
+import InoutList from '@/views/popup/components/inoutList'
 
 export default {
   name: 'Bottom',
-  components: { OtherLine, CaseTable, StaffBar1, VisitBar },
+  components: { InoutList, CaseBar, CasePie, CaseTable },
   data() {
     return {
+      timer: null,
       titleImg: require('@/assets/popup/title.png'), // 背景图片
-      titleAll: require('@/assets/popup/title-all.png'),// 背景图片
-      list: [2156, 2144, 455, 314, 98]
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      list: [2156, 2144, 455, 314, 98],
+      caseNum: {
+        all: 0,
+        solve: 0
+      }
     }
   },
+  mounted() {
+    clearInterval(this.timer)
+    this.search()
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+    this.timer = null
+  },
+  methods: {
+    search() {
+      this.timer = setInterval(() => {
+        caseTodayStatistics().then(response => {
+          if (response.code === 200) {
+            this.caseNum = response.data
+          }
+        })
+      }, 10000)
+    }
+  }
 }
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-
 .bottom{
   width: 100%;
   height: 220px;
@@ -57,11 +94,11 @@
     border-radius: 5px;
     box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
     border-color: rgba(0, 0, 0, .05);
-    margin: 0px 10px;
+    margin: 0px 5px;
     flex-direction: column;
   }
   .block1{
-    width: 500px;
+    width: 750px;
     height: 100%;
     display: flex;
     flex-wrap: wrap;
@@ -69,7 +106,7 @@
     border-radius: 5px;
     box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
     border-color: rgba(0, 0, 0, .05);
-    margin: 0px 10px;
+    margin: 0px 5px;
     flex-direction: column;
   }
   .title{
@@ -93,5 +130,31 @@
     font-size: 15px;
 
   }
+  .item0{
+    width: 100%;
+    height: 50px;
+    display: flex;
+    justify-content: left;
+    align-items: center;
+    padding: 0 8%;
+  }
+  .item-text{
+    text-shadow: 0 0 2px #d1ffff;
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 18px;
+  }
+  .num{
+    text-shadow: 0 0 5px #ffb441;
+    color: #ffb441;
+    font-size: 20px;
+    padding-top: 2px;
+  }
+  .unit{
+    color: #B3F3F6;
+    font-size: 14px;
+    margin-left: 1px;
+  }
 }
 </style>
diff --git a/src/views/popup/components/caseTable.vue b/src/views/popup/components/caseTable.vue
index 95aa677..c9708d7 100644
--- a/src/views/popup/components/caseTable.vue
+++ b/src/views/popup/components/caseTable.vue
@@ -1,5 +1,9 @@
 <template>
   <div class="flowTable">
+<!--    <el-tabs v-model="activeName" @tab-click="changeTime" style="display: flex;position:absolute;right: 30px;top:5px">-->
+<!--      <el-tab-pane label="已解决" name="week"/>-->
+<!--      <el-tab-pane label="未解决" name="month"/>-->
+<!--    </el-tabs>-->
     <div class="success_info_body" v-show="showFlag">
       <!-- 参数名称、列数根据实际情况调整 -->
       <div class="table_body">
@@ -14,7 +18,7 @@
         <div class="table_main_body">
           <div class="table_inner_body" :style="{top: tableTop + 'px'}">
             <div v-for="(item,index) in tableList" class="table_tr" :class="checkCell(item,index)" :key="index" @click="JumpDevice(item)">
-              <div class="tr1 tr">{{item.levelName}}</div>
+              <div class="tr1 tr" :style="{color: item.levelName ==='重大' ? 'red' : item.levelName ==='较大' ? 'orange' : '#b8dffd'}">{{item.levelName}}</div>
               <div class="tr2 tr">{{item.description}}</div>
               <div class="tr1 tr">{{item.statusName}}</div>
               <div class="tr2 tr">{{item.typeName}}</div>
@@ -41,7 +45,7 @@
   data() {
     return {
       picurl: '',
-      defaultPhoto: require('@/assets/global_images/photo_error.png'),
+      defaultPhoto: require('@/assets/global_images/photo_offline.png'),
       errorImg: require('@/assets/global_images/photo_error.png'),
       showFlag: true,
       tableTimer: null,
@@ -104,8 +108,9 @@
       this.picurl = ''
       this.isbig = false
       getCaseListPage({
+        status: '',
         offset: 1,
-        limit: 15
+        limit: 20
       }).then(response => {
         if (response.code === 200) {
           this.tableList = response.data.rows
@@ -190,13 +195,18 @@
   line-height: 15px;
 }
 .tr {
-  overflow: hidden;
   text-overflow: ellipsis;
-  white-space: nowrap;
   box-sizing: border-box;
   padding: 0 5px;
   text-align: center;
   font-size: 13px;
+  word-wrap: break-word; /* 允许在单词内换行 */
+  overflow-wrap: break-word; /* 同上，现代浏览器推荐使用 */
+  white-space: normal; /* 允许自动换行 */
+  line-height: 15px;
+  display: flex;
+  align-items: center; /* 垂直居中 */
+  justify-content: center; /* 水平居中，如需要 */
 }
 .tr1 {
   width: 13%;
@@ -253,7 +263,7 @@
   }
 }
 .hard-state{
-  background:red;
+  background: #ff8585;
 }
 .medium-state{
   background: #ea9700;
diff --git a/src/views/popup/components/doorList.vue b/src/views/popup/components/doorList.vue
new file mode 100644
index 0000000..7bc178a
--- /dev/null
+++ b/src/views/popup/components/doorList.vue
@@ -0,0 +1,257 @@
+<template>
+  <div style="width: 100%;height: 100%;">
+    <div style="text-align: right;margin-right: 5px;">
+      <el-button class="doorbar-btn" type="primary" plain @click="isOn1 = !isOn1" style="margin-left: 3px">{{isOn1 ? '隐藏操作按钮': '开启操作按钮'}}</el-button>
+      <el-button class="doorbar-btn" type="primary" plain @click="controlDool()">{{!isOn2 ? '开启黑名单与闸机联动': '关闭黑名单与闸机联动'}}</el-button>
+    </div>
+    <div class="success_info_body" style="margin: 0 10px;flex: 1">
+      <div class="table_body">
+        <div class="table_th">
+          <div class="tr4 th_style">门禁分组</div>
+          <div class="tr1 th_style" v-show="isOn1">操作</div>
+        </div>
+        <div class="table_main_body">
+          <div class="table_inner_body" :style="{top: tableTop + 'px'}">
+            <div v-for="(item,index) in tableList" class="table_tr" :key="index">
+              <div class="tr4 tr">{{item.groupName}}</div>
+              <div class="tr1 tr" v-show="isOn1">
+                <el-button type="text" v-for="item in statusList" :key="item.value" size="small" @click.stop="editStatus(scope.row, item.value)" style="height: 20px;margin-top: -10px">
+                  {{ item.name }}
+                </el-button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+<!--    <el-pagination layout="prev, pager, next" :total="tableListSize" style="width: 100%;text-align: center" @current-change="handleCurrentChange"/>-->
+  </div>
+</template>
+
+<script>
+import {controlGroup, gateLinkageSwitch, getGroupListPage, getSwitchStatus} from '@/api/device'
+export default {
+  name: 'DoorList',
+  data() {
+    return {
+      defaultPhoto: require('@/assets/global_images/photo.png'),
+      errorImg: require('@/assets/global_images/photo_error.png'),
+      isOn1: false,
+      isOn2: false,
+      tableTimer: null,
+      tableTop: 0,
+      tableList: [],
+      statusList: [
+        { name: '常开', id: '1557975745699823618', value: '0' },
+        { name: '常闭', id: '1557975746215723010', value: '3' },
+        { name: '门开', id: '1557975746723233793', value: '2' },
+        { name: '门闭', id: '1557975747402711041', value: '1' }
+      ],
+      tableListSize: 0,
+      componentTimer: null,
+      visibleSize: 8, // 容器内可视最大完整行数
+      lineHeight: 20, // 每行的实际高度（包含margin-top/bottom,border等）
+      componentTimerInterval: 3600000, //  刷新数据的时间间隔
+      tableTimerInterval: 50, //  向上滚动 1px 所需要的时间，越小越快，推荐值 100
+      listQuery: {
+        groupName: '',
+        gateCode: '',
+        status: '',
+        offset: 1,
+        limit: 8
+      }, // 筛选条件
+      dialogFormVisible: false, // 是否显示编辑框
+      timeRange: [], // 时间范围
+      multipleSelection: [], // 多选选中项
+      list: [], // 列表数据
+      colorRow: {
+        isColor: false,
+        isPop: true
+      },
+      inoutTypeList: [],
+      passWayList: [],
+      total: 0, // 数据总数
+      listLoading: true // 列表加载动画
+    }
+  },
+  created() {
+    getSwitchStatus().then(response => {
+      if (response.code === 200) {
+        this.isOn2 = response.data === 1
+      }
+    })
+    this.fetchData()
+  },
+  methods: {
+    controlDool() {
+      this.isOn2 = !this.isOn2
+      gateLinkageSwitch(this.isOn2 ? 1 : 0).then(response => {
+        if (response.code === 200) {
+          this.$message.success((this.isOn2 ? '开启' : '关闭') + '黑名单与闸机联动成功')
+        }
+      })
+    },
+    fetchData(isNowPage = true) {
+      if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+        this.listQuery.offset = 1
+      }
+      getGroupListPage(this.listQuery).then(response => {
+        if (response.code === 200) {
+          this.tableList = response.data.rows
+          this.tableListSize = parseInt(response.data.total)
+        }
+      })
+    },
+    editStatus(row, status) {
+      controlGroup(row.id, status).then(response => {
+        if (response.code === 200) {
+          this.$message.success('通道控制成功')
+          this.fetchData()
+        }
+      }).catch(_ => { // 异常情况，loading置为false
+      })
+    },
+    handleCurrentChange(val) {
+      this.listQuery.offset = val
+      this.fetchData()
+    },
+    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.doorbar-btn {
+  height: 22px;
+  padding-top: 4px;
+  padding-right: 6px;
+  padding-left: 6px;
+  margin-right: 4px;
+}
+.table_body {
+  width: 100%;
+  margin-top: 0px;
+}
+.table_th {
+  width: 100%;
+  display: flex;
+  height: 15px;
+  line-height: 20px;
+}
+.tr {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 0 5px;
+  text-align: center;
+  font-size: 13px;
+  height: 20px !important;
+}
+.tr1 {
+  width: 35%;
+}
+.tr2 {
+  width: 18%;
+}
+.tr3 {
+  width: 15%;
+  font-size: 13px;
+}
+
+.tr4 {
+  flex: 1;
+}
+.tr5 {
+  width: 100px;
+}
+
+.th_style {
+  color: #b8dffd;
+  font-size: 13px;
+  font-weight: bold;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  box-sizing: border-box;
+  text-align: center;
+}
+.table_main_body {
+  width: 100%;
+  height: 175px;
+  overflow: hidden;
+  position: relative;
+  margin-top: 5px;
+}
+.table_inner_body {
+  width: 100%;
+  position: absolute;
+  left: 0;
+  color: #cce9ff;
+}
+
+.table_tr {
+  display: flex;
+  font-size: 13px;
+  border: 1px solid rgb(71, 160, 199);
+  margin-top: 2px;
+  height: 20px;
+  line-height: 20px;
+  cursor: pointer;
+:hover{
+  background: rgba(255, 153, 51, 0.6);
+}
+}
+.table_tr0 {
+  background: rgba(3, 145, 167, 0.1);
+}
+.table_tr1 {
+  background: rgb(64, 87, 120);
+}
+
+::v-deep .el-pagination {
+  .el-pagination__total {
+    color: white !important;
+  }
+  .el-pagination__jump {
+    color: white !important;
+  }
+  // 两个输入框
+  .el-input__inner {
+    background-color: #092546;
+    border: 1px solid rgba(192, 192, 192, 0.479);
+    color: white !important;
+  }
+  // 左右按键和里面的图标
+  button {
+    background-color: #092546;
+    .el-icon::before {
+      color: white;
+    }
+  }
+  // 分页数字
+  ul {
+    color: white;
+    .el-icon::before {
+      color: white !important;
+    }
+  }
+  // 分页数字的背景色
+  ul > li {
+    background-color: #092546;
+  }
+}
+::v-deep .el-loading-mask {
+  background-color: rgba(0, 0, 0, 0.479);
+}
+
+</style>
diff --git a/src/views/popup/components/personTable.vue b/src/views/popup/components/personTable.vue
index e2e4c1e..ca73933 100644
--- a/src/views/popup/components/personTable.vue
+++ b/src/views/popup/components/personTable.vue
@@ -7,15 +7,17 @@
           <div class="tr4 th_style">安保人员姓名</div>
           <div class="tr4 th_style">性别</div>
           <div class="tr4 th_style">照片</div>
+          <div class="tr4 th_style">状态</div>
         </div>
         <div class="table_main_body">
           <div class="table_inner_body" :style="{top: tableTop + 'px'}">
-            <div v-for="(item,index) in tableList" :class="index%2==1?'table_tr':'table_tr1'" :key="index" @click="JumpDevice(item)">
+            <div v-for="(item,index) in tableList" :class="index % 2==1?'table_tr':'table_tr1'" :key="index" @click="JumpDevice(item)">
               <div class="tr4 tr">{{item.staffName}}</div>
               <div class="tr4 tr">{{item.staffGenderName}}</div>
               <div class="tr4 tr">
                 <img :src="item.picture ? `${item.picture}`: defaultPhoto" width="40px" height="40px" style="margin-left: 5px" @error="errorImg">
               </div>
+              <div class="tr4 tr">{{item.statusName}}</div>
             </div>
           </div>
         </div>
@@ -25,7 +27,7 @@
 </template>
 <script>
 
-import { getStaffListPage, hikPic } from '@/api/person'
+import {getStaffListPage, getStaffOnList, hikPic} from '@/api/person'
 import { repostSocket } from '@/api/common';
 import { getDate } from '@/utils/calendarUtil'
 
@@ -43,7 +45,7 @@
       tableList: [],
       tableListSize: 0,
       componentTimer: null,
-      visibleSize: 5, // 容器内可视最大完整行数
+      visibleSize: 8, // 容器内可视最大完整行数
       lineHeight: 45, // 每行的实际高度（包含margin-top/bottom,border等）
       componentTimerInterval: 3600000, //  刷新数据的时间间隔
       tableTimerInterval: 50 //  向上滚动 1px 所需要的时间，越小越快，推荐值 100
@@ -51,7 +53,7 @@
   },
 
   // 如果没有父元素传值，将watch内的内容搬至mounted中即可
-  props: ["activeFactoryId"],
+  props: ['activeFactoryId'],
   watch: {
     activeFactoryId(val, oldVal) {
       clearInterval(this.componentTimer)
@@ -70,6 +72,8 @@
   methods: {
     JumpDevice(item) {
       const params = {
+        personName: item.staffName,
+        staffCode: item.staffCode,
         facePicUrl: item.picture, // 图片url
         startTime: getDate(-31, 'SECOND'), // 开始时间
         endTime: getDate(0, 'SECOND'), // 结束时间
@@ -94,51 +98,32 @@
         message: this.wallList
       }
       repostSocket(params).then(response => {
-        if (response.code === 200) {
-        }
+        if (response.code === 200) {}
       })
     },
     fetchData() {
       const params = {
-        staffType: '2',
+        // staffType: '2',
         offset: 1,
-        limit: 50,
-        keywords: '',
-        cardNum: '',
-        phone: ''
+        limit: 200
       }
-      getStaffListPage(params).then(response => {
+      getStaffOnList(params).then(response => {
         if (response.code === 200) {
           this.tableList = response.data.rows
+          // this.tableListSize = response.data.total
           this.tableActionFun()
         }
       })
-      // this.tableList = [
-      //   {
-      //     id: '',
-      //     drawNo: 'YQ-001',
-      //     levelName: '一般',
-      //     description: '保安脱岗',
-      //     status: '0',
-      //     statusName: '未解决',
-      //     typeName: '临时事件',
-      //     devName: '视频监控摄像机5',
-      //     positionName: '一期主楼',
-      //     areaName: '3F',
-      //     isKeyAreaName: '否',
-      //     detailLocation: '详细位置',
-      //     happenTime: '2022-05-06 21:55:00'
-      //   }
-      // ]
     },
     tableActionFun() {
       this.tableListSize = this.tableList.length
       if (this.tableListSize > this.visibleSize) {
         this.tableList = this.tableList.concat(this.tableList)
         this.tableTimerFun()
-      } else {
-        this.fillTableList()
       }
+      // else {
+      //   this.fillTableList()
+      // }
     },
     //  当数据过少时，不触发自动轮播事件，并填充没有数据的行，参数根据实际情况修改即可
     fillTableList() {
@@ -230,7 +215,7 @@
 }
 .table_main_body {
   width: 100%;
-  height: 200px;
+  height: calc(40vh - 140px);
   overflow: hidden;
   position: relative;
   margin-top: 5px;
diff --git a/src/views/popup/components/staffLine1.vue b/src/views/popup/components/staffLine1.vue
index d3b0a95..d3cd04b 100644
--- a/src/views/popup/components/staffLine1.vue
+++ b/src/views/popup/components/staffLine1.vue
@@ -12,8 +12,8 @@
 </template>
 
 <script>
-import { multiScoreCommute } from '@/api/pop';
-import * as echarts from "echarts";
+import { multiScoreCommute } from '@/api/pop'
+import * as echarts from 'echarts'
 export default {
   name: 'StaffLine1',
   data() {
diff --git a/src/views/popup/components/visitBar.vue b/src/views/popup/components/visitBar.vue
index 1726d20..4f35e21 100644
--- a/src/views/popup/components/visitBar.vue
+++ b/src/views/popup/components/visitBar.vue
@@ -7,7 +7,7 @@
 import * as echarts from 'echarts';
 
 export default {
-  name: 'AreaBar1',
+  name: 'VisitBar',
   data() {
     return {
       isShow: true,
diff --git a/src/views/popup/floor.vue b/src/views/popup/floor.vue
index 6342d5a..8052ae4 100644
--- a/src/views/popup/floor.vue
+++ b/src/views/popup/floor.vue
@@ -107,8 +107,7 @@
         message: 'show'
       }
       repostSocket(params).then(response => {
-        if (response.code === 200) {
-        }
+        if (response.code === 200) {}
       })
     }
   }
diff --git a/src/views/popup/left.vue b/src/views/popup/left.vue
index d35b6b2..dab745c 100644
--- a/src/views/popup/left.vue
+++ b/src/views/popup/left.vue
@@ -1,67 +1,75 @@
 <template>
   <div class="left">
-    <div class="block" style="justify-content: center;height: 29%;padding-top: 10px">
-      <div class="item">
-        <el-image :src="require('@/assets/popup/人员.png')" class="base-map-image" mode="fill" />
-        <div style="color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;"> 一期主楼、录制楼</div>
-        <div class="num">{{list["0"]}}<span class="unit">人</span></div>
+    <div class="block" style="height: 270px;">
+      <div style="display: flex;flex-direction: row;justify-content: center;padding-top: 10px;height: 70px">
+        <div class="item">
+          <el-image :src="require('@/assets/popup/cam.png')" class="base-map-image" mode="fill" />
+          <div class="item-title">摄像机</div>
+          <div class="num"><span style="color: #08f102;text-shadow: 0 0 5px #08f102;">{{cam.on}}</span> / {{cam.all}}</div>
+        </div>
+        <div class="item">
+          <el-image :src="require('@/assets/popup/闸机.png')" class="base-map-image" mode="fill" />
+          <div class="item-title">闸机</div>
+          <div class="num"><span style="color: #08f102;text-shadow: 0 0 5px #08f102;">{{door.on}}</span> / {{door.all}}</div>
+        </div>
       </div>
-      <div class="item">
-        <el-image :src="require('@/assets/popup/人员.png')" class="base-map-image" mode="fill" />
-        <div style="color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;"> 二期主楼</div>
-        <div class="num">{{list["1"]}}<span class="unit">人</span></div>
-      </div>
-      <div class="item">
-        <el-image :src="require('@/assets/popup/访客.png')" class="base-map-image" mode="fill" />
-        <div style="color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;"> 今日访客量</div>
-        <div class="num">{{list["2"]}}<span class="unit">人</span></div>
-      </div>
-      <div class="item">
-        <el-image :src="require('@/assets/popup/今日事件.png')" class="base-map-image" mode="fill" />
-        <div style="color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;"> 今日事件数</div>
-        <div class="num">{{list["3"]}}<span class="unit">件</span></div>
-      </div>
-      <div class="item">
-        <el-image :src="require('@/assets/popup/今日处置.png')" class="base-map-image" mode="fill" />
-        <div style="color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;"> 事件处置数</div>
-        <div class="num">{{list["4"]}}<span class="unit">件</span></div>
-      </div>
-      <div class="item">
-        <el-image :src="require('@/assets/popup/离线.png')" class="base-map-image" mode="fill" />
-        <div style="color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;">设备离线率</div>
-        <div class="num">{{list["5"]}}<span class="unit"></span></div>
-      </div>
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title" style="margin: 0">摄像机状态分析</div>
+      <cam-bar style="width: 100%;height: 165px"/>
     </div>
-    <div class="block" style="flex-direction: column;">
-      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">员工通勤安防系数组件</div>
-      <staff-line1 style="flex:1;"/>
+    <div class="block" style="height: 250px;">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title" style="margin: 5px 0">闸机控制</div>
+      <door-list style="width: 100%;height: 250px;margin-top: -34px"/>
     </div>
-    <div class="block" style="flex-direction: column;">
-      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">重点区域防控系数组件</div>
-      <area-bar1 style="flex: 1"/>
+    <div class="block" style="height: 500px;">
+      <div style="display: flex;flex-direction: row;justify-content: center;height: 50px">
+        <el-tooltip class="item" effect="dark" :content="`进入人数${tips['1进入人数']}，离开人数${tips['1离开人数']}`" placement="bottom">
+          <div class="item">
+            <el-image :src="require('@/assets/popup/人员.png')" class="base-map-image" mode="fill" style="margin-top: 10px"/>
+            <div class="item-title"> 一期主楼、录制楼</div>
+            <div class="num" style="margin-top: -15px">{{tips["1"]}}<span class="unit">人</span></div>
+          </div>
+        </el-tooltip>
+        <el-tooltip class="item" effect="dark" :content="`进入人数${tips['2进入人数']}，离开人数${tips['2离开人数']}`" placement="bottom">
+          <div class="item">
+            <el-image :src="require('@/assets/popup/人员.png')" class="base-map-image" mode="fill" style="margin-top: 10px;margin-left: -20px"/>
+            <div class="item-title"> 二期主楼 </div>
+            <div class="num" style="margin-top: -15px">{{tips["2"]}}<span class="unit">人</span></div>
+          </div>
+        </el-tooltip>
+      </div>
+      <inout-list style="width: 100%;height: 350px;margin-top: 10px"/>
     </div>
   </div>
 </template>
 
 <script>
-import StaffLine1 from '@/views/popup/components/staffLine1'
-import AreaBar1 from '@/views/popup/components/areaBar1'
-import { getTodayNumber, getPeopleNumber, getDeviceNumber, offlineRate, eventNum } from '@/api/pop'
+import { buildPeopleNumber, deviceStatistics, getPeopleNumber } from '@/api/pop'
+import CamBar from '@/views/popup/components/camBar'
+import DoorList from '@/views/popup/components/doorList'
+import InoutList from '@/views/popup/components/inoutList'
+
 export default {
   name: 'Left',
-  components: { AreaBar1, StaffLine1 },
+  components: { InoutList, DoorList, CamBar },
   data() {
     return {
       timer: null,
       titleImg: require('@/assets/popup/title.png'), // 背景图片
-      titleAll: require('@/assets/popup/title-all.png'),// 背景图片
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      cam: { on: '', all: '' },
+      door: { on: '', all: '' },
       list: {
         '0': '*',
         '1': '*',
-        '2': '*',
-        '3': '*',
-        '4': '*',
-        '5': '*'
+        '2': '*'
+      },
+      tips: {
+        '1': 0,
+        '2': 0,
+        '2进入人数': 0,
+        '1进入人数': 0,
+        '2离开人数': 0,
+        '1离开人数': 0
       }
     }
   },
@@ -73,59 +81,51 @@
     this.timer = setInterval(() => {
       this.initData()
     }, 60000)
+    this.initData()
   },
   methods: {
     initData() {
-      getPeopleNumber().then(response => {
+      deviceStatistics(2).then(response => {
         if (response.code === 200) {
-          this.list['0'] = response.data[1] + (response.data[3] ? response.data[3] : 0)
-          this.list['1'] = response.data[2]
+          this.cam.on = response.data.list.filter(item => item.status === '在线')[0].quantity
+          this.cam.all = response.data.total
         }
       })
-      getTodayNumber().then(response => {
+      deviceStatistics(1).then(response => {
         if (response.code === 200) {
-          this.list['2'] = response.data['今日访客量']
+          this.door.on = response.data.list.filter(item => item.status === '在线')[0].quantity
+          this.door.all = response.data.total
         }
       })
-      // getDeviceNumber().then(response => {
-      //   if (response.code === 200) {
-      //     // this.list['3'] = response.data['设备总数']
-      //     // this.list['4'] = response.data['设备在线率'].replace('%', '')
-      //   }
-      // })
-
-      offlineRate().then(response => {
+      buildPeopleNumber().then(response => {
         if (response.code === 200) {
-          this.list['5'] = response.data['设备离线率']
-        }
-      })
-      eventNum().then(response => {
-        if (response.code === 200) {
-          this.list['3'] = response.data['今日事件数']
-          this.list['4'] = response.data['今日事件处置数']
+          this.tips = response.data
         }
       })
     }
   }
 }
 </script>
-
 <style rel="stylesheet/scss" lang="scss" scoped>
-.left{
+.block{
   width: 100%;
+  height: 200px;
+  background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+  border-radius: 5px;
+  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+  border-color: rgba(0, 0, 0, .05);
+  margin-bottom: 5px;
+  flex-direction: column;
+}
+.left{
+  width: 500px;
   height: 100%;
   overflow: hidden;
-  .block{
-    height: 33%;
-    width: 500px;
-    display: flex;
-    flex-wrap: wrap;
-    background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
-    border-radius: 5px;
-    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
-    border-color: rgba(0, 0, 0, .05);
-    margin: 10px;
-  }
+  //background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+  //box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+  //border-color: rgba(0, 0, 0, .05);
+  margin: 10px 10px 0 10px;
+  border-radius: 5px;
   .title{
     text-shadow: 0 0 5px #d1ffff;
     width: 500px;
@@ -139,6 +139,7 @@
     padding-left: 30px;
     font-family: 黑体;
     letter-spacing: 1px;
+    z-index: 1;
   }
   .base-map-image{
     width: 45px;
@@ -151,15 +152,24 @@
     height: 80%;
   }
   .item{
-    width: 33%;
+    width: 50%;
     font-weight: bold;
     text-align: center;
-    font-size: 15px;
+    font-size: 16px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    .item-title{
+      color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;margin-left: 10px;
+      line-height: 40px;
+      vertical-align: middle;
+    }
     .num{
       text-shadow: 0 0 5px #ffb441;
       color: #ffb441;
-      font-size: 18px;
-      padding-top: 2px;
+      font-size: 20px;
+      width: 100%;
+      margin-top: -0px;
     }
     .unit{
       color: #B3F3F6;
diff --git a/src/views/popup/right.vue b/src/views/popup/right.vue
index 4571ea1..b139de4 100644
--- a/src/views/popup/right.vue
+++ b/src/views/popup/right.vue
@@ -1,64 +1,79 @@
 <template>
   <div class="right">
-    <div class="block" style="justify-content: center;height: 29%;">
-      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安全防护梯度指标组件</div>
-      <div class="item">
-        <el-image :src="require('@/assets/popup/safe.png')" class="base-map-image" mode="fill" />
-        <div class="item-text">
-          <div class="num">{{list["0"]}}<span class="unit">分</span></div>
-          <div style="color: #B3F3F6;">一期主楼</div>
+    <el-tooltip effect="dark" content="安防事件评分由安防事件影响（占比50%）、访客事件影响（占比30%）、各楼栋设备维修次数（占比10%）、各楼栋消防设备有效期（占比10%）" placement="bottom">
+      <div class="block" style="justify-content: center;height: 20%;padding-top: 30px">
+        <div class="item">
+          <el-image :src="require('@/assets/popup/safe.png')" class="base-map-image" mode="fill" />
+          <div class="item-text">
+            <div class="num">{{list["0"]}}<span class="unit">分</span></div>
+            <div style="color: #B3F3F6;">一期主楼</div>
+          </div>
+        </div>
+        <div class="item">
+          <el-image :src="require('@/assets/popup/safe.png')" class="base-map-image" mode="fill" />
+          <div class="item-text">
+            <div class="num">{{list["1"]}}<span class="unit">分</span></div>
+            <div style="color: #B3F3F6;">二期主楼</div>
+          </div>
+        </div>
+        <div class="item">
+          <el-image :src="require('@/assets/popup/safe.png')" class="base-map-image" mode="fill" />
+          <div class="item-text">
+            <div class="num">{{list["2"]}}<span class="unit">分</span></div>
+            <div style="color: #B3F3F6;">录制楼</div>
+          </div>
+        </div>
+        <div class="item">
+          <el-image :src="require('@/assets/popup/safe.png')" class="base-map-image" mode="fill" />
+          <div class="item-text">
+            <div class="num">{{list["3"]}}<span class="unit">分</span></div>
+            <div style="color: #B3F3F6;">1600演播厅</div>
+          </div>
         </div>
       </div>
-      <div class="item">
-        <el-image :src="require('@/assets/popup/safe.png')" class="base-map-image" mode="fill" />
+    </el-tooltip>
+    <div class="block" style="flex-direction: column;height: 40%;">
+      <div class="item" style="margin-bottom: 10px;margin-top: -10px;margin-left: 25%">
+        <el-image :src="require('@/assets/popup/baoan.png')" class="base-map-image" mode="fill" />
         <div class="item-text">
-          <div class="num">{{list["1"]}}<span class="unit">分</span></div>
-          <div style="color: #B3F3F6;">二期主楼</div>
+          <div class="num"><span style="color: #08f102;text-shadow: 0 0 5px #08f102;">{{baoan.on}}</span> / {{baoan.all}}<span class="unit"> 位</span></div>
+          <div style="color: #B3F3F6;">安保人员总数</div>
         </div>
       </div>
-      <div class="item">
-        <el-image :src="require('@/assets/popup/safe.png')" class="base-map-image" mode="fill" />
-        <div class="item-text">
-          <div class="num">{{list["2"]}}<span class="unit">分</span></div>
-          <div style="color: #B3F3F6;">录制楼</div>
-        </div>
-      </div>
-      <div class="item">
-        <el-image :src="require('@/assets/popup/safe.png')" class="base-map-image" mode="fill" />
-        <div class="item-text">
-          <div class="num">{{list["3"]}}<span class="unit">分</span></div>
-          <div style="color: #B3F3F6;">1600演播厅</div>
-        </div>
-      </div>
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title" style="width: 100%;margin-bottom: 10px">安保人员列表</div>
+      <person-table style="flex:1;height: calc(100% - 120px)"/>
     </div>
-    <div class="block" style="flex-direction: column;">
-      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安防事件频次因数组件</div>
-          <div id="safe-star" class="star"/>
-<!--      <div :style="{backgroundImage:'url('+line+')', flex: 1}" class="case-bg">-->
-<!--        <div :style="{backgroundImage:'url('+ ball +')'}" class="ball-bg">-->
-<!--          <div class="num case-text">{{num}}<span class="unit">次</span></div>-->
-<!--          <div :style="{backgroundImage:'url('+ bottom +')'}" class="bottom-bg"/>-->
-<!--        </div>-->
-<!--      </div>-->
-    </div>
-    <div class="block" style="flex-direction: column;">
-      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">巡视人员分布因数组件</div>
-      <person-table style="flex:1;"/>
-<!--      <power-line1 style="flex:1;"/>-->
+    <div class="block" style="justify-content: center;height: 40%;align-content: flex-start;">
+      <div class="item">
+        <el-image :src="require('@/assets/popup/visitor.png')" class="base-map-image" mode="fill" />
+        <div class="item-text">
+          <div class="num"> {{visitor.in}}<span class="unit"> 位</span></div>
+          <div style="color: #B3F3F6;">今日访客进入</div>
+        </div>
+      </div>
+      <div class="item">
+        <el-image :src="require('@/assets/popup/visitor.png')" class="base-map-image" mode="fill" />
+        <div class="item-text">
+          <div class="num">{{visitor.out}}<span class="unit"> 位</span></div>
+          <div style="color: #B3F3F6;">今日访客离开</div>
+        </div>
+      </div>
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title" style="width: 100%;margin: 10px 0">今日访客访问列表</div>
+      <visitor-table style="flex:1;"/>
     </div>
   </div>
 </template>
 
 <script>
 
-// import PowerLine1 from '@/views/popup/components/powerLine1'
-import { securityScore, securityFrequency, categoryStatistics } from '@/api/pop'
+import { securityScore, categoryStatistics, baoanStatistics, visitorStatistics } from '@/api/pop'
 import * as echarts from 'echarts'
-import PersonTable from "@/views/popup/components/personTable";
+import PersonTable from '@/views/popup/components/personTable'
+import VisitorTable from '@/views/popup/components/visitorTable'
 
 export default {
   name: 'Right',
-  components: {PersonTable },
+  components: { PersonTable, VisitorTable },
   data() {
     return {
       timer: null,
@@ -72,6 +87,14 @@
         '2': '*',
         '3': '*'
       },
+      baoan: {
+        on: 0,
+        all: 0
+      },
+      visitor: {
+        in: 0,
+        out: 0
+      },
       safeData: [],
       num: '*'
     }
@@ -85,151 +108,55 @@
     this.timer = null
   },
   methods: {
-    initStar() {
-      var myChart = echarts.init(document.getElementById('safe-star'))
-      const that = this
-      const option = {
-        tooltip: {
-          trigger: 'item'
-        },
-        legend: {
-          right: 20,
-          top: 10,
-          data: ['事件频次'],
-          itemStyle: {
-            color: '#d5f6fa'
-          },
-          textStyle: {
-            color: '#cce9ff',
-            fontWeight: 'bold',
-            fontSize: 14
-          }
-        },
-        radar: [{
-          indicator: that.safeData.map((item) => {
-            return { text: item.categoryLevelName, max: that.safeData[0].quantity * 1.2 }
-          }),
-          center: ['50%', '55%'],
-          splitArea: {
-            areaStyle: {
-              color: ['#77EADF99', '#26C3BE99', '#64AFE999', '#428BD499'],
-              shadowColor: 'rgba(0, 0, 0, 0.2)',
-              shadowBlur: 10
-            }
-          },
-          name: {
-            color: '#d5f6fa',
-            fontWeight: 'bold',
-            fontSize: 14
-          }
-        }],
-        series: [{
-          type: 'radar',
-          symbol: 'none',
-          symbolSize: 4,
-          lineStyle: {
-            width: 3,
-            color: 'rgb(12,228,235)'
-          },
-          areaStyle: {
-            color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
-              {
-                color: 'rgb(8,91,121,0.8)',
-                offset: 0
-              },
-              {
-                color: 'rgb(12,228,235,0.8)',
-                offset: 1
-              }
-            ])
-          },
-          emphasis: {
-            areaStyle: {
-              color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
-                {
-                  color: 'rgb(8,91,121,0.5)',
-                  offset: 0
-                },
-                {
-                  color: 'rgb(12,228,235,0.5)',
-                  offset: 1
-                }
-              ])
-            }
-          },
-          data: [{
-            value: that.safeData.map(item => item.quantity),
-            name: '事件频次',
-            symbol: 'rect',
-            symbolSize: 5,
-            lineStyle: {
-              type: 'dashed'
-            },
-            label: {
-              show: true,
-              fontSize: 14,
-              fontWeight: 'bold',
-              color: '#ff9933',
-              formatter: function (params) {
-                return params.value
-              }
-            }
-          }]
-        }]
-      }
-      myChart.clear()
-      myChart.setOption(option, true)
-      window.addEventListener('resize', function() {
-        myChart.resize()
-      })
-    },
     initData() {
       this.timer = setInterval(() => {
         securityScore().then(response => {
           if (response.code === 200) {
-            this.list['0'] = response.data['一期主楼']
-            this.list['1'] = response.data['二期主楼']
-            this.list['2'] = response.data['录制楼']
-            this.list['3'] = response.data['1600演播厅']
+            this.list['0'] = response.data['一期主楼'].toFixed(2)
+            this.list['1'] = response.data['二期主楼'].toFixed(2)
+            this.list['2'] = response.data['录制楼'].toFixed(2)
+            this.list['3'] = response.data['1600演播厅'].toFixed(2)
           }
         })
-      }, 10000)
-      categoryStatistics().then(response => {
-        if (response.code === 200) {
-          this.safeData = response.data
-          this.safeData.length = 5
-          this.initStar()
-        }
-      })
-      // securityFrequency().then(response => {
-      //   if (response.code === 200) {
-      //     this.num = response.data['quantity']
-      //   }
-      // })
+        baoanStatistics().then(response => {
+          if (response.code === 200) {
+            this.baoan = response.data
+          }
+        })
+        visitorStatistics().then(response => {
+          if (response.code === 200) {
+            this.visitor = response.data
+          }
+        })
+      }, 5000)
     }
   }
 }
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
+.el-tooltip__popper{
+  margin-top: 0px !important;
+}
 .star {
   width: 100%;
-  height: 85%;
+  height: calc(100% - 40px);
 }
 .right{
   width: 100%;
   height: 100%;
   overflow: hidden;
   .block{
-    height: 33%;
-    width: 500px;
-    display: flex;
-    flex-wrap: wrap;
     background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
     border-radius: 5px;
     box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
     border-color: rgba(0, 0, 0, .05);
+    height: 33%;
+    width: 500px;
+    display: flex;
+    flex-wrap: wrap;
     margin: 10px;
+    padding-top: 20px;
   }
   .title{
     text-shadow: 0 0 5px #d1ffff;
diff --git a/src/views/popup/top.vue b/src/views/popup/top.vue
index 7850d83..d86f120 100644
--- a/src/views/popup/top.vue
+++ b/src/views/popup/top.vue
@@ -3,6 +3,14 @@
     <div :style="{backgroundImage:'url('+top+')'}" class="top"/>
     <div class="title">安防综合管理平台</div>
     <clock class="clock"/>
+    <div style="position: absolute;top:5px;left:450px;display: flex">
+      <el-button type="primary" circle style="width: 28px;height: 28px;padding-top: 4px;padding-left: 4px;" @click="shj('1')">
+        <el-image :src="require('@/assets/images/1.png')" mode="fill" style="width: 20px;height: 20px;" />
+      </el-button>
+      <el-button type="primary" circle style="width: 28px;height: 28px;margin-left: 10px;padding-top: 4px;padding-left: 4px;" @click="shj('2')">
+        <el-image :src="require('@/assets/images/2.png')" mode="fill" style="width: 20px;height: 20px;" />
+      </el-button>
+    </div>
     <div class="sys">
       <svg-icon icon-class="next-circle"/>
     </div>
@@ -10,7 +18,8 @@
 </template>
 
 <script>
-import Clock from '@/components/Clock';
+import Clock from '@/components/Clock'
+import { repostSocket } from '@/api/common'
 export default {
   name: 'Top',
   components: { Clock },
@@ -20,6 +29,16 @@
     }
   },
   methods: {
+    shj(num) {
+      const params = {
+        type: 'shj-page',
+        message: num
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+        }
+      })
+    }
   }
 }
 </script>
diff --git a/src/views/video/history.vue b/src/views/video/history.vue
index dbf02b0..f2f2430 100644
--- a/src/views/video/history.vue
+++ b/src/views/video/history.vue
@@ -6,37 +6,23 @@
       </el-col>
     </div>
     <el-col :span="18">
-      <el-card class="box-card" style="margin-top: 14px; height: calc(100vh - 170px);">
-        <div style="z-index: 9999;margin-left: 20px">
-          <el-form ref="dataForm" :inline="true" :model="listQuery" :rules="rules" class="form-container">
-            <el-form-item class="selectForm-container-item" prop="startTime">
-              <el-date-picker
-                v-model="timeRange"
-                type="datetimerange"
-                range-separator="至"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                start-placeholder="搜索起始时间"
-                end-placeholder="搜索截止时间"
-                arrow-control="true"
-                @focus="dateClick"
-                @change="dateSelected"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <!--<el-button class="filter-item" type="primary" @click="live">实时预览</el-button>-->
-          </el-form>
-        </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 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"/>-->
-          <!--</el-tab-pane>-->
-          <!--</el-tabs>-->
-        </div>
-      </el-card>
+      <div style="z-index: 9999;margin-left: 10px;margin-top: 25px">
+        <el-date-picker
+          v-model="timeRange"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="搜索起始时间"
+          end-placeholder="搜索截止时间"
+          arrow-control="true"
+          :clearable="false"
+          @focus="dateClick"
+          @blur="dateSelected"
+          @change="dateSelected"/>
+      </div>
+      <div id="tabDiv">
+        <iframe name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html?wmode=opaque"/>
+      </div>
     </el-col>
   </div>
 </template>
@@ -59,8 +45,6 @@
       }
     }
     return {
-      activeName: 'hk',
-      videoShow: true,
       timeRange: [],
       listQuery: {
         indexCode: '',
@@ -90,41 +74,24 @@
     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',document.getElementById('tabDiv').getBoundingClientRect().left + 20)
     }, 100)
   },
+  beforeDestroy() {
+    window.frames['playHK'].destoryPlugin()
+  },
   methods: {
-    handleClick(tab, event) {
-      if (tab.name === 'hk') {
-        this.activeName = 'hk'
-        console.log('hk')
-        window.frames['playHK'].initPlugin('back',document.getElementById('tabDiv').getBoundingClientRect().left + 20)
-      } else if (tab.name === 'nvr') {
-        this.activeName = 'nvr'
-        // window.frames['playNVR'].stopPlayReal(null)
-      }
-    },
     search() {
       window.frames['playHK'].show()
-      if (this.listQuery. indexCode === '') {
+      if (this.listQuery.indexCode === '') {
         this.$message.warning('请先选中一个监控点')
         return
       }
-      this.videoShow = true
-      this.$refs['dataForm'].validate((valid) => {
-        if (valid) {
-          if (this.activeName === 'nvr') {
-            window.frames['playNVR'].search(0, this.listQuery.startTime, this.listQuery.endTime)
-          } else if (this.activeName === 'hk') {
-            console.log(this.listQuery. indexCode, this.listQuery.startTime, this.listQuery.endTime)
-            window.frames['playHK'].search(this.listQuery. indexCode, this.listQuery.startTime, this.listQuery.endTime)
-          }
-        }
-      })
+      if (this.timeRange !== []) {
+        window.frames['playHK'].search(this.listQuery.indexCode, this.listQuery.startTime, this.listQuery.endTime)
+      }
     },
     handleCameraClicked(camera) {
-      console.log(camera)
       if (typeof camera.indexCode === 'undefined' || camera.indexCode === '') {
         return false
       } else {
@@ -138,6 +105,7 @@
     },
     dateSelected() {
       window.frames['playHK'].show()
+      this.search()
     }
   }
 }
@@ -145,7 +113,7 @@
 
 <style scoped>
 .iframe-body{
-  height: calc(100vh - 250px);
+  height: calc(100vh - 200px);
   width: 100%;
   frameBorder: 0;
   scrolling: no;
@@ -153,6 +121,7 @@
   vspale: 0;
   z-index: -1;
   padding:0 !important;
+  margin-top: -10px;
 }
 .playWnd {
   margin: 10px 0 0 20px;
@@ -163,5 +132,7 @@
 }
 .video{
   background: white;
+  width: 100%;
+  height: calc(100vh - 80px);
 }
 </style>
diff --git a/src/views/video/monitor.vue b/src/views/video/monitor.vue
index 51f3cf7..d70d530 100644
--- a/src/views/video/monitor.vue
+++ b/src/views/video/monitor.vue
@@ -6,15 +6,7 @@
       </el-col>
       <el-col :span="18">
         <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"/>-->
           <iframe name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html"/>
-          <!--</el-tab-pane>-->
-          <!--<el-tab-pane label="NVR" name="nvr">-->
-          <!--<iframe v-if="activeName==='nvr'" name="playNVR" class="iframe-body" src="/static/webCtrl/nvr/demo-easy.html"/>-->
-          <!--</el-tab-pane>-->
-          <!--</el-tabs>-->
         </div>
       </el-col>
     </el-row>
@@ -29,38 +21,26 @@
   components: { VideoTree },
   data() {
     return {
-      activeName: 'hk',
       tabHeight: '',
       tabWidth: ''
     }
   },
   mounted() {
-    // console.log(document.getElementById("tabDiv").getBoundingClientRect().left)
     setTimeout(() => {
       window.frames['playHK'].initPlugin('real', document.getElementById('tabDiv').getBoundingClientRect().left + 20, 110)
     }, 100)
   },
+  beforeDestroy() {
+    window.frames['playHK'].destoryPlugin()
+  },
   methods: {
-    handleClick(tab, event) {
-      if (tab.name === 'hk') {
-        this.activeName = 'hk'
-        window.frames['playHK'].initPlugin('real', document.getElementById('tabDiv').getBoundingClientRect().left + 20)
-      } else if (tab.name === 'nvr') {
-        this.activeName = 'nvr'
-        window.frames['playNVR'].stopPlayReal(null)
-      }
-    },
     handleCameraClicked(camera) {
       console.log(camera)
       if (typeof camera.indexCode === 'undefined' || camera.indexCode === '') {
         console.log('monitorPoint is null')
         return false
       } else {
-        if (this.activeName === 'hk') {
-          window.frames['playHK'].play(camera.indexCode)
-        } else if (this.activeName === 'nvr') {
-          window.frames['playNVR'].startPlayReal()
-        }
+        window.frames['playHK'].play(camera.indexCode)
       }
     }
   }
@@ -69,16 +49,17 @@
 
 <style scoped>
   .iframe-body{
-    height: calc(100vh - 180px);
+    height: calc(100vh - 130px);
     width: 100%;
     position: relative;
     top: 0px;
     left: 0px;
-    /*frameBorder: 0;*/
     scrolling: no;
     border: 1px;
   }
   .video{
     background: white;
+    width: 100%;
+    height: calc(100vh - 80px);
   }
 </style>

diff --git a/public/static/webCtrl/hk/demo_embedded_for_iframe.html b/public/static/webCtrl/hk/demo_embedded_for_iframe.html
index 3a0be10..5c18f74 100644
--- a/public/static/webCtrl/hk/demo_embedded_for_iframe.html
+++ b/public/static/webCtrl/hk/demo_embedded_for_iframe.html
@@ -107,6 +107,13 @@
         }
     });
 
+    function destoryPlugin() {
+      if (oWebControl != null){
+        oWebControl.JS_HideWnd();  // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
+        oWebControl.JS_Disconnect().then(function(){}, function() {});
+      }
+    }
+
     function hide(){
       oWebControl.JS_HideWnd();
     };
diff --git a/src/App.vue b/src/App.vue
index d9046c1..b8c5c1a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="app" v-resize="windowResize">
+  <div id="app" style="overflow-y: hidden" v-resize="windowResize">
     <router-view />
   </div>
 </template>
diff --git a/src/api/device.js b/src/api/device.js
index 0ba70ff..8d6c46b 100644
--- a/src/api/device.js
+++ b/src/api/device.js
@@ -159,3 +159,21 @@
     data
   })
 }
+
+export function getSwitchStatus(data) {
+  return request({
+    url: '/cockpit/gateLinkage/switchStatus',
+    method: 'get'
+  })
+}
+
+export function gateLinkageSwitch(controlSwitch) {
+  return request({
+    url: '/cockpit/gateLinkage/switch',
+    method: 'get',
+    params: {
+      controlSwitch
+    }
+  })
+}
+
diff --git a/src/api/person.js b/src/api/person.js
index 8a79c27..0c2a0ff 100644
--- a/src/api/person.js
+++ b/src/api/person.js
@@ -21,6 +21,14 @@
   })
 }
 
+export function getStaffOnList(params) {
+  return request({
+    url: '/cockpit/securityStaff/onList',
+    method: 'GET',
+    params
+  })
+}
+
 export function addStaff(data) {
   return request({
     url: 'staffInfo/add',
diff --git a/src/api/pop.js b/src/api/pop.js
index 01ddde7..6fa7381 100644
--- a/src/api/pop.js
+++ b/src/api/pop.js
@@ -72,6 +72,39 @@
   })
 }
 
+export function baoanStatistics() {
+  return request({
+    url: '/cockpit/securityStaff/statistics',
+    method: 'get',
+    data: {}
+  })
+}
+
+export function visitorStatistics() {
+  return request({
+    url: 'cockpit/visitor/statistics',
+    method: 'get',
+    data: {}
+  })
+}
+
+export function caseTodayStatistics() {
+  return request({
+    url: 'cockpit/case/todayStatistics',
+    method: 'get',
+    data: {}
+  })
+}
+
+export function casePieStatistics(params) {
+  return request({
+    url: 'cockpit/caseType/statisticsByTime',
+    method: 'get',
+    data: params,
+    params
+  })
+}
+
 // 安防事件频次因数组件
 export function securityFrequency() {
   return request({
@@ -158,3 +191,27 @@
     method: 'get'
   })
 }
+
+export function cameraTypeStatistics() {
+  return request({
+    url: '/cockpit/camera/typeStatistics',
+    method: 'get'
+  })
+}
+
+export function deviceStatistics(devType) {
+  return request({
+    url: '/cockpit/device/statistics',
+    method: 'post',
+    data: {
+      devType
+    }
+  })
+}
+
+export function buildPeopleNumber() {
+  return request({
+    url: '/cockpit/build/peopleNumber',
+    method: 'get'
+  })
+}
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index df71207..33d701a 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -280,37 +280,37 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  .table{
-    margin-bottom: 20px;
-  }
-  .pagination-container{
-    padding-bottom: 50px;
-  }
-  .table-title{
-    /*background-color:rgba(243, 243, 243, 1);*/
-    background-color:#fff;
-    .title-header{
-      font-size: 15px;
-      i{
-        margin-left: 10px;
-        margin-right: 5px;
-      }
-      i:focus{
-        outline: none;
-      }
+.table{
+  margin-bottom: 20px;
+}
+.pagination-container{
+  padding-bottom: 50px;
+}
+.table-title{
+  /*background-color:rgba(243, 243, 243, 1);*/
+  background-color:#fff;
+  .title-header{
+    font-size: 15px;
+    i{
+      margin-left: 10px;
+      margin-right: 5px;
+    }
+    i:focus{
+      outline: none;
     }
   }
-  .edit_btns{
-    padding-top:7px;
-    padding-right:3px;
-    text-align: right;
+}
+.edit_btns{
+  padding-top:7px;
+  padding-right:3px;
+  text-align: right;
+}
+.popper-div{
+  line-height: 1.5;
+  .popper-btns{
+    margin-top:10px;
   }
-  .popper-div{
-    line-height: 1.5;
-    .popper-btns{
-      margin-top:10px;
-    }
-  }
+}
 </style>
 
 <style>
diff --git a/src/router/modules/menu.js b/src/router/modules/menu.js
index 28ecc52..447517e 100644
--- a/src/router/modules/menu.js
+++ b/src/router/modules/menu.js
@@ -8,7 +8,7 @@
     redirect: '/loginBoard',
     meta: {
       title: '主页',
-      permission: ['/loginBoard'],
+      // permission: ['/loginBoard'],
       icon: '' // 图标
     },
     children: [
@@ -16,7 +16,7 @@
         path: '/loginBoard',
         name: 'LoginBoard',
         component: () => import('@/views/backstage/loginBoard'),
-        meta: { title: '主页', icon: '', permission: ['/loginBoard'] }
+        meta: { title: '主页', icon: '' }
       }
     ]
   },
diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss
index 0d1614b..f39542e 100644
--- a/src/styles/element-ui.scss
+++ b/src/styles/element-ui.scss
@@ -74,3 +74,6 @@
   height:48px;
   line-height:48px;
 }
+.el-time-panel {
+  margin-left: -20px !important;
+}
diff --git a/src/utils/request.js b/src/utils/request.js
index 02dcee1..a81c17f 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -39,19 +39,21 @@
     } else if (res.code !== 200) {
       // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
       if (res.code === 401 || res.code === 50012 || res.code === 50014) {
-        MessageBox.confirm(
-          '你已被登出，可以取消继续留在该页面，或者重新登录',
-          '确定登出',
-          {
-            confirmButtonText: '重新登录',
-            cancelButtonText: '取消',
-            type: 'warning'
-          }
-        ).then(() => {
-          store.dispatch('FedLogOut').then(() => {
-            location.reload() // 为了重新实例化vue-router对象 避免bug
+        if (!window.location.href.endsWith('right') && !window.location.href.endsWith('left') && !window.location.href.endsWith('bottom')) {
+          MessageBox.confirm(
+            '你已被登出，可以取消继续留在该页面，或者重新登录',
+            '确定登出',
+            {
+              confirmButtonText: '重新登录',
+              cancelButtonText: '取消',
+              type: 'warning'
+            }
+          ).then(() => {
+            store.dispatch('FedLogOut').then(() => {
+              location.reload() // 为了重新实例化vue-router对象 避免bug
+            })
           })
-        })
+        }
       } else {
         Message({
           showClose: true,
diff --git a/src/views/common/trailDialog.vue b/src/views/common/trailDialog.vue
index 04a83eb..fd90c34 100644
--- a/src/views/common/trailDialog.vue
+++ b/src/views/common/trailDialog.vue
@@ -52,6 +52,8 @@
         75: '75%'
       },
       listQuery: {
+        staffCode: '',
+        personName: '',
         facePicUrl: '',
         startTime: '',
         endTime: '',
@@ -81,11 +83,14 @@
   },
   methods: {
     // 初始化对话框
-    initDialog: function(picture = null, name) {
-      this.textMap = '轨迹追踪 — ' + name
+    initDialog: function(row) {
+      this.textMap = '轨迹追踪 — ' + row.staffName
+      this.list = []
       this.clearInput()
       this.dialogFormVisible = true
-      this.listQuery.facePicUrl = picture
+      this.listQuery.facePicUrl = row.picture
+      this.listQuery.staffCode = row.staffCode
+      this.listQuery.personName = row.staffName
       this.fetchData()
     },
     fetchData() {
diff --git a/src/views/person/staffList.vue b/src/views/person/staffList.vue
index ce8643e..95acc5c 100644
--- a/src/views/person/staffList.vue
+++ b/src/views/person/staffList.vue
@@ -332,7 +332,7 @@
     },
     trail(row) {
       this.dialogFormVisible1 = true
-      this.$refs.trailDialog.initDialog(row.picture, row.staffName)
+      this.$refs.trailDialog.initDialog(row)
     },
     // 打开详情对话框
     detail(row) {
diff --git a/src/views/popup/board.vue b/src/views/popup/board.vue
index eb229cc..0f47c22 100644
--- a/src/views/popup/board.vue
+++ b/src/views/popup/board.vue
@@ -4,7 +4,7 @@
       人员轨迹追踪
       <svg-icon v-if="list.length > 0" icon-class="pop-cross" class="close-icon" @click="close" />
     </div>
-    <el-form ref="ruleForm" :model="listQuery" :rules="rules" label-width="100px">
+    <el-form ref="ruleForm" :model="listQuery" :rules="rules" label-width="80px">
       <el-row :gutter="20">
         <el-col :span="12" class="form-item-person-info">
           <el-form-item label="人员信息" prop="personName" style="position:relative">
@@ -20,7 +20,8 @@
               size="small"
               placeholder="请输入人员姓名"
               :popper-append-to-body="false"
-              @change="handlePerson">
+              @change="handlePerson"
+            >
               <el-option
                 v-for="item in personNameList"
                 :key="item.staffCode"
@@ -41,7 +42,7 @@
               end-placeholder="终止时间"
               size="small"
               :clearable="false"
-              style="width:98%"
+              style="width:98%;"
             />
           </el-form-item>
         </el-col>
@@ -53,7 +54,7 @@
           </el-form-item>
         </el-col>
         <el-col :span="6">
-          <el-form-item label="最小相似度" prop="minSimilarity">
+          <el-form-item label="最小相似度" prop="minSimilarity" label-width="100px">
             <el-input v-model="listQuery.minSimilarity" size="small" placeholder="区间50-100" />
           </el-form-item>
         </el-col>
@@ -81,7 +82,7 @@
             <div class="title text-over">
               {{ child.positionName ? child.positionName : '' }}
             </div>
-            <div class="desc text-over" :title="child.devName">
+            <div class="desc text-over" :title="child.devName" style="white-space: normal;word-wrap: break-word;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2; ">
               {{ child.devName ? child.devName : '' }}
             </div>
             <div class="date" style="width:145px">
@@ -110,6 +111,7 @@
     return {
       selectLoading: false,
       personName: '',
+      staffCode: '',
       point: [],
       listQuery: {
         facePicUrl: '', // 图片url
@@ -260,6 +262,7 @@
       this.personNameList.map(item => {
         if (item.staffCode === person) {
           this.personName = item.personName
+          this.staffCode = item.staffCode
           // this.listQuery.personName = item.personName
           this.listQuery.facePicUrl = item.personPicture
           this.listQuery.gender = item.gender
@@ -299,7 +302,11 @@
         spinner: 'el-icon-loading',
         background: 'rgba(0, 0, 0, 0.7)'
       })
-      const postData = Object.assign(this.listQuery, { 'personName': this.personName })
+      const postData = Object.assign(this.listQuery,
+        {
+          'personName': this.personName,
+          'staffCode': this.staffCode
+        })
       console.log(postData)
       hikPic(postData).then(response => {
         loading.close()
@@ -325,6 +332,7 @@
       this.listQuery.minSimilarity = '50'
       this.listQuery.timeRange = ['', '']
       this.personName = ''
+      this.staffCode = ''
       this.list = []
     },
     // 轨迹上墙
@@ -359,299 +367,299 @@
   }
 }
 </script>
-
 <style rel="stylesheet/scss" lang="scss" scoped>
-  ::v-deep(.el-input__inner){
-    border:1px solid #40C3F1 !important;
-    background: transparent !important;
-    color:#fff !important;
+::v-deep(.el-input__inner){
+  border:1px solid #40C3F1 !important;
+  background: transparent !important;
+  color:#fff !important;
+}
+::v-deep(.el-range-input){
+  background: transparent !important;
+  color:#fff !important;
+}
+::v-deep(.el-form-item__label){
+  color:#f1f1f1 !important;
+  font-weight: 400 !important;
+}
+::v-deep(.el-range-separator){
+  color:#f1f1f1 !important;
+  font-weight: 400 !important;
+  color:#fff !important;
+}
+::v-deep(.el-select .el-select-dropdown__wrap) {
+  max-height: 350px !important;
+  overflow-y: auto !important;
+}
+
+.form-item-person-info:hover{
+  cursor: text !important;
+}
+.el-form-item__content:hover{
+  cursor: text !important;
+}
+::v-deep(.form-item-person-info .el-input__inner):hover{
+  cursor: text !important;
+}
+::-webkit-scrollbar {
+  z-index: 11;
+  width: 6px;
+}
+::-webkit-scrollbar-track,
+::-webkit-scrollbar-corner {
+  border-radius: 5px;
+  background: #fff;
+}
+::-webkit-scrollbar-thumb {
+  border-radius: 5px; // 滚动条
+  width: 6px;
+  background-color: #ccc;
+  :hover {
+    background-color: #ccc;
   }
-  ::v-deep(.el-range-input){
-    background: transparent !important;
-    color:#fff !important;
-  }
-  ::v-deep(.el-form-item__label){
-    color:#f1f1f1 !important;
-    font-weight: 400 !important;
-  }
-  ::v-deep(.el-range-separator){
-    color:#f1f1f1 !important;
-    font-weight: 400 !important;
-    color:#fff !important;
-  }
-  ::v-deep(.el-select .el-select-dropdown__wrap) {
-    max-height: 350px !important;
-    overflow-y: auto !important;
-  }
-  .form-item-person-info:hover{
-    cursor: text !important;
-  }
-  .el-form-item__content:hover{
-    cursor: text !important;
-  }
-  ::v-deep(.form-item-person-info .el-input__inner):hover{
-    cursor: text !important;
-  }
-  ::-webkit-scrollbar {
-      z-index: 11;
-      width: 6px;
-    }
-    ::-webkit-scrollbar-track,
-    ::-webkit-scrollbar-corner {
-      border-radius: 5px;
-      background: #fff;
-    }
-    ::-webkit-scrollbar-thumb {
-      border-radius: 5px; // 滚动条
-      width: 6px;
-      background-color: #ccc;
-      :hover {
-        background-color: #ccc;
-      }
-    }
-    ::-webkit-scrollbar-track-piece {
-      border-radius: 5px; // 轨道
-      background: #fff;
-      width: 6px;
-    }
-  .text-over{
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-  .wrap{
-    width:100%;
-    height: 100%;
-    background: #5F8EB9;
+}
+::-webkit-scrollbar-track-piece {
+  border-radius: 5px; // 轨道
+  background: #fff;
+  width: 6px;
+}
+.text-over{
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.wrap{
+  width:100%;
+  height: 100%;
+  background: #5F8EB9;
+  position: relative;
+  overflow: hidden;
+  .header{
     position: relative;
-    overflow: hidden;
-    .header{
+    width: 98%;
+    margin-left:20px;
+    border-top: 10px solid #5F8EB9;
+    border-bottom: 10px solid #5F8EB9;
+    padding:5px 0 5px 20px;
+    color:#f1f1f1;
+    background: #30486C;
+    font-size: 16px;
+  }
+}
+.el-select{
+  width: 100%;
+}
+.header::after{
+  content:"";
+  display: inline-block;
+  position: absolute;
+  top:0;
+  left: -8px;
+  width:4px;
+  height:100%;
+  background: #40C3F1;
+}
+.list-wrap{
+  width:100%;
+  // width:900px;
+  height: calc(100% - 175px); // 去除头部区域
+  overflow-y: auto;
+  .main{
+    width:99%;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    .row {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 40px;
+    }
+    .row:nth-child(2n) {
+      flex-direction: row-reverse;
+    }
+    .row:nth-child(2n):last-child .item {
+      margin-right: auto;
+    }
+    .list-item{
       position: relative;
-      width: 98%;
-      margin-left:20px;
-      border-top: 10px solid #5F8EB9;
-      border-bottom: 10px solid #5F8EB9;
-      padding:5px 0 5px 20px;
-      color:#f1f1f1;
-      background: #30486C;
-      font-size: 16px;
-    }
-  }
-  .el-select{
-    width: 100%;
-  }
-  .header::after{
-      content:"";
-      display: inline-block;
-      position: absolute;
-      top:0;
-      left: -8px;
-      width:4px;
-      height:100%;
-      background: #40C3F1;
-    }
-    .list-wrap{
-      width:100%;
-      // width:900px;
-      height: calc(100% - 175px); // 去除头部区域
-      overflow-y: auto;
-      .main{
-        width:99%;
-        margin: 0 auto;
-        display: flex;
-        flex-direction: column;
-        .row {
-          display: flex;
-          justify-content: space-between;
-          margin-bottom: 40px;
-        }
-        .row:nth-child(2n) {
-          flex-direction: row-reverse;
-        }
-        .row:nth-child(2n):last-child .item {
-          margin-right: auto;
-        }
-        .list-item{
-          position: relative;
-          width: 48%;
-          height: 240px;
-          background-image: url("../../assets/global_images/monitor.png");
-          background-repeat: no-repeat;
-          background-size: cover;
-          // background-size: 100% 100%;
-          // margin-left: 20px;
-          z-index: 10;
-          .img-wrap{
-            position: absolute;
-            left:35px;
-            top:40px;
-            width:238px;
-            height:138px;
-            overflow: hidden;
-            z-index: -1;
-          }
-          .title{
-            width:150px;
-            position: absolute;
-            left:42%;
-            top: 40px;
-            font-size: 20px;
-            color:#40C3F1;
-          }
-          .desc{
-            width:150px;
-            position: absolute;
-            left:42%;
-            top: 75px;
-            font-size: 16px;
-            color:#f1f1f1;
-          }
-          .date{
-            position: absolute;
-            left:50%;
-            transform: translateX(-50%);
-            bottom:70px;
-            font-size: 14px;
-            color:#c1c1c1;
-            margin-left:25px;
-          }
-          .date::after{
-            position: absolute;
-            top:0;
-            left:-20px;
-            content:"";
-            display: inline-block;
-            width: 15px;
-            height: 15px;
-            background-image: url("../../assets/global_images/date.png");
-            background-repeat: no-repeat;
-            background-size: cover;
-          }
-          .ratio{
-            // width:100px;
-            position: absolute;
-            left:50%;
-            transform: translateX(-50%);
-            bottom:40px;
-            font-size: 14px;
-            color:#c1c1c1;
-            // margin-left:18px;
-            margin-left: 25px;
-          }
-          .ratio::after{
-            position: absolute;
-            top:0;
-            left:-20px;
-            content:"";
-            display: inline-block;
-            width: 15px;
-            height: 15px;
-            background-image: url("../../assets/global_images/search.png");
-            background-repeat: no-repeat;
-            background-size: cover;
-          }
-        }
-      }
-    }
-    .main .row:nth-child(odd){
-      .list-item:nth-child(odd)::after{
-        content:"";
-        display: inline-block;
-        width:30px;
-        height: 30px;
+      width: 48%;
+      height: 240px;
+      background-image: url("../../assets/global_images/monitor.png");
+      background-repeat: no-repeat;
+      background-size: cover;
+      // background-size: 100% 100%;
+      // margin-left: 20px;
+      z-index: 10;
+      .img-wrap{
         position: absolute;
-        top:50%;
-        transform: translate(-50%);
-        right:-52px;
-        background-image: url("../../assets/global_images/right.png");
-        background-repeat: no-repeat;
-        background-size: cover;
+        left:35px;
+        top:40px;
+        width:238px;
+        height:138px;
+        overflow: hidden;
+        z-index: -1;
       }
-    }
-    .main .row:nth-child(odd){
-      .list-item:nth-child(even)::after{
-        content:"";
-        display: inline-block;
-        width:30px;
-        height: 30px;
+      .title{
+        width:150px;
         position: absolute;
-        right:50%;
-        transform: translate(-50%);
-        bottom:-35px;
-        background-image: url("../../assets/global_images/right.png");
-        background-repeat: no-repeat;
-        background-size: cover;
-        transform: rotate(90deg);
+        left:42%;
+        top: 40px;
+        font-size: 20px;
+        color:#40C3F1;
       }
-    }
-    .main .row:nth-child(even){
-      .list-item:nth-child(odd)::after{
-        content:"";
-        display: inline-block;
-        width:30px;
-        height: 30px;
+      .desc{
+        width:150px;
         position: absolute;
-        top:50%;
-        transform: translate(-50%);
-        left:-35px;
-        background-image: url("../../assets/global_images/right.png");
-        background-repeat: no-repeat;
-        background-size: cover;
-        transform: rotate(180deg);
+        left:42%;
+        top: 75px;
+        font-size: 16px;
+        color:#f1f1f1;
       }
-    }
-    .main .row:nth-child(even){
-      .list-item:nth-child(even)::after{
-        content:"";
-        display: inline-block;
-        width:30px;
-        height: 30px;
+      .date{
         position: absolute;
         left:50%;
-        transform: translate(-50%);
-        bottom:-35px;
-        background-image: url("../../assets/global_images/right.png");
+        transform: translateX(-50%);
+        bottom:70px;
+        font-size: 14px;
+        color:#c1c1c1;
+        margin-left:25px;
+      }
+      .date::after{
+        position: absolute;
+        top:0;
+        left:-20px;
+        content:"";
+        display: inline-block;
+        width: 15px;
+        height: 15px;
+        background-image: url("../../assets/global_images/date.png");
         background-repeat: no-repeat;
         background-size: cover;
-        transform: rotate(-270deg);
+      }
+      .ratio{
+        // width:100px;
+        position: absolute;
+        left:50%;
+        transform: translateX(-50%);
+        bottom:40px;
+        font-size: 14px;
+        color:#c1c1c1;
+        // margin-left:18px;
+        margin-left: 25px;
+      }
+      .ratio::after{
+        position: absolute;
+        top:0;
+        left:-20px;
+        content:"";
+        display: inline-block;
+        width: 15px;
+        height: 15px;
+        background-image: url("../../assets/global_images/search.png");
+        background-repeat: no-repeat;
+        background-size: cover;
       }
     }
-    // 如果是最后一个元素不显示箭头
-    .main .row:last-child{
-      .list-item:last-child::after{
-        display: none;
-      }
-    }
-    .list-wrap .main .list-item .img-wrap{
-      position: absolute;
-      left: 32px;
-      top: 40px;
-      // width: 190px;
-      width: 212px;
-      height: 138px;
-      overflow: hidden;
-      z-index: -1;
-    }
-    .list-wrap .main .list-item .date{
-      left:75% !important;
-      margin-bottom: 20px;
-    }
-    .list-wrap .main .list-item .ratio{
-      left:75% !important;
-    }
-    .list-wrap .main .list-item .title,.list-wrap .main .list-item .desc{
-      left:62% !important;
-    }
-    .close-icon{
-      z-index: 100;
-      position: absolute;
-      top:2px;
-      right:2px;
-      color:white;
-      background: #fc2323cc;
-      width:25px;
-      height:25px;
-      border-radius: 5px;
-      padding:3px;
-    }
+  }
+}
+.main .row:nth-child(odd){
+  .list-item:nth-child(odd)::after{
+    content:"";
+    display: inline-block;
+    width:30px;
+    height: 30px;
+    position: absolute;
+    top:50%;
+    transform: translate(-50%);
+    right:-52px;
+    background-image: url("../../assets/global_images/right.png");
+    background-repeat: no-repeat;
+    background-size: cover;
+  }
+}
+.main .row:nth-child(odd){
+  .list-item:nth-child(even)::after{
+    content:"";
+    display: inline-block;
+    width:30px;
+    height: 30px;
+    position: absolute;
+    right:50%;
+    transform: translate(-50%);
+    bottom:-35px;
+    background-image: url("../../assets/global_images/right.png");
+    background-repeat: no-repeat;
+    background-size: cover;
+    transform: rotate(90deg);
+  }
+}
+.main .row:nth-child(even){
+  .list-item:nth-child(odd)::after{
+    content:"";
+    display: inline-block;
+    width:30px;
+    height: 30px;
+    position: absolute;
+    top:50%;
+    transform: translate(-50%);
+    left:-35px;
+    background-image: url("../../assets/global_images/right.png");
+    background-repeat: no-repeat;
+    background-size: cover;
+    transform: rotate(180deg);
+  }
+}
+.main .row:nth-child(even){
+  .list-item:nth-child(even)::after{
+    content:"";
+    display: inline-block;
+    width:30px;
+    height: 30px;
+    position: absolute;
+    left:50%;
+    transform: translate(-50%);
+    bottom:-35px;
+    background-image: url("../../assets/global_images/right.png");
+    background-repeat: no-repeat;
+    background-size: cover;
+    transform: rotate(-270deg);
+  }
+}
+// 如果是最后一个元素不显示箭头
+.main .row:last-child{
+  .list-item:last-child::after{
+    display: none;
+  }
+}
+.list-wrap .main .list-item .img-wrap{
+  position: absolute;
+  left: 32px;
+  top: 40px;
+  // width: 190px;
+  width: 212px;
+  height: 138px;
+  overflow: hidden;
+  z-index: -1;
+}
+.list-wrap .main .list-item .date{
+  left:75% !important;
+  margin-bottom: 20px;
+}
+.list-wrap .main .list-item .ratio{
+  left:75% !important;
+}
+.list-wrap .main .list-item .title,.list-wrap .main .list-item .desc{
+  left:62% !important;
+}
+.close-icon{
+  z-index: 100;
+  position: absolute;
+  top:2px;
+  right:2px;
+  color:white;
+  background: #fc2323cc;
+  width:25px;
+  height:25px;
+  border-radius: 5px;
+  padding:3px;
+}
 </style>
diff --git a/src/views/popup/bottom.vue b/src/views/popup/bottom.vue
index e3fe7e2..c95b2a1 100644
--- a/src/views/popup/bottom.vue
+++ b/src/views/popup/bottom.vue
@@ -1,47 +1,84 @@
 <template>
   <div class="bottom">
-    <div class="block1">
-      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">访客控制安全系数组件</div>
-      <visit-bar style="flex:1;"/>
-    </div>
+<!--    <div class="block1" style="border-top-left-radius: 0px;margin-left: 5px">-->
+<!--      <inout-list style="flex:1;"/>-->
+<!--    </div>-->
     <div class="block">
       <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安防事件列表</div>
       <case-table style="flex:1;"/>
     </div>
-    <div class="block">
-      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">其他相关安全系数指标组件</div>
-      <other-line style="flex:1;"/>
+    <div class="block1" style="flex-direction: row;width: 700px">
+      <div style="width: 200px">
+        <div class="item0" style="margin: 36px 0">
+          <el-image :src="require('@/assets/popup/事件.png')" class="base-map-image" mode="fill" />
+          <div class="item-text">
+            <div class="num">{{caseNum.all}}<span class="unit"> 件</span></div>
+            <div style="color: #B3F3F6;">今日总事件</div>
+          </div>
+        </div>
+        <div class="item0">
+          <el-image :src="require('@/assets/popup/事件1.png')" class="base-map-image" mode="fill" />
+          <div class="item-text">
+            <div class="num"><span style="color: #08f102;text-shadow: 0 0 5px #08f102;">{{caseNum.solve}}</span><span class="unit"> 件</span></div>
+            <div style="color: #B3F3F6;">今日已解决</div>
+          </div>
+        </div>
+      </div>
+      <case-pie style="width: calc(100% - 200px);height: 100%"/>
     </div>
-    <div class="block1">
-      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安保人员到岗系数组件</div>
-      <staff-bar1 style="flex:1;"/>
+    <div class="block">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安防事件频率统计</div>
+      <case-bar style="flex:1;"/>
     </div>
   </div>
 </template>
 
 <script>
-// import VisitorPie from "@/views/popup/components/visitorPie";
-import VisitBar from '@/views/popup/components/visitBar';
-import StaffBar1 from '@/views/popup/components/staffBar1';
-import CaseTable from '@/views/popup/components/caseTable';
-// import ReqairTable from "@/views/popup/components/reqairTable";
-import OtherLine from '@/views/popup/components/otherLine';
+
+import CaseTable from '@/views/popup/components/caseTable'
+import CasePie from '@/views/popup/components/casePie'
+import { caseTodayStatistics } from '@/api/pop'
+import CaseBar from '@/views/popup/components/caseBar'
+import InoutList from '@/views/popup/components/inoutList'
 
 export default {
   name: 'Bottom',
-  components: { OtherLine, CaseTable, StaffBar1, VisitBar },
+  components: { InoutList, CaseBar, CasePie, CaseTable },
   data() {
     return {
+      timer: null,
       titleImg: require('@/assets/popup/title.png'), // 背景图片
-      titleAll: require('@/assets/popup/title-all.png'),// 背景图片
-      list: [2156, 2144, 455, 314, 98]
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      list: [2156, 2144, 455, 314, 98],
+      caseNum: {
+        all: 0,
+        solve: 0
+      }
     }
   },
+  mounted() {
+    clearInterval(this.timer)
+    this.search()
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+    this.timer = null
+  },
+  methods: {
+    search() {
+      this.timer = setInterval(() => {
+        caseTodayStatistics().then(response => {
+          if (response.code === 200) {
+            this.caseNum = response.data
+          }
+        })
+      }, 10000)
+    }
+  }
 }
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-
 .bottom{
   width: 100%;
   height: 220px;
@@ -57,11 +94,11 @@
     border-radius: 5px;
     box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
     border-color: rgba(0, 0, 0, .05);
-    margin: 0px 10px;
+    margin: 0px 5px;
     flex-direction: column;
   }
   .block1{
-    width: 500px;
+    width: 750px;
     height: 100%;
     display: flex;
     flex-wrap: wrap;
@@ -69,7 +106,7 @@
     border-radius: 5px;
     box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
     border-color: rgba(0, 0, 0, .05);
-    margin: 0px 10px;
+    margin: 0px 5px;
     flex-direction: column;
   }
   .title{
@@ -93,5 +130,31 @@
     font-size: 15px;
 
   }
+  .item0{
+    width: 100%;
+    height: 50px;
+    display: flex;
+    justify-content: left;
+    align-items: center;
+    padding: 0 8%;
+  }
+  .item-text{
+    text-shadow: 0 0 2px #d1ffff;
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 18px;
+  }
+  .num{
+    text-shadow: 0 0 5px #ffb441;
+    color: #ffb441;
+    font-size: 20px;
+    padding-top: 2px;
+  }
+  .unit{
+    color: #B3F3F6;
+    font-size: 14px;
+    margin-left: 1px;
+  }
 }
 </style>
diff --git a/src/views/popup/components/caseTable.vue b/src/views/popup/components/caseTable.vue
index 95aa677..c9708d7 100644
--- a/src/views/popup/components/caseTable.vue
+++ b/src/views/popup/components/caseTable.vue
@@ -1,5 +1,9 @@
 <template>
   <div class="flowTable">
+<!--    <el-tabs v-model="activeName" @tab-click="changeTime" style="display: flex;position:absolute;right: 30px;top:5px">-->
+<!--      <el-tab-pane label="已解决" name="week"/>-->
+<!--      <el-tab-pane label="未解决" name="month"/>-->
+<!--    </el-tabs>-->
     <div class="success_info_body" v-show="showFlag">
       <!-- 参数名称、列数根据实际情况调整 -->
       <div class="table_body">
@@ -14,7 +18,7 @@
         <div class="table_main_body">
           <div class="table_inner_body" :style="{top: tableTop + 'px'}">
             <div v-for="(item,index) in tableList" class="table_tr" :class="checkCell(item,index)" :key="index" @click="JumpDevice(item)">
-              <div class="tr1 tr">{{item.levelName}}</div>
+              <div class="tr1 tr" :style="{color: item.levelName ==='重大' ? 'red' : item.levelName ==='较大' ? 'orange' : '#b8dffd'}">{{item.levelName}}</div>
               <div class="tr2 tr">{{item.description}}</div>
               <div class="tr1 tr">{{item.statusName}}</div>
               <div class="tr2 tr">{{item.typeName}}</div>
@@ -41,7 +45,7 @@
   data() {
     return {
       picurl: '',
-      defaultPhoto: require('@/assets/global_images/photo_error.png'),
+      defaultPhoto: require('@/assets/global_images/photo_offline.png'),
       errorImg: require('@/assets/global_images/photo_error.png'),
       showFlag: true,
       tableTimer: null,
@@ -104,8 +108,9 @@
       this.picurl = ''
       this.isbig = false
       getCaseListPage({
+        status: '',
         offset: 1,
-        limit: 15
+        limit: 20
       }).then(response => {
         if (response.code === 200) {
           this.tableList = response.data.rows
@@ -190,13 +195,18 @@
   line-height: 15px;
 }
 .tr {
-  overflow: hidden;
   text-overflow: ellipsis;
-  white-space: nowrap;
   box-sizing: border-box;
   padding: 0 5px;
   text-align: center;
   font-size: 13px;
+  word-wrap: break-word; /* 允许在单词内换行 */
+  overflow-wrap: break-word; /* 同上，现代浏览器推荐使用 */
+  white-space: normal; /* 允许自动换行 */
+  line-height: 15px;
+  display: flex;
+  align-items: center; /* 垂直居中 */
+  justify-content: center; /* 水平居中，如需要 */
 }
 .tr1 {
   width: 13%;
@@ -253,7 +263,7 @@
   }
 }
 .hard-state{
-  background:red;
+  background: #ff8585;
 }
 .medium-state{
   background: #ea9700;
diff --git a/src/views/popup/components/doorList.vue b/src/views/popup/components/doorList.vue
new file mode 100644
index 0000000..7bc178a
--- /dev/null
+++ b/src/views/popup/components/doorList.vue
@@ -0,0 +1,257 @@
+<template>
+  <div style="width: 100%;height: 100%;">
+    <div style="text-align: right;margin-right: 5px;">
+      <el-button class="doorbar-btn" type="primary" plain @click="isOn1 = !isOn1" style="margin-left: 3px">{{isOn1 ? '隐藏操作按钮': '开启操作按钮'}}</el-button>
+      <el-button class="doorbar-btn" type="primary" plain @click="controlDool()">{{!isOn2 ? '开启黑名单与闸机联动': '关闭黑名单与闸机联动'}}</el-button>
+    </div>
+    <div class="success_info_body" style="margin: 0 10px;flex: 1">
+      <div class="table_body">
+        <div class="table_th">
+          <div class="tr4 th_style">门禁分组</div>
+          <div class="tr1 th_style" v-show="isOn1">操作</div>
+        </div>
+        <div class="table_main_body">
+          <div class="table_inner_body" :style="{top: tableTop + 'px'}">
+            <div v-for="(item,index) in tableList" class="table_tr" :key="index">
+              <div class="tr4 tr">{{item.groupName}}</div>
+              <div class="tr1 tr" v-show="isOn1">
+                <el-button type="text" v-for="item in statusList" :key="item.value" size="small" @click.stop="editStatus(scope.row, item.value)" style="height: 20px;margin-top: -10px">
+                  {{ item.name }}
+                </el-button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+<!--    <el-pagination layout="prev, pager, next" :total="tableListSize" style="width: 100%;text-align: center" @current-change="handleCurrentChange"/>-->
+  </div>
+</template>
+
+<script>
+import {controlGroup, gateLinkageSwitch, getGroupListPage, getSwitchStatus} from '@/api/device'
+export default {
+  name: 'DoorList',
+  data() {
+    return {
+      defaultPhoto: require('@/assets/global_images/photo.png'),
+      errorImg: require('@/assets/global_images/photo_error.png'),
+      isOn1: false,
+      isOn2: false,
+      tableTimer: null,
+      tableTop: 0,
+      tableList: [],
+      statusList: [
+        { name: '常开', id: '1557975745699823618', value: '0' },
+        { name: '常闭', id: '1557975746215723010', value: '3' },
+        { name: '门开', id: '1557975746723233793', value: '2' },
+        { name: '门闭', id: '1557975747402711041', value: '1' }
+      ],
+      tableListSize: 0,
+      componentTimer: null,
+      visibleSize: 8, // 容器内可视最大完整行数
+      lineHeight: 20, // 每行的实际高度（包含margin-top/bottom,border等）
+      componentTimerInterval: 3600000, //  刷新数据的时间间隔
+      tableTimerInterval: 50, //  向上滚动 1px 所需要的时间，越小越快，推荐值 100
+      listQuery: {
+        groupName: '',
+        gateCode: '',
+        status: '',
+        offset: 1,
+        limit: 8
+      }, // 筛选条件
+      dialogFormVisible: false, // 是否显示编辑框
+      timeRange: [], // 时间范围
+      multipleSelection: [], // 多选选中项
+      list: [], // 列表数据
+      colorRow: {
+        isColor: false,
+        isPop: true
+      },
+      inoutTypeList: [],
+      passWayList: [],
+      total: 0, // 数据总数
+      listLoading: true // 列表加载动画
+    }
+  },
+  created() {
+    getSwitchStatus().then(response => {
+      if (response.code === 200) {
+        this.isOn2 = response.data === 1
+      }
+    })
+    this.fetchData()
+  },
+  methods: {
+    controlDool() {
+      this.isOn2 = !this.isOn2
+      gateLinkageSwitch(this.isOn2 ? 1 : 0).then(response => {
+        if (response.code === 200) {
+          this.$message.success((this.isOn2 ? '开启' : '关闭') + '黑名单与闸机联动成功')
+        }
+      })
+    },
+    fetchData(isNowPage = true) {
+      if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+        this.listQuery.offset = 1
+      }
+      getGroupListPage(this.listQuery).then(response => {
+        if (response.code === 200) {
+          this.tableList = response.data.rows
+          this.tableListSize = parseInt(response.data.total)
+        }
+      })
+    },
+    editStatus(row, status) {
+      controlGroup(row.id, status).then(response => {
+        if (response.code === 200) {
+          this.$message.success('通道控制成功')
+          this.fetchData()
+        }
+      }).catch(_ => { // 异常情况，loading置为false
+      })
+    },
+    handleCurrentChange(val) {
+      this.listQuery.offset = val
+      this.fetchData()
+    },
+    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.doorbar-btn {
+  height: 22px;
+  padding-top: 4px;
+  padding-right: 6px;
+  padding-left: 6px;
+  margin-right: 4px;
+}
+.table_body {
+  width: 100%;
+  margin-top: 0px;
+}
+.table_th {
+  width: 100%;
+  display: flex;
+  height: 15px;
+  line-height: 20px;
+}
+.tr {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 0 5px;
+  text-align: center;
+  font-size: 13px;
+  height: 20px !important;
+}
+.tr1 {
+  width: 35%;
+}
+.tr2 {
+  width: 18%;
+}
+.tr3 {
+  width: 15%;
+  font-size: 13px;
+}
+
+.tr4 {
+  flex: 1;
+}
+.tr5 {
+  width: 100px;
+}
+
+.th_style {
+  color: #b8dffd;
+  font-size: 13px;
+  font-weight: bold;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  box-sizing: border-box;
+  text-align: center;
+}
+.table_main_body {
+  width: 100%;
+  height: 175px;
+  overflow: hidden;
+  position: relative;
+  margin-top: 5px;
+}
+.table_inner_body {
+  width: 100%;
+  position: absolute;
+  left: 0;
+  color: #cce9ff;
+}
+
+.table_tr {
+  display: flex;
+  font-size: 13px;
+  border: 1px solid rgb(71, 160, 199);
+  margin-top: 2px;
+  height: 20px;
+  line-height: 20px;
+  cursor: pointer;
+:hover{
+  background: rgba(255, 153, 51, 0.6);
+}
+}
+.table_tr0 {
+  background: rgba(3, 145, 167, 0.1);
+}
+.table_tr1 {
+  background: rgb(64, 87, 120);
+}
+
+::v-deep .el-pagination {
+  .el-pagination__total {
+    color: white !important;
+  }
+  .el-pagination__jump {
+    color: white !important;
+  }
+  // 两个输入框
+  .el-input__inner {
+    background-color: #092546;
+    border: 1px solid rgba(192, 192, 192, 0.479);
+    color: white !important;
+  }
+  // 左右按键和里面的图标
+  button {
+    background-color: #092546;
+    .el-icon::before {
+      color: white;
+    }
+  }
+  // 分页数字
+  ul {
+    color: white;
+    .el-icon::before {
+      color: white !important;
+    }
+  }
+  // 分页数字的背景色
+  ul > li {
+    background-color: #092546;
+  }
+}
+::v-deep .el-loading-mask {
+  background-color: rgba(0, 0, 0, 0.479);
+}
+
+</style>
diff --git a/src/views/popup/components/personTable.vue b/src/views/popup/components/personTable.vue
index e2e4c1e..ca73933 100644
--- a/src/views/popup/components/personTable.vue
+++ b/src/views/popup/components/personTable.vue
@@ -7,15 +7,17 @@
           <div class="tr4 th_style">安保人员姓名</div>
           <div class="tr4 th_style">性别</div>
           <div class="tr4 th_style">照片</div>
+          <div class="tr4 th_style">状态</div>
         </div>
         <div class="table_main_body">
           <div class="table_inner_body" :style="{top: tableTop + 'px'}">
-            <div v-for="(item,index) in tableList" :class="index%2==1?'table_tr':'table_tr1'" :key="index" @click="JumpDevice(item)">
+            <div v-for="(item,index) in tableList" :class="index % 2==1?'table_tr':'table_tr1'" :key="index" @click="JumpDevice(item)">
               <div class="tr4 tr">{{item.staffName}}</div>
               <div class="tr4 tr">{{item.staffGenderName}}</div>
               <div class="tr4 tr">
                 <img :src="item.picture ? `${item.picture}`: defaultPhoto" width="40px" height="40px" style="margin-left: 5px" @error="errorImg">
               </div>
+              <div class="tr4 tr">{{item.statusName}}</div>
             </div>
           </div>
         </div>
@@ -25,7 +27,7 @@
 </template>
 <script>
 
-import { getStaffListPage, hikPic } from '@/api/person'
+import {getStaffListPage, getStaffOnList, hikPic} from '@/api/person'
 import { repostSocket } from '@/api/common';
 import { getDate } from '@/utils/calendarUtil'
 
@@ -43,7 +45,7 @@
       tableList: [],
       tableListSize: 0,
       componentTimer: null,
-      visibleSize: 5, // 容器内可视最大完整行数
+      visibleSize: 8, // 容器内可视最大完整行数
       lineHeight: 45, // 每行的实际高度（包含margin-top/bottom,border等）
       componentTimerInterval: 3600000, //  刷新数据的时间间隔
       tableTimerInterval: 50 //  向上滚动 1px 所需要的时间，越小越快，推荐值 100
@@ -51,7 +53,7 @@
   },
 
   // 如果没有父元素传值，将watch内的内容搬至mounted中即可
-  props: ["activeFactoryId"],
+  props: ['activeFactoryId'],
   watch: {
     activeFactoryId(val, oldVal) {
       clearInterval(this.componentTimer)
@@ -70,6 +72,8 @@
   methods: {
     JumpDevice(item) {
       const params = {
+        personName: item.staffName,
+        staffCode: item.staffCode,
         facePicUrl: item.picture, // 图片url
         startTime: getDate(-31, 'SECOND'), // 开始时间
         endTime: getDate(0, 'SECOND'), // 结束时间
@@ -94,51 +98,32 @@
         message: this.wallList
       }
       repostSocket(params).then(response => {
-        if (response.code === 200) {
-        }
+        if (response.code === 200) {}
       })
     },
     fetchData() {
       const params = {
-        staffType: '2',
+        // staffType: '2',
         offset: 1,
-        limit: 50,
-        keywords: '',
-        cardNum: '',
-        phone: ''
+        limit: 200
       }
-      getStaffListPage(params).then(response => {
+      getStaffOnList(params).then(response => {
         if (response.code === 200) {
           this.tableList = response.data.rows
+          // this.tableListSize = response.data.total
           this.tableActionFun()
         }
       })
-      // this.tableList = [
-      //   {
-      //     id: '',
-      //     drawNo: 'YQ-001',
-      //     levelName: '一般',
-      //     description: '保安脱岗',
-      //     status: '0',
-      //     statusName: '未解决',
-      //     typeName: '临时事件',
-      //     devName: '视频监控摄像机5',
-      //     positionName: '一期主楼',
-      //     areaName: '3F',
-      //     isKeyAreaName: '否',
-      //     detailLocation: '详细位置',
-      //     happenTime: '2022-05-06 21:55:00'
-      //   }
-      // ]
     },
     tableActionFun() {
       this.tableListSize = this.tableList.length
       if (this.tableListSize > this.visibleSize) {
         this.tableList = this.tableList.concat(this.tableList)
         this.tableTimerFun()
-      } else {
-        this.fillTableList()
       }
+      // else {
+      //   this.fillTableList()
+      // }
     },
     //  当数据过少时，不触发自动轮播事件，并填充没有数据的行，参数根据实际情况修改即可
     fillTableList() {
@@ -230,7 +215,7 @@
 }
 .table_main_body {
   width: 100%;
-  height: 200px;
+  height: calc(40vh - 140px);
   overflow: hidden;
   position: relative;
   margin-top: 5px;
diff --git a/src/views/popup/components/staffLine1.vue b/src/views/popup/components/staffLine1.vue
index d3b0a95..d3cd04b 100644
--- a/src/views/popup/components/staffLine1.vue
+++ b/src/views/popup/components/staffLine1.vue
@@ -12,8 +12,8 @@
 </template>
 
 <script>
-import { multiScoreCommute } from '@/api/pop';
-import * as echarts from "echarts";
+import { multiScoreCommute } from '@/api/pop'
+import * as echarts from 'echarts'
 export default {
   name: 'StaffLine1',
   data() {
diff --git a/src/views/popup/components/visitBar.vue b/src/views/popup/components/visitBar.vue
index 1726d20..4f35e21 100644
--- a/src/views/popup/components/visitBar.vue
+++ b/src/views/popup/components/visitBar.vue
@@ -7,7 +7,7 @@
 import * as echarts from 'echarts';
 
 export default {
-  name: 'AreaBar1',
+  name: 'VisitBar',
   data() {
     return {
       isShow: true,
diff --git a/src/views/popup/floor.vue b/src/views/popup/floor.vue
index 6342d5a..8052ae4 100644
--- a/src/views/popup/floor.vue
+++ b/src/views/popup/floor.vue
@@ -107,8 +107,7 @@
         message: 'show'
       }
       repostSocket(params).then(response => {
-        if (response.code === 200) {
-        }
+        if (response.code === 200) {}
       })
     }
   }
diff --git a/src/views/popup/left.vue b/src/views/popup/left.vue
index d35b6b2..dab745c 100644
--- a/src/views/popup/left.vue
+++ b/src/views/popup/left.vue
@@ -1,67 +1,75 @@
 <template>
   <div class="left">
-    <div class="block" style="justify-content: center;height: 29%;padding-top: 10px">
-      <div class="item">
-        <el-image :src="require('@/assets/popup/人员.png')" class="base-map-image" mode="fill" />
-        <div style="color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;"> 一期主楼、录制楼</div>
-        <div class="num">{{list["0"]}}<span class="unit">人</span></div>
+    <div class="block" style="height: 270px;">
+      <div style="display: flex;flex-direction: row;justify-content: center;padding-top: 10px;height: 70px">
+        <div class="item">
+          <el-image :src="require('@/assets/popup/cam.png')" class="base-map-image" mode="fill" />
+          <div class="item-title">摄像机</div>
+          <div class="num"><span style="color: #08f102;text-shadow: 0 0 5px #08f102;">{{cam.on}}</span> / {{cam.all}}</div>
+        </div>
+        <div class="item">
+          <el-image :src="require('@/assets/popup/闸机.png')" class="base-map-image" mode="fill" />
+          <div class="item-title">闸机</div>
+          <div class="num"><span style="color: #08f102;text-shadow: 0 0 5px #08f102;">{{door.on}}</span> / {{door.all}}</div>
+        </div>
       </div>
-      <div class="item">
-        <el-image :src="require('@/assets/popup/人员.png')" class="base-map-image" mode="fill" />
-        <div style="color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;"> 二期主楼</div>
-        <div class="num">{{list["1"]}}<span class="unit">人</span></div>
-      </div>
-      <div class="item">
-        <el-image :src="require('@/assets/popup/访客.png')" class="base-map-image" mode="fill" />
-        <div style="color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;"> 今日访客量</div>
-        <div class="num">{{list["2"]}}<span class="unit">人</span></div>
-      </div>
-      <div class="item">
-        <el-image :src="require('@/assets/popup/今日事件.png')" class="base-map-image" mode="fill" />
-        <div style="color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;"> 今日事件数</div>
-        <div class="num">{{list["3"]}}<span class="unit">件</span></div>
-      </div>
-      <div class="item">
-        <el-image :src="require('@/assets/popup/今日处置.png')" class="base-map-image" mode="fill" />
-        <div style="color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;"> 事件处置数</div>
-        <div class="num">{{list["4"]}}<span class="unit">件</span></div>
-      </div>
-      <div class="item">
-        <el-image :src="require('@/assets/popup/离线.png')" class="base-map-image" mode="fill" />
-        <div style="color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;">设备离线率</div>
-        <div class="num">{{list["5"]}}<span class="unit"></span></div>
-      </div>
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title" style="margin: 0">摄像机状态分析</div>
+      <cam-bar style="width: 100%;height: 165px"/>
     </div>
-    <div class="block" style="flex-direction: column;">
-      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">员工通勤安防系数组件</div>
-      <staff-line1 style="flex:1;"/>
+    <div class="block" style="height: 250px;">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title" style="margin: 5px 0">闸机控制</div>
+      <door-list style="width: 100%;height: 250px;margin-top: -34px"/>
     </div>
-    <div class="block" style="flex-direction: column;">
-      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">重点区域防控系数组件</div>
-      <area-bar1 style="flex: 1"/>
+    <div class="block" style="height: 500px;">
+      <div style="display: flex;flex-direction: row;justify-content: center;height: 50px">
+        <el-tooltip class="item" effect="dark" :content="`进入人数${tips['1进入人数']}，离开人数${tips['1离开人数']}`" placement="bottom">
+          <div class="item">
+            <el-image :src="require('@/assets/popup/人员.png')" class="base-map-image" mode="fill" style="margin-top: 10px"/>
+            <div class="item-title"> 一期主楼、录制楼</div>
+            <div class="num" style="margin-top: -15px">{{tips["1"]}}<span class="unit">人</span></div>
+          </div>
+        </el-tooltip>
+        <el-tooltip class="item" effect="dark" :content="`进入人数${tips['2进入人数']}，离开人数${tips['2离开人数']}`" placement="bottom">
+          <div class="item">
+            <el-image :src="require('@/assets/popup/人员.png')" class="base-map-image" mode="fill" style="margin-top: 10px;margin-left: -20px"/>
+            <div class="item-title"> 二期主楼 </div>
+            <div class="num" style="margin-top: -15px">{{tips["2"]}}<span class="unit">人</span></div>
+          </div>
+        </el-tooltip>
+      </div>
+      <inout-list style="width: 100%;height: 350px;margin-top: 10px"/>
     </div>
   </div>
 </template>
 
 <script>
-import StaffLine1 from '@/views/popup/components/staffLine1'
-import AreaBar1 from '@/views/popup/components/areaBar1'
-import { getTodayNumber, getPeopleNumber, getDeviceNumber, offlineRate, eventNum } from '@/api/pop'
+import { buildPeopleNumber, deviceStatistics, getPeopleNumber } from '@/api/pop'
+import CamBar from '@/views/popup/components/camBar'
+import DoorList from '@/views/popup/components/doorList'
+import InoutList from '@/views/popup/components/inoutList'
+
 export default {
   name: 'Left',
-  components: { AreaBar1, StaffLine1 },
+  components: { InoutList, DoorList, CamBar },
   data() {
     return {
       timer: null,
       titleImg: require('@/assets/popup/title.png'), // 背景图片
-      titleAll: require('@/assets/popup/title-all.png'),// 背景图片
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      cam: { on: '', all: '' },
+      door: { on: '', all: '' },
       list: {
         '0': '*',
         '1': '*',
-        '2': '*',
-        '3': '*',
-        '4': '*',
-        '5': '*'
+        '2': '*'
+      },
+      tips: {
+        '1': 0,
+        '2': 0,
+        '2进入人数': 0,
+        '1进入人数': 0,
+        '2离开人数': 0,
+        '1离开人数': 0
       }
     }
   },
@@ -73,59 +81,51 @@
     this.timer = setInterval(() => {
       this.initData()
     }, 60000)
+    this.initData()
   },
   methods: {
     initData() {
-      getPeopleNumber().then(response => {
+      deviceStatistics(2).then(response => {
         if (response.code === 200) {
-          this.list['0'] = response.data[1] + (response.data[3] ? response.data[3] : 0)
-          this.list['1'] = response.data[2]
+          this.cam.on = response.data.list.filter(item => item.status === '在线')[0].quantity
+          this.cam.all = response.data.total
         }
       })
-      getTodayNumber().then(response => {
+      deviceStatistics(1).then(response => {
         if (response.code === 200) {
-          this.list['2'] = response.data['今日访客量']
+          this.door.on = response.data.list.filter(item => item.status === '在线')[0].quantity
+          this.door.all = response.data.total
         }
       })
-      // getDeviceNumber().then(response => {
-      //   if (response.code === 200) {
-      //     // this.list['3'] = response.data['设备总数']
-      //     // this.list['4'] = response.data['设备在线率'].replace('%', '')
-      //   }
-      // })
-
-      offlineRate().then(response => {
+      buildPeopleNumber().then(response => {
         if (response.code === 200) {
-          this.list['5'] = response.data['设备离线率']
-        }
-      })
-      eventNum().then(response => {
-        if (response.code === 200) {
-          this.list['3'] = response.data['今日事件数']
-          this.list['4'] = response.data['今日事件处置数']
+          this.tips = response.data
         }
       })
     }
   }
 }
 </script>
-
 <style rel="stylesheet/scss" lang="scss" scoped>
-.left{
+.block{
   width: 100%;
+  height: 200px;
+  background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+  border-radius: 5px;
+  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+  border-color: rgba(0, 0, 0, .05);
+  margin-bottom: 5px;
+  flex-direction: column;
+}
+.left{
+  width: 500px;
   height: 100%;
   overflow: hidden;
-  .block{
-    height: 33%;
-    width: 500px;
-    display: flex;
-    flex-wrap: wrap;
-    background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
-    border-radius: 5px;
-    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
-    border-color: rgba(0, 0, 0, .05);
-    margin: 10px;
-  }
+  //background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+  //box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+  //border-color: rgba(0, 0, 0, .05);
+  margin: 10px 10px 0 10px;
+  border-radius: 5px;
   .title{
     text-shadow: 0 0 5px #d1ffff;
     width: 500px;
@@ -139,6 +139,7 @@
     padding-left: 30px;
     font-family: 黑体;
     letter-spacing: 1px;
+    z-index: 1;
   }
   .base-map-image{
     width: 45px;
@@ -151,15 +152,24 @@
     height: 80%;
   }
   .item{
-    width: 33%;
+    width: 50%;
     font-weight: bold;
     text-align: center;
-    font-size: 15px;
+    font-size: 16px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    .item-title{
+      color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;margin-left: 10px;
+      line-height: 40px;
+      vertical-align: middle;
+    }
     .num{
       text-shadow: 0 0 5px #ffb441;
       color: #ffb441;
-      font-size: 18px;
-      padding-top: 2px;
+      font-size: 20px;
+      width: 100%;
+      margin-top: -0px;
     }
     .unit{
       color: #B3F3F6;
diff --git a/src/views/popup/right.vue b/src/views/popup/right.vue
index 4571ea1..b139de4 100644
--- a/src/views/popup/right.vue
+++ b/src/views/popup/right.vue
@@ -1,64 +1,79 @@
 <template>
   <div class="right">
-    <div class="block" style="justify-content: center;height: 29%;">
-      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安全防护梯度指标组件</div>
-      <div class="item">
-        <el-image :src="require('@/assets/popup/safe.png')" class="base-map-image" mode="fill" />
-        <div class="item-text">
-          <div class="num">{{list["0"]}}<span class="unit">分</span></div>
-          <div style="color: #B3F3F6;">一期主楼</div>
+    <el-tooltip effect="dark" content="安防事件评分由安防事件影响（占比50%）、访客事件影响（占比30%）、各楼栋设备维修次数（占比10%）、各楼栋消防设备有效期（占比10%）" placement="bottom">
+      <div class="block" style="justify-content: center;height: 20%;padding-top: 30px">
+        <div class="item">
+          <el-image :src="require('@/assets/popup/safe.png')" class="base-map-image" mode="fill" />
+          <div class="item-text">
+            <div class="num">{{list["0"]}}<span class="unit">分</span></div>
+            <div style="color: #B3F3F6;">一期主楼</div>
+          </div>
+        </div>
+        <div class="item">
+          <el-image :src="require('@/assets/popup/safe.png')" class="base-map-image" mode="fill" />
+          <div class="item-text">
+            <div class="num">{{list["1"]}}<span class="unit">分</span></div>
+            <div style="color: #B3F3F6;">二期主楼</div>
+          </div>
+        </div>
+        <div class="item">
+          <el-image :src="require('@/assets/popup/safe.png')" class="base-map-image" mode="fill" />
+          <div class="item-text">
+            <div class="num">{{list["2"]}}<span class="unit">分</span></div>
+            <div style="color: #B3F3F6;">录制楼</div>
+          </div>
+        </div>
+        <div class="item">
+          <el-image :src="require('@/assets/popup/safe.png')" class="base-map-image" mode="fill" />
+          <div class="item-text">
+            <div class="num">{{list["3"]}}<span class="unit">分</span></div>
+            <div style="color: #B3F3F6;">1600演播厅</div>
+          </div>
         </div>
       </div>
-      <div class="item">
-        <el-image :src="require('@/assets/popup/safe.png')" class="base-map-image" mode="fill" />
+    </el-tooltip>
+    <div class="block" style="flex-direction: column;height: 40%;">
+      <div class="item" style="margin-bottom: 10px;margin-top: -10px;margin-left: 25%">
+        <el-image :src="require('@/assets/popup/baoan.png')" class="base-map-image" mode="fill" />
         <div class="item-text">
-          <div class="num">{{list["1"]}}<span class="unit">分</span></div>
-          <div style="color: #B3F3F6;">二期主楼</div>
+          <div class="num"><span style="color: #08f102;text-shadow: 0 0 5px #08f102;">{{baoan.on}}</span> / {{baoan.all}}<span class="unit"> 位</span></div>
+          <div style="color: #B3F3F6;">安保人员总数</div>
         </div>
       </div>
-      <div class="item">
-        <el-image :src="require('@/assets/popup/safe.png')" class="base-map-image" mode="fill" />
-        <div class="item-text">
-          <div class="num">{{list["2"]}}<span class="unit">分</span></div>
-          <div style="color: #B3F3F6;">录制楼</div>
-        </div>
-      </div>
-      <div class="item">
-        <el-image :src="require('@/assets/popup/safe.png')" class="base-map-image" mode="fill" />
-        <div class="item-text">
-          <div class="num">{{list["3"]}}<span class="unit">分</span></div>
-          <div style="color: #B3F3F6;">1600演播厅</div>
-        </div>
-      </div>
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title" style="width: 100%;margin-bottom: 10px">安保人员列表</div>
+      <person-table style="flex:1;height: calc(100% - 120px)"/>
     </div>
-    <div class="block" style="flex-direction: column;">
-      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安防事件频次因数组件</div>
-          <div id="safe-star" class="star"/>
-<!--      <div :style="{backgroundImage:'url('+line+')', flex: 1}" class="case-bg">-->
-<!--        <div :style="{backgroundImage:'url('+ ball +')'}" class="ball-bg">-->
-<!--          <div class="num case-text">{{num}}<span class="unit">次</span></div>-->
-<!--          <div :style="{backgroundImage:'url('+ bottom +')'}" class="bottom-bg"/>-->
-<!--        </div>-->
-<!--      </div>-->
-    </div>
-    <div class="block" style="flex-direction: column;">
-      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">巡视人员分布因数组件</div>
-      <person-table style="flex:1;"/>
-<!--      <power-line1 style="flex:1;"/>-->
+    <div class="block" style="justify-content: center;height: 40%;align-content: flex-start;">
+      <div class="item">
+        <el-image :src="require('@/assets/popup/visitor.png')" class="base-map-image" mode="fill" />
+        <div class="item-text">
+          <div class="num"> {{visitor.in}}<span class="unit"> 位</span></div>
+          <div style="color: #B3F3F6;">今日访客进入</div>
+        </div>
+      </div>
+      <div class="item">
+        <el-image :src="require('@/assets/popup/visitor.png')" class="base-map-image" mode="fill" />
+        <div class="item-text">
+          <div class="num">{{visitor.out}}<span class="unit"> 位</span></div>
+          <div style="color: #B3F3F6;">今日访客离开</div>
+        </div>
+      </div>
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title" style="width: 100%;margin: 10px 0">今日访客访问列表</div>
+      <visitor-table style="flex:1;"/>
     </div>
   </div>
 </template>
 
 <script>
 
-// import PowerLine1 from '@/views/popup/components/powerLine1'
-import { securityScore, securityFrequency, categoryStatistics } from '@/api/pop'
+import { securityScore, categoryStatistics, baoanStatistics, visitorStatistics } from '@/api/pop'
 import * as echarts from 'echarts'
-import PersonTable from "@/views/popup/components/personTable";
+import PersonTable from '@/views/popup/components/personTable'
+import VisitorTable from '@/views/popup/components/visitorTable'
 
 export default {
   name: 'Right',
-  components: {PersonTable },
+  components: { PersonTable, VisitorTable },
   data() {
     return {
       timer: null,
@@ -72,6 +87,14 @@
         '2': '*',
         '3': '*'
       },
+      baoan: {
+        on: 0,
+        all: 0
+      },
+      visitor: {
+        in: 0,
+        out: 0
+      },
       safeData: [],
       num: '*'
     }
@@ -85,151 +108,55 @@
     this.timer = null
   },
   methods: {
-    initStar() {
-      var myChart = echarts.init(document.getElementById('safe-star'))
-      const that = this
-      const option = {
-        tooltip: {
-          trigger: 'item'
-        },
-        legend: {
-          right: 20,
-          top: 10,
-          data: ['事件频次'],
-          itemStyle: {
-            color: '#d5f6fa'
-          },
-          textStyle: {
-            color: '#cce9ff',
-            fontWeight: 'bold',
-            fontSize: 14
-          }
-        },
-        radar: [{
-          indicator: that.safeData.map((item) => {
-            return { text: item.categoryLevelName, max: that.safeData[0].quantity * 1.2 }
-          }),
-          center: ['50%', '55%'],
-          splitArea: {
-            areaStyle: {
-              color: ['#77EADF99', '#26C3BE99', '#64AFE999', '#428BD499'],
-              shadowColor: 'rgba(0, 0, 0, 0.2)',
-              shadowBlur: 10
-            }
-          },
-          name: {
-            color: '#d5f6fa',
-            fontWeight: 'bold',
-            fontSize: 14
-          }
-        }],
-        series: [{
-          type: 'radar',
-          symbol: 'none',
-          symbolSize: 4,
-          lineStyle: {
-            width: 3,
-            color: 'rgb(12,228,235)'
-          },
-          areaStyle: {
-            color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
-              {
-                color: 'rgb(8,91,121,0.8)',
-                offset: 0
-              },
-              {
-                color: 'rgb(12,228,235,0.8)',
-                offset: 1
-              }
-            ])
-          },
-          emphasis: {
-            areaStyle: {
-              color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
-                {
-                  color: 'rgb(8,91,121,0.5)',
-                  offset: 0
-                },
-                {
-                  color: 'rgb(12,228,235,0.5)',
-                  offset: 1
-                }
-              ])
-            }
-          },
-          data: [{
-            value: that.safeData.map(item => item.quantity),
-            name: '事件频次',
-            symbol: 'rect',
-            symbolSize: 5,
-            lineStyle: {
-              type: 'dashed'
-            },
-            label: {
-              show: true,
-              fontSize: 14,
-              fontWeight: 'bold',
-              color: '#ff9933',
-              formatter: function (params) {
-                return params.value
-              }
-            }
-          }]
-        }]
-      }
-      myChart.clear()
-      myChart.setOption(option, true)
-      window.addEventListener('resize', function() {
-        myChart.resize()
-      })
-    },
     initData() {
       this.timer = setInterval(() => {
         securityScore().then(response => {
           if (response.code === 200) {
-            this.list['0'] = response.data['一期主楼']
-            this.list['1'] = response.data['二期主楼']
-            this.list['2'] = response.data['录制楼']
-            this.list['3'] = response.data['1600演播厅']
+            this.list['0'] = response.data['一期主楼'].toFixed(2)
+            this.list['1'] = response.data['二期主楼'].toFixed(2)
+            this.list['2'] = response.data['录制楼'].toFixed(2)
+            this.list['3'] = response.data['1600演播厅'].toFixed(2)
           }
         })
-      }, 10000)
-      categoryStatistics().then(response => {
-        if (response.code === 200) {
-          this.safeData = response.data
-          this.safeData.length = 5
-          this.initStar()
-        }
-      })
-      // securityFrequency().then(response => {
-      //   if (response.code === 200) {
-      //     this.num = response.data['quantity']
-      //   }
-      // })
+        baoanStatistics().then(response => {
+          if (response.code === 200) {
+            this.baoan = response.data
+          }
+        })
+        visitorStatistics().then(response => {
+          if (response.code === 200) {
+            this.visitor = response.data
+          }
+        })
+      }, 5000)
     }
   }
 }
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
+.el-tooltip__popper{
+  margin-top: 0px !important;
+}
 .star {
   width: 100%;
-  height: 85%;
+  height: calc(100% - 40px);
 }
 .right{
   width: 100%;
   height: 100%;
   overflow: hidden;
   .block{
-    height: 33%;
-    width: 500px;
-    display: flex;
-    flex-wrap: wrap;
     background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
     border-radius: 5px;
     box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
     border-color: rgba(0, 0, 0, .05);
+    height: 33%;
+    width: 500px;
+    display: flex;
+    flex-wrap: wrap;
     margin: 10px;
+    padding-top: 20px;
   }
   .title{
     text-shadow: 0 0 5px #d1ffff;
diff --git a/src/views/popup/top.vue b/src/views/popup/top.vue
index 7850d83..d86f120 100644
--- a/src/views/popup/top.vue
+++ b/src/views/popup/top.vue
@@ -3,6 +3,14 @@
     <div :style="{backgroundImage:'url('+top+')'}" class="top"/>
     <div class="title">安防综合管理平台</div>
     <clock class="clock"/>
+    <div style="position: absolute;top:5px;left:450px;display: flex">
+      <el-button type="primary" circle style="width: 28px;height: 28px;padding-top: 4px;padding-left: 4px;" @click="shj('1')">
+        <el-image :src="require('@/assets/images/1.png')" mode="fill" style="width: 20px;height: 20px;" />
+      </el-button>
+      <el-button type="primary" circle style="width: 28px;height: 28px;margin-left: 10px;padding-top: 4px;padding-left: 4px;" @click="shj('2')">
+        <el-image :src="require('@/assets/images/2.png')" mode="fill" style="width: 20px;height: 20px;" />
+      </el-button>
+    </div>
     <div class="sys">
       <svg-icon icon-class="next-circle"/>
     </div>
@@ -10,7 +18,8 @@
 </template>
 
 <script>
-import Clock from '@/components/Clock';
+import Clock from '@/components/Clock'
+import { repostSocket } from '@/api/common'
 export default {
   name: 'Top',
   components: { Clock },
@@ -20,6 +29,16 @@
     }
   },
   methods: {
+    shj(num) {
+      const params = {
+        type: 'shj-page',
+        message: num
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+        }
+      })
+    }
   }
 }
 </script>
diff --git a/src/views/video/history.vue b/src/views/video/history.vue
index dbf02b0..f2f2430 100644
--- a/src/views/video/history.vue
+++ b/src/views/video/history.vue
@@ -6,37 +6,23 @@
       </el-col>
     </div>
     <el-col :span="18">
-      <el-card class="box-card" style="margin-top: 14px; height: calc(100vh - 170px);">
-        <div style="z-index: 9999;margin-left: 20px">
-          <el-form ref="dataForm" :inline="true" :model="listQuery" :rules="rules" class="form-container">
-            <el-form-item class="selectForm-container-item" prop="startTime">
-              <el-date-picker
-                v-model="timeRange"
-                type="datetimerange"
-                range-separator="至"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                start-placeholder="搜索起始时间"
-                end-placeholder="搜索截止时间"
-                arrow-control="true"
-                @focus="dateClick"
-                @change="dateSelected"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <!--<el-button class="filter-item" type="primary" @click="live">实时预览</el-button>-->
-          </el-form>
-        </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 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"/>-->
-          <!--</el-tab-pane>-->
-          <!--</el-tabs>-->
-        </div>
-      </el-card>
+      <div style="z-index: 9999;margin-left: 10px;margin-top: 25px">
+        <el-date-picker
+          v-model="timeRange"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="搜索起始时间"
+          end-placeholder="搜索截止时间"
+          arrow-control="true"
+          :clearable="false"
+          @focus="dateClick"
+          @blur="dateSelected"
+          @change="dateSelected"/>
+      </div>
+      <div id="tabDiv">
+        <iframe name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html?wmode=opaque"/>
+      </div>
     </el-col>
   </div>
 </template>
@@ -59,8 +45,6 @@
       }
     }
     return {
-      activeName: 'hk',
-      videoShow: true,
       timeRange: [],
       listQuery: {
         indexCode: '',
@@ -90,41 +74,24 @@
     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',document.getElementById('tabDiv').getBoundingClientRect().left + 20)
     }, 100)
   },
+  beforeDestroy() {
+    window.frames['playHK'].destoryPlugin()
+  },
   methods: {
-    handleClick(tab, event) {
-      if (tab.name === 'hk') {
-        this.activeName = 'hk'
-        console.log('hk')
-        window.frames['playHK'].initPlugin('back',document.getElementById('tabDiv').getBoundingClientRect().left + 20)
-      } else if (tab.name === 'nvr') {
-        this.activeName = 'nvr'
-        // window.frames['playNVR'].stopPlayReal(null)
-      }
-    },
     search() {
       window.frames['playHK'].show()
-      if (this.listQuery. indexCode === '') {
+      if (this.listQuery.indexCode === '') {
         this.$message.warning('请先选中一个监控点')
         return
       }
-      this.videoShow = true
-      this.$refs['dataForm'].validate((valid) => {
-        if (valid) {
-          if (this.activeName === 'nvr') {
-            window.frames['playNVR'].search(0, this.listQuery.startTime, this.listQuery.endTime)
-          } else if (this.activeName === 'hk') {
-            console.log(this.listQuery. indexCode, this.listQuery.startTime, this.listQuery.endTime)
-            window.frames['playHK'].search(this.listQuery. indexCode, this.listQuery.startTime, this.listQuery.endTime)
-          }
-        }
-      })
+      if (this.timeRange !== []) {
+        window.frames['playHK'].search(this.listQuery.indexCode, this.listQuery.startTime, this.listQuery.endTime)
+      }
     },
     handleCameraClicked(camera) {
-      console.log(camera)
       if (typeof camera.indexCode === 'undefined' || camera.indexCode === '') {
         return false
       } else {
@@ -138,6 +105,7 @@
     },
     dateSelected() {
       window.frames['playHK'].show()
+      this.search()
     }
   }
 }
@@ -145,7 +113,7 @@
 
 <style scoped>
 .iframe-body{
-  height: calc(100vh - 250px);
+  height: calc(100vh - 200px);
   width: 100%;
   frameBorder: 0;
   scrolling: no;
@@ -153,6 +121,7 @@
   vspale: 0;
   z-index: -1;
   padding:0 !important;
+  margin-top: -10px;
 }
 .playWnd {
   margin: 10px 0 0 20px;
@@ -163,5 +132,7 @@
 }
 .video{
   background: white;
+  width: 100%;
+  height: calc(100vh - 80px);
 }
 </style>
diff --git a/src/views/video/monitor.vue b/src/views/video/monitor.vue
index 51f3cf7..d70d530 100644
--- a/src/views/video/monitor.vue
+++ b/src/views/video/monitor.vue
@@ -6,15 +6,7 @@
       </el-col>
       <el-col :span="18">
         <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"/>-->
           <iframe name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html"/>
-          <!--</el-tab-pane>-->
-          <!--<el-tab-pane label="NVR" name="nvr">-->
-          <!--<iframe v-if="activeName==='nvr'" name="playNVR" class="iframe-body" src="/static/webCtrl/nvr/demo-easy.html"/>-->
-          <!--</el-tab-pane>-->
-          <!--</el-tabs>-->
         </div>
       </el-col>
     </el-row>
@@ -29,38 +21,26 @@
   components: { VideoTree },
   data() {
     return {
-      activeName: 'hk',
       tabHeight: '',
       tabWidth: ''
     }
   },
   mounted() {
-    // console.log(document.getElementById("tabDiv").getBoundingClientRect().left)
     setTimeout(() => {
       window.frames['playHK'].initPlugin('real', document.getElementById('tabDiv').getBoundingClientRect().left + 20, 110)
     }, 100)
   },
+  beforeDestroy() {
+    window.frames['playHK'].destoryPlugin()
+  },
   methods: {
-    handleClick(tab, event) {
-      if (tab.name === 'hk') {
-        this.activeName = 'hk'
-        window.frames['playHK'].initPlugin('real', document.getElementById('tabDiv').getBoundingClientRect().left + 20)
-      } else if (tab.name === 'nvr') {
-        this.activeName = 'nvr'
-        window.frames['playNVR'].stopPlayReal(null)
-      }
-    },
     handleCameraClicked(camera) {
       console.log(camera)
       if (typeof camera.indexCode === 'undefined' || camera.indexCode === '') {
         console.log('monitorPoint is null')
         return false
       } else {
-        if (this.activeName === 'hk') {
-          window.frames['playHK'].play(camera.indexCode)
-        } else if (this.activeName === 'nvr') {
-          window.frames['playNVR'].startPlayReal()
-        }
+        window.frames['playHK'].play(camera.indexCode)
       }
     }
   }
@@ -69,16 +49,17 @@
 
 <style scoped>
   .iframe-body{
-    height: calc(100vh - 180px);
+    height: calc(100vh - 130px);
     width: 100%;
     position: relative;
     top: 0px;
     left: 0px;
-    /*frameBorder: 0;*/
     scrolling: no;
     border: 1px;
   }
   .video{
     background: white;
+    width: 100%;
+    height: calc(100vh - 80px);
   }
 </style>
diff --git a/src/views/video/videoTree.vue b/src/views/video/videoTree.vue
index fcb25cb..e8dcaf5 100644
--- a/src/views/video/videoTree.vue
+++ b/src/views/video/videoTree.vue
@@ -102,7 +102,7 @@
   .tree-block {
     margin: 15px;
     box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
-    height: calc(100vh - 175px);
+    height: calc(100vh - 105px);
     background: white;
   }
 

diff --git a/public/static/webCtrl/hk/demo_embedded_for_iframe.html b/public/static/webCtrl/hk/demo_embedded_for_iframe.html
index 3a0be10..5c18f74 100644
--- a/public/static/webCtrl/hk/demo_embedded_for_iframe.html
+++ b/public/static/webCtrl/hk/demo_embedded_for_iframe.html
@@ -107,6 +107,13 @@
         }
     });
 
+    function destoryPlugin() {
+      if (oWebControl != null){
+        oWebControl.JS_HideWnd();  // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
+        oWebControl.JS_Disconnect().then(function(){}, function() {});
+      }
+    }
+
     function hide(){
       oWebControl.JS_HideWnd();
     };
diff --git a/src/App.vue b/src/App.vue
index d9046c1..b8c5c1a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="app" v-resize="windowResize">
+  <div id="app" style="overflow-y: hidden" v-resize="windowResize">
     <router-view />
   </div>
 </template>
diff --git a/src/api/device.js b/src/api/device.js
index 0ba70ff..8d6c46b 100644
--- a/src/api/device.js
+++ b/src/api/device.js
@@ -159,3 +159,21 @@
     data
   })
 }
+
+export function getSwitchStatus(data) {
+  return request({
+    url: '/cockpit/gateLinkage/switchStatus',
+    method: 'get'
+  })
+}
+
+export function gateLinkageSwitch(controlSwitch) {
+  return request({
+    url: '/cockpit/gateLinkage/switch',
+    method: 'get',
+    params: {
+      controlSwitch
+    }
+  })
+}
+
diff --git a/src/api/person.js b/src/api/person.js
index 8a79c27..0c2a0ff 100644
--- a/src/api/person.js
+++ b/src/api/person.js
@@ -21,6 +21,14 @@
   })
 }
 
+export function getStaffOnList(params) {
+  return request({
+    url: '/cockpit/securityStaff/onList',
+    method: 'GET',
+    params
+  })
+}
+
 export function addStaff(data) {
   return request({
     url: 'staffInfo/add',
diff --git a/src/api/pop.js b/src/api/pop.js
index 01ddde7..6fa7381 100644
--- a/src/api/pop.js
+++ b/src/api/pop.js
@@ -72,6 +72,39 @@
   })
 }
 
+export function baoanStatistics() {
+  return request({
+    url: '/cockpit/securityStaff/statistics',
+    method: 'get',
+    data: {}
+  })
+}
+
+export function visitorStatistics() {
+  return request({
+    url: 'cockpit/visitor/statistics',
+    method: 'get',
+    data: {}
+  })
+}
+
+export function caseTodayStatistics() {
+  return request({
+    url: 'cockpit/case/todayStatistics',
+    method: 'get',
+    data: {}
+  })
+}
+
+export function casePieStatistics(params) {
+  return request({
+    url: 'cockpit/caseType/statisticsByTime',
+    method: 'get',
+    data: params,
+    params
+  })
+}
+
 // 安防事件频次因数组件
 export function securityFrequency() {
   return request({
@@ -158,3 +191,27 @@
     method: 'get'
   })
 }
+
+export function cameraTypeStatistics() {
+  return request({
+    url: '/cockpit/camera/typeStatistics',
+    method: 'get'
+  })
+}
+
+export function deviceStatistics(devType) {
+  return request({
+    url: '/cockpit/device/statistics',
+    method: 'post',
+    data: {
+      devType
+    }
+  })
+}
+
+export function buildPeopleNumber() {
+  return request({
+    url: '/cockpit/build/peopleNumber',
+    method: 'get'
+  })
+}
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index df71207..33d701a 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -280,37 +280,37 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  .table{
-    margin-bottom: 20px;
-  }
-  .pagination-container{
-    padding-bottom: 50px;
-  }
-  .table-title{
-    /*background-color:rgba(243, 243, 243, 1);*/
-    background-color:#fff;
-    .title-header{
-      font-size: 15px;
-      i{
-        margin-left: 10px;
-        margin-right: 5px;
-      }
-      i:focus{
-        outline: none;
-      }
+.table{
+  margin-bottom: 20px;
+}
+.pagination-container{
+  padding-bottom: 50px;
+}
+.table-title{
+  /*background-color:rgba(243, 243, 243, 1);*/
+  background-color:#fff;
+  .title-header{
+    font-size: 15px;
+    i{
+      margin-left: 10px;
+      margin-right: 5px;
+    }
+    i:focus{
+      outline: none;
     }
   }
-  .edit_btns{
-    padding-top:7px;
-    padding-right:3px;
-    text-align: right;
+}
+.edit_btns{
+  padding-top:7px;
+  padding-right:3px;
+  text-align: right;
+}
+.popper-div{
+  line-height: 1.5;
+  .popper-btns{
+    margin-top:10px;
   }
-  .popper-div{
-    line-height: 1.5;
-    .popper-btns{
-      margin-top:10px;
-    }
-  }
+}
 </style>
 
 <style>
diff --git a/src/router/modules/menu.js b/src/router/modules/menu.js
index 28ecc52..447517e 100644
--- a/src/router/modules/menu.js
+++ b/src/router/modules/menu.js
@@ -8,7 +8,7 @@
     redirect: '/loginBoard',
     meta: {
       title: '主页',
-      permission: ['/loginBoard'],
+      // permission: ['/loginBoard'],
       icon: '' // 图标
     },
     children: [
@@ -16,7 +16,7 @@
         path: '/loginBoard',
         name: 'LoginBoard',
         component: () => import('@/views/backstage/loginBoard'),
-        meta: { title: '主页', icon: '', permission: ['/loginBoard'] }
+        meta: { title: '主页', icon: '' }
       }
     ]
   },
diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss
index 0d1614b..f39542e 100644
--- a/src/styles/element-ui.scss
+++ b/src/styles/element-ui.scss
@@ -74,3 +74,6 @@
   height:48px;
   line-height:48px;
 }
+.el-time-panel {
+  margin-left: -20px !important;
+}
diff --git a/src/utils/request.js b/src/utils/request.js
index 02dcee1..a81c17f 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -39,19 +39,21 @@
     } else if (res.code !== 200) {
       // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
       if (res.code === 401 || res.code === 50012 || res.code === 50014) {
-        MessageBox.confirm(
-          '你已被登出，可以取消继续留在该页面，或者重新登录',
-          '确定登出',
-          {
-            confirmButtonText: '重新登录',
-            cancelButtonText: '取消',
-            type: 'warning'
-          }
-        ).then(() => {
-          store.dispatch('FedLogOut').then(() => {
-            location.reload() // 为了重新实例化vue-router对象 避免bug
+        if (!window.location.href.endsWith('right') && !window.location.href.endsWith('left') && !window.location.href.endsWith('bottom')) {
+          MessageBox.confirm(
+            '你已被登出，可以取消继续留在该页面，或者重新登录',
+            '确定登出',
+            {
+              confirmButtonText: '重新登录',
+              cancelButtonText: '取消',
+              type: 'warning'
+            }
+          ).then(() => {
+            store.dispatch('FedLogOut').then(() => {
+              location.reload() // 为了重新实例化vue-router对象 避免bug
+            })
           })
-        })
+        }
       } else {
         Message({
           showClose: true,
diff --git a/src/views/common/trailDialog.vue b/src/views/common/trailDialog.vue
index 04a83eb..fd90c34 100644
--- a/src/views/common/trailDialog.vue
+++ b/src/views/common/trailDialog.vue
@@ -52,6 +52,8 @@
         75: '75%'
       },
       listQuery: {
+        staffCode: '',
+        personName: '',
         facePicUrl: '',
         startTime: '',
         endTime: '',
@@ -81,11 +83,14 @@
   },
   methods: {
     // 初始化对话框
-    initDialog: function(picture = null, name) {
-      this.textMap = '轨迹追踪 — ' + name
+    initDialog: function(row) {
+      this.textMap = '轨迹追踪 — ' + row.staffName
+      this.list = []
       this.clearInput()
       this.dialogFormVisible = true
-      this.listQuery.facePicUrl = picture
+      this.listQuery.facePicUrl = row.picture
+      this.listQuery.staffCode = row.staffCode
+      this.listQuery.personName = row.staffName
       this.fetchData()
     },
     fetchData() {
diff --git a/src/views/person/staffList.vue b/src/views/person/staffList.vue
index ce8643e..95acc5c 100644
--- a/src/views/person/staffList.vue
+++ b/src/views/person/staffList.vue
@@ -332,7 +332,7 @@
     },
     trail(row) {
       this.dialogFormVisible1 = true
-      this.$refs.trailDialog.initDialog(row.picture, row.staffName)
+      this.$refs.trailDialog.initDialog(row)
     },
     // 打开详情对话框
     detail(row) {
diff --git a/src/views/popup/board.vue b/src/views/popup/board.vue
index eb229cc..0f47c22 100644
--- a/src/views/popup/board.vue
+++ b/src/views/popup/board.vue
@@ -4,7 +4,7 @@
       人员轨迹追踪
       <svg-icon v-if="list.length > 0" icon-class="pop-cross" class="close-icon" @click="close" />
     </div>
-    <el-form ref="ruleForm" :model="listQuery" :rules="rules" label-width="100px">
+    <el-form ref="ruleForm" :model="listQuery" :rules="rules" label-width="80px">
       <el-row :gutter="20">
         <el-col :span="12" class="form-item-person-info">
           <el-form-item label="人员信息" prop="personName" style="position:relative">
@@ -20,7 +20,8 @@
               size="small"
               placeholder="请输入人员姓名"
               :popper-append-to-body="false"
-              @change="handlePerson">
+              @change="handlePerson"
+            >
               <el-option
                 v-for="item in personNameList"
                 :key="item.staffCode"
@@ -41,7 +42,7 @@
               end-placeholder="终止时间"
               size="small"
               :clearable="false"
-              style="width:98%"
+              style="width:98%;"
             />
           </el-form-item>
         </el-col>
@@ -53,7 +54,7 @@
           </el-form-item>
         </el-col>
         <el-col :span="6">
-          <el-form-item label="最小相似度" prop="minSimilarity">
+          <el-form-item label="最小相似度" prop="minSimilarity" label-width="100px">
             <el-input v-model="listQuery.minSimilarity" size="small" placeholder="区间50-100" />
           </el-form-item>
         </el-col>
@@ -81,7 +82,7 @@
             <div class="title text-over">
               {{ child.positionName ? child.positionName : '' }}
             </div>
-            <div class="desc text-over" :title="child.devName">
+            <div class="desc text-over" :title="child.devName" style="white-space: normal;word-wrap: break-word;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2; ">
               {{ child.devName ? child.devName : '' }}
             </div>
             <div class="date" style="width:145px">
@@ -110,6 +111,7 @@
     return {
       selectLoading: false,
       personName: '',
+      staffCode: '',
       point: [],
       listQuery: {
         facePicUrl: '', // 图片url
@@ -260,6 +262,7 @@
       this.personNameList.map(item => {
         if (item.staffCode === person) {
           this.personName = item.personName
+          this.staffCode = item.staffCode
           // this.listQuery.personName = item.personName
           this.listQuery.facePicUrl = item.personPicture
           this.listQuery.gender = item.gender
@@ -299,7 +302,11 @@
         spinner: 'el-icon-loading',
         background: 'rgba(0, 0, 0, 0.7)'
       })
-      const postData = Object.assign(this.listQuery, { 'personName': this.personName })
+      const postData = Object.assign(this.listQuery,
+        {
+          'personName': this.personName,
+          'staffCode': this.staffCode
+        })
       console.log(postData)
       hikPic(postData).then(response => {
         loading.close()
@@ -325,6 +332,7 @@
       this.listQuery.minSimilarity = '50'
       this.listQuery.timeRange = ['', '']
       this.personName = ''
+      this.staffCode = ''
       this.list = []
     },
     // 轨迹上墙
@@ -359,299 +367,299 @@
   }
 }
 </script>
-
 <style rel="stylesheet/scss" lang="scss" scoped>
-  ::v-deep(.el-input__inner){
-    border:1px solid #40C3F1 !important;
-    background: transparent !important;
-    color:#fff !important;
+::v-deep(.el-input__inner){
+  border:1px solid #40C3F1 !important;
+  background: transparent !important;
+  color:#fff !important;
+}
+::v-deep(.el-range-input){
+  background: transparent !important;
+  color:#fff !important;
+}
+::v-deep(.el-form-item__label){
+  color:#f1f1f1 !important;
+  font-weight: 400 !important;
+}
+::v-deep(.el-range-separator){
+  color:#f1f1f1 !important;
+  font-weight: 400 !important;
+  color:#fff !important;
+}
+::v-deep(.el-select .el-select-dropdown__wrap) {
+  max-height: 350px !important;
+  overflow-y: auto !important;
+}
+
+.form-item-person-info:hover{
+  cursor: text !important;
+}
+.el-form-item__content:hover{
+  cursor: text !important;
+}
+::v-deep(.form-item-person-info .el-input__inner):hover{
+  cursor: text !important;
+}
+::-webkit-scrollbar {
+  z-index: 11;
+  width: 6px;
+}
+::-webkit-scrollbar-track,
+::-webkit-scrollbar-corner {
+  border-radius: 5px;
+  background: #fff;
+}
+::-webkit-scrollbar-thumb {
+  border-radius: 5px; // 滚动条
+  width: 6px;
+  background-color: #ccc;
+  :hover {
+    background-color: #ccc;
   }
-  ::v-deep(.el-range-input){
-    background: transparent !important;
-    color:#fff !important;
-  }
-  ::v-deep(.el-form-item__label){
-    color:#f1f1f1 !important;
-    font-weight: 400 !important;
-  }
-  ::v-deep(.el-range-separator){
-    color:#f1f1f1 !important;
-    font-weight: 400 !important;
-    color:#fff !important;
-  }
-  ::v-deep(.el-select .el-select-dropdown__wrap) {
-    max-height: 350px !important;
-    overflow-y: auto !important;
-  }
-  .form-item-person-info:hover{
-    cursor: text !important;
-  }
-  .el-form-item__content:hover{
-    cursor: text !important;
-  }
-  ::v-deep(.form-item-person-info .el-input__inner):hover{
-    cursor: text !important;
-  }
-  ::-webkit-scrollbar {
-      z-index: 11;
-      width: 6px;
-    }
-    ::-webkit-scrollbar-track,
-    ::-webkit-scrollbar-corner {
-      border-radius: 5px;
-      background: #fff;
-    }
-    ::-webkit-scrollbar-thumb {
-      border-radius: 5px; // 滚动条
-      width: 6px;
-      background-color: #ccc;
-      :hover {
-        background-color: #ccc;
-      }
-    }
-    ::-webkit-scrollbar-track-piece {
-      border-radius: 5px; // 轨道
-      background: #fff;
-      width: 6px;
-    }
-  .text-over{
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-  .wrap{
-    width:100%;
-    height: 100%;
-    background: #5F8EB9;
+}
+::-webkit-scrollbar-track-piece {
+  border-radius: 5px; // 轨道
+  background: #fff;
+  width: 6px;
+}
+.text-over{
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.wrap{
+  width:100%;
+  height: 100%;
+  background: #5F8EB9;
+  position: relative;
+  overflow: hidden;
+  .header{
     position: relative;
-    overflow: hidden;
-    .header{
+    width: 98%;
+    margin-left:20px;
+    border-top: 10px solid #5F8EB9;
+    border-bottom: 10px solid #5F8EB9;
+    padding:5px 0 5px 20px;
+    color:#f1f1f1;
+    background: #30486C;
+    font-size: 16px;
+  }
+}
+.el-select{
+  width: 100%;
+}
+.header::after{
+  content:"";
+  display: inline-block;
+  position: absolute;
+  top:0;
+  left: -8px;
+  width:4px;
+  height:100%;
+  background: #40C3F1;
+}
+.list-wrap{
+  width:100%;
+  // width:900px;
+  height: calc(100% - 175px); // 去除头部区域
+  overflow-y: auto;
+  .main{
+    width:99%;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    .row {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 40px;
+    }
+    .row:nth-child(2n) {
+      flex-direction: row-reverse;
+    }
+    .row:nth-child(2n):last-child .item {
+      margin-right: auto;
+    }
+    .list-item{
       position: relative;
-      width: 98%;
-      margin-left:20px;
-      border-top: 10px solid #5F8EB9;
-      border-bottom: 10px solid #5F8EB9;
-      padding:5px 0 5px 20px;
-      color:#f1f1f1;
-      background: #30486C;
-      font-size: 16px;
-    }
-  }
-  .el-select{
-    width: 100%;
-  }
-  .header::after{
-      content:"";
-      display: inline-block;
-      position: absolute;
-      top:0;
-      left: -8px;
-      width:4px;
-      height:100%;
-      background: #40C3F1;
-    }
-    .list-wrap{
-      width:100%;
-      // width:900px;
-      height: calc(100% - 175px); // 去除头部区域
-      overflow-y: auto;
-      .main{
-        width:99%;
-        margin: 0 auto;
-        display: flex;
-        flex-direction: column;
-        .row {
-          display: flex;
-          justify-content: space-between;
-          margin-bottom: 40px;
-        }
-        .row:nth-child(2n) {
-          flex-direction: row-reverse;
-        }
-        .row:nth-child(2n):last-child .item {
-          margin-right: auto;
-        }
-        .list-item{
-          position: relative;
-          width: 48%;
-          height: 240px;
-          background-image: url("../../assets/global_images/monitor.png");
-          background-repeat: no-repeat;
-          background-size: cover;
-          // background-size: 100% 100%;
-          // margin-left: 20px;
-          z-index: 10;
-          .img-wrap{
-            position: absolute;
-            left:35px;
-            top:40px;
-            width:238px;
-            height:138px;
-            overflow: hidden;
-            z-index: -1;
-          }
-          .title{
-            width:150px;
-            position: absolute;
-            left:42%;
-            top: 40px;
-            font-size: 20px;
-            color:#40C3F1;
-          }
-          .desc{
-            width:150px;
-            position: absolute;
-            left:42%;
-            top: 75px;
-            font-size: 16px;
-            color:#f1f1f1;
-          }
-          .date{
-            position: absolute;
-            left:50%;
-            transform: translateX(-50%);
-            bottom:70px;
-            font-size: 14px;
-            color:#c1c1c1;
-            margin-left:25px;
-          }
-          .date::after{
-            position: absolute;
-            top:0;
-            left:-20px;
-            content:"";
-            display: inline-block;
-            width: 15px;
-            height: 15px;
-            background-image: url("../../assets/global_images/date.png");
-            background-repeat: no-repeat;
-            background-size: cover;
-          }
-          .ratio{
-            // width:100px;
-            position: absolute;
-            left:50%;
-            transform: translateX(-50%);
-            bottom:40px;
-            font-size: 14px;
-            color:#c1c1c1;
-            // margin-left:18px;
-            margin-left: 25px;
-          }
-          .ratio::after{
-            position: absolute;
-            top:0;
-            left:-20px;
-            content:"";
-            display: inline-block;
-            width: 15px;
-            height: 15px;
-            background-image: url("../../assets/global_images/search.png");
-            background-repeat: no-repeat;
-            background-size: cover;
-          }
-        }
-      }
-    }
-    .main .row:nth-child(odd){
-      .list-item:nth-child(odd)::after{
-        content:"";
-        display: inline-block;
-        width:30px;
-        height: 30px;
+      width: 48%;
+      height: 240px;
+      background-image: url("../../assets/global_images/monitor.png");
+      background-repeat: no-repeat;
+      background-size: cover;
+      // background-size: 100% 100%;
+      // margin-left: 20px;
+      z-index: 10;
+      .img-wrap{
         position: absolute;
-        top:50%;
-        transform: translate(-50%);
-        right:-52px;
-        background-image: url("../../assets/global_images/right.png");
-        background-repeat: no-repeat;
-        background-size: cover;
+        left:35px;
+        top:40px;
+        width:238px;
+        height:138px;
+        overflow: hidden;
+        z-index: -1;
       }
-    }
-    .main .row:nth-child(odd){
-      .list-item:nth-child(even)::after{
-        content:"";
-        display: inline-block;
-        width:30px;
-        height: 30px;
+      .title{
+        width:150px;
         position: absolute;
-        right:50%;
-        transform: translate(-50%);
-        bottom:-35px;
-        background-image: url("../../assets/global_images/right.png");
-        background-repeat: no-repeat;
-        background-size: cover;
-        transform: rotate(90deg);
+        left:42%;
+        top: 40px;
+        font-size: 20px;
+        color:#40C3F1;
       }
-    }
-    .main .row:nth-child(even){
-      .list-item:nth-child(odd)::after{
-        content:"";
-        display: inline-block;
-        width:30px;
-        height: 30px;
+      .desc{
+        width:150px;
         position: absolute;
-        top:50%;
-        transform: translate(-50%);
-        left:-35px;
-        background-image: url("../../assets/global_images/right.png");
-        background-repeat: no-repeat;
-        background-size: cover;
-        transform: rotate(180deg);
+        left:42%;
+        top: 75px;
+        font-size: 16px;
+        color:#f1f1f1;
       }
-    }
-    .main .row:nth-child(even){
-      .list-item:nth-child(even)::after{
-        content:"";
-        display: inline-block;
-        width:30px;
-        height: 30px;
+      .date{
         position: absolute;
         left:50%;
-        transform: translate(-50%);
-        bottom:-35px;
-        background-image: url("../../assets/global_images/right.png");
+        transform: translateX(-50%);
+        bottom:70px;
+        font-size: 14px;
+        color:#c1c1c1;
+        margin-left:25px;
+      }
+      .date::after{
+        position: absolute;
+        top:0;
+        left:-20px;
+        content:"";
+        display: inline-block;
+        width: 15px;
+        height: 15px;
+        background-image: url("../../assets/global_images/date.png");
         background-repeat: no-repeat;
         background-size: cover;
-        transform: rotate(-270deg);
+      }
+      .ratio{
+        // width:100px;
+        position: absolute;
+        left:50%;
+        transform: translateX(-50%);
+        bottom:40px;
+        font-size: 14px;
+        color:#c1c1c1;
+        // margin-left:18px;
+        margin-left: 25px;
+      }
+      .ratio::after{
+        position: absolute;
+        top:0;
+        left:-20px;
+        content:"";
+        display: inline-block;
+        width: 15px;
+        height: 15px;
+        background-image: url("../../assets/global_images/search.png");
+        background-repeat: no-repeat;
+        background-size: cover;
       }
     }
-    // 如果是最后一个元素不显示箭头
-    .main .row:last-child{
-      .list-item:last-child::after{
-        display: none;
-      }
-    }
-    .list-wrap .main .list-item .img-wrap{
-      position: absolute;
-      left: 32px;
-      top: 40px;
-      // width: 190px;
-      width: 212px;
-      height: 138px;
-      overflow: hidden;
-      z-index: -1;
-    }
-    .list-wrap .main .list-item .date{
-      left:75% !important;
-      margin-bottom: 20px;
-    }
-    .list-wrap .main .list-item .ratio{
-      left:75% !important;
-    }
-    .list-wrap .main .list-item .title,.list-wrap .main .list-item .desc{
-      left:62% !important;
-    }
-    .close-icon{
-      z-index: 100;
-      position: absolute;
-      top:2px;
-      right:2px;
-      color:white;
-      background: #fc2323cc;
-      width:25px;
-      height:25px;
-      border-radius: 5px;
-      padding:3px;
-    }
+  }
+}
+.main .row:nth-child(odd){
+  .list-item:nth-child(odd)::after{
+    content:"";
+    display: inline-block;
+    width:30px;
+    height: 30px;
+    position: absolute;
+    top:50%;
+    transform: translate(-50%);
+    right:-52px;
+    background-image: url("../../assets/global_images/right.png");
+    background-repeat: no-repeat;
+    background-size: cover;
+  }
+}
+.main .row:nth-child(odd){
+  .list-item:nth-child(even)::after{
+    content:"";
+    display: inline-block;
+    width:30px;
+    height: 30px;
+    position: absolute;
+    right:50%;
+    transform: translate(-50%);
+    bottom:-35px;
+    background-image: url("../../assets/global_images/right.png");
+    background-repeat: no-repeat;
+    background-size: cover;
+    transform: rotate(90deg);
+  }
+}
+.main .row:nth-child(even){
+  .list-item:nth-child(odd)::after{
+    content:"";
+    display: inline-block;
+    width:30px;
+    height: 30px;
+    position: absolute;
+    top:50%;
+    transform: translate(-50%);
+    left:-35px;
+    background-image: url("../../assets/global_images/right.png");
+    background-repeat: no-repeat;
+    background-size: cover;
+    transform: rotate(180deg);
+  }
+}
+.main .row:nth-child(even){
+  .list-item:nth-child(even)::after{
+    content:"";
+    display: inline-block;
+    width:30px;
+    height: 30px;
+    position: absolute;
+    left:50%;
+    transform: translate(-50%);
+    bottom:-35px;
+    background-image: url("../../assets/global_images/right.png");
+    background-repeat: no-repeat;
+    background-size: cover;
+    transform: rotate(-270deg);
+  }
+}
+// 如果是最后一个元素不显示箭头
+.main .row:last-child{
+  .list-item:last-child::after{
+    display: none;
+  }
+}
+.list-wrap .main .list-item .img-wrap{
+  position: absolute;
+  left: 32px;
+  top: 40px;
+  // width: 190px;
+  width: 212px;
+  height: 138px;
+  overflow: hidden;
+  z-index: -1;
+}
+.list-wrap .main .list-item .date{
+  left:75% !important;
+  margin-bottom: 20px;
+}
+.list-wrap .main .list-item .ratio{
+  left:75% !important;
+}
+.list-wrap .main .list-item .title,.list-wrap .main .list-item .desc{
+  left:62% !important;
+}
+.close-icon{
+  z-index: 100;
+  position: absolute;
+  top:2px;
+  right:2px;
+  color:white;
+  background: #fc2323cc;
+  width:25px;
+  height:25px;
+  border-radius: 5px;
+  padding:3px;
+}
 </style>
diff --git a/src/views/popup/bottom.vue b/src/views/popup/bottom.vue
index e3fe7e2..c95b2a1 100644
--- a/src/views/popup/bottom.vue
+++ b/src/views/popup/bottom.vue
@@ -1,47 +1,84 @@
 <template>
   <div class="bottom">
-    <div class="block1">
-      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">访客控制安全系数组件</div>
-      <visit-bar style="flex:1;"/>
-    </div>
+<!--    <div class="block1" style="border-top-left-radius: 0px;margin-left: 5px">-->
+<!--      <inout-list style="flex:1;"/>-->
+<!--    </div>-->
     <div class="block">
       <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安防事件列表</div>
       <case-table style="flex:1;"/>
     </div>
-    <div class="block">
-      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">其他相关安全系数指标组件</div>
-      <other-line style="flex:1;"/>
+    <div class="block1" style="flex-direction: row;width: 700px">
+      <div style="width: 200px">
+        <div class="item0" style="margin: 36px 0">
+          <el-image :src="require('@/assets/popup/事件.png')" class="base-map-image" mode="fill" />
+          <div class="item-text">
+            <div class="num">{{caseNum.all}}<span class="unit"> 件</span></div>
+            <div style="color: #B3F3F6;">今日总事件</div>
+          </div>
+        </div>
+        <div class="item0">
+          <el-image :src="require('@/assets/popup/事件1.png')" class="base-map-image" mode="fill" />
+          <div class="item-text">
+            <div class="num"><span style="color: #08f102;text-shadow: 0 0 5px #08f102;">{{caseNum.solve}}</span><span class="unit"> 件</span></div>
+            <div style="color: #B3F3F6;">今日已解决</div>
+          </div>
+        </div>
+      </div>
+      <case-pie style="width: calc(100% - 200px);height: 100%"/>
     </div>
-    <div class="block1">
-      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安保人员到岗系数组件</div>
-      <staff-bar1 style="flex:1;"/>
+    <div class="block">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安防事件频率统计</div>
+      <case-bar style="flex:1;"/>
     </div>
   </div>
 </template>
 
 <script>
-// import VisitorPie from "@/views/popup/components/visitorPie";
-import VisitBar from '@/views/popup/components/visitBar';
-import StaffBar1 from '@/views/popup/components/staffBar1';
-import CaseTable from '@/views/popup/components/caseTable';
-// import ReqairTable from "@/views/popup/components/reqairTable";
-import OtherLine from '@/views/popup/components/otherLine';
+
+import CaseTable from '@/views/popup/components/caseTable'
+import CasePie from '@/views/popup/components/casePie'
+import { caseTodayStatistics } from '@/api/pop'
+import CaseBar from '@/views/popup/components/caseBar'
+import InoutList from '@/views/popup/components/inoutList'
 
 export default {
   name: 'Bottom',
-  components: { OtherLine, CaseTable, StaffBar1, VisitBar },
+  components: { InoutList, CaseBar, CasePie, CaseTable },
   data() {
     return {
+      timer: null,
       titleImg: require('@/assets/popup/title.png'), // 背景图片
-      titleAll: require('@/assets/popup/title-all.png'),// 背景图片
-      list: [2156, 2144, 455, 314, 98]
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      list: [2156, 2144, 455, 314, 98],
+      caseNum: {
+        all: 0,
+        solve: 0
+      }
     }
   },
+  mounted() {
+    clearInterval(this.timer)
+    this.search()
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+    this.timer = null
+  },
+  methods: {
+    search() {
+      this.timer = setInterval(() => {
+        caseTodayStatistics().then(response => {
+          if (response.code === 200) {
+            this.caseNum = response.data
+          }
+        })
+      }, 10000)
+    }
+  }
 }
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-
 .bottom{
   width: 100%;
   height: 220px;
@@ -57,11 +94,11 @@
     border-radius: 5px;
     box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
     border-color: rgba(0, 0, 0, .05);
-    margin: 0px 10px;
+    margin: 0px 5px;
     flex-direction: column;
   }
   .block1{
-    width: 500px;
+    width: 750px;
     height: 100%;
     display: flex;
     flex-wrap: wrap;
@@ -69,7 +106,7 @@
     border-radius: 5px;
     box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
     border-color: rgba(0, 0, 0, .05);
-    margin: 0px 10px;
+    margin: 0px 5px;
     flex-direction: column;
   }
   .title{
@@ -93,5 +130,31 @@
     font-size: 15px;
 
   }
+  .item0{
+    width: 100%;
+    height: 50px;
+    display: flex;
+    justify-content: left;
+    align-items: center;
+    padding: 0 8%;
+  }
+  .item-text{
+    text-shadow: 0 0 2px #d1ffff;
+    flex: 1;
+    font-weight: bold;
+    text-align: center;
+    font-size: 18px;
+  }
+  .num{
+    text-shadow: 0 0 5px #ffb441;
+    color: #ffb441;
+    font-size: 20px;
+    padding-top: 2px;
+  }
+  .unit{
+    color: #B3F3F6;
+    font-size: 14px;
+    margin-left: 1px;
+  }
 }
 </style>
diff --git a/src/views/popup/components/caseTable.vue b/src/views/popup/components/caseTable.vue
index 95aa677..c9708d7 100644
--- a/src/views/popup/components/caseTable.vue
+++ b/src/views/popup/components/caseTable.vue
@@ -1,5 +1,9 @@
 <template>
   <div class="flowTable">
+<!--    <el-tabs v-model="activeName" @tab-click="changeTime" style="display: flex;position:absolute;right: 30px;top:5px">-->
+<!--      <el-tab-pane label="已解决" name="week"/>-->
+<!--      <el-tab-pane label="未解决" name="month"/>-->
+<!--    </el-tabs>-->
     <div class="success_info_body" v-show="showFlag">
       <!-- 参数名称、列数根据实际情况调整 -->
       <div class="table_body">
@@ -14,7 +18,7 @@
         <div class="table_main_body">
           <div class="table_inner_body" :style="{top: tableTop + 'px'}">
             <div v-for="(item,index) in tableList" class="table_tr" :class="checkCell(item,index)" :key="index" @click="JumpDevice(item)">
-              <div class="tr1 tr">{{item.levelName}}</div>
+              <div class="tr1 tr" :style="{color: item.levelName ==='重大' ? 'red' : item.levelName ==='较大' ? 'orange' : '#b8dffd'}">{{item.levelName}}</div>
               <div class="tr2 tr">{{item.description}}</div>
               <div class="tr1 tr">{{item.statusName}}</div>
               <div class="tr2 tr">{{item.typeName}}</div>
@@ -41,7 +45,7 @@
   data() {
     return {
       picurl: '',
-      defaultPhoto: require('@/assets/global_images/photo_error.png'),
+      defaultPhoto: require('@/assets/global_images/photo_offline.png'),
       errorImg: require('@/assets/global_images/photo_error.png'),
       showFlag: true,
       tableTimer: null,
@@ -104,8 +108,9 @@
       this.picurl = ''
       this.isbig = false
       getCaseListPage({
+        status: '',
         offset: 1,
-        limit: 15
+        limit: 20
       }).then(response => {
         if (response.code === 200) {
           this.tableList = response.data.rows
@@ -190,13 +195,18 @@
   line-height: 15px;
 }
 .tr {
-  overflow: hidden;
   text-overflow: ellipsis;
-  white-space: nowrap;
   box-sizing: border-box;
   padding: 0 5px;
   text-align: center;
   font-size: 13px;
+  word-wrap: break-word; /* 允许在单词内换行 */
+  overflow-wrap: break-word; /* 同上，现代浏览器推荐使用 */
+  white-space: normal; /* 允许自动换行 */
+  line-height: 15px;
+  display: flex;
+  align-items: center; /* 垂直居中 */
+  justify-content: center; /* 水平居中，如需要 */
 }
 .tr1 {
   width: 13%;
@@ -253,7 +263,7 @@
   }
 }
 .hard-state{
-  background:red;
+  background: #ff8585;
 }
 .medium-state{
   background: #ea9700;
diff --git a/src/views/popup/components/doorList.vue b/src/views/popup/components/doorList.vue
new file mode 100644
index 0000000..7bc178a
--- /dev/null
+++ b/src/views/popup/components/doorList.vue
@@ -0,0 +1,257 @@
+<template>
+  <div style="width: 100%;height: 100%;">
+    <div style="text-align: right;margin-right: 5px;">
+      <el-button class="doorbar-btn" type="primary" plain @click="isOn1 = !isOn1" style="margin-left: 3px">{{isOn1 ? '隐藏操作按钮': '开启操作按钮'}}</el-button>
+      <el-button class="doorbar-btn" type="primary" plain @click="controlDool()">{{!isOn2 ? '开启黑名单与闸机联动': '关闭黑名单与闸机联动'}}</el-button>
+    </div>
+    <div class="success_info_body" style="margin: 0 10px;flex: 1">
+      <div class="table_body">
+        <div class="table_th">
+          <div class="tr4 th_style">门禁分组</div>
+          <div class="tr1 th_style" v-show="isOn1">操作</div>
+        </div>
+        <div class="table_main_body">
+          <div class="table_inner_body" :style="{top: tableTop + 'px'}">
+            <div v-for="(item,index) in tableList" class="table_tr" :key="index">
+              <div class="tr4 tr">{{item.groupName}}</div>
+              <div class="tr1 tr" v-show="isOn1">
+                <el-button type="text" v-for="item in statusList" :key="item.value" size="small" @click.stop="editStatus(scope.row, item.value)" style="height: 20px;margin-top: -10px">
+                  {{ item.name }}
+                </el-button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+<!--    <el-pagination layout="prev, pager, next" :total="tableListSize" style="width: 100%;text-align: center" @current-change="handleCurrentChange"/>-->
+  </div>
+</template>
+
+<script>
+import {controlGroup, gateLinkageSwitch, getGroupListPage, getSwitchStatus} from '@/api/device'
+export default {
+  name: 'DoorList',
+  data() {
+    return {
+      defaultPhoto: require('@/assets/global_images/photo.png'),
+      errorImg: require('@/assets/global_images/photo_error.png'),
+      isOn1: false,
+      isOn2: false,
+      tableTimer: null,
+      tableTop: 0,
+      tableList: [],
+      statusList: [
+        { name: '常开', id: '1557975745699823618', value: '0' },
+        { name: '常闭', id: '1557975746215723010', value: '3' },
+        { name: '门开', id: '1557975746723233793', value: '2' },
+        { name: '门闭', id: '1557975747402711041', value: '1' }
+      ],
+      tableListSize: 0,
+      componentTimer: null,
+      visibleSize: 8, // 容器内可视最大完整行数
+      lineHeight: 20, // 每行的实际高度（包含margin-top/bottom,border等）
+      componentTimerInterval: 3600000, //  刷新数据的时间间隔
+      tableTimerInterval: 50, //  向上滚动 1px 所需要的时间，越小越快，推荐值 100
+      listQuery: {
+        groupName: '',
+        gateCode: '',
+        status: '',
+        offset: 1,
+        limit: 8
+      }, // 筛选条件
+      dialogFormVisible: false, // 是否显示编辑框
+      timeRange: [], // 时间范围
+      multipleSelection: [], // 多选选中项
+      list: [], // 列表数据
+      colorRow: {
+        isColor: false,
+        isPop: true
+      },
+      inoutTypeList: [],
+      passWayList: [],
+      total: 0, // 数据总数
+      listLoading: true // 列表加载动画
+    }
+  },
+  created() {
+    getSwitchStatus().then(response => {
+      if (response.code === 200) {
+        this.isOn2 = response.data === 1
+      }
+    })
+    this.fetchData()
+  },
+  methods: {
+    controlDool() {
+      this.isOn2 = !this.isOn2
+      gateLinkageSwitch(this.isOn2 ? 1 : 0).then(response => {
+        if (response.code === 200) {
+          this.$message.success((this.isOn2 ? '开启' : '关闭') + '黑名单与闸机联动成功')
+        }
+      })
+    },
+    fetchData(isNowPage = true) {
+      if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+        this.listQuery.offset = 1
+      }
+      getGroupListPage(this.listQuery).then(response => {
+        if (response.code === 200) {
+          this.tableList = response.data.rows
+          this.tableListSize = parseInt(response.data.total)
+        }
+      })
+    },
+    editStatus(row, status) {
+      controlGroup(row.id, status).then(response => {
+        if (response.code === 200) {
+          this.$message.success('通道控制成功')
+          this.fetchData()
+        }
+      }).catch(_ => { // 异常情况，loading置为false
+      })
+    },
+    handleCurrentChange(val) {
+      this.listQuery.offset = val
+      this.fetchData()
+    },
+    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.doorbar-btn {
+  height: 22px;
+  padding-top: 4px;
+  padding-right: 6px;
+  padding-left: 6px;
+  margin-right: 4px;
+}
+.table_body {
+  width: 100%;
+  margin-top: 0px;
+}
+.table_th {
+  width: 100%;
+  display: flex;
+  height: 15px;
+  line-height: 20px;
+}
+.tr {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 0 5px;
+  text-align: center;
+  font-size: 13px;
+  height: 20px !important;
+}
+.tr1 {
+  width: 35%;
+}
+.tr2 {
+  width: 18%;
+}
+.tr3 {
+  width: 15%;
+  font-size: 13px;
+}
+
+.tr4 {
+  flex: 1;
+}
+.tr5 {
+  width: 100px;
+}
+
+.th_style {
+  color: #b8dffd;
+  font-size: 13px;
+  font-weight: bold;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  box-sizing: border-box;
+  text-align: center;
+}
+.table_main_body {
+  width: 100%;
+  height: 175px;
+  overflow: hidden;
+  position: relative;
+  margin-top: 5px;
+}
+.table_inner_body {
+  width: 100%;
+  position: absolute;
+  left: 0;
+  color: #cce9ff;
+}
+
+.table_tr {
+  display: flex;
+  font-size: 13px;
+  border: 1px solid rgb(71, 160, 199);
+  margin-top: 2px;
+  height: 20px;
+  line-height: 20px;
+  cursor: pointer;
+:hover{
+  background: rgba(255, 153, 51, 0.6);
+}
+}
+.table_tr0 {
+  background: rgba(3, 145, 167, 0.1);
+}
+.table_tr1 {
+  background: rgb(64, 87, 120);
+}
+
+::v-deep .el-pagination {
+  .el-pagination__total {
+    color: white !important;
+  }
+  .el-pagination__jump {
+    color: white !important;
+  }
+  // 两个输入框
+  .el-input__inner {
+    background-color: #092546;
+    border: 1px solid rgba(192, 192, 192, 0.479);
+    color: white !important;
+  }
+  // 左右按键和里面的图标
+  button {
+    background-color: #092546;
+    .el-icon::before {
+      color: white;
+    }
+  }
+  // 分页数字
+  ul {
+    color: white;
+    .el-icon::before {
+      color: white !important;
+    }
+  }
+  // 分页数字的背景色
+  ul > li {
+    background-color: #092546;
+  }
+}
+::v-deep .el-loading-mask {
+  background-color: rgba(0, 0, 0, 0.479);
+}
+
+</style>
diff --git a/src/views/popup/components/personTable.vue b/src/views/popup/components/personTable.vue
index e2e4c1e..ca73933 100644
--- a/src/views/popup/components/personTable.vue
+++ b/src/views/popup/components/personTable.vue
@@ -7,15 +7,17 @@
           <div class="tr4 th_style">安保人员姓名</div>
           <div class="tr4 th_style">性别</div>
           <div class="tr4 th_style">照片</div>
+          <div class="tr4 th_style">状态</div>
         </div>
         <div class="table_main_body">
           <div class="table_inner_body" :style="{top: tableTop + 'px'}">
-            <div v-for="(item,index) in tableList" :class="index%2==1?'table_tr':'table_tr1'" :key="index" @click="JumpDevice(item)">
+            <div v-for="(item,index) in tableList" :class="index % 2==1?'table_tr':'table_tr1'" :key="index" @click="JumpDevice(item)">
               <div class="tr4 tr">{{item.staffName}}</div>
               <div class="tr4 tr">{{item.staffGenderName}}</div>
               <div class="tr4 tr">
                 <img :src="item.picture ? `${item.picture}`: defaultPhoto" width="40px" height="40px" style="margin-left: 5px" @error="errorImg">
               </div>
+              <div class="tr4 tr">{{item.statusName}}</div>
             </div>
           </div>
         </div>
@@ -25,7 +27,7 @@
 </template>
 <script>
 
-import { getStaffListPage, hikPic } from '@/api/person'
+import {getStaffListPage, getStaffOnList, hikPic} from '@/api/person'
 import { repostSocket } from '@/api/common';
 import { getDate } from '@/utils/calendarUtil'
 
@@ -43,7 +45,7 @@
       tableList: [],
       tableListSize: 0,
       componentTimer: null,
-      visibleSize: 5, // 容器内可视最大完整行数
+      visibleSize: 8, // 容器内可视最大完整行数
       lineHeight: 45, // 每行的实际高度（包含margin-top/bottom,border等）
       componentTimerInterval: 3600000, //  刷新数据的时间间隔
       tableTimerInterval: 50 //  向上滚动 1px 所需要的时间，越小越快，推荐值 100
@@ -51,7 +53,7 @@
   },
 
   // 如果没有父元素传值，将watch内的内容搬至mounted中即可
-  props: ["activeFactoryId"],
+  props: ['activeFactoryId'],
   watch: {
     activeFactoryId(val, oldVal) {
       clearInterval(this.componentTimer)
@@ -70,6 +72,8 @@
   methods: {
     JumpDevice(item) {
       const params = {
+        personName: item.staffName,
+        staffCode: item.staffCode,
         facePicUrl: item.picture, // 图片url
         startTime: getDate(-31, 'SECOND'), // 开始时间
         endTime: getDate(0, 'SECOND'), // 结束时间
@@ -94,51 +98,32 @@
         message: this.wallList
       }
       repostSocket(params).then(response => {
-        if (response.code === 200) {
-        }
+        if (response.code === 200) {}
       })
     },
     fetchData() {
       const params = {
-        staffType: '2',
+        // staffType: '2',
         offset: 1,
-        limit: 50,
-        keywords: '',
-        cardNum: '',
-        phone: ''
+        limit: 200
       }
-      getStaffListPage(params).then(response => {
+      getStaffOnList(params).then(response => {
         if (response.code === 200) {
           this.tableList = response.data.rows
+          // this.tableListSize = response.data.total
           this.tableActionFun()
         }
       })
-      // this.tableList = [
-      //   {
-      //     id: '',
-      //     drawNo: 'YQ-001',
-      //     levelName: '一般',
-      //     description: '保安脱岗',
-      //     status: '0',
-      //     statusName: '未解决',
-      //     typeName: '临时事件',
-      //     devName: '视频监控摄像机5',
-      //     positionName: '一期主楼',
-      //     areaName: '3F',
-      //     isKeyAreaName: '否',
-      //     detailLocation: '详细位置',
-      //     happenTime: '2022-05-06 21:55:00'
-      //   }
-      // ]
     },
     tableActionFun() {
       this.tableListSize = this.tableList.length
       if (this.tableListSize > this.visibleSize) {
         this.tableList = this.tableList.concat(this.tableList)
         this.tableTimerFun()
-      } else {
-        this.fillTableList()
       }
+      // else {
+      //   this.fillTableList()
+      // }
     },
     //  当数据过少时，不触发自动轮播事件，并填充没有数据的行，参数根据实际情况修改即可
     fillTableList() {
@@ -230,7 +215,7 @@
 }
 .table_main_body {
   width: 100%;
-  height: 200px;
+  height: calc(40vh - 140px);
   overflow: hidden;
   position: relative;
   margin-top: 5px;
diff --git a/src/views/popup/components/staffLine1.vue b/src/views/popup/components/staffLine1.vue
index d3b0a95..d3cd04b 100644
--- a/src/views/popup/components/staffLine1.vue
+++ b/src/views/popup/components/staffLine1.vue
@@ -12,8 +12,8 @@
 </template>
 
 <script>
-import { multiScoreCommute } from '@/api/pop';
-import * as echarts from "echarts";
+import { multiScoreCommute } from '@/api/pop'
+import * as echarts from 'echarts'
 export default {
   name: 'StaffLine1',
   data() {
diff --git a/src/views/popup/components/visitBar.vue b/src/views/popup/components/visitBar.vue
index 1726d20..4f35e21 100644
--- a/src/views/popup/components/visitBar.vue
+++ b/src/views/popup/components/visitBar.vue
@@ -7,7 +7,7 @@
 import * as echarts from 'echarts';
 
 export default {
-  name: 'AreaBar1',
+  name: 'VisitBar',
   data() {
     return {
       isShow: true,
diff --git a/src/views/popup/floor.vue b/src/views/popup/floor.vue
index 6342d5a..8052ae4 100644
--- a/src/views/popup/floor.vue
+++ b/src/views/popup/floor.vue
@@ -107,8 +107,7 @@
         message: 'show'
       }
       repostSocket(params).then(response => {
-        if (response.code === 200) {
-        }
+        if (response.code === 200) {}
       })
     }
   }
diff --git a/src/views/popup/left.vue b/src/views/popup/left.vue
index d35b6b2..dab745c 100644
--- a/src/views/popup/left.vue
+++ b/src/views/popup/left.vue
@@ -1,67 +1,75 @@
 <template>
   <div class="left">
-    <div class="block" style="justify-content: center;height: 29%;padding-top: 10px">
-      <div class="item">
-        <el-image :src="require('@/assets/popup/人员.png')" class="base-map-image" mode="fill" />
-        <div style="color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;"> 一期主楼、录制楼</div>
-        <div class="num">{{list["0"]}}<span class="unit">人</span></div>
+    <div class="block" style="height: 270px;">
+      <div style="display: flex;flex-direction: row;justify-content: center;padding-top: 10px;height: 70px">
+        <div class="item">
+          <el-image :src="require('@/assets/popup/cam.png')" class="base-map-image" mode="fill" />
+          <div class="item-title">摄像机</div>
+          <div class="num"><span style="color: #08f102;text-shadow: 0 0 5px #08f102;">{{cam.on}}</span> / {{cam.all}}</div>
+        </div>
+        <div class="item">
+          <el-image :src="require('@/assets/popup/闸机.png')" class="base-map-image" mode="fill" />
+          <div class="item-title">闸机</div>
+          <div class="num"><span style="color: #08f102;text-shadow: 0 0 5px #08f102;">{{door.on}}</span> / {{door.all}}</div>
+        </div>
       </div>
-      <div class="item">
-        <el-image :src="require('@/assets/popup/人员.png')" class="base-map-image" mode="fill" />
-        <div style="color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;"> 二期主楼</div>
-        <div class="num">{{list["1"]}}<span class="unit">人</span></div>
-      </div>
-      <div class="item">
-        <el-image :src="require('@/assets/popup/访客.png')" class="base-map-image" mode="fill" />
-        <div style="color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;"> 今日访客量</div>
-        <div class="num">{{list["2"]}}<span class="unit">人</span></div>
-      </div>
-      <div class="item">
-        <el-image :src="require('@/assets/popup/今日事件.png')" class="base-map-image" mode="fill" />
-        <div style="color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;"> 今日事件数</div>
-        <div class="num">{{list["3"]}}<span class="unit">件</span></div>
-      </div>
-      <div class="item">
-        <el-image :src="require('@/assets/popup/今日处置.png')" class="base-map-image" mode="fill" />
-        <div style="color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;"> 事件处置数</div>
-        <div class="num">{{list["4"]}}<span class="unit">件</span></div>
-      </div>
-      <div class="item">
-        <el-image :src="require('@/assets/popup/离线.png')" class="base-map-image" mode="fill" />
-        <div style="color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;">设备离线率</div>
-        <div class="num">{{list["5"]}}<span class="unit"></span></div>
-      </div>
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title" style="margin: 0">摄像机状态分析</div>
+      <cam-bar style="width: 100%;height: 165px"/>
     </div>
-    <div class="block" style="flex-direction: column;">
-      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">员工通勤安防系数组件</div>
-      <staff-line1 style="flex:1;"/>
+    <div class="block" style="height: 250px;">
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title" style="margin: 5px 0">闸机控制</div>
+      <door-list style="width: 100%;height: 250px;margin-top: -34px"/>
     </div>
-    <div class="block" style="flex-direction: column;">
-      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">重点区域防控系数组件</div>
-      <area-bar1 style="flex: 1"/>
+    <div class="block" style="height: 500px;">
+      <div style="display: flex;flex-direction: row;justify-content: center;height: 50px">
+        <el-tooltip class="item" effect="dark" :content="`进入人数${tips['1进入人数']}，离开人数${tips['1离开人数']}`" placement="bottom">
+          <div class="item">
+            <el-image :src="require('@/assets/popup/人员.png')" class="base-map-image" mode="fill" style="margin-top: 10px"/>
+            <div class="item-title"> 一期主楼、录制楼</div>
+            <div class="num" style="margin-top: -15px">{{tips["1"]}}<span class="unit">人</span></div>
+          </div>
+        </el-tooltip>
+        <el-tooltip class="item" effect="dark" :content="`进入人数${tips['2进入人数']}，离开人数${tips['2离开人数']}`" placement="bottom">
+          <div class="item">
+            <el-image :src="require('@/assets/popup/人员.png')" class="base-map-image" mode="fill" style="margin-top: 10px;margin-left: -20px"/>
+            <div class="item-title"> 二期主楼 </div>
+            <div class="num" style="margin-top: -15px">{{tips["2"]}}<span class="unit">人</span></div>
+          </div>
+        </el-tooltip>
+      </div>
+      <inout-list style="width: 100%;height: 350px;margin-top: 10px"/>
     </div>
   </div>
 </template>
 
 <script>
-import StaffLine1 from '@/views/popup/components/staffLine1'
-import AreaBar1 from '@/views/popup/components/areaBar1'
-import { getTodayNumber, getPeopleNumber, getDeviceNumber, offlineRate, eventNum } from '@/api/pop'
+import { buildPeopleNumber, deviceStatistics, getPeopleNumber } from '@/api/pop'
+import CamBar from '@/views/popup/components/camBar'
+import DoorList from '@/views/popup/components/doorList'
+import InoutList from '@/views/popup/components/inoutList'
+
 export default {
   name: 'Left',
-  components: { AreaBar1, StaffLine1 },
+  components: { InoutList, DoorList, CamBar },
   data() {
     return {
       timer: null,
       titleImg: require('@/assets/popup/title.png'), // 背景图片
-      titleAll: require('@/assets/popup/title-all.png'),// 背景图片
+      titleAll: require('@/assets/popup/title-all.png'), // 背景图片
+      cam: { on: '', all: '' },
+      door: { on: '', all: '' },
       list: {
         '0': '*',
         '1': '*',
-        '2': '*',
-        '3': '*',
-        '4': '*',
-        '5': '*'
+        '2': '*'
+      },
+      tips: {
+        '1': 0,
+        '2': 0,
+        '2进入人数': 0,
+        '1进入人数': 0,
+        '2离开人数': 0,
+        '1离开人数': 0
       }
     }
   },
@@ -73,59 +81,51 @@
     this.timer = setInterval(() => {
       this.initData()
     }, 60000)
+    this.initData()
   },
   methods: {
     initData() {
-      getPeopleNumber().then(response => {
+      deviceStatistics(2).then(response => {
         if (response.code === 200) {
-          this.list['0'] = response.data[1] + (response.data[3] ? response.data[3] : 0)
-          this.list['1'] = response.data[2]
+          this.cam.on = response.data.list.filter(item => item.status === '在线')[0].quantity
+          this.cam.all = response.data.total
         }
       })
-      getTodayNumber().then(response => {
+      deviceStatistics(1).then(response => {
         if (response.code === 200) {
-          this.list['2'] = response.data['今日访客量']
+          this.door.on = response.data.list.filter(item => item.status === '在线')[0].quantity
+          this.door.all = response.data.total
         }
       })
-      // getDeviceNumber().then(response => {
-      //   if (response.code === 200) {
-      //     // this.list['3'] = response.data['设备总数']
-      //     // this.list['4'] = response.data['设备在线率'].replace('%', '')
-      //   }
-      // })
-
-      offlineRate().then(response => {
+      buildPeopleNumber().then(response => {
         if (response.code === 200) {
-          this.list['5'] = response.data['设备离线率']
-        }
-      })
-      eventNum().then(response => {
-        if (response.code === 200) {
-          this.list['3'] = response.data['今日事件数']
-          this.list['4'] = response.data['今日事件处置数']
+          this.tips = response.data
         }
       })
     }
   }
 }
 </script>
-
 <style rel="stylesheet/scss" lang="scss" scoped>
-.left{
+.block{
   width: 100%;
+  height: 200px;
+  background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+  border-radius: 5px;
+  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+  border-color: rgba(0, 0, 0, .05);
+  margin-bottom: 5px;
+  flex-direction: column;
+}
+.left{
+  width: 500px;
   height: 100%;
   overflow: hidden;
-  .block{
-    height: 33%;
-    width: 500px;
-    display: flex;
-    flex-wrap: wrap;
-    background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
-    border-radius: 5px;
-    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
-    border-color: rgba(0, 0, 0, .05);
-    margin: 10px;
-  }
+  //background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
+  //box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+  //border-color: rgba(0, 0, 0, .05);
+  margin: 10px 10px 0 10px;
+  border-radius: 5px;
   .title{
     text-shadow: 0 0 5px #d1ffff;
     width: 500px;
@@ -139,6 +139,7 @@
     padding-left: 30px;
     font-family: 黑体;
     letter-spacing: 1px;
+    z-index: 1;
   }
   .base-map-image{
     width: 45px;
@@ -151,15 +152,24 @@
     height: 80%;
   }
   .item{
-    width: 33%;
+    width: 50%;
     font-weight: bold;
     text-align: center;
-    font-size: 15px;
+    font-size: 16px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    .item-title{
+      color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;margin-left: 10px;
+      line-height: 40px;
+      vertical-align: middle;
+    }
     .num{
       text-shadow: 0 0 5px #ffb441;
       color: #ffb441;
-      font-size: 18px;
-      padding-top: 2px;
+      font-size: 20px;
+      width: 100%;
+      margin-top: -0px;
     }
     .unit{
       color: #B3F3F6;
diff --git a/src/views/popup/right.vue b/src/views/popup/right.vue
index 4571ea1..b139de4 100644
--- a/src/views/popup/right.vue
+++ b/src/views/popup/right.vue
@@ -1,64 +1,79 @@
 <template>
   <div class="right">
-    <div class="block" style="justify-content: center;height: 29%;">
-      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安全防护梯度指标组件</div>
-      <div class="item">
-        <el-image :src="require('@/assets/popup/safe.png')" class="base-map-image" mode="fill" />
-        <div class="item-text">
-          <div class="num">{{list["0"]}}<span class="unit">分</span></div>
-          <div style="color: #B3F3F6;">一期主楼</div>
+    <el-tooltip effect="dark" content="安防事件评分由安防事件影响（占比50%）、访客事件影响（占比30%）、各楼栋设备维修次数（占比10%）、各楼栋消防设备有效期（占比10%）" placement="bottom">
+      <div class="block" style="justify-content: center;height: 20%;padding-top: 30px">
+        <div class="item">
+          <el-image :src="require('@/assets/popup/safe.png')" class="base-map-image" mode="fill" />
+          <div class="item-text">
+            <div class="num">{{list["0"]}}<span class="unit">分</span></div>
+            <div style="color: #B3F3F6;">一期主楼</div>
+          </div>
+        </div>
+        <div class="item">
+          <el-image :src="require('@/assets/popup/safe.png')" class="base-map-image" mode="fill" />
+          <div class="item-text">
+            <div class="num">{{list["1"]}}<span class="unit">分</span></div>
+            <div style="color: #B3F3F6;">二期主楼</div>
+          </div>
+        </div>
+        <div class="item">
+          <el-image :src="require('@/assets/popup/safe.png')" class="base-map-image" mode="fill" />
+          <div class="item-text">
+            <div class="num">{{list["2"]}}<span class="unit">分</span></div>
+            <div style="color: #B3F3F6;">录制楼</div>
+          </div>
+        </div>
+        <div class="item">
+          <el-image :src="require('@/assets/popup/safe.png')" class="base-map-image" mode="fill" />
+          <div class="item-text">
+            <div class="num">{{list["3"]}}<span class="unit">分</span></div>
+            <div style="color: #B3F3F6;">1600演播厅</div>
+          </div>
         </div>
       </div>
-      <div class="item">
-        <el-image :src="require('@/assets/popup/safe.png')" class="base-map-image" mode="fill" />
+    </el-tooltip>
+    <div class="block" style="flex-direction: column;height: 40%;">
+      <div class="item" style="margin-bottom: 10px;margin-top: -10px;margin-left: 25%">
+        <el-image :src="require('@/assets/popup/baoan.png')" class="base-map-image" mode="fill" />
         <div class="item-text">
-          <div class="num">{{list["1"]}}<span class="unit">分</span></div>
-          <div style="color: #B3F3F6;">二期主楼</div>
+          <div class="num"><span style="color: #08f102;text-shadow: 0 0 5px #08f102;">{{baoan.on}}</span> / {{baoan.all}}<span class="unit"> 位</span></div>
+          <div style="color: #B3F3F6;">安保人员总数</div>
         </div>
       </div>
-      <div class="item">
-        <el-image :src="require('@/assets/popup/safe.png')" class="base-map-image" mode="fill" />
-        <div class="item-text">
-          <div class="num">{{list["2"]}}<span class="unit">分</span></div>
-          <div style="color: #B3F3F6;">录制楼</div>
-        </div>
-      </div>
-      <div class="item">
-        <el-image :src="require('@/assets/popup/safe.png')" class="base-map-image" mode="fill" />
-        <div class="item-text">
-          <div class="num">{{list["3"]}}<span class="unit">分</span></div>
-          <div style="color: #B3F3F6;">1600演播厅</div>
-        </div>
-      </div>
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title" style="width: 100%;margin-bottom: 10px">安保人员列表</div>
+      <person-table style="flex:1;height: calc(100% - 120px)"/>
     </div>
-    <div class="block" style="flex-direction: column;">
-      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安防事件频次因数组件</div>
-          <div id="safe-star" class="star"/>
-<!--      <div :style="{backgroundImage:'url('+line+')', flex: 1}" class="case-bg">-->
-<!--        <div :style="{backgroundImage:'url('+ ball +')'}" class="ball-bg">-->
-<!--          <div class="num case-text">{{num}}<span class="unit">次</span></div>-->
-<!--          <div :style="{backgroundImage:'url('+ bottom +')'}" class="bottom-bg"/>-->
-<!--        </div>-->
-<!--      </div>-->
-    </div>
-    <div class="block" style="flex-direction: column;">
-      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">巡视人员分布因数组件</div>
-      <person-table style="flex:1;"/>
-<!--      <power-line1 style="flex:1;"/>-->
+    <div class="block" style="justify-content: center;height: 40%;align-content: flex-start;">
+      <div class="item">
+        <el-image :src="require('@/assets/popup/visitor.png')" class="base-map-image" mode="fill" />
+        <div class="item-text">
+          <div class="num"> {{visitor.in}}<span class="unit"> 位</span></div>
+          <div style="color: #B3F3F6;">今日访客进入</div>
+        </div>
+      </div>
+      <div class="item">
+        <el-image :src="require('@/assets/popup/visitor.png')" class="base-map-image" mode="fill" />
+        <div class="item-text">
+          <div class="num">{{visitor.out}}<span class="unit"> 位</span></div>
+          <div style="color: #B3F3F6;">今日访客离开</div>
+        </div>
+      </div>
+      <div :style="{backgroundImage:'url('+titleImg+')'}" class="title" style="width: 100%;margin: 10px 0">今日访客访问列表</div>
+      <visitor-table style="flex:1;"/>
     </div>
   </div>
 </template>
 
 <script>
 
-// import PowerLine1 from '@/views/popup/components/powerLine1'
-import { securityScore, securityFrequency, categoryStatistics } from '@/api/pop'
+import { securityScore, categoryStatistics, baoanStatistics, visitorStatistics } from '@/api/pop'
 import * as echarts from 'echarts'
-import PersonTable from "@/views/popup/components/personTable";
+import PersonTable from '@/views/popup/components/personTable'
+import VisitorTable from '@/views/popup/components/visitorTable'
 
 export default {
   name: 'Right',
-  components: {PersonTable },
+  components: { PersonTable, VisitorTable },
   data() {
     return {
       timer: null,
@@ -72,6 +87,14 @@
         '2': '*',
         '3': '*'
       },
+      baoan: {
+        on: 0,
+        all: 0
+      },
+      visitor: {
+        in: 0,
+        out: 0
+      },
       safeData: [],
       num: '*'
     }
@@ -85,151 +108,55 @@
     this.timer = null
   },
   methods: {
-    initStar() {
-      var myChart = echarts.init(document.getElementById('safe-star'))
-      const that = this
-      const option = {
-        tooltip: {
-          trigger: 'item'
-        },
-        legend: {
-          right: 20,
-          top: 10,
-          data: ['事件频次'],
-          itemStyle: {
-            color: '#d5f6fa'
-          },
-          textStyle: {
-            color: '#cce9ff',
-            fontWeight: 'bold',
-            fontSize: 14
-          }
-        },
-        radar: [{
-          indicator: that.safeData.map((item) => {
-            return { text: item.categoryLevelName, max: that.safeData[0].quantity * 1.2 }
-          }),
-          center: ['50%', '55%'],
-          splitArea: {
-            areaStyle: {
-              color: ['#77EADF99', '#26C3BE99', '#64AFE999', '#428BD499'],
-              shadowColor: 'rgba(0, 0, 0, 0.2)',
-              shadowBlur: 10
-            }
-          },
-          name: {
-            color: '#d5f6fa',
-            fontWeight: 'bold',
-            fontSize: 14
-          }
-        }],
-        series: [{
-          type: 'radar',
-          symbol: 'none',
-          symbolSize: 4,
-          lineStyle: {
-            width: 3,
-            color: 'rgb(12,228,235)'
-          },
-          areaStyle: {
-            color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
-              {
-                color: 'rgb(8,91,121,0.8)',
-                offset: 0
-              },
-              {
-                color: 'rgb(12,228,235,0.8)',
-                offset: 1
-              }
-            ])
-          },
-          emphasis: {
-            areaStyle: {
-              color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
-                {
-                  color: 'rgb(8,91,121,0.5)',
-                  offset: 0
-                },
-                {
-                  color: 'rgb(12,228,235,0.5)',
-                  offset: 1
-                }
-              ])
-            }
-          },
-          data: [{
-            value: that.safeData.map(item => item.quantity),
-            name: '事件频次',
-            symbol: 'rect',
-            symbolSize: 5,
-            lineStyle: {
-              type: 'dashed'
-            },
-            label: {
-              show: true,
-              fontSize: 14,
-              fontWeight: 'bold',
-              color: '#ff9933',
-              formatter: function (params) {
-                return params.value
-              }
-            }
-          }]
-        }]
-      }
-      myChart.clear()
-      myChart.setOption(option, true)
-      window.addEventListener('resize', function() {
-        myChart.resize()
-      })
-    },
     initData() {
       this.timer = setInterval(() => {
         securityScore().then(response => {
           if (response.code === 200) {
-            this.list['0'] = response.data['一期主楼']
-            this.list['1'] = response.data['二期主楼']
-            this.list['2'] = response.data['录制楼']
-            this.list['3'] = response.data['1600演播厅']
+            this.list['0'] = response.data['一期主楼'].toFixed(2)
+            this.list['1'] = response.data['二期主楼'].toFixed(2)
+            this.list['2'] = response.data['录制楼'].toFixed(2)
+            this.list['3'] = response.data['1600演播厅'].toFixed(2)
           }
         })
-      }, 10000)
-      categoryStatistics().then(response => {
-        if (response.code === 200) {
-          this.safeData = response.data
-          this.safeData.length = 5
-          this.initStar()
-        }
-      })
-      // securityFrequency().then(response => {
-      //   if (response.code === 200) {
-      //     this.num = response.data['quantity']
-      //   }
-      // })
+        baoanStatistics().then(response => {
+          if (response.code === 200) {
+            this.baoan = response.data
+          }
+        })
+        visitorStatistics().then(response => {
+          if (response.code === 200) {
+            this.visitor = response.data
+          }
+        })
+      }, 5000)
     }
   }
 }
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
+.el-tooltip__popper{
+  margin-top: 0px !important;
+}
 .star {
   width: 100%;
-  height: 85%;
+  height: calc(100% - 40px);
 }
 .right{
   width: 100%;
   height: 100%;
   overflow: hidden;
   .block{
-    height: 33%;
-    width: 500px;
-    display: flex;
-    flex-wrap: wrap;
     background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D);
     border-radius: 5px;
     box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
     border-color: rgba(0, 0, 0, .05);
+    height: 33%;
+    width: 500px;
+    display: flex;
+    flex-wrap: wrap;
     margin: 10px;
+    padding-top: 20px;
   }
   .title{
     text-shadow: 0 0 5px #d1ffff;
diff --git a/src/views/popup/top.vue b/src/views/popup/top.vue
index 7850d83..d86f120 100644
--- a/src/views/popup/top.vue
+++ b/src/views/popup/top.vue
@@ -3,6 +3,14 @@
     <div :style="{backgroundImage:'url('+top+')'}" class="top"/>
     <div class="title">安防综合管理平台</div>
     <clock class="clock"/>
+    <div style="position: absolute;top:5px;left:450px;display: flex">
+      <el-button type="primary" circle style="width: 28px;height: 28px;padding-top: 4px;padding-left: 4px;" @click="shj('1')">
+        <el-image :src="require('@/assets/images/1.png')" mode="fill" style="width: 20px;height: 20px;" />
+      </el-button>
+      <el-button type="primary" circle style="width: 28px;height: 28px;margin-left: 10px;padding-top: 4px;padding-left: 4px;" @click="shj('2')">
+        <el-image :src="require('@/assets/images/2.png')" mode="fill" style="width: 20px;height: 20px;" />
+      </el-button>
+    </div>
     <div class="sys">
       <svg-icon icon-class="next-circle"/>
     </div>
@@ -10,7 +18,8 @@
 </template>
 
 <script>
-import Clock from '@/components/Clock';
+import Clock from '@/components/Clock'
+import { repostSocket } from '@/api/common'
 export default {
   name: 'Top',
   components: { Clock },
@@ -20,6 +29,16 @@
     }
   },
   methods: {
+    shj(num) {
+      const params = {
+        type: 'shj-page',
+        message: num
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+        }
+      })
+    }
   }
 }
 </script>
diff --git a/src/views/video/history.vue b/src/views/video/history.vue
index dbf02b0..f2f2430 100644
--- a/src/views/video/history.vue
+++ b/src/views/video/history.vue
@@ -6,37 +6,23 @@
       </el-col>
     </div>
     <el-col :span="18">
-      <el-card class="box-card" style="margin-top: 14px; height: calc(100vh - 170px);">
-        <div style="z-index: 9999;margin-left: 20px">
-          <el-form ref="dataForm" :inline="true" :model="listQuery" :rules="rules" class="form-container">
-            <el-form-item class="selectForm-container-item" prop="startTime">
-              <el-date-picker
-                v-model="timeRange"
-                type="datetimerange"
-                range-separator="至"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                start-placeholder="搜索起始时间"
-                end-placeholder="搜索截止时间"
-                arrow-control="true"
-                @focus="dateClick"
-                @change="dateSelected"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <!--<el-button class="filter-item" type="primary" @click="live">实时预览</el-button>-->
-          </el-form>
-        </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 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"/>-->
-          <!--</el-tab-pane>-->
-          <!--</el-tabs>-->
-        </div>
-      </el-card>
+      <div style="z-index: 9999;margin-left: 10px;margin-top: 25px">
+        <el-date-picker
+          v-model="timeRange"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="搜索起始时间"
+          end-placeholder="搜索截止时间"
+          arrow-control="true"
+          :clearable="false"
+          @focus="dateClick"
+          @blur="dateSelected"
+          @change="dateSelected"/>
+      </div>
+      <div id="tabDiv">
+        <iframe name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html?wmode=opaque"/>
+      </div>
     </el-col>
   </div>
 </template>
@@ -59,8 +45,6 @@
       }
     }
     return {
-      activeName: 'hk',
-      videoShow: true,
       timeRange: [],
       listQuery: {
         indexCode: '',
@@ -90,41 +74,24 @@
     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',document.getElementById('tabDiv').getBoundingClientRect().left + 20)
     }, 100)
   },
+  beforeDestroy() {
+    window.frames['playHK'].destoryPlugin()
+  },
   methods: {
-    handleClick(tab, event) {
-      if (tab.name === 'hk') {
-        this.activeName = 'hk'
-        console.log('hk')
-        window.frames['playHK'].initPlugin('back',document.getElementById('tabDiv').getBoundingClientRect().left + 20)
-      } else if (tab.name === 'nvr') {
-        this.activeName = 'nvr'
-        // window.frames['playNVR'].stopPlayReal(null)
-      }
-    },
     search() {
       window.frames['playHK'].show()
-      if (this.listQuery. indexCode === '') {
+      if (this.listQuery.indexCode === '') {
         this.$message.warning('请先选中一个监控点')
         return
       }
-      this.videoShow = true
-      this.$refs['dataForm'].validate((valid) => {
-        if (valid) {
-          if (this.activeName === 'nvr') {
-            window.frames['playNVR'].search(0, this.listQuery.startTime, this.listQuery.endTime)
-          } else if (this.activeName === 'hk') {
-            console.log(this.listQuery. indexCode, this.listQuery.startTime, this.listQuery.endTime)
-            window.frames['playHK'].search(this.listQuery. indexCode, this.listQuery.startTime, this.listQuery.endTime)
-          }
-        }
-      })
+      if (this.timeRange !== []) {
+        window.frames['playHK'].search(this.listQuery.indexCode, this.listQuery.startTime, this.listQuery.endTime)
+      }
     },
     handleCameraClicked(camera) {
-      console.log(camera)
       if (typeof camera.indexCode === 'undefined' || camera.indexCode === '') {
         return false
       } else {
@@ -138,6 +105,7 @@
     },
     dateSelected() {
       window.frames['playHK'].show()
+      this.search()
     }
   }
 }
@@ -145,7 +113,7 @@
 
 <style scoped>
 .iframe-body{
-  height: calc(100vh - 250px);
+  height: calc(100vh - 200px);
   width: 100%;
   frameBorder: 0;
   scrolling: no;
@@ -153,6 +121,7 @@
   vspale: 0;
   z-index: -1;
   padding:0 !important;
+  margin-top: -10px;
 }
 .playWnd {
   margin: 10px 0 0 20px;
@@ -163,5 +132,7 @@
 }
 .video{
   background: white;
+  width: 100%;
+  height: calc(100vh - 80px);
 }
 </style>
diff --git a/src/views/video/monitor.vue b/src/views/video/monitor.vue
index 51f3cf7..d70d530 100644
--- a/src/views/video/monitor.vue
+++ b/src/views/video/monitor.vue
@@ -6,15 +6,7 @@
       </el-col>
       <el-col :span="18">
         <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"/>-->
           <iframe name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html"/>
-          <!--</el-tab-pane>-->
-          <!--<el-tab-pane label="NVR" name="nvr">-->
-          <!--<iframe v-if="activeName==='nvr'" name="playNVR" class="iframe-body" src="/static/webCtrl/nvr/demo-easy.html"/>-->
-          <!--</el-tab-pane>-->
-          <!--</el-tabs>-->
         </div>
       </el-col>
     </el-row>
@@ -29,38 +21,26 @@
   components: { VideoTree },
   data() {
     return {
-      activeName: 'hk',
       tabHeight: '',
       tabWidth: ''
     }
   },
   mounted() {
-    // console.log(document.getElementById("tabDiv").getBoundingClientRect().left)
     setTimeout(() => {
       window.frames['playHK'].initPlugin('real', document.getElementById('tabDiv').getBoundingClientRect().left + 20, 110)
     }, 100)
   },
+  beforeDestroy() {
+    window.frames['playHK'].destoryPlugin()
+  },
   methods: {
-    handleClick(tab, event) {
-      if (tab.name === 'hk') {
-        this.activeName = 'hk'
-        window.frames['playHK'].initPlugin('real', document.getElementById('tabDiv').getBoundingClientRect().left + 20)
-      } else if (tab.name === 'nvr') {
-        this.activeName = 'nvr'
-        window.frames['playNVR'].stopPlayReal(null)
-      }
-    },
     handleCameraClicked(camera) {
       console.log(camera)
       if (typeof camera.indexCode === 'undefined' || camera.indexCode === '') {
         console.log('monitorPoint is null')
         return false
       } else {
-        if (this.activeName === 'hk') {
-          window.frames['playHK'].play(camera.indexCode)
-        } else if (this.activeName === 'nvr') {
-          window.frames['playNVR'].startPlayReal()
-        }
+        window.frames['playHK'].play(camera.indexCode)
       }
     }
   }
@@ -69,16 +49,17 @@
 
 <style scoped>
   .iframe-body{
-    height: calc(100vh - 180px);
+    height: calc(100vh - 130px);
     width: 100%;
     position: relative;
     top: 0px;
     left: 0px;
-    /*frameBorder: 0;*/
     scrolling: no;
     border: 1px;
   }
   .video{
     background: white;
+    width: 100%;
+    height: calc(100vh - 80px);
   }
 </style>
diff --git a/src/views/video/videoTree.vue b/src/views/video/videoTree.vue
index fcb25cb..e8dcaf5 100644
--- a/src/views/video/videoTree.vue
+++ b/src/views/video/videoTree.vue
@@ -102,7 +102,7 @@
   .tree-block {
     margin: 15px;
     box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
-    height: calc(100vh - 175px);
+    height: calc(100vh - 105px);
     background: white;
   }
 
diff --git a/src/views/visitor/editApplication.vue b/src/views/visitor/editApplication.vue
index a4d8e41..4f253d3 100644
--- a/src/views/visitor/editApplication.vue
+++ b/src/views/visitor/editApplication.vue
@@ -74,7 +74,7 @@
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row :gutter="20" v-if="form.applicationType !== '1'">
+      <el-row :gutter="20">
         <el-col :span="8">
           <el-form-item label="访问目的" prop="visitReason">
             <el-select v-model="form.visitReason" placeholder="必填" :disabled="isEditMode">
@@ -101,7 +101,7 @@
         </el-col>
         <el-col :span="8">
           <el-form-item label="申请状态" prop="status">
-            <el-select v-model="form.status" placeholder="必填" :disabled="dialogStatus === 'detail'">
+            <el-select v-model="form.status" placeholder="必填" :disabled="dialogStatus === 'detail' || form.applicationType === '1'">
               <el-option label="通过" value="1" />
               <el-option label="拒绝" value="0" />
             </el-select>
@@ -374,7 +374,11 @@
       this.initCode()
       this.form.visitReason = ''
       this.form.visitPosition = ''
-      this.form.status = ''
+      if (this.form.applicationType === '1') {
+        this.form.status = '1'
+      } else {
+        this.form.status = ''
+      }
     },
     resetForm() {
       this.form = {