diff --git a/public/config/project.config.json b/public/config/project.config.json
index d55f197..89efe0f 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -2,7 +2,7 @@
   "title": "安防综合管理平台驾驶舱",
   "subtitle": "",
   "theme":"blue",
-  "baseUrl": "http://127.0.0.1:5903/",
+  "baseUrl": "http://111.198.10.15:21610/",
   "wsUrl": "ws://192.168.10.6:5903/websocket/",
   "icsUrl": "ws://127.0.0.1:1234",
   "mainPage": "http://111.198.10.15:11404/dcms/#",

diff --git a/public/config/project.config.json b/public/config/project.config.json
index d55f197..89efe0f 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -2,7 +2,7 @@
   "title": "安防综合管理平台驾驶舱",
   "subtitle": "",
   "theme":"blue",
-  "baseUrl": "http://127.0.0.1:5903/",
+  "baseUrl": "http://111.198.10.15:21610/",
   "wsUrl": "ws://192.168.10.6:5903/websocket/",
   "icsUrl": "ws://127.0.0.1:1234",
   "mainPage": "http://111.198.10.15:11404/dcms/#",
diff --git a/src/api/pop.js b/src/api/pop.js
index 339c649..a4a4a9e 100644
--- a/src/api/pop.js
+++ b/src/api/pop.js
@@ -63,11 +63,11 @@
   })
 }
 
-// 安全防护梯度指标组件
+// 安全防护梯度指标组件    url: 'cockpit/device/securityScore',
 export function securityScore() {
   return request({
-    url: 'cockpit/device/securityScore',
-    method: 'post',
+    url: 'multiScore/securityScore',
+    method: 'get',
     data: {}
   })
 }
@@ -134,3 +134,27 @@
     data
   })
 }
+
+// 今日事件数、今日事件处置数
+export function eventNum() {
+  return request({
+    url: 'cockpit/event/number',
+    method: 'get'
+  })
+}
+
+// 设备离线率
+export function offlineRate() {
+  return request({
+    url: 'device/offlineRate',
+    method: 'get'
+  })
+}
+
+// 14、安防事件类别统计
+export function categoryStatistics() {
+  return request({
+    url: 'cockpit/case/categoryStatistics',
+    method: 'get'
+  })
+}

diff --git a/public/config/project.config.json b/public/config/project.config.json
index d55f197..89efe0f 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -2,7 +2,7 @@
   "title": "安防综合管理平台驾驶舱",
   "subtitle": "",
   "theme":"blue",
-  "baseUrl": "http://127.0.0.1:5903/",
+  "baseUrl": "http://111.198.10.15:21610/",
   "wsUrl": "ws://192.168.10.6:5903/websocket/",
   "icsUrl": "ws://127.0.0.1:1234",
   "mainPage": "http://111.198.10.15:11404/dcms/#",
diff --git a/src/api/pop.js b/src/api/pop.js
index 339c649..a4a4a9e 100644
--- a/src/api/pop.js
+++ b/src/api/pop.js
@@ -63,11 +63,11 @@
   })
 }
 
-// 安全防护梯度指标组件
+// 安全防护梯度指标组件    url: 'cockpit/device/securityScore',
 export function securityScore() {
   return request({
-    url: 'cockpit/device/securityScore',
-    method: 'post',
+    url: 'multiScore/securityScore',
+    method: 'get',
     data: {}
   })
 }
@@ -134,3 +134,27 @@
     data
   })
 }
+
+// 今日事件数、今日事件处置数
+export function eventNum() {
+  return request({
+    url: 'cockpit/event/number',
+    method: 'get'
+  })
+}
+
+// 设备离线率
+export function offlineRate() {
+  return request({
+    url: 'device/offlineRate',
+    method: 'get'
+  })
+}
+
+// 14、安防事件类别统计
+export function categoryStatistics() {
+  return request({
+    url: 'cockpit/case/categoryStatistics',
+    method: 'get'
+  })
+}
diff --git "a/src/assets/popup/\344\273\212\346\227\245\344\272\213\344\273\266.png" "b/src/assets/popup/\344\273\212\346\227\245\344\272\213\344\273\266.png"
new file mode 100644
index 0000000..bba0807
--- /dev/null
+++ "b/src/assets/popup/\344\273\212\346\227\245\344\272\213\344\273\266.png"
Binary files differ

diff --git a/public/config/project.config.json b/public/config/project.config.json
index d55f197..89efe0f 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -2,7 +2,7 @@
   "title": "安防综合管理平台驾驶舱",
   "subtitle": "",
   "theme":"blue",
-  "baseUrl": "http://127.0.0.1:5903/",
+  "baseUrl": "http://111.198.10.15:21610/",
   "wsUrl": "ws://192.168.10.6:5903/websocket/",
   "icsUrl": "ws://127.0.0.1:1234",
   "mainPage": "http://111.198.10.15:11404/dcms/#",
diff --git a/src/api/pop.js b/src/api/pop.js
index 339c649..a4a4a9e 100644
--- a/src/api/pop.js
+++ b/src/api/pop.js
@@ -63,11 +63,11 @@
   })
 }
 
-// 安全防护梯度指标组件
+// 安全防护梯度指标组件    url: 'cockpit/device/securityScore',
 export function securityScore() {
   return request({
-    url: 'cockpit/device/securityScore',
-    method: 'post',
+    url: 'multiScore/securityScore',
+    method: 'get',
     data: {}
   })
 }
@@ -134,3 +134,27 @@
     data
   })
 }
+
+// 今日事件数、今日事件处置数
+export function eventNum() {
+  return request({
+    url: 'cockpit/event/number',
+    method: 'get'
+  })
+}
+
+// 设备离线率
+export function offlineRate() {
+  return request({
+    url: 'device/offlineRate',
+    method: 'get'
+  })
+}
+
+// 14、安防事件类别统计
+export function categoryStatistics() {
+  return request({
+    url: 'cockpit/case/categoryStatistics',
+    method: 'get'
+  })
+}
diff --git "a/src/assets/popup/\344\273\212\346\227\245\344\272\213\344\273\266.png" "b/src/assets/popup/\344\273\212\346\227\245\344\272\213\344\273\266.png"
new file mode 100644
index 0000000..bba0807
--- /dev/null
+++ "b/src/assets/popup/\344\273\212\346\227\245\344\272\213\344\273\266.png"
Binary files differ
diff --git "a/src/assets/popup/\344\273\212\346\227\245\345\244\204\347\275\256.png" "b/src/assets/popup/\344\273\212\346\227\245\345\244\204\347\275\256.png"
new file mode 100644
index 0000000..3605093
--- /dev/null
+++ "b/src/assets/popup/\344\273\212\346\227\245\345\244\204\347\275\256.png"
Binary files differ

diff --git a/public/config/project.config.json b/public/config/project.config.json
index d55f197..89efe0f 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -2,7 +2,7 @@
   "title": "安防综合管理平台驾驶舱",
   "subtitle": "",
   "theme":"blue",
-  "baseUrl": "http://127.0.0.1:5903/",
+  "baseUrl": "http://111.198.10.15:21610/",
   "wsUrl": "ws://192.168.10.6:5903/websocket/",
   "icsUrl": "ws://127.0.0.1:1234",
   "mainPage": "http://111.198.10.15:11404/dcms/#",
diff --git a/src/api/pop.js b/src/api/pop.js
index 339c649..a4a4a9e 100644
--- a/src/api/pop.js
+++ b/src/api/pop.js
@@ -63,11 +63,11 @@
   })
 }
 
-// 安全防护梯度指标组件
+// 安全防护梯度指标组件    url: 'cockpit/device/securityScore',
 export function securityScore() {
   return request({
-    url: 'cockpit/device/securityScore',
-    method: 'post',
+    url: 'multiScore/securityScore',
+    method: 'get',
     data: {}
   })
 }
@@ -134,3 +134,27 @@
     data
   })
 }
+
+// 今日事件数、今日事件处置数
+export function eventNum() {
+  return request({
+    url: 'cockpit/event/number',
+    method: 'get'
+  })
+}
+
+// 设备离线率
+export function offlineRate() {
+  return request({
+    url: 'device/offlineRate',
+    method: 'get'
+  })
+}
+
+// 14、安防事件类别统计
+export function categoryStatistics() {
+  return request({
+    url: 'cockpit/case/categoryStatistics',
+    method: 'get'
+  })
+}
diff --git "a/src/assets/popup/\344\273\212\346\227\245\344\272\213\344\273\266.png" "b/src/assets/popup/\344\273\212\346\227\245\344\272\213\344\273\266.png"
new file mode 100644
index 0000000..bba0807
--- /dev/null
+++ "b/src/assets/popup/\344\273\212\346\227\245\344\272\213\344\273\266.png"
Binary files differ
diff --git "a/src/assets/popup/\344\273\212\346\227\245\345\244\204\347\275\256.png" "b/src/assets/popup/\344\273\212\346\227\245\345\244\204\347\275\256.png"
new file mode 100644
index 0000000..3605093
--- /dev/null
+++ "b/src/assets/popup/\344\273\212\346\227\245\345\244\204\347\275\256.png"
Binary files differ
diff --git "a/src/assets/popup/\347\246\273\347\272\277.png" "b/src/assets/popup/\347\246\273\347\272\277.png"
new file mode 100644
index 0000000..11bb985
--- /dev/null
+++ "b/src/assets/popup/\347\246\273\347\272\277.png"
Binary files differ

diff --git a/public/config/project.config.json b/public/config/project.config.json
index d55f197..89efe0f 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -2,7 +2,7 @@
   "title": "安防综合管理平台驾驶舱",
   "subtitle": "",
   "theme":"blue",
-  "baseUrl": "http://127.0.0.1:5903/",
+  "baseUrl": "http://111.198.10.15:21610/",
   "wsUrl": "ws://192.168.10.6:5903/websocket/",
   "icsUrl": "ws://127.0.0.1:1234",
   "mainPage": "http://111.198.10.15:11404/dcms/#",
diff --git a/src/api/pop.js b/src/api/pop.js
index 339c649..a4a4a9e 100644
--- a/src/api/pop.js
+++ b/src/api/pop.js
@@ -63,11 +63,11 @@
   })
 }
 
-// 安全防护梯度指标组件
+// 安全防护梯度指标组件    url: 'cockpit/device/securityScore',
 export function securityScore() {
   return request({
-    url: 'cockpit/device/securityScore',
-    method: 'post',
+    url: 'multiScore/securityScore',
+    method: 'get',
     data: {}
   })
 }
@@ -134,3 +134,27 @@
     data
   })
 }
+
+// 今日事件数、今日事件处置数
+export function eventNum() {
+  return request({
+    url: 'cockpit/event/number',
+    method: 'get'
+  })
+}
+
+// 设备离线率
+export function offlineRate() {
+  return request({
+    url: 'device/offlineRate',
+    method: 'get'
+  })
+}
+
+// 14、安防事件类别统计
+export function categoryStatistics() {
+  return request({
+    url: 'cockpit/case/categoryStatistics',
+    method: 'get'
+  })
+}
diff --git "a/src/assets/popup/\344\273\212\346\227\245\344\272\213\344\273\266.png" "b/src/assets/popup/\344\273\212\346\227\245\344\272\213\344\273\266.png"
new file mode 100644
index 0000000..bba0807
--- /dev/null
+++ "b/src/assets/popup/\344\273\212\346\227\245\344\272\213\344\273\266.png"
Binary files differ
diff --git "a/src/assets/popup/\344\273\212\346\227\245\345\244\204\347\275\256.png" "b/src/assets/popup/\344\273\212\346\227\245\345\244\204\347\275\256.png"
new file mode 100644
index 0000000..3605093
--- /dev/null
+++ "b/src/assets/popup/\344\273\212\346\227\245\345\244\204\347\275\256.png"
Binary files differ
diff --git "a/src/assets/popup/\347\246\273\347\272\277.png" "b/src/assets/popup/\347\246\273\347\272\277.png"
new file mode 100644
index 0000000..11bb985
--- /dev/null
+++ "b/src/assets/popup/\347\246\273\347\272\277.png"
Binary files differ
diff --git a/src/router/modules/menu.js b/src/router/modules/menu.js
index ee04eee..9292a60 100644
--- a/src/router/modules/menu.js
+++ b/src/router/modules/menu.js
@@ -194,7 +194,7 @@
         path: '/serviceList',
         name: 'ServiceList',
         component: () => import('@/views/property/serviceList'),
-        meta: { title: '物业服务管理', icon: ''}
+        meta: { title: '物业服务管理', icon: '' }
       },
       {
         path: '/moneyList',

diff --git a/public/config/project.config.json b/public/config/project.config.json
index d55f197..89efe0f 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -2,7 +2,7 @@
   "title": "安防综合管理平台驾驶舱",
   "subtitle": "",
   "theme":"blue",
-  "baseUrl": "http://127.0.0.1:5903/",
+  "baseUrl": "http://111.198.10.15:21610/",
   "wsUrl": "ws://192.168.10.6:5903/websocket/",
   "icsUrl": "ws://127.0.0.1:1234",
   "mainPage": "http://111.198.10.15:11404/dcms/#",
diff --git a/src/api/pop.js b/src/api/pop.js
index 339c649..a4a4a9e 100644
--- a/src/api/pop.js
+++ b/src/api/pop.js
@@ -63,11 +63,11 @@
   })
 }
 
-// 安全防护梯度指标组件
+// 安全防护梯度指标组件    url: 'cockpit/device/securityScore',
 export function securityScore() {
   return request({
-    url: 'cockpit/device/securityScore',
-    method: 'post',
+    url: 'multiScore/securityScore',
+    method: 'get',
     data: {}
   })
 }
@@ -134,3 +134,27 @@
     data
   })
 }
+
+// 今日事件数、今日事件处置数
+export function eventNum() {
+  return request({
+    url: 'cockpit/event/number',
+    method: 'get'
+  })
+}
+
+// 设备离线率
+export function offlineRate() {
+  return request({
+    url: 'device/offlineRate',
+    method: 'get'
+  })
+}
+
+// 14、安防事件类别统计
+export function categoryStatistics() {
+  return request({
+    url: 'cockpit/case/categoryStatistics',
+    method: 'get'
+  })
+}
diff --git "a/src/assets/popup/\344\273\212\346\227\245\344\272\213\344\273\266.png" "b/src/assets/popup/\344\273\212\346\227\245\344\272\213\344\273\266.png"
new file mode 100644
index 0000000..bba0807
--- /dev/null
+++ "b/src/assets/popup/\344\273\212\346\227\245\344\272\213\344\273\266.png"
Binary files differ
diff --git "a/src/assets/popup/\344\273\212\346\227\245\345\244\204\347\275\256.png" "b/src/assets/popup/\344\273\212\346\227\245\345\244\204\347\275\256.png"
new file mode 100644
index 0000000..3605093
--- /dev/null
+++ "b/src/assets/popup/\344\273\212\346\227\245\345\244\204\347\275\256.png"
Binary files differ
diff --git "a/src/assets/popup/\347\246\273\347\272\277.png" "b/src/assets/popup/\347\246\273\347\272\277.png"
new file mode 100644
index 0000000..11bb985
--- /dev/null
+++ "b/src/assets/popup/\347\246\273\347\272\277.png"
Binary files differ
diff --git a/src/router/modules/menu.js b/src/router/modules/menu.js
index ee04eee..9292a60 100644
--- a/src/router/modules/menu.js
+++ b/src/router/modules/menu.js
@@ -194,7 +194,7 @@
         path: '/serviceList',
         name: 'ServiceList',
         component: () => import('@/views/property/serviceList'),
-        meta: { title: '物业服务管理', icon: ''}
+        meta: { title: '物业服务管理', icon: '' }
       },
       {
         path: '/moneyList',
diff --git a/src/views/popup/components/personTable.vue b/src/views/popup/components/personTable.vue
new file mode 100644
index 0000000..8c01a08
--- /dev/null
+++ b/src/views/popup/components/personTable.vue
@@ -0,0 +1,244 @@
+<template>
+  <div class="personTable">
+    <div class="success_info_body" v-show="showFlag">
+      <!-- 参数名称、列数根据实际情况调整 -->
+      <div class="table_body">
+        <div class="table_th">
+          <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 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>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+
+import { getStaffList } from '@/api/person'
+import { repostSocket } from '@/api/common';
+
+export default {
+  name: 'PersonTable',
+  components: {},
+  data() {
+    return {
+      defaultPhoto: require('@/assets/global_images/photo_error.png'),
+      errorImg: require('@/assets/global_images/photo_error.png'),
+      showFlag: true,
+      tableTimer: null,
+      tableTop: 0,
+      tableList: [],
+      tableListSize: 0,
+      componentTimer: null,
+      visibleSize: 5, // 容器内可视最大完整行数
+      lineHeight: 45, // 每行的实际高度（包含margin-top/bottom,border等）
+      componentTimerInterval: 3600000, //  刷新数据的时间间隔
+      tableTimerInterval: 50 //  向上滚动 1px 所需要的时间，越小越快，推荐值 100
+    }
+  },
+
+  // 如果没有父元素传值，将watch内的内容搬至mounted中即可
+  props: ["activeFactoryId"],
+  watch: {
+    activeFactoryId(val, oldVal) {
+      clearInterval(this.componentTimer)
+      this.fetchData()
+      this.componentTimerFun()
+    }
+  },
+  mounted() {
+    clearInterval(this.tableTimer)
+    this.fetchData()
+  },
+  beforeDestroy() {
+    clearInterval(this.componentTimer)
+    clearInterval(this.tableTimer)
+  },
+  methods: {
+    JumpDevice(item) {
+      const params = {
+        type: 'force',
+        message: item.drawNo
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+        }
+      })
+    },
+    fetchData() {
+      const params = {
+        staffType: '2'
+      }
+      getStaffList({}).then(response => {
+        if (response.code === 200) {
+          this.tableList = response.data
+          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()
+      }
+    },
+    //  当数据过少时，不触发自动轮播事件，并填充没有数据的行，参数根据实际情况修改即可
+    fillTableList() {
+      var addLength = this.visibleSize - this.tableListSize
+      for (var i = 0; i < addLength; i++) {
+        this.tableList.push({
+          planNo: '-',
+          type: '-',
+          startDate: '-',
+          endDate: '-',
+          process: '-'
+        })
+      }
+    },
+    tableTimerFun() {
+      var count = 0
+      this.tableTimer = setInterval(() => {
+        if (count < (this.tableList.length / 2) * this.lineHeight) {
+          this.tableTop -= 1
+          count++
+        } else {
+          count = 0
+          this.tableTop = 0
+        }
+      }, this.tableTimerInterval)
+    },
+    componentTimerFun() {
+      this.componentTimer = setInterval(() => {
+        this.fetchData()
+      }, this.componentTimerInterval)
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.personTable {
+  width: 100%;
+  height: 100%;
+  padding: 0px 10px;
+}
+.table_body {
+  width: 100%;
+  height: 100%;
+  margin-top: 0px;
+}
+.table_th {
+  width: 100%;
+  display: flex;
+  height: 15px;
+  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;
+}
+.tr1 {
+  width: 13%;
+}
+.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: 200px;
+  overflow: hidden;
+  position: relative;
+  margin-top: 5px;
+}
+.table_inner_body {
+  width: 100%;
+  position: absolute;
+  left: 0;
+}
+.table_tr {
+  display: flex;
+  height: 40px;
+  line-height: 40px;
+  color: #cce9ff;
+  font-size: 13px;
+  background: rgba(3, 145, 167, 0.1);
+  border: 1px solid rgb(71, 160, 199);
+  margin-top: 2px;
+  cursor: pointer;
+  :hover{
+    background: rgba(255, 153, 51, 0.6);
+  }
+}
+.table_tr1 {
+  display: flex;
+  height: 44px;
+  line-height: 44px;
+  color: #cce9ff;
+  font-size: 13px;
+  background: rgb(64, 87, 120);
+  border: 1px solid rgb(71, 160, 199);
+  margin-top: 2px;
+  cursor: pointer;
+  :hover{
+    background: rgba(255, 153, 51, 0.6);
+  }
+}
+</style>

diff --git a/public/config/project.config.json b/public/config/project.config.json
index d55f197..89efe0f 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -2,7 +2,7 @@
   "title": "安防综合管理平台驾驶舱",
   "subtitle": "",
   "theme":"blue",
-  "baseUrl": "http://127.0.0.1:5903/",
+  "baseUrl": "http://111.198.10.15:21610/",
   "wsUrl": "ws://192.168.10.6:5903/websocket/",
   "icsUrl": "ws://127.0.0.1:1234",
   "mainPage": "http://111.198.10.15:11404/dcms/#",
diff --git a/src/api/pop.js b/src/api/pop.js
index 339c649..a4a4a9e 100644
--- a/src/api/pop.js
+++ b/src/api/pop.js
@@ -63,11 +63,11 @@
   })
 }
 
-// 安全防护梯度指标组件
+// 安全防护梯度指标组件    url: 'cockpit/device/securityScore',
 export function securityScore() {
   return request({
-    url: 'cockpit/device/securityScore',
-    method: 'post',
+    url: 'multiScore/securityScore',
+    method: 'get',
     data: {}
   })
 }
@@ -134,3 +134,27 @@
     data
   })
 }
+
+// 今日事件数、今日事件处置数
+export function eventNum() {
+  return request({
+    url: 'cockpit/event/number',
+    method: 'get'
+  })
+}
+
+// 设备离线率
+export function offlineRate() {
+  return request({
+    url: 'device/offlineRate',
+    method: 'get'
+  })
+}
+
+// 14、安防事件类别统计
+export function categoryStatistics() {
+  return request({
+    url: 'cockpit/case/categoryStatistics',
+    method: 'get'
+  })
+}
diff --git "a/src/assets/popup/\344\273\212\346\227\245\344\272\213\344\273\266.png" "b/src/assets/popup/\344\273\212\346\227\245\344\272\213\344\273\266.png"
new file mode 100644
index 0000000..bba0807
--- /dev/null
+++ "b/src/assets/popup/\344\273\212\346\227\245\344\272\213\344\273\266.png"
Binary files differ
diff --git "a/src/assets/popup/\344\273\212\346\227\245\345\244\204\347\275\256.png" "b/src/assets/popup/\344\273\212\346\227\245\345\244\204\347\275\256.png"
new file mode 100644
index 0000000..3605093
--- /dev/null
+++ "b/src/assets/popup/\344\273\212\346\227\245\345\244\204\347\275\256.png"
Binary files differ
diff --git "a/src/assets/popup/\347\246\273\347\272\277.png" "b/src/assets/popup/\347\246\273\347\272\277.png"
new file mode 100644
index 0000000..11bb985
--- /dev/null
+++ "b/src/assets/popup/\347\246\273\347\272\277.png"
Binary files differ
diff --git a/src/router/modules/menu.js b/src/router/modules/menu.js
index ee04eee..9292a60 100644
--- a/src/router/modules/menu.js
+++ b/src/router/modules/menu.js
@@ -194,7 +194,7 @@
         path: '/serviceList',
         name: 'ServiceList',
         component: () => import('@/views/property/serviceList'),
-        meta: { title: '物业服务管理', icon: ''}
+        meta: { title: '物业服务管理', icon: '' }
       },
       {
         path: '/moneyList',
diff --git a/src/views/popup/components/personTable.vue b/src/views/popup/components/personTable.vue
new file mode 100644
index 0000000..8c01a08
--- /dev/null
+++ b/src/views/popup/components/personTable.vue
@@ -0,0 +1,244 @@
+<template>
+  <div class="personTable">
+    <div class="success_info_body" v-show="showFlag">
+      <!-- 参数名称、列数根据实际情况调整 -->
+      <div class="table_body">
+        <div class="table_th">
+          <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 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>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+
+import { getStaffList } from '@/api/person'
+import { repostSocket } from '@/api/common';
+
+export default {
+  name: 'PersonTable',
+  components: {},
+  data() {
+    return {
+      defaultPhoto: require('@/assets/global_images/photo_error.png'),
+      errorImg: require('@/assets/global_images/photo_error.png'),
+      showFlag: true,
+      tableTimer: null,
+      tableTop: 0,
+      tableList: [],
+      tableListSize: 0,
+      componentTimer: null,
+      visibleSize: 5, // 容器内可视最大完整行数
+      lineHeight: 45, // 每行的实际高度（包含margin-top/bottom,border等）
+      componentTimerInterval: 3600000, //  刷新数据的时间间隔
+      tableTimerInterval: 50 //  向上滚动 1px 所需要的时间，越小越快，推荐值 100
+    }
+  },
+
+  // 如果没有父元素传值，将watch内的内容搬至mounted中即可
+  props: ["activeFactoryId"],
+  watch: {
+    activeFactoryId(val, oldVal) {
+      clearInterval(this.componentTimer)
+      this.fetchData()
+      this.componentTimerFun()
+    }
+  },
+  mounted() {
+    clearInterval(this.tableTimer)
+    this.fetchData()
+  },
+  beforeDestroy() {
+    clearInterval(this.componentTimer)
+    clearInterval(this.tableTimer)
+  },
+  methods: {
+    JumpDevice(item) {
+      const params = {
+        type: 'force',
+        message: item.drawNo
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+        }
+      })
+    },
+    fetchData() {
+      const params = {
+        staffType: '2'
+      }
+      getStaffList({}).then(response => {
+        if (response.code === 200) {
+          this.tableList = response.data
+          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()
+      }
+    },
+    //  当数据过少时，不触发自动轮播事件，并填充没有数据的行，参数根据实际情况修改即可
+    fillTableList() {
+      var addLength = this.visibleSize - this.tableListSize
+      for (var i = 0; i < addLength; i++) {
+        this.tableList.push({
+          planNo: '-',
+          type: '-',
+          startDate: '-',
+          endDate: '-',
+          process: '-'
+        })
+      }
+    },
+    tableTimerFun() {
+      var count = 0
+      this.tableTimer = setInterval(() => {
+        if (count < (this.tableList.length / 2) * this.lineHeight) {
+          this.tableTop -= 1
+          count++
+        } else {
+          count = 0
+          this.tableTop = 0
+        }
+      }, this.tableTimerInterval)
+    },
+    componentTimerFun() {
+      this.componentTimer = setInterval(() => {
+        this.fetchData()
+      }, this.componentTimerInterval)
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.personTable {
+  width: 100%;
+  height: 100%;
+  padding: 0px 10px;
+}
+.table_body {
+  width: 100%;
+  height: 100%;
+  margin-top: 0px;
+}
+.table_th {
+  width: 100%;
+  display: flex;
+  height: 15px;
+  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;
+}
+.tr1 {
+  width: 13%;
+}
+.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: 200px;
+  overflow: hidden;
+  position: relative;
+  margin-top: 5px;
+}
+.table_inner_body {
+  width: 100%;
+  position: absolute;
+  left: 0;
+}
+.table_tr {
+  display: flex;
+  height: 40px;
+  line-height: 40px;
+  color: #cce9ff;
+  font-size: 13px;
+  background: rgba(3, 145, 167, 0.1);
+  border: 1px solid rgb(71, 160, 199);
+  margin-top: 2px;
+  cursor: pointer;
+  :hover{
+    background: rgba(255, 153, 51, 0.6);
+  }
+}
+.table_tr1 {
+  display: flex;
+  height: 44px;
+  line-height: 44px;
+  color: #cce9ff;
+  font-size: 13px;
+  background: rgb(64, 87, 120);
+  border: 1px solid rgb(71, 160, 199);
+  margin-top: 2px;
+  cursor: pointer;
+  :hover{
+    background: rgba(255, 153, 51, 0.6);
+  }
+}
+</style>
diff --git a/src/views/popup/left.vue b/src/views/popup/left.vue
index 2ce5c34..64a2799 100644
--- a/src/views/popup/left.vue
+++ b/src/views/popup/left.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="left">
     <div class="block" style="justify-content: center;height: 29%;padding-top: 10px">
-      <div class="item" style="width: 45%">
+      <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>
@@ -17,14 +17,19 @@
         <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>
+        <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>
+        <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>
     <div class="block" style="flex-direction: column;">
@@ -41,7 +46,7 @@
 <script>
 import StaffLine1 from '@/views/popup/components/staffLine1'
 import AreaBar1 from '@/views/popup/components/areaBar1'
-import { getTodayNumber, getPeopleNumber, getDeviceNumber } from '@/api/pop'
+import { getTodayNumber, getPeopleNumber, getDeviceNumber, offlineRate, eventNum } from '@/api/pop'
 export default {
   name: 'Left',
   components: { AreaBar1, StaffLine1 },
@@ -50,6 +55,7 @@
       titleImg: require('@/assets/popup/title.png'), // 背景图片
       titleAll: require('@/assets/popup/title-all.png'),// 背景图片
       list: {
+        '0': '*',
         '1': '*',
         '2': '*',
         '3': '*',
@@ -74,10 +80,22 @@
           this.list['2'] = response.data['今日访客量']
         }
       })
-      getDeviceNumber().then(response => {
+      // getDeviceNumber().then(response => {
+      //   if (response.code === 200) {
+      //     // this.list['3'] = response.data['设备总数']
+      //     // this.list['4'] = response.data['设备在线率'].replace('%', '')
+      //   }
+      // })
+
+      offlineRate().then(response => {
         if (response.code === 200) {
-          this.list['3'] = response.data['设备总数']
-          this.list['4'] = response.data['设备在线率'].replace('%', '')
+          this.list['5'] = response.data['设备离线率']
+        }
+      })
+      eventNum().then(response => {
+        if (response.code === 200) {
+          this.list['3'] = response.data['今日事件数']
+          this.list['4'] = response.data['今日事件处置数']
         }
       })
     }

diff --git a/public/config/project.config.json b/public/config/project.config.json
index d55f197..89efe0f 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -2,7 +2,7 @@
   "title": "安防综合管理平台驾驶舱",
   "subtitle": "",
   "theme":"blue",
-  "baseUrl": "http://127.0.0.1:5903/",
+  "baseUrl": "http://111.198.10.15:21610/",
   "wsUrl": "ws://192.168.10.6:5903/websocket/",
   "icsUrl": "ws://127.0.0.1:1234",
   "mainPage": "http://111.198.10.15:11404/dcms/#",
diff --git a/src/api/pop.js b/src/api/pop.js
index 339c649..a4a4a9e 100644
--- a/src/api/pop.js
+++ b/src/api/pop.js
@@ -63,11 +63,11 @@
   })
 }
 
-// 安全防护梯度指标组件
+// 安全防护梯度指标组件    url: 'cockpit/device/securityScore',
 export function securityScore() {
   return request({
-    url: 'cockpit/device/securityScore',
-    method: 'post',
+    url: 'multiScore/securityScore',
+    method: 'get',
     data: {}
   })
 }
@@ -134,3 +134,27 @@
     data
   })
 }
+
+// 今日事件数、今日事件处置数
+export function eventNum() {
+  return request({
+    url: 'cockpit/event/number',
+    method: 'get'
+  })
+}
+
+// 设备离线率
+export function offlineRate() {
+  return request({
+    url: 'device/offlineRate',
+    method: 'get'
+  })
+}
+
+// 14、安防事件类别统计
+export function categoryStatistics() {
+  return request({
+    url: 'cockpit/case/categoryStatistics',
+    method: 'get'
+  })
+}
diff --git "a/src/assets/popup/\344\273\212\346\227\245\344\272\213\344\273\266.png" "b/src/assets/popup/\344\273\212\346\227\245\344\272\213\344\273\266.png"
new file mode 100644
index 0000000..bba0807
--- /dev/null
+++ "b/src/assets/popup/\344\273\212\346\227\245\344\272\213\344\273\266.png"
Binary files differ
diff --git "a/src/assets/popup/\344\273\212\346\227\245\345\244\204\347\275\256.png" "b/src/assets/popup/\344\273\212\346\227\245\345\244\204\347\275\256.png"
new file mode 100644
index 0000000..3605093
--- /dev/null
+++ "b/src/assets/popup/\344\273\212\346\227\245\345\244\204\347\275\256.png"
Binary files differ
diff --git "a/src/assets/popup/\347\246\273\347\272\277.png" "b/src/assets/popup/\347\246\273\347\272\277.png"
new file mode 100644
index 0000000..11bb985
--- /dev/null
+++ "b/src/assets/popup/\347\246\273\347\272\277.png"
Binary files differ
diff --git a/src/router/modules/menu.js b/src/router/modules/menu.js
index ee04eee..9292a60 100644
--- a/src/router/modules/menu.js
+++ b/src/router/modules/menu.js
@@ -194,7 +194,7 @@
         path: '/serviceList',
         name: 'ServiceList',
         component: () => import('@/views/property/serviceList'),
-        meta: { title: '物业服务管理', icon: ''}
+        meta: { title: '物业服务管理', icon: '' }
       },
       {
         path: '/moneyList',
diff --git a/src/views/popup/components/personTable.vue b/src/views/popup/components/personTable.vue
new file mode 100644
index 0000000..8c01a08
--- /dev/null
+++ b/src/views/popup/components/personTable.vue
@@ -0,0 +1,244 @@
+<template>
+  <div class="personTable">
+    <div class="success_info_body" v-show="showFlag">
+      <!-- 参数名称、列数根据实际情况调整 -->
+      <div class="table_body">
+        <div class="table_th">
+          <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 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>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+
+import { getStaffList } from '@/api/person'
+import { repostSocket } from '@/api/common';
+
+export default {
+  name: 'PersonTable',
+  components: {},
+  data() {
+    return {
+      defaultPhoto: require('@/assets/global_images/photo_error.png'),
+      errorImg: require('@/assets/global_images/photo_error.png'),
+      showFlag: true,
+      tableTimer: null,
+      tableTop: 0,
+      tableList: [],
+      tableListSize: 0,
+      componentTimer: null,
+      visibleSize: 5, // 容器内可视最大完整行数
+      lineHeight: 45, // 每行的实际高度（包含margin-top/bottom,border等）
+      componentTimerInterval: 3600000, //  刷新数据的时间间隔
+      tableTimerInterval: 50 //  向上滚动 1px 所需要的时间，越小越快，推荐值 100
+    }
+  },
+
+  // 如果没有父元素传值，将watch内的内容搬至mounted中即可
+  props: ["activeFactoryId"],
+  watch: {
+    activeFactoryId(val, oldVal) {
+      clearInterval(this.componentTimer)
+      this.fetchData()
+      this.componentTimerFun()
+    }
+  },
+  mounted() {
+    clearInterval(this.tableTimer)
+    this.fetchData()
+  },
+  beforeDestroy() {
+    clearInterval(this.componentTimer)
+    clearInterval(this.tableTimer)
+  },
+  methods: {
+    JumpDevice(item) {
+      const params = {
+        type: 'force',
+        message: item.drawNo
+      }
+      repostSocket(params).then(response => {
+        if (response.code === 200) {
+        }
+      })
+    },
+    fetchData() {
+      const params = {
+        staffType: '2'
+      }
+      getStaffList({}).then(response => {
+        if (response.code === 200) {
+          this.tableList = response.data
+          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()
+      }
+    },
+    //  当数据过少时，不触发自动轮播事件，并填充没有数据的行，参数根据实际情况修改即可
+    fillTableList() {
+      var addLength = this.visibleSize - this.tableListSize
+      for (var i = 0; i < addLength; i++) {
+        this.tableList.push({
+          planNo: '-',
+          type: '-',
+          startDate: '-',
+          endDate: '-',
+          process: '-'
+        })
+      }
+    },
+    tableTimerFun() {
+      var count = 0
+      this.tableTimer = setInterval(() => {
+        if (count < (this.tableList.length / 2) * this.lineHeight) {
+          this.tableTop -= 1
+          count++
+        } else {
+          count = 0
+          this.tableTop = 0
+        }
+      }, this.tableTimerInterval)
+    },
+    componentTimerFun() {
+      this.componentTimer = setInterval(() => {
+        this.fetchData()
+      }, this.componentTimerInterval)
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.personTable {
+  width: 100%;
+  height: 100%;
+  padding: 0px 10px;
+}
+.table_body {
+  width: 100%;
+  height: 100%;
+  margin-top: 0px;
+}
+.table_th {
+  width: 100%;
+  display: flex;
+  height: 15px;
+  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;
+}
+.tr1 {
+  width: 13%;
+}
+.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: 200px;
+  overflow: hidden;
+  position: relative;
+  margin-top: 5px;
+}
+.table_inner_body {
+  width: 100%;
+  position: absolute;
+  left: 0;
+}
+.table_tr {
+  display: flex;
+  height: 40px;
+  line-height: 40px;
+  color: #cce9ff;
+  font-size: 13px;
+  background: rgba(3, 145, 167, 0.1);
+  border: 1px solid rgb(71, 160, 199);
+  margin-top: 2px;
+  cursor: pointer;
+  :hover{
+    background: rgba(255, 153, 51, 0.6);
+  }
+}
+.table_tr1 {
+  display: flex;
+  height: 44px;
+  line-height: 44px;
+  color: #cce9ff;
+  font-size: 13px;
+  background: rgb(64, 87, 120);
+  border: 1px solid rgb(71, 160, 199);
+  margin-top: 2px;
+  cursor: pointer;
+  :hover{
+    background: rgba(255, 153, 51, 0.6);
+  }
+}
+</style>
diff --git a/src/views/popup/left.vue b/src/views/popup/left.vue
index 2ce5c34..64a2799 100644
--- a/src/views/popup/left.vue
+++ b/src/views/popup/left.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="left">
     <div class="block" style="justify-content: center;height: 29%;padding-top: 10px">
-      <div class="item" style="width: 45%">
+      <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>
@@ -17,14 +17,19 @@
         <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>
+        <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>
+        <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>
     <div class="block" style="flex-direction: column;">
@@ -41,7 +46,7 @@
 <script>
 import StaffLine1 from '@/views/popup/components/staffLine1'
 import AreaBar1 from '@/views/popup/components/areaBar1'
-import { getTodayNumber, getPeopleNumber, getDeviceNumber } from '@/api/pop'
+import { getTodayNumber, getPeopleNumber, getDeviceNumber, offlineRate, eventNum } from '@/api/pop'
 export default {
   name: 'Left',
   components: { AreaBar1, StaffLine1 },
@@ -50,6 +55,7 @@
       titleImg: require('@/assets/popup/title.png'), // 背景图片
       titleAll: require('@/assets/popup/title-all.png'),// 背景图片
       list: {
+        '0': '*',
         '1': '*',
         '2': '*',
         '3': '*',
@@ -74,10 +80,22 @@
           this.list['2'] = response.data['今日访客量']
         }
       })
-      getDeviceNumber().then(response => {
+      // getDeviceNumber().then(response => {
+      //   if (response.code === 200) {
+      //     // this.list['3'] = response.data['设备总数']
+      //     // this.list['4'] = response.data['设备在线率'].replace('%', '')
+      //   }
+      // })
+
+      offlineRate().then(response => {
         if (response.code === 200) {
-          this.list['3'] = response.data['设备总数']
-          this.list['4'] = response.data['设备在线率'].replace('%', '')
+          this.list['5'] = response.data['设备离线率']
+        }
+      })
+      eventNum().then(response => {
+        if (response.code === 200) {
+          this.list['3'] = response.data['今日事件数']
+          this.list['4'] = response.data['今日事件处置数']
         }
       })
     }
diff --git a/src/views/popup/right.vue b/src/views/popup/right.vue
index 26e9aef..cd197b3 100644
--- a/src/views/popup/right.vue
+++ b/src/views/popup/right.vue
@@ -33,26 +33,32 @@
     </div>
     <div class="block" style="flex-direction: column;">
       <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">安防事件频次因数组件</div>
-      <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 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>
-      <power-line1 style="flex:1;"/>
+      <person-table style="flex:1;"/>
+<!--      <power-line1 style="flex:1;"/>-->
     </div>
   </div>
 </template>
 
 <script>
-import PowerLine1 from '@/views/popup/components/powerLine1';
-import { securityScore, securityFrequency } from '@/api/pop'
+
+// import PowerLine1 from '@/views/popup/components/powerLine1'
+import { securityScore, securityFrequency, categoryStatistics } from '@/api/pop'
+import * as echarts from 'echarts'
+import PersonTable from "@/views/popup/components/personTable";
+
 export default {
   name: 'Right',
-  components: { PowerLine1 },
+  components: {PersonTable },
   data() {
     return {
       titleImg: require('@/assets/popup/title.png'), // 背景图片
@@ -65,6 +71,7 @@
         '2': '*',
         '3': '*'
       },
+      safeData: [],
       num: '*'
     }
   },
@@ -72,6 +79,84 @@
     this.initData()
   },
   methods: {
+    initStar() {
+      var myChart = echarts.init(document.getElementById('safe-star'))
+      const that = this
+      const option = {
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: {
+          bottom: 0,
+          data: ['事件频次'],
+          itemStyle: {
+            color: 'rgb(12,228,235)',
+            shadowColor: 'white'
+          },
+          textStyle: {
+            color: '#cce9ff',
+            fontWeight: 'bold',
+            fontSize: 14
+          }
+        },
+        radar: [{
+          indicator: that.safeData.map((item) => {
+            return { text: item.categoryLevelName, max: that.safeData[0].quantity * 1.2 }
+          }),
+          splitArea: {
+            areaStyle: {
+              color: ['#77EADF99', '#26C3BE99', '#64AFE999', '#428BD499'],
+              shadowColor: 'rgba(0, 0, 0, 0.2)',
+              shadowBlur: 10
+            }
+          },
+          name: {
+            color: 'white',
+            fontWeight: 'bold',
+            fontSize: 14
+          }
+        }],
+        series: [{
+          type: 'radar',
+          symbol: 'none',
+          symbolSize: 4,
+          lineStyle: {
+            width: 3,
+            color: 'rgb(12,228,235)'
+          },
+          areaStyle: {
+            color: 'rgb(8,91,121,0.5)'
+          },
+          emphasis: {
+            areaStyle: {
+              color: 'rgb(12,228,235,0.5)'
+            }
+          },
+          data: [{
+            value: that.safeData.map(item => item.quantity),
+            name: '事件频次',
+            symbol: 'rect',
+            symbolSize: 5,
+            lineStyle: {
+              type: 'dashed'
+            },
+            label: {
+              show: true,
+              fontSize: 14,
+              fontWeight: 'bold',
+              formatter: function (params) {
+                return params.value
+              }
+            }
+          }]
+        }]
+      }
+      myChart.clear()
+      myChart.setOption(option, true)
+      window.addEventListener('resize', function() {
+        myChart.resize()
+      })
+    },
     initData() {
       securityScore().then(response => {
         if (response.code === 200) {
@@ -81,17 +166,28 @@
           this.list['3'] = response.data['1600演播厅']
         }
       })
-      securityFrequency().then(response => {
+      categoryStatistics().then(response => {
         if (response.code === 200) {
-          this.num = response.data['quantity']
+          this.safeData = response.data
+          this.safeData.length = 5
+          this.initStar()
         }
       })
+      // securityFrequency().then(response => {
+      //   if (response.code === 200) {
+      //     this.num = response.data['quantity']
+      //   }
+      // })
     }
   }
 }
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
+.star {
+  width: 100%;
+  height: 85%;
+}
 .right{
   width: 100%;
   height: 100%;